Revision 44fb2f32a75d3c7333c893fcfee6822cf25c0450 authored by Viraj-10 on 11 October 2022, 11:32:35 UTC, committed by Viraj-10 on 11 October 2022, 11:32:35 UTC
1 parent e2a05f1
getStyledFromProps.ts
import { propConfig } from '../theme/styled-system';
import { hasValidBreakpointFormat } from '../theme/tools';
import { getRNKeyAndStyleValue } from './getRNKeyAndStyleValue';
import type { ITheme } from '../theme';
/**
* Common Logic Sharing between useSx and useStyledSytem
* @param styledSystemProps
* @param theme
* @param currentBreakpoint
* @returns styleFromProps, responsiveStyles
*/
export const getStyledFromProps = (
styledSystemProps: any,
theme: any,
currentBreakpoint: any
) => {
let styleFromProps: any = {};
let responsiveStyles: null | Record<
keyof typeof theme.breakpoints,
Array<any>
> = null;
const orderedBreakPoints = Object.entries(
theme.breakpoints as ITheme['breakpoints']
).sort((a, b) => a[1] - b[1]);
for (const key in styledSystemProps) {
const rawValue = styledSystemProps[key];
const config = propConfig[key as keyof typeof propConfig];
if (hasValidBreakpointFormat(rawValue, theme.breakpoints)) {
if (!responsiveStyles) responsiveStyles = {};
const value = rawValue;
if (Array.isArray(value)) {
value.forEach((v, i) => {
//@ts-ignore
if (!responsiveStyles[orderedBreakPoints[i][0]]) {
//@ts-ignore
responsiveStyles[orderedBreakPoints[i][0]] = [];
}
const newStyle = getRNKeyAndStyleValue({
config,
value: v,
key,
styledSystemProps,
theme,
currentBreakpoint,
});
//@ts-ignore
responsiveStyles[orderedBreakPoints[i][0]].push(newStyle);
});
} else {
for (const k in value) {
const newStyle = getRNKeyAndStyleValue({
config,
value: value[k],
key,
styledSystemProps,
theme,
currentBreakpoint,
});
if (!responsiveStyles[k]) {
responsiveStyles[k] = [];
}
responsiveStyles[k].push(newStyle);
}
}
} else {
const value = rawValue;
const newStyle = getRNKeyAndStyleValue({
config,
value,
key,
styledSystemProps,
theme,
currentBreakpoint,
});
styleFromProps = {
...styleFromProps,
...newStyle,
};
}
}
return { styleFromProps, responsiveStyles };
};
![swh spinner](/static/img/swh-spinner.gif)
Computing file changes ...