UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

103 lines (102 loc) 4.06 kB
"use strict"; // refactor for v5 /// <reference types="@types/node" /> Object.defineProperty(exports, "__esModule", { value: true }); exports.useTheme = exports.getTheme = void 0; const react_1 = require("@emotion/react"); const index_1 = require("./index"); const getFilledTheme = (theme) => ({ ...theme, canvas: (0, index_1.createCanvasTheme)(theme.canvas), }); /** * Function to get the correct theme object for `styled` and class components * or to be used outside component. * @param {Object=} theme - The theme object with the Canvas Kit theme. * It should be namespaced within this variable under the `canvas` key. * Value of `canvas` property is any partial or full theme object to overwtite default theme. * * @returns An object containing updated or default Canvas Kit theme under `canvas` key. * * The passed partial theme object will be merged with the default Canvas theme * (using memoized createCanvasTheme()) to establish any missing fields that have * not been defined by the consumer's theme object. * * If theme is not passed, the function will try to retrieve it from the window object. * If window theme is not found, it will return the default Canvas theme. * * @example * import {getTheme} from '@workday/canvas-kit-react/common'; * * const theme = getTheme(); * const {up, down} = theme.canvas.breakpoints; * const small = down('m'); // Returns '@media (max-width: 768px)' * const medium = up('m'); // Returns '@media (min-width: 768px)' * * const styles = { * [small]: { * margin: space.m * }, * [medium]: { * margin: space.l * } * } */ function getTheme(theme) { var _a, _b; if (theme === null || theme === void 0 ? void 0 : theme.canvas) { return getFilledTheme(theme); } const windowTheme = typeof window !== 'undefined' && ((_b = (_a = window === null || window === void 0 ? void 0 : window.workday) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.theme); if (windowTheme) { return getFilledTheme({ canvas: windowTheme }); } return { canvas: index_1.defaultCanvasTheme }; } exports.getTheme = getTheme; /** * Hook function to get the correct theme object for functional components. * @param {Object=} theme - The theme object with the Canvas Kit theme. * It should be namespaced within this variable under the `canvas` key. * Value of `canvas` property is any partial or full theme object to overwtite default theme. * * @returns An object containing updated or default Canvas Kit theme under `canvas` key. * * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext. * If that does not work, it will try to retrieve it from the window object. * As a last resort, it will return the default Canvas theme. * * The resulting theme will be merged with the default Canvas theme * (using memoized createCanvasTheme()) to establish any missing fields that have * not been defined by the consumer's theme object. * * Providing the default theme here is currently a work around for when no * ThemeProvider or context exists. * Tracked on https://github.com/emotion-js/emotion/issues/1193. * * @example * export const ErrorMessage = () => { * const theme = useTheme(); * return ( * <Subtext size="large" color={theme.canvas.palette.error.main}> * ); * } */ function useTheme(theme) { if (!theme) { try { // eslint-disable-next-line react-hooks/rules-of-hooks const contextTheme = (0, react_1.useTheme)(); if (contextTheme === null || contextTheme === void 0 ? void 0 : contextTheme.canvas) { return getFilledTheme(contextTheme); } } catch (e) { if (process.env.NODE_ENV === 'development') { console.warn('useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.'); } } } return getTheme(theme); } exports.useTheme = useTheme;