@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
87 lines (86 loc) • 3.65 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.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,
},
});