@skyscanner/backpack-web 9.2.0-beta.3 → 10.0.0

package/bpk-component-datatable/src/BpkDataTable.js

@@ -18,180 +18,213 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Table, AutoSizer } from 'react-virtualized';
-import _omit from 'lodash/omit';
+import React, { useMemo, useState } from 'react';
+import { useTable, useSortBy } from 'react-table';
 
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkDataTable.module.scss';
-import BpkDataTableColumn from './BpkDataTableColumn';
-import hasChildrenOfType from './hasChildrenOfType';
-import makeSorter, { type Sorter } from './sorter';
 import type { Props } from './common-types';
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import BpkDataTableHeader from './BpkDataTableHeader';
+import { getColumns } from './utils';
 
 const getClassName = cssModules(STYLES);
-const omittedTableProps = ['rowGetter', 'rowCount', 'onHeaderClick'];
 
-type State<Row> = {
-  sorter: Sorter<Row>,
-  rowSelected: ?number,
+const KEYCODES = {
+  ENTER: 13,
+  SPACEBAR: 32,
 };
 
-class BpkDataTable<Row> extends Component<Props<Row>, State<Row>> {
-  static defaultProps = {
-    ...Table.defaultProps,
-    width: null,
-    headerHeight: 60,
-    rowHeight: 60,
-    gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
-    defaultColumnSortIndex: 0,
-    sort: null,
-    sortBy: null,
-    sortDirection: null,
-  };
-
-  constructor(props: Props<Row>) {
-    super();
-
-    this.state = {
-      sorter: makeSorter(props),
-      rowSelected: undefined,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props<Row>) {
-    if (nextProps.rows !== this.props.rows) {
-      this.state.sorter.propsChange(nextProps);
-    }
-  }
-
-  onRowClicked = ({ index }: { index: number }) => {
-    if (this.state.rowSelected === index) {
-      this.setState({ rowSelected: undefined });
-    } else {
-      this.setState({ rowSelected: index });
-    }
-    if (this.props.onRowClick !== undefined) {
-      this.props.onRowClick(this.state.sorter.getRow(index));
-    }
+const BpkDataTable = (props: Props) => {
+  const {
+    children,
+    className,
+    defaultColumnSortIndex,
+    height,
+    rows: data,
+    sort,
+    sortBy,
+    sortDirection,
+    width,
+    ...restOfProps
+  } = props;
+
+  const [rowSelected, updateRowSelected] = useState(undefined);
+
+  const classNames = getClassName('bpk-data-table', className);
+
+  const getRowClassNames = (
+    consumerClassName: ?string | ?(({ index: number }) => string),
+    index: number,
+  ) => {
+    const rowClassNames = getClassName(
+      'bpk-data-table__row',
+      rowSelected === index && 'bpk-data-table__row--selected',
+      props.onRowClick !== undefined && 'bpk-data-table__row--clickable',
+      index === -1 && 'bpk-data-table__header-row',
+      consumerClassName &&
+        (typeof consumerClassName === 'function'
+          ? consumerClassName({ index })
+          : consumerClassName),
+    );
+    return rowClassNames;
   };
 
-  onHeaderClick = ({
-    dataKey: sortBy,
-    event,
-  }: {
-    dataKey: string,
-    event: SyntheticEvent<HTMLDivElement>,
-  }) => {
-    const column = React.Children.toArray(this.props.children).find(
-      (child) => child.props.dataKey === sortBy,
+  const headerClassNames = getClassName(
+    'bpk-data-table__row',
+    'bpk-data-table__header-row',
+    props.headerClassName,
+  );
+
+  const columns = useMemo(() => getColumns(children), [children]);
+
+  const { getTableBodyProps, getTableProps, headerGroups, prepareRow, rows } =
+    useTable(
+      {
+        columns,
+        data,
+        initialState: {
+          sortBy: useMemo(
+            () => [
+              ...(sort
+                ? []
+                : [
+                    {
+                      id: columns[defaultColumnSortIndex].accessor,
+                      desc:
+                        columns[defaultColumnSortIndex].defaultSortDirection ===
+                          'DESC' || false,
+                    },
+                  ]),
+            ],
+            [defaultColumnSortIndex, columns, sort],
+          ),
+        },
+      },
+      useSortBy,
     );
 
-    if (!column) {
-      return;
-    }
-
-    if (column.props.disableSort === true) {
-      return;
+  const onRowClicked = (index: number) => {
+    if (rowSelected === index) {
+      updateRowSelected(undefined);
+    } else {
+      updateRowSelected(index);
     }
-
-    // See: https://reactjs.org/docs/legacy-event-pooling.html
-    const eventTarget = event.target;
-    if (eventTarget instanceof Element) {
-      this.setState((prevState) => ({
-        sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column),
-      }));
+    if (props.onRowClick !== undefined) {
+      props.onRowClick(rows[index].original);
     }
   };
 
-  rowClassName = (
-    consumerClassName: ?string | ?(({ index: number }) => string),
-    { index }: { index: number },
+  const handleKeyboardEvent = (
+    event: React.KeyboardEvent<HTMLElement>,
+    i: number,
   ) => {
-    const classNames = [getClassName('bpk-data-table__row')];
-    if (this.state.rowSelected === index) {
-      classNames.push(getClassName('bpk-data-table__row--selected'));
-    }
-    if (this.props.onRowClick !== undefined) {
-      classNames.push(getClassName('bpk-data-table__row--clickable'));
-    }
-    if (index === -1) {
-      classNames.push(getClassName('bpk-data-table__header-row'));
-    }
-    if (consumerClassName) {
-      if (typeof consumerClassName === 'function') {
-        classNames.push(consumerClassName({ index }));
-      } else {
-        classNames.push(consumerClassName);
-      }
+    if (
+      event.keyCode === KEYCODES.ENTER ||
+      event.keyCode === KEYCODES.SPACEBAR
+    ) {
+      event.preventDefault();
+      onRowClicked(i);
     }
-    return classNames;
   };
 
-  renderTable(width: ?number) {
-    const {
-      children,
-      className,
-      headerClassName,
-      rowClassName,
-      sort,
-      ...restOfProps
-    } = this.props;
-
-    const classNames = [getClassName('bpk-data-table')];
-    if (className) {
-      classNames.push(className);
-    }
-
-    const headerClassNames = [getClassName('bpk-data-table__header-column')];
-    if (headerClassName) {
-      headerClassNames.push(headerClassName);
-    }
-
-    return (
-      // $FlowFixMe[cannot-spread-inexact]
-      <Table
-        {...restOfProps}
-        className={classNames.join(' ')}
-        width={width}
-        rowCount={this.state.sorter.rowCount}
-        rowGetter={({ index }) => this.state.sorter.getRow(index)}
-        headerClassName={headerClassNames.join(' ')}
-        rowClassName={(row) => this.rowClassName(rowClassName, row)}
-        onRowClick={this.onRowClicked}
-        onHeaderClick={this.onHeaderClick}
-        {...this.state.sorter.sortProps}
-      >
-        {React.Children.map(children, BpkDataTableColumn.toColumn)}
-      </Table>
-    );
-  }
-
-  render() {
-    if (this.props.width !== null) {
-      return this.renderTable(this.props.width);
-    }
-
-    return (
-      <AutoSizer disableHeight>
-        {({ width }) => this.renderTable(width)}
-      </AutoSizer>
-    );
-  }
-}
+  return (
+    <div
+      {...getTableProps({
+        style: { width, height },
+        className: classNames,
+      })}
+      {...restOfProps}
+    >
+      <div>
+        {headerGroups.map((headerGroup) => (
+          <div
+            {...headerGroup.getHeaderGroupProps({
+              style: { height: props.headerHeight },
+              className: headerClassNames,
+            })}
+          >
+            {headerGroup.headers.map((column) => {
+              if (sort && sortBy) {
+                if (column.id === sortBy) {
+                  column.sortType = sort; // eslint-disable-line no-param-reassign
+                  column.sortDirection = sortDirection; // eslint-disable-line no-param-reassign
+                }
+              }
+              return <BpkDataTableHeader key={column.id} column={column} />;
+            })}
+          </div>
+        ))}
+      </div>
+      <div {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          const cellClassNames = [getClassName('bpk-data-table__cell')];
+          return (
+            <div
+              onClick={() => onRowClicked(i)}
+              role="button"
+              onKeyDown={(event) => handleKeyboardEvent(event, i)}
+              tabIndex={0}
+              {...row.getRowProps({
+                style: {
+                  ...props.rowStyle,
+                  height: props.rowHeight,
+                },
+                className: getRowClassNames(props.rowClassName, i),
+              })}
+            >
+              {row.cells.map((cell) => {
+                if (cell.column.className) {
+                  cellClassNames.push(cell.column.className);
+                }
+                return (
+                  <div
+                    {...cell.getCellProps({
+                      style: {
+                        width: cell.column.width,
+                        minWidth: cell.column.minWidth,
+                        flexGrow: cell.column.flexGrow,
+                      },
+                      className: cellClassNames.join(' '),
+                    })}
+                  >
+                    {cell.render('Cell')}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 BpkDataTable.propTypes = {
-  ..._omit(Table.propTypes, omittedTableProps),
   rows: PropTypes.arrayOf(Object).isRequired,
-  children: hasChildrenOfType(BpkDataTableColumn),
+  children: PropTypes.node.isRequired,
+  height: PropTypes.number.isRequired,
   width: PropTypes.number,
   headerHeight: PropTypes.number,
+  rowHeight: PropTypes.number,
   className: PropTypes.string,
   defaultColumnSortIndex: PropTypes.number,
   sort: PropTypes.func,
   sortBy: PropTypes.string,
-  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
+  sortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
+};
+
+BpkDataTable.defaultProps = {
+  width: null,
+  headerHeight: 60,
+  rowHeight: 60,
+  className: null,
+  defaultColumnSortIndex: 0,
+  sort: null,
+  sortBy: null,
+  sortDirection: SORT_DIRECTION_TYPES.ASC,
 };
 
 export default BpkDataTable;

package/bpk-component-datatable/src/BpkDataTable.module.scss

@@ -41,19 +41,8 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
 .bpk-data-table {
   width: 100%;
 
-  &__header-column {
-    display: flex;
-    height: 100%;
-    margin: bpk-spacing-base();
-    flex-direction: row;
-    align-items: center;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-
-    @include bpk-label-2;
-
-    &:hover {
-      cursor: pointer;
-    }
+  &__header-row {
+    overflow: hidden;
   }
 
   &__row {
@@ -67,7 +56,7 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
 
     @include bpk-footnote;
 
-    &:last-child {
+    &:last-child:not(.bpk-data-table__header-row) {
       border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
     }
 
@@ -92,4 +81,11 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
       }
     }
   }
+
+  &__cell {
+    margin: bpk-spacing-base();
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -17,48 +17,45 @@
  */
 /* @flow strict */
 
-import React, { type Element } from 'react';
-import { Column } from 'react-virtualized';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import bpkHeaderRenderer from './bpkHeaderRenderer';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType } from './sort-types';
-
-export type BpkDataTableColumnProps = {
-  className: ?string,
-  dataKey: string,
-  disableSort: boolean,
-  defaultSortDirection: SortDirectionType,
-};
-
-const getClassName = cssModules(STYLES);
-
-// BpkDataTableColumn is just a props wrapper since Table only accepts Column children
-// BpkDataTable uses BpkDataTableColumn.toColumn to convert BpkDataTableColumn to Columns
-// eslint-disable-next-line no-unused-vars
-const BpkDataTableColumn = (props: BpkDataTableColumnProps) => null;
-
-BpkDataTableColumn.toColumn = (
-  bpkDataTableColumn: Element<typeof BpkDataTableColumn>,
-  key,
-) => {
-  const { className, ...rest } = bpkDataTableColumn.props;
-  const classNames = [getClassName('bpk-data-table-column')];
-
-  if (className) {
-    classNames.push(className);
-  }
-
-  // $FlowFixMe[cannot-spread-inexact]
-  return <Column className={classNames.join(' ')} key={key} {...rest} />;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import { type BpkDataTableColumnProps } from './common-types';
+
+// BpkDataTableColumn is just a props wrapper
+// to maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
+// The `react-table` library however expects columns as an array of objects
+
+const BpkDataTableColumn = (props: BpkDataTableColumnProps) => (
+  <div {...props} />
+);
+
+BpkDataTableColumn.propTypes = {
+  dataKey: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  disableSort: PropTypes.bool,
+  defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
+  flexGrow: PropTypes.number,
+  label: PropTypes.string,
+  headerRenderer: PropTypes.func,
+  headerClassName: PropTypes.string,
+  headerStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  cellRenderer: PropTypes.func,
+  cellDataGetter: PropTypes.func,
 };
-
-BpkDataTableColumn.propTypes = { ...Column.propTypes };
 BpkDataTableColumn.defaultProps = {
-  ...Column.defaultProps,
-  headerRenderer: bpkHeaderRenderer,
+  className: null,
+  disableSort: false,
+  defaultSortDirection: SORT_DIRECTION_TYPES.ASC,
+  flexGrow: 0,
+  label: null,
+  headerRenderer: null,
+  headerClassName: null,
+  headerStyle: null,
+  cellRenderer: null,
+  cellDataGetter: null,
 };
 
 export default BpkDataTableColumn;

package/bpk-component-datatable/src/BpkDataTableHeader.js

@@ -0,0 +1,143 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* @flow strict */
+
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
+import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
+import { withRtlSupport } from '../../bpk-component-icon';
+
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import STYLES from './BpkDataTableHeader.module.scss';
+import { type ColumnType } from './common-types';
+
+const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
+const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
+
+const getClassName = cssModules(STYLES);
+
+const KEYCODES = {
+  ENTER: 13,
+  SPACEBAR: 32,
+};
+
+const BpkDataTableHeader = ({ column }: { column: ColumnType }) => {
+  const {
+    defaultSortDirection,
+    disableSortBy,
+    flexGrow,
+    headerClassName,
+    headerStyle,
+    isSorted,
+    isSortedDesc,
+    label,
+    minWidth,
+    sortDirection,
+    width,
+  } = column;
+
+  const onHeaderClick = () => {
+    if (disableSortBy === true) {
+      return;
+    }
+    let isDescending;
+
+    if (isSorted) {
+      isDescending = isSortedDesc === false;
+    } else if (sortDirection) {
+      isDescending = sortDirection === SORT_DIRECTION_TYPES.DESC;
+    } else if (defaultSortDirection) {
+      isDescending = defaultSortDirection === SORT_DIRECTION_TYPES.DESC;
+    } else {
+      isDescending = false;
+    }
+
+    column.toggleSortBy(isDescending);
+  };
+
+  const handleKeyboardEvent = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (
+      event.keyCode === KEYCODES.ENTER ||
+      event.keyCode === KEYCODES.SPACEBAR
+    ) {
+      event.preventDefault();
+      onHeaderClick();
+    }
+  };
+
+  const headerClassNames = getClassName(
+    'bpk-data-table-column__header',
+    headerClassName,
+  );
+  const upIconClassNames = getClassName(
+    'bpk-data-table-column__sort-icon--up',
+    'bpk-data-table-column__sort-icon',
+    isSorted && !isSortedDesc && 'bpk-data-table-column__sort-icon--selected',
+  );
+
+  const downIconClassNames = getClassName(
+    'bpk-data-table-column__sort-icon--down',
+    'bpk-data-table-column__sort-icon',
+    isSorted && isSortedDesc && 'bpk-data-table-column__sort-icon--selected',
+  );
+
+  return (
+    <div
+      {...column.getHeaderProps({
+        style: {
+          width,
+          minWidth,
+          flexGrow,
+          ...headerStyle,
+        },
+        className: headerClassNames,
+      })}
+    >
+      <span
+        onClick={onHeaderClick}
+        onKeyDown={handleKeyboardEvent}
+        aria-label={label}
+        aria-pressed={isSorted}
+        role="button"
+        tabIndex={0}
+      >
+        {column.render('Header')}
+      </span>
+      {!disableSortBy && (
+        <div
+          className={getClassName('bpk-data-table-column__sort-icons')}
+          key="sort"
+          aria-hidden
+        >
+          <UpIcon
+            onClick={() => column.toggleSortBy(false)}
+            className={upIconClassNames}
+          />
+          <DownIcon
+            onClick={() => column.toggleSortBy(true)}
+            className={downIconClassNames}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BpkDataTableHeader;

package/bpk-component-datatable/src/{BpkDataTableColumn.module.scss → BpkDataTableHeader.module.scss}

@@ -16,24 +16,25 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins';
 
 $bpk-spacing-v2: true;
 
 $bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
 
-.bpk-data-table-column {
+.bpk-data-table-column__header {
+  display: flex;
+  height: 100%;
   margin: bpk-spacing-base();
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+  flex-direction: row;
+  align-items: center;
+  outline-offset: -(bpk-spacing-sm());
 
-.bpk-data-table-column__header {
-  display: inline-block;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  @include bpk-label-2;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .bpk-data-table-column__sort-icons {