Stefan Hacker
57 lines
3.7 KiB
JavaScript
57 lines
3.7 KiB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./ShimmerElementsGroup/ShimmerElementsGroup", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, Utilities_1, ShimmerElementsGroup_1, react_hooks_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ShimmerBase = void 0;
|
|
var TRANSITION_ANIMATION_INTERVAL = 200; /* ms */
|
|
var COMPONENT_NAME = 'Shimmer';
|
|
var getClassNames = (0, Utilities_1.classNamesFunction)();
|
|
/**
|
|
* {@docCategory Shimmer}
|
|
*/
|
|
exports.ShimmerBase = React.forwardRef(function (props, ref) {
|
|
var styles = props.styles, shimmerElements = props.shimmerElements, children = props.children, width = props.width, className = props.className, customElementsGroup = props.customElementsGroup, theme = props.theme, ariaLabel = props.ariaLabel, shimmerColors = props.shimmerColors, _a = props.isDataLoaded, isDataLoaded = _a === void 0 ? false : _a, improveCSSPerformance = props.improveCSSPerformance;
|
|
var divProps = (0, Utilities_1.getNativeProps)(props, Utilities_1.divProperties);
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
isDataLoaded: isDataLoaded,
|
|
className: className,
|
|
transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL,
|
|
shimmerColor: shimmerColors && shimmerColors.shimmer,
|
|
shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave,
|
|
improveCSSPerformance: improveCSSPerformance || !customElementsGroup,
|
|
});
|
|
var internalState = (0, react_hooks_1.useConst)({
|
|
lastTimeoutId: 0,
|
|
});
|
|
var _b = (0, react_hooks_1.useSetTimeout)(), setTimeout = _b.setTimeout, clearTimeout = _b.clearTimeout;
|
|
/**
|
|
* Flag for knowing when to remove the shimmerWrapper from the DOM.
|
|
*/
|
|
var _c = React.useState(isDataLoaded), contentLoaded = _c[0], setContentLoaded = _c[1];
|
|
var divStyleProp = { width: width ? width : '100%' };
|
|
React.useEffect(function () {
|
|
if (isDataLoaded !== contentLoaded) {
|
|
if (isDataLoaded) {
|
|
internalState.lastTimeoutId = setTimeout(function () {
|
|
setContentLoaded(true);
|
|
}, TRANSITION_ANIMATION_INTERVAL);
|
|
return function () { return clearTimeout(internalState.lastTimeoutId); };
|
|
}
|
|
else {
|
|
setContentLoaded(false);
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes.
|
|
}, [isDataLoaded]);
|
|
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, ref: ref }),
|
|
!contentLoaded && (React.createElement("div", { style: divStyleProp, className: classNames.shimmerWrapper },
|
|
React.createElement("div", { className: classNames.shimmerGradient }),
|
|
customElementsGroup ? (customElementsGroup) : (React.createElement(ShimmerElementsGroup_1.ShimmerElementsGroup, { shimmerElements: shimmerElements, backgroundColor: shimmerColors && shimmerColors.background })))),
|
|
children && React.createElement("div", { className: classNames.dataWrapper }, children),
|
|
ariaLabel && !isDataLoaded && (React.createElement("div", { role: "status", "aria-live": "polite" },
|
|
React.createElement(Utilities_1.DelayedRender, null,
|
|
React.createElement("div", { className: classNames.screenReaderText }, ariaLabel))))));
|
|
});
|
|
exports.ShimmerBase.displayName = COMPONENT_NAME;
|
|
});
|
|
//# sourceMappingURL=Shimmer.base.js.map
|