baseui/data-table/stateful-container.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StatefulContainer = void 0;
var React = _interopRequireWildcard(require("react"));
var _constants = require("./constants");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

function useDuplicateColumnTitleWarning(columns) {
  React.useEffect(() => {
    if (process.env.NODE_ENV !== "production") {
      const titles = columns.reduce((set, column) => set.add(column.title), new Set());
      if (titles.size < columns.length) {
        console.warn('BaseWeb DataTable: Column titles must be unique else will result in non-deterministic filtering.');
      }
    }
  }, [columns]);
}
const StatefulContainer = props => {
  useDuplicateColumnTitleWarning(props.columns);
  const [sortIndex, setSortIndex] = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1);
  const [sortDirection, setSortDirection] = React.useState(props.initialSortDirection);
  const [filters, setFilters] = React.useState(props.initialFilters || new Map());
  const [textQuery, setTextQuery] = React.useState(typeof props.initialTextQuery === 'string' ? props.initialTextQuery : '');
  const [selectedRowIds, setSelectedRowIds] = React.useState(props.initialSelectedRowIds || new Set());

  // @ts-ignore
  function handleSort(columnIndex) {
    let nextSortIndex;
    let nextSortDirection;
    if (columnIndex === sortIndex) {
      if (sortDirection === _constants.SORT_DIRECTIONS.DESC) {
        nextSortIndex = -1;
        nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
      } else {
        nextSortIndex = columnIndex;
        nextSortDirection = _constants.SORT_DIRECTIONS.DESC;
      }
    } else {
      nextSortIndex = columnIndex;
      nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
    }
    setSortIndex(nextSortIndex);
    setSortDirection(nextSortDirection);
    if (props.onSort) {
      props.onSort(nextSortIndex, nextSortDirection);
    }
  }

  // @ts-ignore
  function handleTextQueryChange(nextTextQuery) {
    setTextQuery(nextTextQuery);
    if (props.onTextQueryChange) {
      props.onTextQueryChange(nextTextQuery);
    }
  }

  // @ts-ignore
  function handleFilterAdd(title, filterParams) {
    filters.set(title, filterParams);
    if (props.onFilterAdd) {
      props.onFilterAdd(title, filterParams);
    }
    setFilters(new Map(filters));
  }
  // @ts-ignore
  function handleFilterRemove(title) {
    filters.delete(title);
    if (props.onFilterRemove) {
      props.onFilterRemove(title);
    }
    setFilters(new Map(filters));
  }

  // @ts-ignore
  function handleSelectChange(next) {
    setSelectedRowIds(next);
    const selectionCallback = props.onSelectionChange;
    if (selectionCallback) {
      selectionCallback(props.rows.filter(r => next.has(r.id)));
    }
  }
  // @ts-ignore
  function handleSelectMany(incomingRows) {
    // only adds rows that are visible in the table
    // @ts-ignore
    handleSelectChange(new Set([...selectedRowIds, ...incomingRows.map(r => r.id)]));
  }
  function handleSelectNone() {
    handleSelectChange(new Set());
  }
  // @ts-ignore
  function handleSelectOne(row) {
    if (selectedRowIds.has(row.id)) {
      selectedRowIds.delete(row.id);
    } else {
      selectedRowIds.add(row.id);
    }
    handleSelectChange(new Set(selectedRowIds));
  }
  const handleIncludedRowsChange = React.useCallback(rows => {
    if (props.onIncludedRowsChange) {
      props.onIncludedRowsChange(rows);
    }
  }, [props.onIncludedRowsChange]);
  const handleRowHighlightChange = React.useCallback((rowIndex, row) => {
    if (props.onRowHighlightChange) {
      props.onRowHighlightChange(rowIndex, row);
    }
  }, [props.rowHighlightIndex]);
  return props.children({
    filters,
    onFilterAdd: handleFilterAdd,
    onFilterRemove: handleFilterRemove,
    onIncludedRowsChange: handleIncludedRowsChange,
    onRowHighlightChange: handleRowHighlightChange,
    onSelectMany: handleSelectMany,
    onSelectNone: handleSelectNone,
    onSelectOne: handleSelectOne,
    onSort: handleSort,
    onTextQueryChange: handleTextQueryChange,
    resizableColumnWidths: Boolean(props.resizableColumnWidths),
    rowHighlightIndex: props.rowHighlightIndex,
    selectedRowIds,
    sortIndex,
    // @ts-ignore
    sortDirection,
    textQuery
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  });
};
exports.StatefulContainer = StatefulContainer;