TilesList: Implements new ShimmerTile into TilesList

common/changes/@uifabric/experiments/v-vibr-PlaceholderTile_2018-04-10-06-48.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Refactoring Shimmer and adding ShimmerTile + Implements Shimmer in TilesList.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "v-vibr@microsoft.com"
+}

packages/experiments/src/components/Shimmer/Shimmer.base.tsx

@@ -18,80 +18,38 @@ import {
   IStyleSet
 } from '../../Styling';
 import { ShimmerLine } from './ShimmerLine/ShimmerLine';
+import { ShimmerGap } from './ShimmerGap/ShimmerGap';
 import { ShimmerCircle } from './ShimmerCircle/ShimmerCircle';
 
 const LINE_DEFAULT_HEIGHT = 16;
+const GAP_DEFAULT_HEIGHT = 16;
 const CIRCLE_DEFAULT_HEIGHT = 24;
 
 const getClassNames = classNamesFunction<IShimmerStyleProps, IShimmerStyles>();
 
 export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
   public static defaultProps: IShimmerProps = {
-    width: 100,
     isDataLoaded: false,
     isBaseStyle: false
   };
-  private _classNames: {[key in keyof IShimmerStyles]: string};
+  private _classNames: { [key in keyof IShimmerStyles]: string };
   constructor(props: IShimmerProps) {
     super(props);
   }
 
   public render(): JSX.Element {
     const { getStyles, width, lineElements, children, isDataLoaded, isBaseStyle } = this.props;
-    const maxHeight: number | undefined = lineElements ? this._findMaxHeight(lineElements) : undefined;
-    this._classNames = getClassNames(getStyles!, { width, maxHeight, isDataLoaded, isBaseStyle });
-
-    const elements: JSX.Element[] | JSX.Element = lineElements ?
-      lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
-        switch (elem.type) {
-          case ShimmerElementType.CIRCLE:
-            if (!elem.height) {
-              elem.height = CIRCLE_DEFAULT_HEIGHT;
-            }
-            return (
-              <ShimmerCircle
-                key={ index }
-                { ...elem }
-                borderAlignStyle={ this._getBorderAlignStyles(maxHeight, elem) }
-              />
-            );
-          case ShimmerElementType.GAP:
-            const gapWidth = elem.widthInPercentage || elem.widthInPixel ?
-              elem.widthInPercentage ? elem.widthInPercentage + '%' : elem.widthInPixel + 'px'
-              : '5px';
-            return (
-              <div
-                key={ index }
-                // tslint:disable-next-line:jsx-ban-props
-                style={ {
-                  width: gapWidth,
-                  height: maxHeight + 'px',
-                  backgroundColor: `${DefaultPalette.white}`
-                } }
-              />
-            );
-          case ShimmerElementType.LINE:
-            if (!elem.height) {
-              elem.height = LINE_DEFAULT_HEIGHT;
-            }
-            return (
-              <ShimmerLine
-                key={ index }
-                { ...elem }
-                borderAlignStyle={ this._getBorderAlignStyles(maxHeight, elem) }
-              />
-            );
-        }
-      }) : (
-        <ShimmerLine
-          height={ LINE_DEFAULT_HEIGHT }
-        />
-      );
+
+    const rowHeight: number | undefined = lineElements ? findMaxElementHeight(lineElements) : undefined;
+
+    this._classNames = getClassNames(getStyles!, { width, rowHeight, isDataLoaded, isBaseStyle });
+
+    const renderedElements: React.ReactNode = getRenderedElements(lineElements, rowHeight);
 
     return (
       <div className={ this._classNames.root }>
         <div className={ this._classNames.shimmerWrapper }>
-          { !!isBaseStyle ? children : elements }
+          { !!isBaseStyle ? children : renderedElements }
         </div>
 
         { !!isDataLoaded &&
@@ -102,60 +60,97 @@ export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
       </div>
     );
   }
+}
 
