UNPKG

@chakra-ui/system

Version:
1 lines 3.49 kB
{"version":3,"sources":["../src/use-style-config.ts"],"sourcesContent":["import {\n resolveStyleConfig,\n SystemStyleObject,\n ThemingProps,\n} from \"@chakra-ui/styled-system\"\nimport { mergeThemeOverride } from \"@chakra-ui/theme-utils\"\nimport {\n Dict,\n filterUndefined,\n memoizedGet as get,\n mergeWith,\n omit,\n} from \"@chakra-ui/utils\"\nimport { useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { useChakra } from \"./hooks\"\n\ntype StylesRef = SystemStyleObject | Record<string, SystemStyleObject>\n\nfunction useStyleConfigImpl(\n themeKey: string | null,\n props: ThemingProps & Dict = {},\n) {\n const { styleConfig: styleConfigProp, ...rest } = props\n\n const { theme, colorMode } = useChakra()\n\n const themeStyleConfig = themeKey\n ? get(theme, `components.${themeKey}`)\n : undefined\n\n const styleConfig = styleConfigProp || themeStyleConfig\n\n const mergedProps = mergeWith(\n { theme, colorMode },\n styleConfig?.defaultProps ?? {},\n filterUndefined(omit(rest, [\"children\"])),\n )\n\n /**\n * Store the computed styles in a `ref` to avoid unneeded re-computation\n */\n const stylesRef = useRef<StylesRef>({})\n\n if (styleConfig) {\n const getStyles = resolveStyleConfig(styleConfig)\n const styles = getStyles(mergedProps)\n\n const isStyleEqual = isEqual(stylesRef.current, styles)\n\n if (!isStyleEqual) {\n stylesRef.current = styles\n }\n }\n\n return stylesRef.current\n}\n\nexport function useStyleConfig(\n themeKey: string,\n props: ThemingProps & Dict = {},\n) {\n return useStyleConfigImpl(themeKey, props) as SystemStyleObject\n}\n\nexport function useMultiStyleConfig(\n themeKey: string,\n props: ThemingProps & Dict = {},\n) {\n return useStyleConfigImpl(themeKey, props) as Record<\n string,\n SystemStyleObject\n >\n}\n\ntype MultipartStyles = Record<string, SystemStyleObject>\n\nexport function useComponentStyles__unstable(\n themeKey: string,\n props: ThemingProps & { baseConfig: any },\n) {\n const { baseConfig, ...restProps } = props\n const { theme } = useChakra()\n\n const overrides = theme.components?.[themeKey]\n\n const styleConfig = overrides\n ? mergeThemeOverride(overrides, baseConfig)\n : baseConfig\n\n return useStyleConfigImpl(null, {\n ...restProps,\n styleConfig,\n }) as MultipartStyles\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,SAAS,0BAA0B;AACnC;AAAA,EAEE;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,OAAO,aAAa;AAKpB,SAAS,mBACP,UACA,QAA6B,CAAC,GAC9B;AAtBF;AAuBE,QAAM,EAAE,aAAa,iBAAiB,GAAG,KAAK,IAAI;AAElD,QAAM,EAAE,OAAO,UAAU,IAAI,UAAU;AAEvC,QAAM,mBAAmB,WACrB,IAAI,OAAO,cAAc,QAAQ,EAAE,IACnC;AAEJ,QAAM,cAAc,mBAAmB;AAEvC,QAAM,cAAc;AAAA,IAClB,EAAE,OAAO,UAAU;AAAA,KACnB,gDAAa,iBAAb,YAA6B,CAAC;AAAA,IAC9B,gBAAgB,KAAK,MAAM,CAAC,UAAU,CAAC,CAAC;AAAA,EAC1C;AAKA,QAAM,YAAY,OAAkB,CAAC,CAAC;AAEtC,MAAI,aAAa;AACf,UAAM,YAAY,mBAAmB,WAAW;AAChD,UAAM,SAAS,UAAU,WAAW;AAEpC,UAAM,eAAe,QAAQ,UAAU,SAAS,MAAM;AAEtD,QAAI,CAAC,cAAc;AACjB,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF;AAEA,SAAO,UAAU;AACnB;AAEO,SAAS,eACd,UACA,QAA6B,CAAC,GAC9B;AACA,SAAO,mBAAmB,UAAU,KAAK;AAC3C;AAEO,SAAS,oBACd,UACA,QAA6B,CAAC,GAC9B;AACA,SAAO,mBAAmB,UAAU,KAAK;AAI3C;AAIO,SAAS,6BACd,UACA,OACA;AAhFF;AAiFE,QAAM,EAAE,YAAY,GAAG,UAAU,IAAI;AACrC,QAAM,EAAE,MAAM,IAAI,UAAU;AAE5B,QAAM,aAAY,WAAM,eAAN,mBAAmB;AAErC,QAAM,cAAc,YAChB,mBAAmB,WAAW,UAAU,IACxC;AAEJ,SAAO,mBAAmB,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;","names":[]}