first commit

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IShimmerElementsGroupProps } from './ShimmerElementsGroup.types';
+/**
+ * {@docCategory Shimmer}
+ */
+export declare const ShimmerElementsGroupBase: React.FunctionComponent<IShimmerElementsGroupProps>;

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShimmerElementsGroupBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("../../../Utilities");
+var Shimmer_types_1 = require("../Shimmer.types");
+var ShimmerLine_1 = require("../ShimmerLine/ShimmerLine");
+var ShimmerGap_1 = require("../ShimmerGap/ShimmerGap");
+var ShimmerCircle_1 = require("../ShimmerCircle/ShimmerCircle");
+var getClassNames = (0, Utilities_1.classNamesFunction)();
+/**
+ * {@docCategory Shimmer}
+ */
+var ShimmerElementsGroupBase = function (props) {
+    var styles = props.styles, _a = props.width, width = _a === void 0 ? 'auto' : _a, shimmerElements = props.shimmerElements, _b = props.rowHeight, rowHeight = _b === void 0 ? findMaxElementHeight(shimmerElements || []) : _b, _c = props.flexWrap, flexWrap = _c === void 0 ? false : _c, theme = props.theme, backgroundColor = props.backgroundColor;
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        flexWrap: flexWrap,
+    });
+    return (React.createElement("div", { style: { width: width }, className: classNames.root }, getRenderedElements(shimmerElements, backgroundColor, rowHeight)));
+};
+exports.ShimmerElementsGroupBase = ShimmerElementsGroupBase;
+function getRenderedElements(shimmerElements, backgroundColor, rowHeight) {
+    var renderedElements = shimmerElements ? (shimmerElements.map(
+    // false positive
+    // eslint-disable-next-line array-callback-return
+    function (element, index) {
+        var type = element.type, filteredElem = tslib_1.__rest(element, ["type"]);
+        var verticalAlign = filteredElem.verticalAlign, height = filteredElem.height;
+        var styles = getElementStyles(verticalAlign, type, height, backgroundColor, rowHeight);
+        switch (element.type) {
+            case Shimmer_types_1.ShimmerElementType.circle:
+                return React.createElement(ShimmerCircle_1.ShimmerCircle, tslib_1.__assign({ key: index }, filteredElem, { styles: styles }));
+            case Shimmer_types_1.ShimmerElementType.gap:
+                return React.createElement(ShimmerGap_1.ShimmerGap, tslib_1.__assign({ key: index }, filteredElem, { styles: styles }));
+            case Shimmer_types_1.ShimmerElementType.line:
+                return React.createElement(ShimmerLine_1.ShimmerLine, tslib_1.__assign({ key: index }, filteredElem, { styles: styles }));
+        }
+    })) : (React.createElement(ShimmerLine_1.ShimmerLine, { height: Shimmer_types_1.ShimmerElementsDefaultHeights.line }));
+    return renderedElements;
+}
+var getElementStyles = (0, Utilities_1.memoizeFunction)(function (verticalAlign, elementType, elementHeight, backgroundColor, rowHeight) {
+    var dif = rowHeight && elementHeight ? rowHeight - elementHeight : 0;
+    var borderStyle;
+    if (!verticalAlign || verticalAlign === 'center') {
+        borderStyle = {
+            borderBottomWidth: "".concat(dif ? Math.floor(dif / 2) : 0, "px"),
+            borderTopWidth: "".concat(dif ? Math.ceil(dif / 2) : 0, "px"),
+        };
+    }
+    else if (verticalAlign && verticalAlign === 'top') {
+        borderStyle = {
+            borderBottomWidth: "".concat(dif, "px"),
+            borderTopWidth: "0px",
+        };
+    }
+    else if (verticalAlign && verticalAlign === 'bottom') {
+        borderStyle = {
+            borderBottomWidth: "0px",
+            borderTopWidth: "".concat(dif, "px"),
+        };
+    }
+    if (backgroundColor) {
+        switch (elementType) {
+            case Shimmer_types_1.ShimmerElementType.circle:
+                return {
+                    root: tslib_1.__assign(tslib_1.__assign({}, borderStyle), { borderColor: backgroundColor }),
+                    svg: { fill: backgroundColor },
+                };
+            case Shimmer_types_1.ShimmerElementType.gap:
+                return {
+                    root: tslib_1.__assign(tslib_1.__assign({}, borderStyle), { borderColor: backgroundColor, backgroundColor: backgroundColor }),
+                };
+            case Shimmer_types_1.ShimmerElementType.line:
+                return {
+                    root: tslib_1.__assign(tslib_1.__assign({}, borderStyle), { borderColor: backgroundColor }),
+                    topLeftCorner: { fill: backgroundColor },
+                    topRightCorner: { fill: backgroundColor },
+                    bottomLeftCorner: { fill: backgroundColor },
+                    bottomRightCorner: { fill: backgroundColor },
+                };
+        }
+    }
+    return {
+        root: borderStyle,
+    };
+});
+/**
+ * User should not worry to provide which of the elements is the highest so we do the calculation for him.
+ * Plus if user forgot to specify the height we assign their defaults.
+ */
+function findMaxElementHeight(shimmerElements) {
+    var shimmerElementsDefaulted = shimmerElements.map(function (element) {
+        switch (element.type) {
+            case Shimmer_types_1.ShimmerElementType.circle:
+                if (!element.height) {
+                    element.height = Shimmer_types_1.ShimmerElementsDefaultHeights.circle;
+                }
+                break;
+            case Shimmer_types_1.ShimmerElementType.line:
+                if (!element.height) {
+                    element.height = Shimmer_types_1.ShimmerElementsDefaultHeights.line;
+                }
+                break;
+            case Shimmer_types_1.ShimmerElementType.gap:
+                if (!element.height) {
+                    element.height = Shimmer_types_1.ShimmerElementsDefaultHeights.gap;
+                }
+                break;
+        }
+        return element;
+    });
+    var rowHeight = shimmerElementsDefaulted.reduce(function (acc, next) {
+        return next.height ? (next.height > acc ? next.height : acc) : acc;
+    }, 0);
+    return rowHeight;
+}
+//# sourceMappingURL=ShimmerElementsGroup.base.js.map

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IShimmerElementsGroupProps } from './ShimmerElementsGroup.types';
+export declare const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps>;

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShimmerElementsGroup = void 0;
+var Utilities_1 = require("../../../Utilities");
+var ShimmerElementsGroup_base_1 = require("./ShimmerElementsGroup.base");
+var ShimmerElementsGroup_styles_1 = require("./ShimmerElementsGroup.styles");
+exports.ShimmerElementsGroup = (0, Utilities_1.styled)(ShimmerElementsGroup_base_1.ShimmerElementsGroupBase, ShimmerElementsGroup_styles_1.getStyles, undefined, { scope: 'ShimmerElementsGroup' });
+//# sourceMappingURL=ShimmerElementsGroup.js.map

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerElementsGroup.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx"],"names":[],"mappings":";;;AACA,gDAA4C;AAC5C,yEAAuE;AACvE,6EAA0D;AAO7C,QAAA,oBAAoB,GAAwD,IAAA,kBAAM,EAI7F,oDAAwB,EAAE,uCAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base';\nimport { getStyles } from './ShimmerElementsGroup.styles';\nimport type {\n  IShimmerElementsGroupProps,\n  IShimmerElementsGroupStyleProps,\n  IShimmerElementsGroupStyles,\n} from './ShimmerElementsGroup.types';\n\nexport const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps> = styled<\n  IShimmerElementsGroupProps,\n  IShimmerElementsGroupStyleProps,\n  IShimmerElementsGroupStyles\n>(ShimmerElementsGroupBase, getStyles, undefined, { scope: 'ShimmerElementsGroup' });\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types';
+export declare function getStyles(props: IShimmerElementsGroupStyleProps): IShimmerElementsGroupStyles;

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = getStyles;
+var Styling_1 = require("../../../Styling");
+var GlobalClassNames = {
+    root: 'ms-ShimmerElementsGroup-root',
+};
+function getStyles(props) {
+    var flexWrap = props.flexWrap, theme = props.theme;
+    var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+    return {
+        root: [
+            classNames.root,
+            theme.fonts.medium,
+            {
+                display: 'flex',
+                alignItems: 'center',
+                flexWrap: flexWrap ? 'wrap' : 'nowrap',
+                position: 'relative',
+            },
+        ],
+    };
+}
+//# sourceMappingURL=ShimmerElementsGroup.styles.js.map

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerElementsGroup.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts"],"names":[],"mappings":";;AAOA,8BAiBC;AAxBD,4CAAuD;AAGvD,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,8BAA8B;CACrC,CAAC;AAEF,SAAgB,SAAS,CAAC,KAAsC;IACtD,IAAA,QAAQ,GAAY,KAAK,SAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAElC,IAAM,UAAU,GAAG,IAAA,6BAAmB,EAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBACtC,QAAQ,EAAE,UAAU;aACrB;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames } from '../../../Styling';\nimport type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types';\n\nconst GlobalClassNames = {\n  root: 'ms-ShimmerElementsGroup-root',\n};\n\nexport function getStyles(props: IShimmerElementsGroupStyleProps): IShimmerElementsGroupStyles {\n  const { flexWrap, theme } = props;\n\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n  return {\n    root: [\n      classNames.root,\n      theme.fonts.medium,\n      {\n        display: 'flex',\n        alignItems: 'center',\n        flexWrap: flexWrap ? 'wrap' : 'nowrap',\n        position: 'relative',\n      },\n    ],\n  };\n}\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { IStyle, ITheme } from '../../../Styling';
+import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
+import type { IShimmerElement } from '../Shimmer.types';
+/**
+ * {@docCategory Shimmer}
+ */
+export interface IShimmerElementsGroup {
+}
+/**
+ * ShimmerElementsGroup component props.
+ * {@docCategory Shimmer}
+ */
+export interface IShimmerElementsGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    /**
+     * Optional callback to access the IShimmerElementsGroup interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IShimmerElementsGroup>;
+    /**
+     * Optional maximum row height of the shimmerElements container.
+     */
+    rowHeight?: number;
+    /**
+     * Elements to render in one group of the Shimmer.
+     */
+    shimmerElements?: IShimmerElement[];
+    /**
+     * Optional boolean for enabling flexWrap of the container containing the shimmerElements.
+     * @defaultvalue false
+     */
+    flexWrap?: boolean;
+    /**
+     * Optional width for ShimmerElements container.
+     */
+    width?: string;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Defines the background color of the space in between and around shimmer elements.
+     * @defaultvalue theme.palette.white
+     */
+    backgroundColor?: string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles>;
+}
+/**
+ * Props needed to construct styles.
+ * {@docCategory Shimmer}
+ */
+export interface IShimmerElementsGroupStyleProps {
+    /**
+     * Boolean flag to notify whether the root element needs to flex wrap.
+     */
+    flexWrap?: boolean;
+    /** Theme provided by High-Order Component. */
+    theme: ITheme;
+}
+/**
+ * Represents the stylable areas of the control.
+ * {@docCategory Shimmer}
+ */
+export interface IShimmerElementsGroupStyles {
+    /**
+     * Represents the wrapper root element holding all elements inside.
+     */
+    root?: IStyle;
+}

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ShimmerElementsGroup.types.js.map