-  private _findMaxHeight(items: Array<ICircle | IGap | ILine>): number {
-    const itemsDefaulted: Array<ICircle | IGap | ILine> = items.map((item: ICircle | IGap | ILine): ICircle | IGap | ILine => {
-      switch (item.type) {
+export function getRenderedElements(lineElements?: Array<ICircle | IGap | ILine>, rowHeight?: number): React.ReactNode {
+  const renderedElements: React.ReactNode = lineElements ?
+    lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
+      switch (elem.type) {
         case ShimmerElementType.CIRCLE:
-          if (!item.height) {
-            item.height = CIRCLE_DEFAULT_HEIGHT;
-          }
+          return (
+            <ShimmerCircle
+              key={ index }
+              { ...elem }
+              borderStyle={ getBorderStyles(elem, rowHeight) }
+            />
+          );
+        case ShimmerElementType.GAP:
+          return (
+            <ShimmerGap
+              key={ index }
+              { ...elem }
+              borderStyle={ getBorderStyles(elem, rowHeight) }
+            />
+          );
         case ShimmerElementType.LINE:
-          if (!item.height) {
-            item.height = LINE_DEFAULT_HEIGHT;
-          }
+          return (
+            <ShimmerLine
+              key={ index }
+              { ...elem }
+              borderStyle={ getBorderStyles(elem, rowHeight) }
+            />
+          );
       }
-      return item;
-    });
-
-    const maxHeight = itemsDefaulted.reduce((acc: number, next: ICircle | IGap | ILine): number => {
-      return next.height ?
-        next.height > acc ? next.height : acc
-        : acc;
-    }, 0);
-    return maxHeight;
+    }) : (
+      <ShimmerLine
+        height={ LINE_DEFAULT_HEIGHT }
+      />
+    );
+
+  return renderedElements;
+}
+
+export function getBorderStyles(elem: ICircle | IGap | ILine, rowHeight?: number): IStyleSet | undefined {
+  const elemHeight: number | undefined = elem.height;
+
+  const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
+
+  let borderStyle: IStyleSet | undefined;
+
+  if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.CENTER) {
+    borderStyle = {
+      borderBottom: `${dif ? Math.floor(dif / 2) : 0}px solid ${DefaultPalette.white}`,
+      borderTop: `${dif ? Math.ceil(dif / 2) : 0}px solid ${DefaultPalette.white}`
+    };
+  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.TOP) {
+    borderStyle = {
+      borderBottom: `${dif ? dif : 0}px solid ${DefaultPalette.white}`,
+      borderTop: `0px solid ${DefaultPalette.white}`
+    };
+  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.BOTTOM) {
+    borderStyle = {
+      borderBottom: `0px solid ${DefaultPalette.white}`,
+      borderTop: `${dif ? dif : 0}px solid ${DefaultPalette.white}`
+    };
   }
 
-  private _getBorderAlignStyles(maxHeight: number | undefined, elem: ICircle | IGap | ILine): IStyleSet | undefined {
-    const elemHeight: number | undefined = elem.height;
-
-    const dif: number | undefined = maxHeight && elemHeight ?
-      maxHeight - elemHeight > 0 ?
-        maxHeight - elemHeight : undefined
-      : undefined;
-
-    let borderStyle: IStyleSet | undefined;
-    const hasVerticalAlign: boolean = elem.verticalAlign ? true : false;
-
-    if (elem.verticalAlign === ShimmerElementVerticalAlign.CENTER || !hasVerticalAlign) {
-      borderStyle = {
-        alignSelf: 'center',
-        borderBottom: `${dif ? dif / 2 : 0}px solid ${DefaultPalette.white}`,
-        borderTop: `${dif ? dif / 2 : 0}px solid ${DefaultPalette.white}`
-      };
-    } else if (elem.verticalAlign === ShimmerElementVerticalAlign.TOP && hasVerticalAlign) {
-      borderStyle = {
-        alignSelf: 'top',
-        borderBottom: `${dif ? dif : 0}px solid ${DefaultPalette.white}`,
-        borderTop: `0px solid ${DefaultPalette.white}`
-      };
-    } else if (elem.verticalAlign === ShimmerElementVerticalAlign.BOTTOM && hasVerticalAlign) {
-      borderStyle = {
-        alignSelf: 'bottom',
-        borderBottom: `0px solid ${DefaultPalette.white}`,
-        borderTop: `${dif ? dif : 0}px solid ${DefaultPalette.white}`
-      };
+  return borderStyle;
+}
+
+export function findMaxElementHeight(elements: Array<ICircle | IGap | ILine>): number {
+  const itemsDefaulted: Array<ICircle | IGap | ILine> = elements.map((elem: ICircle | IGap | ILine): ICircle | IGap | ILine => {
+    switch (elem.type) {
+      case ShimmerElementType.CIRCLE:
+        if (!elem.height) {
+          elem.height = CIRCLE_DEFAULT_HEIGHT;
+        }
+      case ShimmerElementType.LINE:
+        if (!elem.height) {
+          elem.height = LINE_DEFAULT_HEIGHT;
+        }
+      case ShimmerElementType.GAP:
+        if (!elem.height) {
+          elem.height = GAP_DEFAULT_HEIGHT;
+        }
     }
-    return borderStyle;
-  }
+    return elem;
+  });
+
+  const rowHeight = itemsDefaulted.reduce((acc: number, next: ICircle | IGap | ILine): number => {
+    return next.height ?
+      next.height > acc ? next.height : acc
+      : acc;
+  }, 0);
+
+  return rowHeight;
 }

