@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
146 lines (145 loc) • 5.19 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Box = exports.boxStyleFn = void 0;
const React = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
// style props
const background_1 = require("./utils/background");
const border_1 = require("./utils/border");
const color_1 = require("./utils/color");
const depth_1 = require("./utils/depth");
const flexItem_1 = require("./utils/flexItem");
const gridItem_1 = require("./utils/gridItem");
const layout_1 = require("./utils/layout");
const other_1 = require("./utils/other");
const position_1 = require("./utils/position");
const space_1 = require("./utils/space");
const text_1 = require("./utils/text");
const omittedProps = [
'display',
'color',
'height',
'overflow',
'width',
'border',
'background',
'fontSize',
'fontWeight',
'fontFamily',
'letterSpacing',
'lineHeight',
'textAlign',
'opacity',
'textDecoration',
'textOverflow',
'textTransform',
'textShadow',
'whiteSpace',
'wordBreak',
];
const shouldForwardProp = (prop) => {
return (0, is_prop_valid_1.default)(prop) && !omittedProps.includes(prop);
};
/**
* A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
* Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
* @example
* ```
* import { boxStyleFn } from '@workday/canvas-kit-react/layout';
* const StyledHeader = styled('h1')(
* boxStyleFn,
* {
* fontWeight: 400,
* }
* )
*
* ...
*
* <StyledHeader color='red'>Hello World</StyledHeader>
* ```
*/
const boxStyleFn = (props) => {
return [
{
boxSizing: 'border-box',
},
background_1.background,
border_1.border,
color_1.color,
depth_1.depth,
flexItem_1.flexItem,
gridItem_1.gridItem,
layout_1.layout,
other_1.other,
position_1.position,
space_1.space,
text_1.text,
].reduce((result, style) => {
// @ts-ignore
const temp = typeof style === 'function' ? style(props) : style;
// eslint-disable-next-line guard-for-in
for (const key in temp) {
// @ts-ignore
result[key] = temp[key];
}
return result;
}, {});
};
exports.boxStyleFn = boxStyleFn;
// Meant to be used with elements. The `shouldForwardProps` will remove all style props
const StyledBoxElement = (0, styled_1.default)('div', { shouldForwardProp })(exports.boxStyleFn);
// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
const StyledBoxComponent = (0, styled_1.default)('div')(exports.boxStyleFn);
/**
* `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
* It is highly flexible, and its primary purpose is to build other components.
*
* @example
* import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
*
* interface CardProps extends BoxProps {
* // card-specific props
* }
*
* // `Card`'s default values are set using `BoxProps`
* const Card = (props: CardProps) => (
* <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
* );
*
*/
exports.Box = (0, common_1.createComponent)('div')({
displayName: 'Box',
Component: ({ children, ...elemProps }, ref, Element) => {
const BoxComponent = (0, common_1.useConstant)(() => typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent);
return (React.createElement(BoxComponent, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) }, children));
},
});