@itwin/itwinui-react/cjs/core/Table/columns/actionColumn.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'ActionColumn', {
  enumerable: true,
  get: function () {
    return ActionColumn;
  },
});
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _Checkbox = require('../../Checkbox/Checkbox.js');
const _index = require('../../../utils/index.js');
const _IconButton = require('../../Buttons/IconButton.js');
const _Table = require('../Table.js');
const _selectionColumn = require('./selectionColumn.js');
const _expanderColumn = require('./expanderColumn.js');
const _Popover = require('../../Popover/Popover.js');
const _VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
const _Flex = require('../../Flex/Flex.js');
const ACTION_CELL_ID = 'iui-table-action';
const ActionColumn = ({ columnManager = false } = {}) => ({
  id: ACTION_CELL_ID,
  disableResizing: true,
  canResize: false,
  disableGroupBy: true,
  minWidth: 48,
  width: 48,
  maxWidth: 48,
  columnClassName: 'iui-slot',
  cellClassName: 'iui-slot',
  disableReordering: true,
  Header: ({ allColumns, dispatch, state }) => {
    let buttonRef = _react.useRef(null);
    if (!columnManager) return null;
    let defaultColumnIds = [
      _selectionColumn.SELECTION_CELL_ID,
      _expanderColumn.EXPANDER_CELL_ID,
      ACTION_CELL_ID,
    ];
    let headerCheckBoxes = () =>
      allColumns
        .filter(({ id }) => !defaultColumnIds.includes(id))
        .map((column) => {
          let { checked } = column.getToggleHiddenProps();
          let onChange = () => {
            column.toggleHidden(checked);
            if (0 === Object.keys(state.columnResizing.columnWidths).length)
              return;
            dispatch({
              type: _Table.tableResizeStartAction,
            });
            queueMicrotask(() => {
              buttonRef.current?.scrollIntoView({
                block: 'nearest',
              });
            });
          };
          return _react.createElement(_Checkbox.Checkbox, {
            key: column.id,
            checked: checked,
            disabled: column.disableToggleVisibility,
            onChange: onChange,
            label: column.render('Header'),
          });
        });
    let popoverProps =
      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
    return _react.createElement(
      _Popover.Popover,
      {
        applyBackground: true,
        content: _react.createElement(
          _Flex.Flex,
          {
            as: _index.FieldsetBase,
            className: 'iui-table-column-manager',
            flexDirection: 'column',
            alignItems: 'flex-start',
          },
          _react.createElement(
            _VisuallyHidden.VisuallyHidden,
            {
              as: 'legend',
            },
            'Show/hide columns',
          ),
          headerCheckBoxes(),
        ),
        ...popoverProps,
      },
      _react.createElement(
        _IconButton.IconButton,
        {
          styleType: 'borderless',
          ref: buttonRef,
          label: 'Column manager',
        },
        _react.createElement(_index.SvgColumnManager, null),
      ),
    );
  },
});