packages/experiments/src/components/Shimmer/Shimmer.styles.ts

@@ -7,7 +7,7 @@ import {
 export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
   const {
     width,
-    maxHeight,
+    rowHeight,
     isDataLoaded,
     isBaseStyle
   } = props;
@@ -31,7 +31,7 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
         margin: '10px',
         width: 'auto',
         boxSizing: 'content-box',
-        minHeight: maxHeight ? `${maxHeight}px` : '16px'
+        minHeight: rowHeight ? `${rowHeight}px` : '16px'
       },
       isBaseStyle && {
         margin: '0',
@@ -46,9 +46,12 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
         display: 'flex',
         position: 'absolute',
         top: '0',
+        bottom: '0',
+        left: '0',
+        right: '0',
         alignItems: 'center',
         alignContent: 'space-between',
-        width: `${width}%`,
+        width: width ? `${width}%` : '100%',
         height: 'auto',
         boxSizing: 'border-box',
         background: `${DefaultPalette.neutralLighter}
@@ -73,7 +76,7 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
       },
       isBaseStyle && {
         position: 'static',
-        width: 'auto'
+        width: width ? `${width}px` : 'auto'
       }
     ],
     dataWrapper: [

packages/experiments/src/components/Shimmer/Shimmer.types.ts

@@ -106,21 +106,26 @@ export interface ICircle extends IShimmerElement {
 }
 
 export interface IGap extends IShimmerElement {
+  /**
+   * Sets the height of the shimmer gap in pixels.
+   * @default 16px
+   */
+  height?: number;
   /**
    * The value will be calculated as '%' relative the to shimmer wrapper.
    */
   widthInPercentage?: number;
 
   /**
    * Sets the width of the Gap to an exact value in pixels.
-   * @default 5px
+   * @default 10px
    */
   widthInPixel?: number;
 }
 
 export interface IShimmerStyleProps {
   width?: number;
-  maxHeight?: number;
+  rowHeight?: number;
   isDataLoaded?: boolean;
   isBaseStyle?: boolean;
 }

packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx

@@ -19,8 +19,8 @@ export class ShimmerCircleBase extends BaseComponent<IShimmerCircleProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { height, getStyles, borderAlignStyle } = this.props;
-    this._classNames = getClassNames(getStyles!, { height, borderAlignStyle });
+    const { height, getStyles, borderStyle } = this.props;
+    this._classNames = getClassNames(getStyles!, { height, borderStyle });
 
     return (
       <div className={ this._classNames.root }>

packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts

@@ -10,14 +10,14 @@ import {
 export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {
   const {
     height,
-    borderAlignStyle
+    borderStyle
   } = props;
 
-  const styles: IStyleSet = !!borderAlignStyle ? borderAlignStyle : {};
+  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
-      'ms-ShimmerCircle-wrapper',
+      'ms-ShimmerCircle-root',
       {
         width: `${height}px`,
         height: `${height}px`,

packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts

@@ -28,7 +28,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
   /**
    * Used to
    */
-  borderAlignStyle?: IStyleSet;
+  borderStyle?: IStyleSet;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
@@ -38,7 +38,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
 
 export interface IShimmerCircleStyleProps {
   height?: number;
-  borderAlignStyle?: IStyleSet;
+  borderStyle?: IStyleSet;
 }
 
 export interface IShimmerCircleStyles {