56 lines
3.2 KiB
JavaScript
56 lines
3.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.styled = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = require("react");
|
|
var merge_styles_1 = require("@fluentui/merge-styles");
|
|
var index_1 = require("./shadowDom/index");
|
|
var useCustomizationSettings_1 = require("./customizations/useCustomizationSettings");
|
|
var DefaultFields = ['theme', 'styles'];
|
|
function styled(Component, baseStyles, getProps, customizable, pure) {
|
|
customizable = customizable || { scope: '', fields: undefined };
|
|
var scope = customizable.scope, _a = customizable.fields, fields = _a === void 0 ? DefaultFields : _a;
|
|
var Wrapped = React.forwardRef(function (props, forwardedRef) {
|
|
var styles = React.useRef();
|
|
var settings = (0, useCustomizationSettings_1.useCustomizationSettings)(fields, scope);
|
|
var customizedStyles = settings.styles, dir = settings.dir, rest = tslib_1.__rest(settings, ["styles", "dir"]);
|
|
var additionalProps = getProps ? getProps(props) : undefined;
|
|
var useStyled = (0, index_1.useMergeStylesHooks)().useStyled;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
var cache = (styles.current && styles.current.__cachedInputs__) || [];
|
|
var propStyles = props.styles;
|
|
if (!styles.current || customizedStyles !== cache[1] || propStyles !== cache[2]) {
|
|
// Using styled components as the Component arg will result in nested styling arrays.
|
|
// The function can be cached and in order to prevent the props from being retained within it's closure
|
|
// we pass in just the styles and not the entire props
|
|
var concatenatedStyles = function (styleProps) {
|
|
return (0, merge_styles_1.concatStyleSetsWithProps)(styleProps, baseStyles, customizedStyles, propStyles);
|
|
};
|
|
// The __cachedInputs__ array is attached to the function and consumed by the
|
|
// classNamesFunction as a list of keys to include for memoizing classnames.
|
|
concatenatedStyles.__cachedInputs__ = [
|
|
baseStyles,
|
|
customizedStyles,
|
|
propStyles,
|
|
];
|
|
concatenatedStyles.__noStyleOverride__ =
|
|
!customizedStyles && !propStyles;
|
|
styles.current = concatenatedStyles;
|
|
}
|
|
styles.current.__shadowConfig__ = useStyled(scope);
|
|
return React.createElement(Component, tslib_1.__assign({ ref: forwardedRef }, rest, additionalProps, props, { styles: styles.current }));
|
|
});
|
|
// Function.prototype.name is an ES6 feature, so the cast to any is required until we're
|
|
// able to drop IE 11 support and compile with ES6 libs
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
Wrapped.displayName = "Styled".concat(Component.displayName || Component.name);
|
|
// This preserves backwards compatibility.
|
|
var pureComponent = pure ? React.memo(Wrapped) : Wrapped;
|
|
// Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.
|
|
if (Wrapped.displayName) {
|
|
pureComponent.displayName = Wrapped.displayName;
|
|
}
|
|
return pureComponent;
|
|
}
|
|
exports.styled = styled;
|
|
//# sourceMappingURL=styled.js.map
|