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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));

var _DropList = _interopRequireDefault(require("../DropList"));

var _DropList2 = require("../DropList/DropList.togglers");

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

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var shouldColumnShow = function shouldColumnShow(column) {
  return !!column.show;
};

function ColumnChooser(_ref) {
  var columns = _ref.columns,
      defaultColumns = _ref.defaultColumns,
      columnChooserResetLabel = _ref.columnChooserResetLabel,
      _ref$onColumnChoose = _ref.onColumnChoose,
      onColumnChoose = _ref$onColumnChoose === void 0 ? noop : _ref$onColumnChoose,
      _ref$resetColumns = _ref.resetColumns,
      resetColumns = _ref$resetColumns === void 0 ? noop : _ref$resetColumns,
      _ref$updateColumns = _ref.updateColumns,
      updateColumns = _ref$updateColumns === void 0 ? noop : _ref$updateColumns;
  var items = (0, _Table.createColumnChooserListItems)(columns, columnChooserResetLabel);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, {
    autoSetComboboxAt: 10,
    items: items,
    onSelect: function onSelect(selection, clickedItem) {
      if (clickedItem.type === 'action' && clickedItem.action === 'RESET') {
        if (!(0, _fastDeepEqual.default)(columns, defaultColumns)) {
          resetColumns(defaultColumns);
        }

        onColumnChoose(clickedItem, defaultColumns.filter(shouldColumnShow));
      } else {
        updateColumns(columns, clickedItem);
        onColumnChoose(clickedItem, selection);
      }
    },
    selection: columns.filter(shouldColumnShow),
    toggler: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.IconBtn, {
      a11yLabel: "Choose columns to show or hide",
      iconName: "column-check",
      size: "lg"
    }),
    withMultipleSelection: true
  });
}

ColumnChooser.propTypes = {
  /** List of currently shown columns */
  columns: _propTypes.default.arrayOf(_propTypes.default.shape(_Table.columnShape)),

  /** List of the default shown columns */
  defaultColumns: _propTypes.default.arrayOf(_propTypes.default.shape(_Table.columnShape)),

  /** Callback that fires when showing/hiding a column, signature: (clickedItem, currentSelection) */
  onColumnChoose: _propTypes.default.func,

  /** Fires resetting columns action */
  resetColumns: _propTypes.default.func,

  /** Fires updating columns action */
  updateColumns: _propTypes.default.func
};
var _default = ColumnChooser;
exports.default = _default;