@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0

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

@@ -1,28 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortIconDirection = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactVirtualized = require("react-virtualized");
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _arrowDown = _interopRequireDefault(require("../../bpk-component-icon/sm/arrow-down"));
-
-var _arrowUp = _interopRequireDefault(require("../../bpk-component-icon/sm/arrow-up"));
-
-var _bpkComponentIcon = require("../../bpk-component-icon");
-
-var _utils = require("./utils");
-
-var _BpkDataTableColumnModule = _interopRequireDefault(require("./BpkDataTableColumn.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -40,58 +15,96 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const DownIcon = (0, _bpkComponentIcon.withRtlSupport)(_arrowDown.default);
-const UpIcon = (0, _bpkComponentIcon.withRtlSupport)(_arrowUp.default);
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDataTableColumnModule.default);
-const upIconClassName = getClassName('bpk-data-table-column__sort-icon--up');
-const downIconClassName = getClassName('bpk-data-table-column__sort-icon--down');
+/* @flow strict */
 
-const getSortIconDirection = element => {
-  if ((0, _utils.hasClassName)(element, upIconClassName) || (0, _utils.hasClassName)(element.parentElement, upIconClassName)) {
-    return _reactVirtualized.SortDirection.ASC;
-  }
+import React from 'react';
+import { SortDirection } from 'react-virtualized';
 
-  if ((0, _utils.hasClassName)(element, downIconClassName) || (0, _utils.hasClassName)(element.parentElement, downIconClassName)) {
-    return _reactVirtualized.SortDirection.DESC;
-  }
+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 { hasClassName } from './utils';
+import STYLES from './BpkDataTableColumn.module.scss';
+import { type SortDirectionType, type SortProps } from './sort-types';
 
+const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
+const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
+
+const getClassName = cssModules(STYLES);
+const upIconClassName = getClassName('bpk-data-table-column__sort-icon--up');
+const downIconClassName = getClassName(
+  'bpk-data-table-column__sort-icon--down',
+);
+
+export const getSortIconDirection = (element: Element): ?SortDirectionType => {
+  if (
+    hasClassName(element, upIconClassName) ||
+    hasClassName(element.parentElement, upIconClassName)
+  ) {
+    return SortDirection.ASC;
+  }
+  if (
+    hasClassName(element, downIconClassName) ||
+    hasClassName(element.parentElement, downIconClassName)
+  ) {
+    return SortDirection.DESC;
+  }
   return null;
 };
 
-exports.getSortIconDirection = getSortIconDirection;
-
-var _default = ({
+type Props = {
+  dataKey: string,
+  label: string,
+  disableSort: boolean,
+  ...$Exact<SortProps>,
+};
+export default ({
   dataKey,
   disableSort,
   label,
   sortBy,
-  sortDirection
-}) => {
-  const children = [/*#__PURE__*/_react.default.createElement("span", {
-    className: getClassName('bpk-data-table-column__header'),
-    key: "label",
-    title: label
-  }, label)];
+  sortDirection,
+}: Props) => {
+  const children = [
+    <span
+      className={getClassName('bpk-data-table-column__header')}
+      key="label"
+      title={label}
+    >
+      {label}
+    </span>,
+  ];
 
   if (!disableSort) {
-    const upIconClassNames = [getClassName('bpk-data-table-column__sort-icon'), upIconClassName];
-    const downIconClassNames = [getClassName('bpk-data-table-column__sort-icon'), downIconClassName];
+    const upIconClassNames = [
+      getClassName('bpk-data-table-column__sort-icon'),
+      upIconClassName,
+    ];
+
+    const downIconClassNames = [
+      getClassName('bpk-data-table-column__sort-icon'),
+      downIconClassName,
+    ];
 
     if (sortBy === dataKey) {
-      (sortDirection === _reactVirtualized.SortDirection.ASC ? upIconClassNames : downIconClassNames).push(getClassName('bpk-data-table-column__sort-icon--selected'));
+      (sortDirection === SortDirection.ASC
+        ? upIconClassNames
+        : downIconClassNames
+      ).push(getClassName('bpk-data-table-column__sort-icon--selected'));
     }
 
-    children.push( /*#__PURE__*/_react.default.createElement("div", {
-      className: getClassName('bpk-data-table-column__sort-icons'),
-      key: "sort"
-    }, /*#__PURE__*/_react.default.createElement(UpIcon, {
-      className: upIconClassNames.join(' ')
-    }), /*#__PURE__*/_react.default.createElement(DownIcon, {
-      className: downIconClassNames.join(' ')
-    })));
+    children.push(
+      <div
+        className={getClassName('bpk-data-table-column__sort-icons')}
+        key="sort"
+      >
+        <UpIcon className={upIconClassNames.join(' ')} />
+        <DownIcon className={downIconClassNames.join(' ')} />
+      </div>,
+    );
   }
 
   return children;
 };
-
-exports.default = _default;

package/bpk-component-datatable/src/common-types.js

@@ -1,5 +1,50 @@
-"use strict";
+/*
+ * 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.
+ */
 
-var _BpkDataTableColumn = _interopRequireDefault(require("./BpkDataTableColumn"));
+/* @flow strict */
+import type { ChildrenArray, Element } from 'react';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import BpkDataTableColumn from './BpkDataTableColumn';
+import type {
+  SortDirectionType as _SortDirectionType,
+  SortProps as _SortProps,
+} from './sort-types';
+
+export type ColumnType = {
+  toColumn(column: any, key: string): any,
+};
+
+export type DataTableProps = {
+  headerClassName: ?string,
+  rowClassName: ?string,
+};
+
+export type Props<Row> = {
+  ...$Exact<DataTableProps>,
+  rows: Array<Row>,
+  children: ChildrenArray<Element<typeof BpkDataTableColumn> & ColumnType>,
+  width: ?number,
+  headerHeight: number,
+  className: ?string,
+  defaultColumnSortIndex: number,
+  onRowClick: (Row) => mixed,
+  ...$Exact<_SortProps>,
+};
+
+export type SortDirectionType = _SortDirectionType;
+export type SortProps = _SortProps;

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

@@ -1,13 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.getDisplayName = getDisplayName;
-
-var _react = require("react");
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -25,28 +15,45 @@ var _react = require("react");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function getDisplayName(Component) {
-  return Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown');
+/* @flow strict */
+
+import { Children, type AbstractComponent } from 'react';
+
+export function getDisplayName(Component: AbstractComponent<any>): string {
+  return (
+    Component.displayName ||
+    Component.name ||
+    (typeof Component === 'string' && Component.length > 0
+      ? Component
+      : 'Unknown')
+  );
 }
 
-const hasChildrenOfType = (type, atLeast = 1) => (props, propType, componentName) => {
-  if (_react.Children.count(props[propType]) < atLeast) {
-    const inflectedNoun = atLeast === 1 ? 'child' : 'children';
-    return Error(`${componentName} requires at least ${atLeast} '${getDisplayName(type)}' ${inflectedNoun}.`);
-  }
-
-  const children = _react.Children.toArray(props[propType]);
-
-  for (let i = 0; i < children.length; i += 1) {
-    const child = children[i];
+const hasChildrenOfType =
+  (type: AbstractComponent<any>, atLeast: number = 1) =>
+  (props: { [string]: any }, propType: string, componentName: string) => {
+    if (Children.count(props[propType]) < atLeast) {
+      const inflectedNoun = atLeast === 1 ? 'child' : 'children';
+      return Error(
+        `${componentName} requires at least ${atLeast} '${getDisplayName(
+          type,
+        )}' ${inflectedNoun}.`,
+      );
+    }
 
-    if (child.type !== type && !(child.type.prototype instanceof type)) {
-      return Error(`${componentName} only allows '${getDisplayName(type)}' as children. Found '${getDisplayName(child.type)}'.`);
+    const children = Children.toArray(props[propType]);
+    for (let i = 0; i < children.length; i += 1) {
+      const child = children[i];
+      if (child.type !== type && !(child.type.prototype instanceof type)) {
+        return Error(
+          `${componentName} only allows '${getDisplayName(
+            type,
+          )}' as children. Found '${getDisplayName(child.type)}'.`,
+        );
+      }
     }
-  }
 
-  return undefined;
-};
+    return undefined;
+  };
 
-var _default = hasChildrenOfType;
-exports.default = _default;
+export default hasChildrenOfType;

package/bpk-component-datatable/src/sort-types.js

@@ -1 +1,29 @@
-"use strict";
+/*
+ * 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 */
+
+// This file exists to break a cycle that would otherwise happen between
+// BpkDataTableColumn.js and common-types.js
+export type SortDirectionType = 'ASC' | ' DESC';
+
+export type SortProps = {
+  sortBy: ?string,
+  sortDirection: ?SortDirectionType,
+  sort: ?Function,
+};

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

@@ -1,139 +1,166 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _sortBy2 = _interopRequireDefault(require("lodash/sortBy"));
-
-var _reactVirtualized = require("react-virtualized");
-
-var _bpkHeaderRenderer = require("./bpkHeaderRenderer");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getSortDirection = (sortProps, newSortBy, newSortDirection, defaultSortDirection) => {
-  const {
-    sortBy,
-    sortDirection
-  } = sortProps;
+/*
+ * 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 _sortBy from 'lodash/sortBy';
+import { SortDirection } from 'react-virtualized';
+
+import { getSortIconDirection } from './bpkHeaderRenderer';
+import type { Props, SortProps, SortDirectionType } from './common-types';
+
+export type Sorter<Row> = {
+  rowCount: number,
+  getRow(indext: number): Row,
+  propsChange(props: Props<Row>): void,
+  onHeaderClick(sortBy: string, eventTarget: Element, column: any): Sorter<Row>,
+  sortProps: SortProps,
+};
 
+const getSortDirection = (
+  sortProps: SortProps,
+  newSortBy: ?string,
+  newSortDirection: ?SortDirectionType,
+  defaultSortDirection: SortDirectionType,
+): SortDirectionType => {
+  const { sortBy, sortDirection } = sortProps;
   if (newSortDirection != null) {
     return newSortDirection;
   }
-
   if (sortBy === newSortBy) {
-    return sortDirection === _reactVirtualized.SortDirection.ASC ? _reactVirtualized.SortDirection.DESC : _reactVirtualized.SortDirection.ASC;
+    return sortDirection === SortDirection.ASC
+      ? SortDirection.DESC
+      : SortDirection.ASC;
   }
-
   return defaultSortDirection;
 };
 
-class NaiveSorter {
-  constructor(props) {
-    _defineProperty(this, "sortProps", void 0);
+class NaiveSorter<Row> {
+  sortProps: SortProps;
+
+  list: Array<Row>;
 
-    _defineProperty(this, "list", void 0);
+  sortedList: Array<Row>;
 
-    _defineProperty(this, "sortedList", void 0);
+  rowCount: number;
 
-    _defineProperty(this, "rowCount", void 0);
+  constructor(props: Props<Row>) {
+    const children = React.Children.toArray(props.children);
 
-    const children = _react.default.Children.toArray(props.children);
+    const sortBy =
+      React.Children.count(props.children) > 0
+        ? children[props.defaultColumnSortIndex].props.dataKey
+        : undefined;
+    const sortDirection =
+      children[props.defaultColumnSortIndex].props.defaultSortDirection ||
+      SortDirection.ASC;
 
-    const sortBy = _react.default.Children.count(props.children) > 0 ? children[props.defaultColumnSortIndex].props.dataKey : undefined;
-    const sortDirection = children[props.defaultColumnSortIndex].props.defaultSortDirection || _reactVirtualized.SortDirection.ASC;
     this.sortProps = {
       sortBy,
       sortDirection,
-      sort: null
+      sort: null,
     };
     this.list = props.rows;
     this.sort();
   }
 
-  getRow(index) {
+  getRow(index: number): Row {
     return this.sortedList[index];
   }
 
   sort() {
-    const sorted = (0, _sortBy2.default)(this.list, this.sortProps.sortBy);
-
+    const sorted = _sortBy(this.list, this.sortProps.sortBy);
     if (this.sortProps.sortDirection === 'DESC') {
       sorted.reverse();
     }
-
     this.sortedList = sorted;
     this.rowCount = this.sortedList.length;
   }
 
-  propsChange(nextProps) {
+  propsChange(nextProps: Props<Row>) {
     this.list = nextProps.rows;
     this.sort();
   }
 
-  onHeaderClick(sortBy, eventTarget, column) {
-    const sortDirection = getSortDirection(this.sortProps, sortBy, (0, _bpkHeaderRenderer.getSortIconDirection)(eventTarget), column.props.defaultSortDirection || _reactVirtualized.SortDirection.ASC);
+  onHeaderClick(sortBy: string, eventTarget: Element, column): Sorter<Row> {
+    const sortDirection = getSortDirection(
+      this.sortProps,
+      sortBy,
+      getSortIconDirection(eventTarget),
+      column.props.defaultSortDirection || SortDirection.ASC,
+    );
+
     this.sortProps = {
       sortBy,
       sortDirection,
-      sort: null
+      sort: null,
     };
+
     this.sort();
     return this;
   }
-
 }
 
-class PropSorter {
-  constructor(props) {
-    _defineProperty(this, "sortProps", void 0);
+class PropSorter<Row> {
+  sortProps: SortProps;
 
-    _defineProperty(this, "list", void 0);
+  list: Array<Row>;
 
-    _defineProperty(this, "rowCount", void 0);
+  rowCount: number;
 
+  constructor(props: Props<Row>) {
     this.sortProps = {
       sortBy: props.sortBy,
       sortDirection: props.sortDirection,
-      sort: props.sort
+      sort: props.sort,
     };
     this.list = props.rows;
     this.rowCount = props.rows.length;
   }
 
-  getRow(index) {
+  getRow(index: number): Row {
     return this.list[index];
   }
 
-  propsChange(nextProps) {
+  propsChange(nextProps: Props<Row>) {
     this.sortProps = {
       sortBy: nextProps.sortBy,
       sortDirection: nextProps.sortDirection,
-      sort: nextProps.sort
+      sort: nextProps.sort,
     };
     this.list = nextProps.rows;
     this.rowCount = nextProps.rows.length;
   }
 
-  onHeaderClick() {
+  onHeaderClick(): Sorter<Row> {
     return this;
   }
-
 }
 
-const makeSorter = props => {
-  if (props.sort !== null && props.sortBy !== null && props.sortDirection !== null) {
+const makeSorter = <Row>(props: Props<Row>): Sorter<Row> => {
+  if (
+    props.sort !== null &&
+    props.sortBy !== null &&
+    props.sortDirection !== null
+  ) {
     return new PropSorter(props);
   }
-
   return new NaiveSorter(props);
 };
 
-var _default = makeSorter;
-exports.default = _default;
+export default makeSorter;

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

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hasClassName = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,14 +15,16 @@ exports.hasClassName = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* @flow strict */
+
 // eslint-disable-next-line import/prefer-default-export
-const hasClassName = (node, className) => {
+export const hasClassName = (node: ?Element, className: ?string): boolean => {
   if (node == null) {
     return false;
   }
 
   const nodeClassName = node.getAttribute('class');
-  return nodeClassName != null && nodeClassName.split(' ').indexOf(className) !== -1;
+  return (
+    nodeClassName != null && nodeClassName.split(' ').indexOf(className) !== -1
+  );
 };
-
-exports.hasClassName = hasClassName;