wip

SparkPost · May 12, 2020 · a9e2ca8 · a9e2ca8
1 parent 98aca05
commit a9e2ca8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 13 deletions.
diff --git a/packages/matchbox/src/components/Table/Table.js b/packages/matchbox/src/components/Table/Table.js
@@ -1,22 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Cell, HeaderCell, Row } from './TableElements';
 import styled from 'styled-components';
 import { margin, padding, compose } from 'styled-system';
 import { createPropTypes } from '@styled-system/prop-types';
-import { table } from './styles';
 import { pick } from '@styled-system/props';
+import { Box } from '../Box';
+import { debounce } from '../../helpers/event';
+import { Cell, HeaderCell, Row } from './TableElements';
 import { TablePaddingContext } from './context';
+import { table, wrapper, sticky } from './styles';
 
 const system = compose(margin, padding);
 
 const StyledTable = styled('table')`
   ${table}
   ${system}
+  ${sticky}
+`;
+
+const Wrapper = styled(Box)`
+  ${wrapper}
 `;
 
 function Table(props) {
-  const { children, data, ...rest } = props;
+  const { children, data, freezeFirstColumn, ...rest } = props;
+  const [isScrolled, setIsScrolled] = React.useState(false);
+
+  const handleScroll = e => {
+    setIsScrolled(e.target.scrollLeft > 10);
+  };
 
   const dataMarkup = data ? (
     <tbody>
@@ -33,11 +45,13 @@ function Table(props) {
   const { p: contextP = '400', padding: contextPadding, ...context } = pick(rest);
 
   return (
-    <StyledTable {...rest}>
-      <TablePaddingContext.Provider value={{ p: contextP || contextPadding, ...context }}>
-        {dataMarkup}
-      </TablePaddingContext.Provider>
-    </StyledTable>
+    <Wrapper onScroll={freezeFirstColumn ? handleScroll : null}>
+      <StyledTable freezeFirstColumn={freezeFirstColumn} isScrolled={isScrolled} {...rest}>
+        <TablePaddingContext.Provider value={{ p: contextP || contextPadding, ...context }}>
+          {dataMarkup}
+        </TablePaddingContext.Provider>
+      </StyledTable>
+    </Wrapper>
   );
 }
 
@@ -47,6 +61,7 @@ Table.Row = Row;
 
 Table.displayName = 'Table';
 Table.propTypes = {
+  freezeFirstColumn: PropTypes.bool,
   data: PropTypes.array,
   /**
    * React node(s)

diff --git a/packages/matchbox/src/components/Table/styles.js b/packages/matchbox/src/components/Table/styles.js
@@ -14,6 +14,24 @@ export const headerCell = () => `
   font-weight: ${tokens.fontWeight_semibold};
 `;
 
+export const sticky = ({ isScrolled, freezeFirstColumn }) => {
+  return `
+    td:first-child, th:first-child {
+      transition: box-shadow ${tokens.motionDuration_medium} ${tokens.motionEase_in_out};
+      ${
+        freezeFirstColumn
+          ? `
+            position: sticky;
+            left: 0;
+            background: inherit;
+          `
+          : ''
+      }
+      ${isScrolled ? `box-shadow: ${tokens.boxShadow_400};` : ''}
+    }
+  `;
+};
+
 export const cell = () => `
   word-break: break-all;
 `;
@@ -30,3 +48,7 @@ export const row = () => `
     background: ${tokens.color_gray_100};
   }
 `;
+
+export const wrapper = () => `
+  overflow: auto;
+`;
diff --git a/stories/layout/Table.stories.js b/stories/layout/Table.stories.js
@@ -1,16 +1,21 @@
 import React from 'react';
 import { withInfo } from '@storybook/addon-info';
-import { Table, Panel } from '@sparkpost/matchbox';
+import { Table, Panel, Box } from '@sparkpost/matchbox';
 
 export default {
   title: 'Layout|Table',
 };
 
-const Node = () => <div>A react component</div>;
+const Node = ({ children = 'A react component' }) => <Box minWidth="900">{children}</Box>;
 const data = [
-  ['A', 'B', 'C'],
-  [<Node />, <Node />, <Node />],
-  [1, 2, 3],
+  ['Foo', 'Bar', 'Baz', 'Foo'],
+  [
+    <Node />,
+    <Node />,
+    <Node children="Cell with really really really really really really long content" />,
+    'test',
+  ],
+  [1, 2, 3, 4],
 ];
 
 export const TableComponents = withInfo({ propTablesExclude: [Panel] })(() => (
@@ -45,6 +50,14 @@ export const WithSuppliedData = withInfo()(() => (
   </Panel>
 ));
 
+export const ResponsiveTable = withInfo()(() => (
+  <Box maxWidth="1100">
+    <Panel>
+      <Table data={data} freezeFirstColumn freezeColumns={2} />
+    </Panel>
+  </Box>
+));
+
 export const SystemProps = withInfo()(() => (
   <Panel>
     <Table>