Spaces:
Sleeping
Sleeping
File size: 9,539 Bytes
56fda74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 |
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["ownerState"],
_excluded2 = ["variants"],
_excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
/* eslint-disable no-underscore-dangle */
import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
import { isPlainObject } from '@mui/utils/deepmerge';
import capitalize from '@mui/utils/capitalize';
import getDisplayName from '@mui/utils/getDisplayName';
import createTheme from './createTheme';
import styleFunctionSx from './styleFunctionSx';
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
export function shouldForwardProp(prop) {
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
}
export const systemDefaultTheme = createTheme();
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 = _objectWithoutPropertiesLoose(_ref, _excluded);
const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
ownerState
}, props)) : callableStyle;
if (Array.isArray(resolvedStylesArg)) {
return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
ownerState
}, props)));
}
if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
const {
variants = []
} = resolvedStylesArg,
otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
let result = otherStyles;
variants.forEach(variant => {
let isMatch = true;
if (typeof variant.props === 'function') {
isMatch = variant.props(_extends({
ownerState
}, props, ownerState));
} else {
Object.keys(variant.props).forEach(key => {
if (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(_extends({
ownerState
}, props, ownerState)) : variant.style);
}
});
return result;
}
return resolvedStylesArg;
}
export default function createStyled(input = {}) {
const {
themeId,
defaultTheme = systemDefaultTheme,
rootShouldForwardProp = shouldForwardProp,
slotShouldForwardProp = shouldForwardProp
} = input;
const systemSx = props => {
return styleFunctionSx(_extends({}, props, {
theme: resolveTheme(_extends({}, 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.
processStyles(tag, styles => styles.filter(style => !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 = _objectWithoutPropertiesLoose(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 = styledEngineStyled(tag, _extends({
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 || isPlainObject(stylesArg)) {
return props => processStyleArg(stylesArg, _extends({}, 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(_extends({}, 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, _extends({}, props, {
theme
}));
});
return overridesResolver(props, resolvedStyleOverrides);
});
}
if (componentName && !skipVariantsResolver) {
expressionsWithDefaultTheme.push(props => {
const theme = resolveTheme(_extends({}, props, {
defaultTheme,
themeId
}));
const themeVariants = theme?.components?.[componentName]?.variants;
return processStyleArg({
variants: themeVariants
}, _extends({}, 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}${capitalize(componentSlot || '')}`;
}
if (displayName === undefined) {
displayName = `Styled(${getDisplayName(tag)})`;
}
Component.displayName = displayName;
}
if (tag.muiName) {
Component.muiName = tag.muiName;
}
return Component;
};
if (defaultStyledResolver.withConfig) {
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
}
return muiStyledResolver;
};
} |