Merge branch 'master' into checkbox-aria-label

uber · Nov 18, 2020 · 3430922 · 3430922
2 parents e2d0130 + 4af50d8
commit 3430922
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 316 deletions.
diff --git a/src/data-table/__tests__/data-table-row-height.scenario.js b/src/data-table/__tests__/data-table-row-height.scenario.js
@@ -23,9 +23,15 @@ const loremIpsum = `"We went upstairs together, the colonel first with the lamp,
 const columns = [
   StringColumn({
     title: 'Name',
-    minWidth: 300,
+    minWidth: 250,
     mapDataToValue: (data: RowDataT) => data.Name,
   }),
+  StringColumn({
+    title: 'Vertically Center',
+    minWidth: 250,
+    mapDataToValue: (data: RowDataT) => data.Name,
+    cellBlockAlign: 'center',
+  }),
   StringColumn({
     title: 'Long Text',
     maxWidth: 300,

diff --git a/src/data-table/cell-shell.js b/src/data-table/cell-shell.js
diff --git a/src/data-table/column-anchor.js b/src/data-table/column-anchor.js
@@ -11,9 +11,9 @@ import * as React from 'react';
 import {StyledLink} from '../link/index.js';
 import {useStyletron} from '../styles/index.js';
 
-import CellShell from './cell-shell.js';
+import Column from './column.js';
 import {COLUMNS} from './constants.js';
-import type {ColumnT} from './types.js';
+import type {ColumnT, SharedColumnOptionsT} from './types.js';
 
 type ValueT = {content: string, href: string};
 
@@ -23,13 +23,8 @@ type ReplacementElementAs = React.AbstractComponent<{|
 |}>;
 
 type OptionsT = {|
+  ...SharedColumnOptionsT<ValueT>,
   elementAs?: ReplacementElementAs | string,
-  // eslint-disable-next-line flowtype/no-weak-types
-  mapDataToValue: (data: any) => ValueT,
-  maxWidth?: number,
-  minWidth?: number,
-  sortable?: boolean,
-  title: string,
 |};
 
 type FilterParametersT = {};
@@ -40,54 +35,47 @@ function AnchorFilter(props) {
   return <div>not implemented for anchor column</div>;
 }
 
-const AnchorCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
+function AnchorCell(props) {
   const [css] = useStyletron();
   return (
-    <CellShell
-      ref={ref}
-      isMeasured={props.isMeasured}
-      isSelected={props.isSelected}
-      onSelect={props.onSelect}
+    <div
+      className={css({
+        display: '-webkit-box',
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+      })}
     >
-      <div
-        className={css({
-          display: '-webkit-box',
-          WebkitLineClamp: 1,
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-        })}
-      >
-        <StyledLink $as={props.elementAs} href={props.value.href}>
-          {props.value.content}
-        </StyledLink>
-      </div>
-    </CellShell>
+      <StyledLink $as={props.elementAs} href={props.value.href}>
+        {props.value.content}
+      </StyledLink>
+    </div>
   );
-});
-AnchorCell.displayName = 'AnchorCell';
+}
 
 function AnchorColumn(options: OptionsT): AnchorColumnT {
-  return {
+  return Column({
     kind: COLUMNS.ANCHOR,
     buildFilter: function(params) {
       return function(data) {
         return true;
       };
     },
+    cellBlockAlign: options.cellBlockAlign,
     filterable: false,
     mapDataToValue: options.mapDataToValue,
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
-    renderCell: React.forwardRef((props, ref) => {
-      return <AnchorCell {...props} ref={ref} elementAs={options.elementAs} />;
-    }),
+    renderCell: function RenderAnchorCell(props) {
+      return <AnchorCell {...props} elementAs={options.elementAs} />;
+    },
     renderFilter: AnchorFilter,
     sortable: options.sortable === undefined ? true : options.sortable,
     sortFn: function(a, b) {
       return a.content.localeCompare(b.content);
     },
     title: options.title,
-  };
+  });
 }
 
 export default AnchorColumn;
diff --git a/src/data-table/column-boolean.js b/src/data-table/column-boolean.js
@@ -10,20 +10,15 @@ import * as React from 'react';
 
 import {useStyletron} from '../styles/index.js';
 
-import CellShell from './cell-shell.js';
 import {CategoricalFilter} from './column-categorical.js';
+import Column from './column.js';
 import {COLUMNS} from './constants.js';
-import type {ColumnT} from './types.js';
+import type {ColumnT, SharedColumnOptionsT} from './types.js';
 import {LocaleContext} from '../locale/index.js';
 
 type OptionsT = {|
+  ...SharedColumnOptionsT<boolean>,
   filterable?: boolean,
-  // eslint-disable-next-line flowtype/no-weak-types
-  mapDataToValue: (data: any) => boolean,
-  maxWidth?: number,
-  minWidth?: number,
-  sortable?: boolean,
-  title: string,
 |};
 
 type FilterParametersT = {|
@@ -82,41 +77,34 @@ function BooleanFilter(props) {
   );
 }
 
-const BooleanCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
+function BooleanCell(props) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   return (
-    <CellShell
-      ref={ref}
-      isMeasured={props.isMeasured}
-      isSelected={props.isSelected}
-      onSelect={props.onSelect}
+    <div
+      className={css({
+        textAlign: props.value ? 'right' : 'left',
+        minWidth: theme.sizing.scale1400,
+        width: '100%',
+      })}
     >
-      <div
-        className={css({
-          textAlign: props.value ? 'right' : 'left',
-          minWidth: theme.sizing.scale1400,
-          width: '100%',
-        })}
-      >
-        {props.value
-          ? locale.datatable.booleanColumnTrueShort
-          : locale.datatable.booleanColumnFalseShort}
-      </div>
-    </CellShell>
+      {props.value
+        ? locale.datatable.booleanColumnTrueShort
+        : locale.datatable.booleanColumnFalseShort}
+    </div>
   );
-});
-BooleanCell.displayName = 'BooleanCell';
+}
 
 function BooleanColumn(options: OptionsT): BooleanColumnT {
-  return {
+  return Column({
     kind: COLUMNS.BOOLEAN,
     buildFilter: function(params) {
       return function(data) {
         const included = params.selection.has(data);
         return params.exclude ? !included : included;
       };
     },
+    cellBlockAlign: options.cellBlockAlign,
     filterable: options.filterable === undefined ? true : options.filterable,
     mapDataToValue: options.mapDataToValue,
     maxWidth: options.maxWidth,
@@ -129,7 +117,7 @@ function BooleanColumn(options: OptionsT): BooleanColumnT {
       return a ? -1 : 1;
     },
     title: options.title,
-  };
+  });
 }
 
 export default BooleanColumn;
diff --git a/src/data-table/column-categorical.js b/src/data-table/column-categorical.js
@@ -16,21 +16,16 @@ import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
 import {Label3} from '../typography/index.js';
 
-import CellShell from './cell-shell.js';
+import Column from './column.js';
 import {COLUMNS} from './constants.js';
-import type {ColumnT} from './types.js';
+import type {ColumnT, SharedColumnOptionsT} from './types.js';
 import {LocaleContext} from '../locale/index.js';
 import FilterShell from './filter-shell.js';
 import {matchesQuery, splitByQuery, HighlightCellText} from './text-search.js';
 
 type OptionsT = {|
+  ...SharedColumnOptionsT<string>,
   filterable?: boolean,
-  // eslint-disable-next-line flowtype/no-weak-types
-  mapDataToValue: (data: any) => string,
-  maxWidth?: number,
-  minWidth?: number,
-  sortable?: boolean,
-  title: string,
 |};
 
 type FilterParametersT = {|
@@ -219,43 +214,36 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
   );
 }
 
-const CategoricalCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
+function CategoricalCell(props) {
   const [css] = useStyletron();
   return (
-    <CellShell
-      ref={ref}
-      isMeasured={props.isMeasured}
-      isSelected={props.isSelected}
-      onSelect={props.onSelect}
+    <div
+      className={css({
+        display: '-webkit-box',
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+      })}
     >
-      <div
-        className={css({
-          display: '-webkit-box',
-          WebkitLineClamp: 1,
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-        })}
-      >
-        {props.textQuery ? (
-          <HighlightCellText text={props.value} query={props.textQuery} />
-        ) : (
-          props.value
-        )}
-      </div>
-    </CellShell>
+      {props.textQuery ? (
+        <HighlightCellText text={props.value} query={props.textQuery} />
+      ) : (
+        props.value
+      )}
+    </div>
   );
-});
-CategoricalCell.displayName = 'CategoricalCell';
+}
 
 function CategoricalColumn(options: OptionsT): CategoricalColumnT {
-  return {
+  return Column({
     kind: COLUMNS.CATEGORICAL,
     buildFilter: function(params) {
       return function(data) {
         const included = params.selection.has(data);
         return params.exclude ? !included : included;
       };
     },
+    cellBlockAlign: options.cellBlockAlign,
     textQueryFilter: function(textQuery, data) {
       return data.toLowerCase().includes(textQuery.toLowerCase());
     },
@@ -270,7 +258,7 @@ function CategoricalColumn(options: OptionsT): CategoricalColumnT {
       return a.localeCompare(b);
     },
     title: options.title,
-  };
+  });
 }
 
 export default CategoricalColumn;