52 lines
3.0 KiB
JavaScript
52 lines
3.0 KiB
JavaScript
|
import { __assign, __rest } from "tslib";
|
||
|
|
import * as React from 'react';
|
||
|
|
import { concatStyleSetsWithProps } from '@fluentui/merge-styles';
|
||
|
|
import { useMergeStylesHooks } from './shadowDom/index';
|
||
|
|
import { useCustomizationSettings } from './customizations/useCustomizationSettings';
|
||
|
|
var DefaultFields = ['theme', 'styles'];
|
||
|
|
export 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 = useCustomizationSettings(fields, scope);
|
||
|
|
var customizedStyles = settings.styles, dir = settings.dir, rest = __rest(settings, ["styles", "dir"]);
|
||
|
|
var additionalProps = getProps ? getProps(props) : undefined;
|
||
|
|
var useStyled = 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 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, __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;
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=styled.js.map
|