@helpscout/hsds-react/components/Table/Table.hooks.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.useTable = useTable;

var _react = require("react");

var _Table = require("./Table.utils");

var _Table2 = require("./Table.actionTypes");

var _Table3 = _interopRequireDefault(require("./Table.reducer"));

function useTable(data, maxRowsToDisplay, columns) {
  if (data === void 0) {
    data = [];
  }

  if (maxRowsToDisplay === void 0) {
    maxRowsToDisplay = null;
  }

  if (columns === void 0) {
    columns = [];
  }

  var initialDisplayTableData = (0, _react.useMemo)(function () {
    return (0, _Table.getDisplayTableData)({
      data: data,
      rowsToDisplay: maxRowsToDisplay
    });
  }, [data, maxRowsToDisplay]);

  var _useReducer = (0, _react.useReducer)(_Table3.default, {
    selectedRows: [],
    currentTableData: initialDisplayTableData,
    columns: [].concat(columns)
  }),
      state = _useReducer[0],
      dispatch = _useReducer[1];

  var updateTableData = (0, _react.useCallback)(function (data, rowsToDisplay) {
    dispatch({
      type: _Table2.UPDATE_TABLE_DATA,
      payload: {
        data: data,
        rowsToDisplay: rowsToDisplay
      }
    });
  }, [dispatch]);
  var expandTable = (0, _react.useCallback)(function (data) {
    dispatch({
      type: _Table2.EXPAND_TABLE,
      payload: {
        data: data,
        rowsToDisplay: data.length
      }
    });
  }, [dispatch]);
  var updateColumns = (0, _react.useCallback)(function (columns, clickedColumn) {
    dispatch({
      type: _Table2.UPDATE_COLUMNS,
      payload: {
        columns: columns,
        clickedColumn: clickedColumn
      }
    });
  }, [dispatch]);
  var resetColumns = (0, _react.useCallback)(function (columns) {
    dispatch({
      type: _Table2.RESET_COLUMNS,
      payload: {
        columns: columns
      }
    });
  }, [dispatch]);
  var collapseTable = (0, _react.useCallback)(function (data, rowsToDisplay) {
    dispatch({
      type: _Table2.COLLAPSE_TABLE,
      payload: {
        data: data,
        rowsToDisplay: rowsToDisplay
      }
    });
  }, [dispatch]);
  var selectAllRows = (0, _react.useCallback)(function (data, selectionKey, sideEffect) {
    dispatch({
      type: _Table2.SELECT_ALL_ROWS,
      payload: {
        data: data,
        selectionKey: selectionKey
      },
      opts: {
        sideEffect: sideEffect
      }
    });
  }, [dispatch]);
  var deselectAllRows = (0, _react.useCallback)(function (sideEffect) {
    dispatch({
      type: _Table2.DESELECT_ALL_ROWS,
      opts: {
        sideEffect: sideEffect
      }
    });
  }, [dispatch]);
  var selectRow = (0, _react.useCallback)(function (value, sideEffect) {
    dispatch({
      type: _Table2.SELECT_ROW,
      payload: {
        value: value
      },
      opts: {
        sideEffect: sideEffect
      }
    });
  }, [dispatch]);
  var deselectRow = (0, _react.useCallback)(function (value, sideEffect) {
    dispatch({
      type: _Table2.DESELECT_ROW,
      payload: {
        value: value
      },
      opts: {
        sideEffect: sideEffect
      }
    });
  }, [dispatch]);
  var actions = (0, _react.useMemo)(function () {
    return {
      updateTableData: updateTableData,
      expandTable: expandTable,
      collapseTable: collapseTable,
      selectAllRows: selectAllRows,
      deselectAllRows: deselectAllRows,
      selectRow: selectRow,
      deselectRow: deselectRow,
      updateColumns: updateColumns,
      resetColumns: resetColumns
    };
  }, [updateTableData, expandTable, collapseTable, selectAllRows, deselectAllRows, selectRow, deselectRow, updateColumns, resetColumns]);
  return [state, actions];
}