-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
sxConfig.ts
91 lines (79 loc) · 2.51 KB
/
sxConfig.ts
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
import {
getPath,
handleBreakpoints,
SxConfig,
unstable_defaultSxConfig,
createUnaryUnit,
getValue,
} from '@mui/system';
interface PaletteStyleOptions {
prop: string;
cssProperty?: string | boolean;
}
function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) {
const { prop, cssProperty = options.prop } = options;
const fn = (props: Record<string, any>) => {
if (props[prop] == null) {
return null;
}
const propValue: any = props[prop];
const theme = props.theme;
const styleFromPropValue = (propValueFinal: any) => {
const value =
getPath(theme, `sys.color.${propValueFinal}`, true) ||
getPath(theme, `ref.palette.${propValueFinal}`, true) ||
getPath(theme, `palette.${propValueFinal}`, true) ||
propValueFinal;
return {
[cssProperty as string]: value,
};
};
return handleBreakpoints(props, propValue, styleFromPropValue);
};
return fn;
}
// eslint-disable-next-line no-restricted-globals
const isNumber = (value: string | number) => typeof value === 'number' || !isNaN(parseFloat(value));
const createBorderRadiusStyle = (props: Record<string, any>) => {
if (props.borderRadius !== undefined && props.borderRadius !== null) {
const numberTransformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
const styleFromPropValue = (propValue: string | number) => ({
borderRadius: isNumber(propValue)
? getValue(numberTransformer, propValue)
: getPath(props.theme, `sys.shape.corner.${propValue}`, true),
});
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
}
return null;
};
const sxConfig: SxConfig = {
...unstable_defaultSxConfig,
color: {
style: createPaletteStyle({ prop: 'color' }),
},
bgcolor: {
style: createPaletteStyle({ prop: 'bgcolor', cssProperty: 'backgroundColor' }),
},
backgroundColor: {
style: createPaletteStyle({ prop: 'backgroundColor', cssProperty: 'backgroundColor' }),
},
borderColor: {
style: createPaletteStyle({ prop: 'borderColor' }),
},
borderTopColor: {
style: createPaletteStyle({ prop: 'borderTopColor' }),
},
borderBottomColor: {
style: createPaletteStyle({ prop: 'borderBottomColor' }),
},
borderLeftColor: {
style: createPaletteStyle({ prop: 'borderLeftColor' }),
},
borderRightColor: {
style: createPaletteStyle({ prop: 'borderRightColor' }),
},
borderRadius: {
style: createBorderRadiusStyle,
},
};
export default sxConfig;