Merge pull request #193 from dcos-labs/weblancaster/feat/DCOS-39674-fixed-column-shadow

DCOS-39674: feat: add column shadow

Author: weblancaster

packages/shared/styles/color.ts

@@ -124,7 +124,7 @@ export const customColors = (): IColors => {
   return {};
 };
 
-export function hexToRgbA(hex: string, alpha: string | number = 1): string {
+export const hexToRgbA = (hex: string, alpha: string | number = 1): string => {
   let color;
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
     color = hex.substring(1).split("");
@@ -141,4 +141,4 @@ export function hexToRgbA(hex: string, alpha: string | number = 1): string {
     );
   }
   return "rgba(0,0,0,0)";
-}
+};

packages/table/components/Table.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { css } from "emotion";
 import { AutoSizer, MultiGrid, GridCellProps } from "react-virtualized";
 
-import { headerCss, cellCss, tableCss } from "../style";
+import { headerCss, cellCss, tableCss, rightGrid } from "../style";
 
 import { IColumnProps, Column } from "./Column";
 import memoizeOne from "memoize-one";
@@ -17,11 +17,15 @@ export interface ITableProps {
     | React.ReactElement<IColumnProps>;
 }
 
+export interface ITableState {
+  isScroll: boolean;
+}
+
 const ROW_HEIGHT = 35;
 
 const DEFAULT_WIDTH = 1024;
 const DEFAULT_HEIGHT = 768;
-export class Table<T> extends React.PureComponent<ITableProps, {}> {
+export class Table<T> extends React.PureComponent<ITableProps, ITableState> {
   public multiGridRef: { recomputeGridSize?: any } = {};
 
   public getData = memoizeOne(
@@ -57,6 +61,11 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
     this.setRef = this.setRef.bind(this);
     this.updateGridSize = this.updateGridSize.bind(this);
     this.getGrid = this.getGrid.bind(this);
+    this.onScrollbarPresenceChange = this.onScrollbarPresenceChange.bind(this);
+
+    this.state = {
+      isScroll: false
+    };
   }
 
   public render() {
@@ -73,7 +82,22 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
     );
   }
 
+  private onScrollbarPresenceChange({ horizontal }) {
+    if (horizontal) {
+      this.setState({
+        isScroll: true
+      });
+
+      return;
+    }
+
+    this.setState({
+      isScroll: false
+    });
+  }
+
   private getGrid({ width, height }) {
+    const rightGridStyles = this.state.isScroll ? rightGrid : "";
     const columnCount = React.Children.count(this.props.children);
     const columnSizes = this.getColumnSizes(
       React.Children.toArray(this.props.children) as Array<
@@ -88,6 +112,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
 
     return (
       <MultiGrid
+        onScrollbarPresenceChange={this.onScrollbarPresenceChange}
         ref={this.setRef}
         fixedColumnCount={1}
         fixedRowCount={1}
@@ -102,6 +127,8 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
         width={width}
         hideTopRightGridScrollbar={true}
         hideBottomLeftGridScrollbar={true}
+        classNameTopRightGrid={rightGridStyles}
+        classNameBottomRightGrid={rightGridStyles}
       />
     );
   }

packages/table/stories/Table.stories.tsx

@@ -155,6 +155,33 @@ storiesOf("Table", module)
       </Table>
     </div>
   ))
+  .addWithInfo("no scroll", () => (
+    <div
+      style={{
+        height: "175px",
+        width: "100%",
+        fontSize: "14px"
+      }}
+    >
+      <Table data={items}>
+        <Column
+          header={<HeaderCell>name</HeaderCell>}
+          cellRenderer={nameCellRenderer}
+          width={width}
+        />
+        <Column
+          header={<HeaderCell>role</HeaderCell>}
+          cellRenderer={roleCellRenderer}
+          width={width}
+        />
+        <Column
+          header={<HeaderCell>state</HeaderCell>}
+          cellRenderer={stateCellRenderer}
+          width={width}
+        />
+      </Table>
+    </div>
+  ))
   .addWithInfo("changing values", () => (
     <div
       style={{

packages/table/style.ts

@@ -1,5 +1,5 @@
 import { css } from "emotion";
-import { coreColors } from "../shared/styles/color";
+import { coreColors, hexToRgbA } from "../shared/styles/color";
 import { coreFonts } from "../shared/styles/typography";
 
 const { black, greyLight } = coreColors();
@@ -22,3 +22,13 @@ export const tableCss = css`
   font-family: ${fontFamilySansSerif};
   font-weight: normal;
 `;
+
+export const rightGrid = css`
+  background: linear-gradient(
+    to right,
+    ${hexToRgbA(black, 0.2)},
+    ${hexToRgbA(black, 0)}
+  );
+  background-repeat: no-repeat;
+  background-size: 8px 100%;
+`;

packages/table/tests/__snapshots__/Table.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`Table renders again with new data 1`] = `
         height={0}
         hideBottomLeftGridScrollbar={true}
         hideTopRightGridScrollbar={true}
+        onScrollbarPresenceChange={[Function]}
         rowCount={4}
         rowHeight={35}
         scrollToColumn={-1}
@@ -128,6 +129,7 @@ exports[`Table renders again with new data 2`] = `
         height={0}
         hideBottomLeftGridScrollbar={true}
         hideTopRightGridScrollbar={true}
+        onScrollbarPresenceChange={[Function]}
         rowCount={4}
         rowHeight={35}
         scrollToColumn={-1}