@chayns-components/core 5.0.0-beta.1322 → 5.0.0-beta.1325
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -2
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js +15 -3
- package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -2
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js +16 -4
- package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js.map +1 -1
- package/lib/types/components/color-scheme-provider/hooks/useDesignSettings.d.ts +9 -2
- package/package.json +2 -2
|
@@ -95,7 +95,12 @@ const useChaynsTheme = ({
|
|
|
95
95
|
theme,
|
|
96
96
|
customVariables
|
|
97
97
|
}) => {
|
|
98
|
-
const designSettings = (0, _useDesignSettings.useDesignSettings)(
|
|
98
|
+
const designSettings = (0, _useDesignSettings.useDesignSettings)({
|
|
99
|
+
color,
|
|
100
|
+
colorMode,
|
|
101
|
+
designSettings: designSettingsProp,
|
|
102
|
+
siteId
|
|
103
|
+
});
|
|
99
104
|
const paragraphFormat = (0, _useParagraphFormat.useParagraphFormat)(siteId, paragraphFormatProp);
|
|
100
105
|
const isMountedRef = (0, _react.useRef)(false);
|
|
101
106
|
const [internalTheme, setInternalTheme] = (0, _react.useState)(() => createTheme({
|
|
@@ -125,7 +130,7 @@ const useChaynsTheme = ({
|
|
|
125
130
|
iconColor,
|
|
126
131
|
customVariables
|
|
127
132
|
}));
|
|
128
|
-
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
133
|
+
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
|
|
129
134
|
return (0, _react.useMemo)(() => ({
|
|
130
135
|
theme: internalTheme,
|
|
131
136
|
designSettings,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(
|
|
1
|
+
{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings({\n color,\n colorMode,\n designSettings: designSettingsProp,\n siteId,\n });\n\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n iconColor,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,10 +7,18 @@ exports.useDesignSettings = void 0;
|
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _get = require("../../../api/theme/get");
|
|
10
|
-
const useDesignSettings = (
|
|
10
|
+
const useDesignSettings = ({
|
|
11
|
+
color,
|
|
12
|
+
colorMode,
|
|
13
|
+
designSettings,
|
|
14
|
+
siteId
|
|
15
|
+
}) => {
|
|
11
16
|
const styleSettings = (0, _chaynsApi.useStyleSettings)();
|
|
12
|
-
const [value, setValue] = (0, _react.useState)(
|
|
17
|
+
const [value, setValue] = (0, _react.useState)(designSettings ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings));
|
|
13
18
|
const shouldLoad = !designSettings && !(styleSettings !== null && styleSettings !== void 0 && styleSettings.designSettings);
|
|
19
|
+
(0, _react.useEffect)(() => {
|
|
20
|
+
setValue(designSettings ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings));
|
|
21
|
+
}, [designSettings, styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings]);
|
|
14
22
|
(0, _react.useEffect)(() => {
|
|
15
23
|
if (shouldLoad) {
|
|
16
24
|
void (0, _get.getDesignSettings)(siteId).then(result => {
|
|
@@ -18,7 +26,11 @@ const useDesignSettings = (siteId, designSettings) => {
|
|
|
18
26
|
});
|
|
19
27
|
}
|
|
20
28
|
}, [shouldLoad, siteId]);
|
|
21
|
-
return
|
|
29
|
+
return (0, _react.useMemo)(() => ({
|
|
30
|
+
...value,
|
|
31
|
+
color,
|
|
32
|
+
colorMode
|
|
33
|
+
}), [color, colorMode, value]);
|
|
22
34
|
};
|
|
23
35
|
exports.useDesignSettings = useDesignSettings;
|
|
24
36
|
//# sourceMappingURL=useDesignSettings.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDesignSettings.js","names":["_chaynsApi","require","_react","_get","useDesignSettings","
|
|
1
|
+
{"version":3,"file":"useDesignSettings.js","names":["_chaynsApi","require","_react","_get","useDesignSettings","color","colorMode","designSettings","siteId","styleSettings","useStyleSettings","value","setValue","useState","shouldLoad","useEffect","getDesignSettings","then","result","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, ColorMode, useStyleSettings } from 'chayns-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\n\ninterface UseDesignSettingsOptions {\n color?: string;\n colorMode?: ColorMode;\n designSettings?: ChaynsDesignSettings;\n siteId?: string;\n}\n\nexport const useDesignSettings = ({\n color,\n colorMode,\n designSettings,\n siteId,\n}: UseDesignSettingsOptions) => {\n const styleSettings = useStyleSettings();\n\n const [value, setValue] = useState<ChaynsDesignSettings | undefined>(\n designSettings ?? styleSettings?.designSettings,\n );\n\n const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n useEffect(() => {\n setValue(designSettings ?? styleSettings?.designSettings);\n }, [designSettings, styleSettings?.designSettings]);\n\n useEffect(() => {\n if (shouldLoad) {\n void getDesignSettings(siteId).then((result) => {\n setValue(result);\n });\n }\n }, [shouldLoad, siteId]);\n\n return useMemo(\n () => ({ ...value, color, colorMode }) as ChaynsDesignSettings | undefined,\n [color, colorMode, value],\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AASO,MAAMG,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,aAAa,GAAG,IAAAC,2BAAgB,EAAC,CAAC;EAExC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAC9BN,cAAc,KAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,CACnD,CAAC;EAED,MAAMO,UAAU,GAAG,CAACP,cAAc,IAAI,EAACE,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEF,cAAc;EAEpE,IAAAQ,gBAAS,EAAC,MAAM;IACZH,QAAQ,CAACL,cAAc,KAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,EAAC;EAC7D,CAAC,EAAE,CAACA,cAAc,EAAEE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,CAAC,CAAC;EAEnD,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAID,UAAU,EAAE;MACZ,KAAK,IAAAE,sBAAiB,EAACR,MAAM,CAAC,CAACS,IAAI,CAAEC,MAAM,IAAK;QAC5CN,QAAQ,CAACM,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACJ,UAAU,EAAEN,MAAM,CAAC,CAAC;EAExB,OAAO,IAAAW,cAAO,EACV,OAAO;IAAE,GAAGR,KAAK;IAAEN,KAAK;IAAEC;EAAU,CAAC,CAAqC,EAC1E,CAACD,KAAK,EAAEC,SAAS,EAAEK,KAAK,CAC5B,CAAC;AACL,CAAC;AAACS,OAAA,CAAAhB,iBAAA,GAAAA,iBAAA","ignoreList":[]}
|
|
@@ -89,7 +89,12 @@ export const useChaynsTheme = ({
|
|
|
89
89
|
theme,
|
|
90
90
|
customVariables
|
|
91
91
|
}) => {
|
|
92
|
-
const designSettings = useDesignSettings(
|
|
92
|
+
const designSettings = useDesignSettings({
|
|
93
|
+
color,
|
|
94
|
+
colorMode,
|
|
95
|
+
designSettings: designSettingsProp,
|
|
96
|
+
siteId
|
|
97
|
+
});
|
|
93
98
|
const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);
|
|
94
99
|
const isMountedRef = useRef(false);
|
|
95
100
|
const [internalTheme, setInternalTheme] = useState(() => createTheme({
|
|
@@ -119,7 +124,7 @@ export const useChaynsTheme = ({
|
|
|
119
124
|
iconColor,
|
|
120
125
|
customVariables
|
|
121
126
|
}));
|
|
122
|
-
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
127
|
+
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
|
|
123
128
|
return useMemo(() => ({
|
|
124
129
|
theme: internalTheme,
|
|
125
130
|
designSettings,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(
|
|
1
|
+
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings({\n color,\n colorMode,\n designSettings: designSettingsProp,\n siteId,\n });\n\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n iconColor,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { useStyleSettings } from 'chayns-api';
|
|
2
|
-
import { useEffect, useState } from 'react';
|
|
2
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { getDesignSettings } from '../../../api/theme/get';
|
|
4
|
-
export const useDesignSettings = (
|
|
4
|
+
export const useDesignSettings = ({
|
|
5
|
+
color,
|
|
6
|
+
colorMode,
|
|
7
|
+
designSettings,
|
|
8
|
+
siteId
|
|
9
|
+
}) => {
|
|
5
10
|
const styleSettings = useStyleSettings();
|
|
6
|
-
const [value, setValue] = useState(
|
|
11
|
+
const [value, setValue] = useState(designSettings ?? styleSettings?.designSettings);
|
|
7
12
|
const shouldLoad = !designSettings && !styleSettings?.designSettings;
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
setValue(designSettings ?? styleSettings?.designSettings);
|
|
15
|
+
}, [designSettings, styleSettings?.designSettings]);
|
|
8
16
|
useEffect(() => {
|
|
9
17
|
if (shouldLoad) {
|
|
10
18
|
void getDesignSettings(siteId).then(result => {
|
|
@@ -12,6 +20,10 @@ export const useDesignSettings = (siteId, designSettings) => {
|
|
|
12
20
|
});
|
|
13
21
|
}
|
|
14
22
|
}, [shouldLoad, siteId]);
|
|
15
|
-
return
|
|
23
|
+
return useMemo(() => ({
|
|
24
|
+
...value,
|
|
25
|
+
color,
|
|
26
|
+
colorMode
|
|
27
|
+
}), [color, colorMode, value]);
|
|
16
28
|
};
|
|
17
29
|
//# sourceMappingURL=useDesignSettings.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useState","getDesignSettings","useDesignSettings","
|
|
1
|
+
{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useMemo","useState","getDesignSettings","useDesignSettings","color","colorMode","designSettings","siteId","styleSettings","value","setValue","shouldLoad","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, ColorMode, useStyleSettings } from 'chayns-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\n\ninterface UseDesignSettingsOptions {\n color?: string;\n colorMode?: ColorMode;\n designSettings?: ChaynsDesignSettings;\n siteId?: string;\n}\n\nexport const useDesignSettings = ({\n color,\n colorMode,\n designSettings,\n siteId,\n}: UseDesignSettingsOptions) => {\n const styleSettings = useStyleSettings();\n\n const [value, setValue] = useState<ChaynsDesignSettings | undefined>(\n designSettings ?? styleSettings?.designSettings,\n );\n\n const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n useEffect(() => {\n setValue(designSettings ?? styleSettings?.designSettings);\n }, [designSettings, styleSettings?.designSettings]);\n\n useEffect(() => {\n if (shouldLoad) {\n void getDesignSettings(siteId).then((result) => {\n setValue(result);\n });\n }\n }, [shouldLoad, siteId]);\n\n return useMemo(\n () => ({ ...value, color, colorMode }) as ChaynsDesignSettings | undefined,\n [color, colorMode, value],\n );\n};\n"],"mappings":"AAAA,SAA0CA,gBAAgB,QAAQ,YAAY;AAC9E,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,iBAAiB,QAAQ,wBAAwB;AAS1D,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,aAAa,GAAGV,gBAAgB,CAAC,CAAC;EAExC,MAAM,CAACW,KAAK,EAAEC,QAAQ,CAAC,GAAGT,QAAQ,CAC9BK,cAAc,IAAIE,aAAa,EAAEF,cACrC,CAAC;EAED,MAAMK,UAAU,GAAG,CAACL,cAAc,IAAI,CAACE,aAAa,EAAEF,cAAc;EAEpEP,SAAS,CAAC,MAAM;IACZW,QAAQ,CAACJ,cAAc,IAAIE,aAAa,EAAEF,cAAc,CAAC;EAC7D,CAAC,EAAE,CAACA,cAAc,EAAEE,aAAa,EAAEF,cAAc,CAAC,CAAC;EAEnDP,SAAS,CAAC,MAAM;IACZ,IAAIY,UAAU,EAAE;MACZ,KAAKT,iBAAiB,CAACK,MAAM,CAAC,CAACK,IAAI,CAAEC,MAAM,IAAK;QAC5CH,QAAQ,CAACG,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEJ,MAAM,CAAC,CAAC;EAExB,OAAOP,OAAO,CACV,OAAO;IAAE,GAAGS,KAAK;IAAEL,KAAK;IAAEC;EAAU,CAAC,CAAqC,EAC1E,CAACD,KAAK,EAAEC,SAAS,EAAEI,KAAK,CAC5B,CAAC;AACL,CAAC","ignoreList":[]}
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
import { ChaynsDesignSettings } from 'chayns-api';
|
|
2
|
-
|
|
1
|
+
import { ChaynsDesignSettings, ColorMode } from 'chayns-api';
|
|
2
|
+
interface UseDesignSettingsOptions {
|
|
3
|
+
color?: string;
|
|
4
|
+
colorMode?: ColorMode;
|
|
5
|
+
designSettings?: ChaynsDesignSettings;
|
|
6
|
+
siteId?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const useDesignSettings: ({ color, colorMode, designSettings, siteId, }: UseDesignSettingsOptions) => ChaynsDesignSettings | undefined;
|
|
9
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1325",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "1b21da62a8cc81b0b28d1bd64ee63636d1c4914b"
|
|
90
90
|
}
|