es-grid-template/lib/ali-table/pipeline/features/multiSelect.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.multiSelect = multiSelect;
var _react = _interopRequireDefault(require("react"));
var _internals = require("../../internals");
var _others = require("../../utils/others");
function multiSelect(opts = {}) {
  return function multiSelectStep(pipeline) {
    const stateKey = 'multiSelect';
    const Checkbox = pipeline.ctx.components.Checkbox;
    if (Checkbox == null) {
      throw new Error('Error');
    }
    const primaryKey = pipeline.ensurePrimaryKey('multiSelect');
    const isDisabled = opts.isDisabled ?? (0, _others.always)(false);
    const clickArea = opts.clickArea ?? 'checkbox';
    const value = opts.value ?? pipeline.getStateAtKey(stateKey)?.value ?? opts.defaultValue ?? [];
    const lastKey = opts.lastKey ?? pipeline.getStateAtKey(stateKey)?.lastKey ?? opts.defaultLastKey ?? '';
    const onChange = (nextValue, key, keys, action) => {
      opts.onChange?.(nextValue, key, keys, action);
      pipeline.setStateAtKey(stateKey, {
        value: nextValue,
        lastKey: key
      }, {
        keys,
        action
      });
    };
    const dataSource = pipeline.getDataSource();

    /** All keys contained in the dataSource */
    const fullKeySet = new Set();

    /** All valid keys (where disabled is false) */
    const allKeys = [];
    dataSource.forEach((row, rowIndex) => {
      const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
      fullKeySet.add(rowKey);
      // Exclude disabled keys from allKeys
      if (!isDisabled(row, rowIndex)) {
        allKeys.push(rowKey);
      }
    });
    const set = new Set(value);
    const isAllChecked = allKeys.length > 0 && allKeys.every(key => set.has(key));
    const isAnyChecked = allKeys.some(key => set.has(key));
    const defaultCheckboxColumnTitle = /*#__PURE__*/_react.default.createElement(Checkbox, {
      checked: isAllChecked,
      indeterminate: !isAllChecked && isAnyChecked,
      onChange: () => {
        if (isAllChecked) {
          onChange(_others.arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
        } else {
          onChange(_others.arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
        }
      }
    });
    const checkboxColumn = {
      headerText: 'checkbox',
      field: 'checkbox',
      title: defaultCheckboxColumnTitle,
      width: 50,
      textAlign: 'center',
      ...opts.checkboxColumn,
      getCellProps(val, row, rowIndex) {
        const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
        if (fullKeySet.has(rowKey) && clickArea === 'cell') {
          const prevChecked = set.has(rowKey);
          const disabled = isDisabled(row, rowIndex);
          return {
            style: {
              cursor: disabled ? 'not-allowed' : 'pointer'
            },
            onClick: disabled ? undefined : e => {
              if (opts.stopClickEventPropagation) {
                e.stopPropagation();
              }
              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
            }
          };
        } else {
          return {};
        }
      },
      template(args) {
        const {
          rowData: row,
          index: rowIndex
        } = args;
        const key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
        const checked = set.has(key);
        return /*#__PURE__*/_react.default.createElement(Checkbox, {
          checked: checked,
          disabled: isDisabled(row, rowIndex),
          onChange: clickArea === 'checkbox' ? (arg1, arg2) => {
            const nativeEvent = arg2?.nativeEvent ?? arg1.nativeEvent;
            if (nativeEvent) {
              if (opts.stopClickEventPropagation) {
                nativeEvent.stopPropagation();
              }
              onCheckboxChange(checked, key, nativeEvent.shiftKey);
            }
          } : undefined
        });
      }
    };
    const nextColumns = pipeline.getColumns().slice();
    const checkboxPlacement = opts.checkboxPlacement ?? 'start';
    if (checkboxPlacement === 'start') {
      nextColumns.unshift(checkboxColumn);
    } else {
      nextColumns.push(checkboxColumn);
    }
    pipeline.columns(nextColumns);

    // @ts-ignore
    pipeline.appendRowPropsGetter((row, rowIndex) => {
      const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
      if (!fullKeySet.has(rowKey)) {
        // If rowKey is not in fullKeySet this row was generated after multiSelect; skip processing
        return;
      }
      const style = {};
      let className = '';
      let onClick;
      const checked = set.has(rowKey);
      if (opts.highlightRowWhenSelected && checked) {
        className = 'highlight';
      }
      if (clickArea === 'row') {
        const disabled = isDisabled(row, rowIndex);
        if (!disabled) {
          style.cursor = 'pointer';
          onClick = e => {
            if (opts.stopClickEventPropagation) {
              e.stopPropagation();
            }
            onCheckboxChange(checked, rowKey, e.shiftKey);
          };
        }
      }
      return {
        className,
        style,
        onClick
      };
    });
    return pipeline;
    function onCheckboxChange(prevChecked, key, batch) {
      let batchKeys = [key];
      if (batch && lastKey) {
        const lastIdx = allKeys.indexOf(lastKey);
        const cntIdx = allKeys.indexOf(key);
        const [start, end] = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx];
        batchKeys = allKeys.slice(start, end + 1);
      }
      if (prevChecked) {
        onChange?.(_others.arrayUtils.diff(value, batchKeys), key, batchKeys, 'uncheck');
      } else {
        onChange?.(_others.arrayUtils.merge(value, batchKeys), key, batchKeys, 'check');
      }
    }
  };
}