node_modules/@fluentui/react/lib-commonjs/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerElementsGroup.types.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, ITheme } from '../../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';\nimport type { IShimmerElement } from '../Shimmer.types';\n\n/**\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroup {}\n\n/**\n * ShimmerElementsGroup component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupProps extends React.AllHTMLAttributes<HTMLElement> {\n  /**\n   * Optional callback to access the IShimmerElementsGroup interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IShimmerElementsGroup>;\n\n  /**\n   * Optional maximum row height of the shimmerElements container.\n   */\n  rowHeight?: number;\n\n  /**\n   * Elements to render in one group of the Shimmer.\n   */\n  shimmerElements?: IShimmerElement[];\n\n  /**\n   * Optional boolean for enabling flexWrap of the container containing the shimmerElements.\n   * @defaultvalue false\n   */\n  flexWrap?: boolean;\n\n  /**\n   * Optional width for ShimmerElements container.\n   */\n  width?: string;\n\n  /**\n   * Theme provided by High-Order Component.\n   */\n  theme?: ITheme;\n\n  /**\n   * Defines the background color of the space in between and around shimmer elements.\n   * @defaultvalue theme.palette.white\n   */\n  backgroundColor?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles>;\n}\n\n/**\n * Props needed to construct styles.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupStyleProps {\n  /**\n   * Boolean flag to notify whether the root element needs to flex wrap.\n   */\n  flexWrap?: boolean;\n\n  /** Theme provided by High-Order Component. */\n  theme: ITheme;\n}\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupStyles {\n  /**\n   * Represents the wrapper root element holding all elements inside.\n   */\n  root?: IStyle;\n}\n"]}