UNPKG

xp.js-styled

Version:

Build performant styled components for Web, iOS and Android platforms.

72 lines 2.64 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.ThemeProvider = exports.useTheme = void 0; const react_1 = require("react"); const transformers_1 = require("../functions/transformers"); /** * Create the theme context with a default empty theme */ const ThemeContext = (0, react_1.createContext)({ theme: {} }); /** * Configuration for theme property handlers */ const THEME_PROPERTY_HANDLERS = { colors: { transformer: transformers_1.color, defaultValue: undefined, }, fontSizes: { transformer: transformers_1.size, defaultValue: "sm", }, fontWeights: { transformer: transformers_1.size, defaultValue: "sm", }, breakpoints: { transformer: transformers_1.size, defaultValue: "sm", }, spacing: { transformer: transformers_1.size, defaultValue: "sm", }, styles: { transformer: transformers_1.size, defaultValue: "sm", }, }; /** * Hook for accessing theme values with transformations already applied. * @returns {ObservableTheme<T>} Proxied theme object with accessor methods */ const useTheme = () => { const { theme } = (0, react_1.useContext)(ThemeContext); const handler = { get: (target, categoryKey) => { const propertyHandler = THEME_PROPERTY_HANDLERS[categoryKey]; if (propertyHandler && categoryKey in target) { return new Proxy({}, { get: (_, key) => { var _a, _b, _c; const value = (_b = (_a = target[categoryKey]) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : propertyHandler.defaultValue; return value ? propertyHandler.transformer(value, categoryKey === "colors" ? (_c = theme.colors) !== null && _c !== void 0 ? _c : {} : theme) : undefined; }, }); } return target[categoryKey]; }, }; return new Proxy(theme, handler); }; exports.useTheme = useTheme; /** * Theme provider component for wrapping the application with a customized theme. * @param {ThemeProviderProps} props - Provider properties * @returns {JSX.Element} Theme provider component */ const ThemeProvider = ({ theme, children }) => { return <ThemeContext.Provider value={{ theme: theme !== null && theme !== void 0 ? theme : {} }}>{children}</ThemeContext.Provider>; }; exports.ThemeProvider = ThemeProvider; //# sourceMappingURL=useTheme.js.map