Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 1x 1x 1x 4x 1x 1x 1x 1x 1x 1x | import * as React from 'react'; import { Shimmer, ThemeProvider, createTheme, IPartialTheme, mergeStyles } from '@fluentui/react'; import { IShimmerProps } from './Component.types'; export const CanvasShimmer = React.memo((props: IShimmerProps) => { const { shimmerElements, themeJSON, spacebetweenShimmer, rowCount } = props; const wrapperClass = mergeStyles({ padding: 2, selectors: { '& > .ms-Shimmer-container': { margin: spacebetweenShimmer?.concat(' 0'), }, }, }); const theme = React.useMemo(() => { try { return themeJSON ? createTheme(JSON.parse(themeJSON) as IPartialTheme) : undefined; } catch (ex) { /* istanbul ignore next */ console.error('Cannot parse theme', ex); } }, [themeJSON]); return ( <ThemeProvider theme={theme} className={wrapperClass}> {[...Array(rowCount)].map((key) => { return <Shimmer key={key} shimmerElements={shimmerElements} />; })} </ThemeProvider> ); }); CanvasShimmer.displayName = 'CanvasShimmer'; |