feat(Table): Add shadow behaviour to Table

tillersystems · Nov 5, 2019 · 544af96 · 544af96
1 parent c622cb9
commit 544af96
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 14 deletions.
diff --git a/src/Table/elements.js b/src/Table/elements.js
@@ -18,10 +18,12 @@ const borderRight = height => css`
 
 // Table
 export const TableElement = styled.table`
-  min-width: 100%;
+  width: 100%;
+  ${'' /* min-width: 100%; */}
 
-  border-collapse: collapse;
-  table-layout: fixed;
+  border-spacing: 0;
+  ${'' /* border-collapse: collapse; */}
+  ${'' /* table-layout: fixed; */}
   position: relative;
 `;
 
@@ -61,20 +63,23 @@ export const TableHeaderCell = styled.th`
   height: 4.4rem;
   padding: 0 1.2rem;
   box-sizing: border-box;
+  vertical-align: middle;
+
+  border-bottom: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue};
 
   background-color: ${({ theme: { palette } }) => palette.white};
 
   white-space: nowrap;
   text-align: ${({ align }) => align || 'left'};
 
-  &:before {
+  ${'' /* &:before {
     content: '';
     position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;
     border-bottom: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue};
-  }
+  } */}
 
   &:first-child {
     padding-left: 2rem;
@@ -111,10 +116,19 @@ export const HeaderLabel = styled.span`
 
 // Table Body
 export const Body = styled.tbody`
+  tr:not(:last-child) {
+    td {
+      border-bottom: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue};
+    }
+    th {
+      border-bottom: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue};
+    }
+  }
   td {
     height: 5.2rem;
     padding: 0 1.2rem;
     white-space: nowrap;
+    vertical-align: middle;
 
     font-feature-settings: 'tnum';
     font-weight: ${({
@@ -294,3 +308,26 @@ export const Container = styled.div`
     `}
   position: relative;
 `;
+
+// Shadow Container
+export const ShadowContainer = styled.div`
+  pointer-events: none;
+  ${'' /* background-color: red; */}
+  position: absolute;
+  top: 4.4rem;
+  bottom: 5.2rem;
+  right: 0;
+  left: ${({ firstCellWidth }) => firstCellWidth && `${firstCellWidth}px`};
+  z-index: 10;
+  ${'' /* box-shadow: 8px 0 6px -6px rgba(0, 0, 0, 0.1); */}
+
+  background: radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
+  ${'' /* background-color: white; */}
+  background-repeat: no-repeat;
+  background-size: 10px 100%;
+`;
+
+// Shadow Container
+export const ShadowWrapped = styled.div`
+  position: relative;
+`;
diff --git a/src/Table/index.js b/src/Table/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment, PureComponent } from 'react';
+import React, { Fragment, PureComponent, createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { Icon, Theme } from '..';
@@ -15,7 +15,9 @@ import {
   RowHeader,
   Footer,
   ChildRow,
+  ShadowContainer,
   TextEllipsis,
+  ShadowWrapped,
 } from './elements';
 
 /** Lookup object for next sorting direction. */
@@ -52,6 +54,40 @@ class Table extends PureComponent {
     // Use `-1` for no row selected.
     selected: -1,
     selectedRows: [],
+    firstCellWidth: 0,
+  };
+
+  rowHeaderRef = createRef();
+  containerRef = createRef();
+  bodyRef = createRef();
+
+  componentDidMount() {
+    const { isScrollable } = this.props;
+    if (isScrollable) {
+      const firstCellWidth = this.rowHeaderRef.current && this.rowHeaderRef.current.offsetWidth;
+      this.setState({ firstCellWidth });
+      addEventListener('resize', this.setFirstCellWidth);
+      this.containerRef.current.addEventListener('scroll', this.checkContainerScrollPosition);
+    }
+  }
+
+  componentWillUnmount() {
+    removeEventListener('resize', this.setFirstCellWidth);
+    this.containerRef.current.removeEventListener('scroll', this.checkContainerScrollPosition);
+  }
+
+  setFirstCellWidth = () => {
+    const firstCellWidth =
+      this.rowHeaderRef && this.rowHeaderRef.current && this.rowHeaderRef.current.offsetWidth;
+    this.setState({ firstCellWidth });
+  };
+
+  checkContainerScrollPosition = () => {
+    const { firstCellWidth } = this.state;
+    const position = this.containerRef.current.scrollLeft;
+    const bodyWidth = this.bodyRef.current.getBoundingClientRect();
+    console.log(position);
+    console.log(bodyWidth);
   };
 
   /**
@@ -200,7 +236,7 @@ class Table extends PureComponent {
     const colsLenght = colsDef.length + 1;
 
     return (
-      <Body colsLenght={colsLenght}>
+      <Body colsLenght={colsLenght} ref={this.bodyRef}>
         {sortData(data).map(({ key, item }, index) => (
           <Fragment key={key}>
             <BodyRow
@@ -215,6 +251,7 @@ class Table extends PureComponent {
               {colsDef.map(({ isRowHeader, value, format, align }, columnIndex) =>
                 isRowHeader ? (
                   <RowHeader
+                    ref={this.rowHeaderRef}
                     align={align}
                     isScrollable={isScrollable}
                     key={`row-header-${index}`}
@@ -308,6 +345,16 @@ class Table extends PureComponent {
     );
   }
 
+  /**
+   * Renders the shadow of the table.
+   *
+   * @return {jsx}
+   */
+  renderShadow() {
+    const { firstCellWidth } = this.state;
+    return <ShadowContainer firstCellWidth={firstCellWidth} />;
+  }
+
   /**
    * Renders the component.
    *
@@ -317,13 +364,21 @@ class Table extends PureComponent {
     const { dataTotal, height, isScrollable, width } = this.props;
 
     return (
-      <Container data-testid="table-container" height={height} isScrollable={isScrollable}>
-        <TableElement width={isScrollable ? 'initial' : width}>
-          {this.renderHeader()}
-          {this.renderBody()}
-          {dataTotal && this.renderFooter()}
-        </TableElement>
-      </Container>
+      <ShadowWrapped>
+        {this.renderShadow()}
+        <Container
+          ref={this.containerRef}
+          data-testid="table-container"
+          height={height}
+          isScrollable={isScrollable}
+        >
+          <TableElement width={isScrollable ? 'initial' : width}>
+            {this.renderHeader()}
+            {this.renderBody()}
+            {dataTotal && this.renderFooter()}
+          </TableElement>
+        </Container>
+      </ShadowWrapped>
     );
   }
 }