UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

87 lines (86 loc) 3.65 kB
"use strict"; 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.Skeleton = void 0; const React = __importStar(require("react")); const react_1 = require("@emotion/react"); const styled_1 = __importDefault(require("@emotion/styled")); const common_1 = require("@workday/canvas-kit-react/common"); const skeletonHeader_1 = require("./parts/skeletonHeader"); const skeletonShape_1 = require("./parts/skeletonShape"); const skeletonText_1 = require("./parts/skeletonText"); const AccessibleHide = (0, styled_1.default)('div')(common_1.accessibleHide); const fade = (0, react_1.keyframes)({ from: { opacity: 0.4 }, to: { opacity: 1 }, }); const animation = `${fade} 0.8s linear infinite alternate`; const SkeletonAnimator = (0, styled_1.default)('div')({ animation, overflow: 'hidden', width: '100%', height: '100%', position: 'relative', }); /** * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component. * * ```tsx * <Skeleton> * <Skeleton.Header /> * <Skeleton.Text /> * </Skeleton> * ``` * * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and * announces itself using a visually hidden element. */ exports.Skeleton = (0, common_1.createComponent)('div')({ displayName: 'Skeleton', Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (React.createElement(SkeletonAnimator, { ref: ref, as: Element, ...elemProps }, React.createElement(AccessibleHide, null, loadingAriaLabel), React.createElement("div", { "aria-hidden": true }, children))), subComponents: { /** * `Skeleton.Header` renders a placeholder for header content such as headings. */ Header: skeletonHeader_1.SkeletonHeader, /** * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of * `60%` if there are multiple lines. */ Text: skeletonText_1.SkeletonText, /** * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create * various rectangular and circular shapes. */ Shape: skeletonShape_1.SkeletonShape, }, });