| 1 | {"version":3,"file":"Shimmer.base.js","sourceRoot":"../src/","sources":["components/Shimmer/Shimmer.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';\nimport { ShimmerElementsGroup } from './ShimmerElementsGroup/ShimmerElementsGroup';\nimport { useSetTimeout, useConst } from '@fluentui/react-hooks';\nimport type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nconst TRANSITION_ANIMATION_INTERVAL = 200; /* ms */\nconst COMPONENT_NAME = 'Shimmer';\n\nconst getClassNames = classNamesFunction<IShimmerStyleProps, IShimmerStyles>();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerBase: React.FunctionComponent<IShimmerProps> = React.forwardRef<HTMLDivElement, IShimmerProps>(\n (props, ref) => {\n const {\n styles,\n shimmerElements,\n children,\n width,\n className,\n customElementsGroup,\n theme,\n ariaLabel,\n shimmerColors,\n isDataLoaded = false,\n } = props;\n\n const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);\n\n const classNames: { [key in keyof IShimmerStyles]: string } = getClassNames(styles!, {\n theme: theme!,\n isDataLoaded,\n className,\n transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL,\n shimmerColor: shimmerColors && shimmerColors.shimmer,\n shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave,\n });\n\n const internalState = useConst({\n lastTimeoutId: 0,\n });\n\n const { setTimeout, clearTimeout } = useSetTimeout();\n\n /**\n * Flag for knowing when to remove the shimmerWrapper from the DOM.\n */\n const [contentLoaded, setContentLoaded] = React.useState(isDataLoaded);\n\n const divStyleProp = { width: width ? width : '100%' };\n\n React.useEffect(() => {\n if (isDataLoaded !== contentLoaded) {\n if (isDataLoaded) {\n internalState.lastTimeoutId = setTimeout(() => {\n setContentLoaded(true);\n }, TRANSITION_ANIMATION_INTERVAL);\n\n return () => clearTimeout(internalState.lastTimeoutId);\n } else {\n setContentLoaded(false);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes.\n }, [isDataLoaded]);\n\n return (\n <div {...divProps} className={classNames.root} ref={ref}>\n {!contentLoaded && (\n <div style={divStyleProp} className={classNames.shimmerWrapper}>\n <div className={classNames.shimmerGradient} />\n {customElementsGroup ? (\n customElementsGroup\n ) : (\n <ShimmerElementsGroup\n shimmerElements={shimmerElements}\n backgroundColor={shimmerColors && shimmerColors.background}\n />\n )}\n </div>\n )}\n {children && <div className={classNames.dataWrapper}>{children}</div>}\n {ariaLabel && !isDataLoaded && (\n <div role=\"status\" aria-live=\"polite\">\n <DelayedRender>\n <div className={classNames.screenReaderText}>{ariaLabel}</div>\n </DelayedRender>\n </div>\n )}\n </div>\n );\n },\n);\nShimmerBase.displayName = COMPONENT_NAME;\n"]} |