251 lines
11 KiB
JavaScript
251 lines
11 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = createStyled;
|
||
|
|
exports.shouldForwardProp = shouldForwardProp;
|
||
|
|
exports.systemDefaultTheme = void 0;
|
||
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
||
|
|
var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
|
||
|
|
var _deepmerge = require("@mui/utils/deepmerge");
|
||
|
|
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
|
||
|
|
var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
|
||
|
|
var _createTheme = _interopRequireDefault(require("./createTheme"));
|
||
|
|
var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
|
||
|
|
const _excluded = ["ownerState"],
|
||
|
|
_excluded2 = ["variants"],
|
||
|
|
_excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
||
|
|
/* eslint-disable no-underscore-dangle */
|
||
|
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||
|
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||
|
|
function isEmpty(obj) {
|
||
|
|
return Object.keys(obj).length === 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
|
||
|
|
function isStringTag(tag) {
|
||
|
|
return typeof tag === 'string' &&
|
||
|
|
// 96 is one less than the char code
|
||
|
|
// for "a" so this is checking that
|
||
|
|
// it's a lowercase character
|
||
|
|
tag.charCodeAt(0) > 96;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update /system/styled/#api in case if this changes
|
||
|
|
function shouldForwardProp(prop) {
|
||
|
|
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
|
||
|
|
}
|
||
|
|
const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
|
||
|
|
const lowercaseFirstLetter = string => {
|
||
|
|
if (!string) {
|
||
|
|
return string;
|
||
|
|
}
|
||
|
|
return string.charAt(0).toLowerCase() + string.slice(1);
|
||
|
|
};
|
||
|
|
function resolveTheme({
|
||
|
|
defaultTheme,
|
||
|
|
theme,
|
||
|
|
themeId
|
||
|
|
}) {
|
||
|
|
return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
|
||
|
|
}
|
||
|
|
function defaultOverridesResolver(slot) {
|
||
|
|
if (!slot) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return (props, styles) => styles[slot];
|
||
|
|
}
|
||
|
|
function processStyleArg(callableStyle, _ref) {
|
||
|
|
let {
|
||
|
|
ownerState
|
||
|
|
} = _ref,
|
||
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
|
||
|
|
const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
|
||
|
|
ownerState
|
||
|
|
}, props)) : callableStyle;
|
||
|
|
if (Array.isArray(resolvedStylesArg)) {
|
||
|
|
return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
|
||
|
|
ownerState
|
||
|
|
}, props)));
|
||
|
|
}
|
||
|
|
if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
|
||
|
|
const {
|
||
|
|
variants = []
|
||
|
|
} = resolvedStylesArg,
|
||
|
|
otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);
|
||
|
|
let result = otherStyles;
|
||
|
|
variants.forEach(variant => {
|
||
|
|
let isMatch = true;
|
||
|
|
if (typeof variant.props === 'function') {
|
||
|
|
isMatch = variant.props((0, _extends2.default)({
|
||
|
|
ownerState
|
||
|
|
}, props, ownerState));
|
||
|
|
} else {
|
||
|
|
Object.keys(variant.props).forEach(key => {
|
||
|
|
if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
|
||
|
|
isMatch = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (isMatch) {
|
||
|
|
if (!Array.isArray(result)) {
|
||
|
|
result = [result];
|
||
|
|
}
|
||
|
|
result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
|
||
|
|
ownerState
|
||
|
|
}, props, ownerState)) : variant.style);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
return resolvedStylesArg;
|
||
|
|
}
|
||
|
|
function createStyled(input = {}) {
|
||
|
|
const {
|
||
|
|
themeId,
|
||
|
|
defaultTheme = systemDefaultTheme,
|
||
|
|
rootShouldForwardProp = shouldForwardProp,
|
||
|
|
slotShouldForwardProp = shouldForwardProp
|
||
|
|
} = input;
|
||
|
|
const systemSx = props => {
|
||
|
|
return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
|
||
|
|
theme: resolveTheme((0, _extends2.default)({}, props, {
|
||
|
|
defaultTheme,
|
||
|
|
themeId
|
||
|
|
}))
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
systemSx.__mui_systemSx = true;
|
||
|
|
return (tag, inputOptions = {}) => {
|
||
|
|
// Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
|
||
|
|
(0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
|
||
|
|
const {
|
||
|
|
name: componentName,
|
||
|
|
slot: componentSlot,
|
||
|
|
skipVariantsResolver: inputSkipVariantsResolver,
|
||
|
|
skipSx: inputSkipSx,
|
||
|
|
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
||
|
|
// For more details: https://github.com/mui/material-ui/pull/37908
|
||
|
|
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
|
||
|
|
} = inputOptions,
|
||
|
|
options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
|
||
|
|
|
||
|
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
||
|
|
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
|
||
|
|
// TODO v6: remove `Root` in the next major release
|
||
|
|
// For more details: https://github.com/mui/material-ui/pull/37908
|
||
|
|
componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
|
||
|
|
const skipSx = inputSkipSx || false;
|
||
|
|
let label;
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
if (componentName) {
|
||
|
|
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
||
|
|
// For more details: https://github.com/mui/material-ui/pull/37908
|
||
|
|
label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
let shouldForwardPropOption = shouldForwardProp;
|
||
|
|
|
||
|
|
// TODO v6: remove `Root` in the next major release
|
||
|
|
// For more details: https://github.com/mui/material-ui/pull/37908
|
||
|
|
if (componentSlot === 'Root' || componentSlot === 'root') {
|
||
|
|
shouldForwardPropOption = rootShouldForwardProp;
|
||
|
|
} else if (componentSlot) {
|
||
|
|
// any other slot specified
|
||
|
|
shouldForwardPropOption = slotShouldForwardProp;
|
||
|
|
} else if (isStringTag(tag)) {
|
||
|
|
// for string (html) tag, preserve the behavior in emotion & styled-components.
|
||
|
|
shouldForwardPropOption = undefined;
|
||
|
|
}
|
||
|
|
const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({
|
||
|
|
shouldForwardProp: shouldForwardPropOption,
|
||
|
|
label
|
||
|
|
}, options));
|
||
|
|
const transformStyleArg = stylesArg => {
|
||
|
|
// On the server Emotion doesn't use React.forwardRef for creating components, so the created
|
||
|
|
// component stays as a function. This condition makes sure that we do not interpolate functions
|
||
|
|
// which are basically components used as a selectors.
|
||
|
|
if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
|
||
|
|
return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
|
||
|
|
theme: resolveTheme({
|
||
|
|
theme: props.theme,
|
||
|
|
defaultTheme,
|
||
|
|
themeId
|
||
|
|
})
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
return stylesArg;
|
||
|
|
};
|
||
|
|
const muiStyledResolver = (styleArg, ...expressions) => {
|
||
|
|
let transformedStyleArg = transformStyleArg(styleArg);
|
||
|
|
const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
|
||
|
|
if (componentName && overridesResolver) {
|
||
|
|
expressionsWithDefaultTheme.push(props => {
|
||
|
|
const theme = resolveTheme((0, _extends2.default)({}, props, {
|
||
|
|
defaultTheme,
|
||
|
|
themeId
|
||
|
|
}));
|
||
|
|
if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const styleOverrides = theme.components[componentName].styleOverrides;
|
||
|
|
const resolvedStyleOverrides = {};
|
||
|
|
// TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
|
||
|
|
Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
|
||
|
|
resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
|
||
|
|
theme
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
return overridesResolver(props, resolvedStyleOverrides);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (componentName && !skipVariantsResolver) {
|
||
|
|
expressionsWithDefaultTheme.push(props => {
|
||
|
|
var _theme$components;
|
||
|
|
const theme = resolveTheme((0, _extends2.default)({}, props, {
|
||
|
|
defaultTheme,
|
||
|
|
themeId
|
||
|
|
}));
|
||
|
|
const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
|
||
|
|
return processStyleArg({
|
||
|
|
variants: themeVariants
|
||
|
|
}, (0, _extends2.default)({}, props, {
|
||
|
|
theme
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (!skipSx) {
|
||
|
|
expressionsWithDefaultTheme.push(systemSx);
|
||
|
|
}
|
||
|
|
const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
|
||
|
|
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
|
||
|
|
const placeholders = new Array(numOfCustomFnsApplied).fill('');
|
||
|
|
// If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
|
||
|
|
transformedStyleArg = [...styleArg, ...placeholders];
|
||
|
|
transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
|
||
|
|
}
|
||
|
|
const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
let displayName;
|
||
|
|
if (componentName) {
|
||
|
|
displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;
|
||
|
|
}
|
||
|
|
if (displayName === undefined) {
|
||
|
|
displayName = `Styled(${(0, _getDisplayName.default)(tag)})`;
|
||
|
|
}
|
||
|
|
Component.displayName = displayName;
|
||
|
|
}
|
||
|
|
if (tag.muiName) {
|
||
|
|
Component.muiName = tag.muiName;
|
||
|
|
}
|
||
|
|
return Component;
|
||
|
|
};
|
||
|
|
if (defaultStyledResolver.withConfig) {
|
||
|
|
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
|
||
|
|
}
|
||
|
|
return muiStyledResolver;
|
||
|
|
};
|
||
|
|
}
|