All files / Shimmer/components CanvasShimmer.tsx

90.9% Statements 10/11
66.66% Branches 4/6
66.66% Functions 2/3
90.9% Lines 10/11

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 341x 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';