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

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.singleSelect = singleSelect;
var _react = _interopRequireDefault(require("react"));
var _internals = require("../../internals");
var _others = require("../../utils/others");
function getFirstDefinedValue(...values) {
  for (let i = 0; i < values.length; i++) {
    const v = values[i];
    if (v !== undefined) {
      return v;
    }
  }
}
function singleSelect(opts = {}) {
  return function singleSelectStep(pipeline) {
    const Radio = pipeline.ctx.components.Radio;
    if (Radio == null) {
      throw new Error('使用 singleSelect 之前需要通过 pipeline context 设置 components.Radio');
    }
    const stateKey = 'singleSelect';
    const clickArea = opts.clickArea ?? 'radio';
    const isDisabled = opts.isDisabled ?? (0, _others.always)(false);
    const primaryKey = pipeline.ensurePrimaryKey('singleSelect');
    const value = getFirstDefinedValue(opts.value, pipeline.getStateAtKey(stateKey), opts.defaultValue);
    const onChange = rowKey => {
      opts.onChange?.(rowKey);
      pipeline.setStateAtKey(stateKey, rowKey);
    };
    const radioColumn = {
      headerText: '',
      field: '__ali_table_single_select_radio_column__',
      width: 50,
      textAlign: 'center',
      ...opts.radioColumn,
      getCellProps(val, row, rowIndex) {
        if (clickArea === 'cell') {
          const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
          const disabled = isDisabled(row, rowIndex);
          return {
            style: {
              cursor: disabled ? 'not-allowed' : 'pointer'
            },
            onClick: disabled ? undefined : e => {
              if (opts.stopClickEventPropagation) {
                e.stopPropagation();
              }
              onChange(rowKey);
            }
          };
        } else {
          return {};
        }
      },
      template: args => {
        const {
          rowData: row,
          index: rowIndex
        } = args;
        const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
        return /*#__PURE__*/_react.default.createElement(Radio, {
          checked: value === rowKey,
          disabled: isDisabled(row, rowIndex),
          onChange: clickArea === 'radio' ? (arg1, arg2) => {
            const nativeEvent = arg2?.nativeEvent ?? arg1?.nativeEvent;
            if (nativeEvent && opts.stopClickEventPropagation) {
              nativeEvent.stopPropagation();
            }
            onChange(rowKey);
          } : undefined
        });
      }
    };
    const nextColumns = pipeline.getColumns().slice();
    const radioPlacement = opts.radioPlacement ?? 'start';
    if (radioPlacement === 'start') {
      nextColumns.unshift(radioColumn);
    } else {
      nextColumns.push(radioColumn);
    }
    pipeline.columns(nextColumns);
    pipeline.appendRowPropsGetter((row, rowIndex) => {
      const rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
      const style = {};
      let className = '';
      let onClick;
      if (opts.highlightRowWhenSelected) {
        if (value === rowKey) {
          className = 'highlight';
        }
      }
      if (clickArea === 'row' && !isDisabled(row, rowIndex)) {
        style.cursor = 'pointer';
        onClick = e => {
          if (opts.stopClickEventPropagation) {
            e.stopPropagation();
          }
          onChange(rowKey);
        };
      }
      return {
        className: className ?? '',
        style,
        onClick
      };
    });
    return pipeline;
  };
}