@douyinfe/semi-ui/lib/cjs/table/Body/BaseRow.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.baseRowPropTypes = void 0;
var _pick2 = _interopRequireDefault(require("lodash/pick"));
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
var _omit2 = _interopRequireDefault(require("lodash/omit"));
var _stubTrue2 = _interopRequireDefault(require("lodash/stubTrue"));
var _get2 = _interopRequireDefault(require("lodash/get"));
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _each2 = _interopRequireDefault(require("lodash/each"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
var _shallowEqualObjects = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/shallowEqualObjects"));
var _tableRowFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/table/tableRowFoundation"));
var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
var _baseComponent = _interopRequireDefault(require("../../_base/baseComponent"));
var _TableCell = _interopRequireDefault(require("../TableCell"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/**
 * avoid affected by https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types
 */
const baseRowPropTypes = exports.baseRowPropTypes = {
  anyColumnFixed: _propTypes.default.bool,
  cellWidths: _propTypes.default.array.isRequired,
  className: _propTypes.default.string,
  columns: _propTypes.default.array.isRequired,
  components: _propTypes.default.object.isRequired,
  disabled: _propTypes.default.bool,
  expandIcon: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
  expandableRow: _propTypes.default.bool,
  expanded: _propTypes.default.bool,
  displayNone: _propTypes.default.bool,
  expandedRow: _propTypes.default.bool,
  fixed: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  hideExpandedColumn: _propTypes.default.bool,
  hovered: _propTypes.default.bool.isRequired,
  indent: _propTypes.default.number,
  indentSize: _propTypes.default.number,
  index: _propTypes.default.number,
  isSection: _propTypes.default.bool,
  level: _propTypes.default.number,
  onDidUpdate: _propTypes.default.func,
  onHover: _propTypes.default.func,
  onRow: _propTypes.default.func,
  onRowClick: _propTypes.default.func,
  onRowContextMenu: _propTypes.default.func,
  onRowDoubleClick: _propTypes.default.func,
  onRowMouseEnter: _propTypes.default.func,
  onRowMouseLeave: _propTypes.default.func,
  prefixCls: _propTypes.default.string,
  record: _propTypes.default.object,
  renderExpandIcon: _propTypes.default.func,
  replaceClassName: _propTypes.default.string,
  rowExpandable: _propTypes.default.func,
  rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
  selected: _propTypes.default.bool,
  store: _propTypes.default.object,
  style: _propTypes.default.object,
  virtualized: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
  visible: _propTypes.default.bool.isRequired
};
class TableRow extends _baseComponent.default {
  get adapter() {
    var _this = this;
    return Object.assign(Object.assign({}, super.adapter), {
      notifyClick: function () {
        return _this.props.onRowClick(...arguments);
      },
      notifyDoubleClick: function () {
        return _this.props.onRowDoubleClick(...arguments);
      },
      notifyMouseLeave: function () {
        _this.props.onHover(false, _this.props.rowKey);
        _this.props.onRowMouseEnter(...arguments);
      },
      notifyMouseEnter: function () {
        _this.props.onHover(true, _this.props.rowKey);
        _this.props.onRowMouseEnter(...arguments);
      }
    });
  }
  constructor(props) {
    super(props);
    // Pass true to render the tree-shaped expand button
    this.renderExpandIcon = record => {
      const {
        renderExpandIcon
      } = this.props;
      return renderExpandIcon(record, true);
    };
    this.handleMouseEnter = e => {
      this.foundation.handleMouseEnter(e);
      const customRowProps = this.adapter.getCache('customRowProps');
      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseEnter) === 'function') {
        customRowProps.onMouseEnter(e);
      }
    };
    this.handleMouseLeave = e => {
      this.foundation.handleMouseLeave(e);
      const customRowProps = this.adapter.getCache('customRowProps');
      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseLeave) === 'function') {
        customRowProps.onMouseLeave(e);
      }
    };
    this.handleClick = e => {
      this.foundation.handleClick(e);
      const customRowProps = this.adapter.getCache('customRowProps');
      if (customRowProps && typeof customRowProps.onClick === 'function') {
        customRowProps.onClick(e);
      }
    };
    this.foundation = new _tableRowFoundation.default(this.adapter);
  }
  componentDidMount() {
    // fix #745
    // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
    const {
      onRow,
      index,
      record
    } = this.props;
    const customRowProps = this.adapter.getCache('customRowProps');
    if (typeof customRowProps === 'undefined') {
      const _a = onRow(record, index) || {},
        {
          className: customClassName,
          style: customStyle
        } = _a,
        rowProps = __rest(_a, ["className", "style"]);
      this.adapter.setCache('customRowProps', Object.assign({}, rowProps));
    }
  }
  shouldComponentUpdate(nextProps) {
    /**
      * Shallow comparison of incoming props to simulate PureComponent
      * Deep comparison cellWidths
      *
      * 浅层对比传入的 props，模拟 PureComponent
      * 深比较 cellWidths
      */
    const omitProps = ['cellWidths'];
    const isPropsShallowEqual = (0, _shallowEqualObjects.default)((0, _omit2.default)(nextProps, omitProps), (0, _omit2.default)(this.props, omitProps));
    if (!isPropsShallowEqual || !(0, _isEqual2.default)((0, _pick2.default)(nextProps, omitProps), (0, _pick2.default)(this.props, omitProps))) {
      return true;
    }
    return false;
  }
  renderCells() {
    const {
      columns,
      record,
      index,
      prefixCls,
      fixed,
      components,
      expandableRow,
      level,
      expandIcon,
      rowExpandable,
      isSection,
      expandedRow,
      virtualized,
      indentSize,
      hideExpandedColumn,
      cellWidths,
      selected,
      expanded,
      disabled,
      onDidUpdate
    } = this.props;
    const BodyCell = (0, _get2.default)(components, 'body.cell', _constants.strings.DEFAULT_COMPONENTS.body.cell);
    const cells = [];
    const displayExpandedColumn = rowExpandable(record);
    let firstIndex = 0;
    // const dataColumns = getDataColumns(columns);
    (0, _each2.default)(columns, (column, columnIndex) => {
      const columnKey = (0, _get2.default)(column, 'key');
      const expandableProps = {};
      if (fixed !== 'right') {
        if ((0, _utils.isInnerColumnKey)(columnKey)) {
          firstIndex++;
        }
        if (expandableRow && columnIndex === firstIndex) {
          expandableProps.renderExpandIcon = this.renderExpandIcon;
          if (hideExpandedColumn || isSection) {
            expandableProps.expandIcon = expandIcon != null ? expandIcon : true;
          }
        }
        // Only the first data row will be indented
        if (level != null && columnIndex === firstIndex) {
          expandableProps.indent = level;
          const isBool = typeof expandIcon === 'boolean';
          const hasExpandIcon = expandIcon !== false || !isBool && expandIcon !== null;
          // 如果 expandIcon 为空，不需要 indent
          if (!expandableRow && hideExpandedColumn && hasExpandIcon) {
            expandableProps.indent = level + 1;
          }
        }
      }
      if ((0, _utils.isExpandedColumn)(column) && !displayExpandedColumn) {
        cells.push(/*#__PURE__*/_react.default.createElement(_TableCell.default, {
          key: columnIndex,
          colIndex: columnIndex,
          isSection: isSection
        }));
      } else if (!(0, _utils.isScrollbarColumn)(column)) {
        const diyProps = {};
        if (BodyCell !== _constants.strings.DEFAULT_COMPONENTS.body.cell && virtualized && !expandedRow) {
          diyProps.width = (0, _get2.default)(cellWidths, columnIndex);
        }
        cells.push(/*#__PURE__*/_react.default.createElement(_TableCell.default, Object.assign({
          colIndex: columnIndex
        }, expandableProps, diyProps, {
          hideExpandedColumn: hideExpandedColumn,
          indentSize: indentSize,
          isSection: isSection,
          prefixCls: `${prefixCls}`,
          column: column,
          key: columnIndex,
          index: index,
          record: record,
          component: BodyCell,
          fixedLeft: (0, _utils.isFixedLeft)(column) && (0, _utils.arrayAdd)(cellWidths, 0, columnIndex),
          lastFixedLeft: (0, _utils.isLastLeftFixed)(columns, column),
          fixedRight: (0, _utils.isFixedRight)(column) && (0, _utils.arrayAdd)(cellWidths, columnIndex + 1),
          firstFixedRight: (0, _utils.isFirstFixedRight)(columns, column),
          selected: selected,
          expanded: expanded,
          disabled: disabled,
          onDidUpdate: onDidUpdate
        })));
      }
    });
    return cells;
  }
  render() {
    const {
      style
    } = this.props;
    const {
      components,
      prefixCls,
      selected,
      onRow,
      index,
      className,
      replaceClassName,
      record,
      hovered,
      expanded,
      displayNone,
      expandableRow,
      level,
      expandedRow,
      isSection,
      rowKey
    } = this.props;
    const BodyRow = components.body.row;
    const _a = onRow(record, index) || {},
      {
        className: customClassName,
        style: customStyle
      } = _a,
      rowProps = __rest(_a, ["className", "style"]);
    this.adapter.setCache('customRowProps', Object.assign({}, rowProps));
    const baseRowStyle = Object.assign(Object.assign({}, style), customStyle);
    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? (0, _classnames.default)(replaceClassName, customClassName) : (0, _classnames.default)(className, `${prefixCls}-row`, {
      [`${prefixCls}-row-selected`]: selected,
      [`${prefixCls}-row-expanded`]: expanded,
      [`${prefixCls}-row-hovered`]: hovered,
      [`${prefixCls}-row-hidden`]: displayNone
    }, customClassName);
    const ariaProps = {};
    if (typeof index === 'number') {
      ariaProps['aria-rowindex'] = index + 1;
    }
    if (expandableRow) {
      ariaProps['aria-expanded'] = expanded;
    }
    // if row is expandedRow, set it's level to 2 
    if (expanded || expandedRow) {
      ariaProps['aria-level'] = 2;
    }
    if (typeof level === 'number') {
      ariaProps['aria-level'] = level + 1;
    }
    if (isSection) {
      ariaProps['aria-level'] = 1;
    }
    return /*#__PURE__*/_react.default.createElement(BodyRow, Object.assign({
      role: "row"
    }, ariaProps, rowProps, {
      style: baseRowStyle,
      className: rowCls,
      "data-row-key": rowKey,
      onMouseEnter: this.handleMouseEnter,
      onMouseLeave: this.handleMouseLeave,
      onClick: this.handleClick
    }), this.renderCells());
  }
}
exports.default = TableRow;
TableRow.propTypes = baseRowPropTypes;
TableRow.defaultProps = {
  columns: [],
  rowExpandable: _stubTrue2.default,
  components: {
    body: {
      row: 'tr',
      cell: 'td'
    }
  },
  prefixCls: _constants.cssClasses.PREFIX,
  onRow: _noop2.default,
  onRowClick: _noop2.default,
  onRowDoubleClick: _noop2.default,
  onRowMouseEnter: _noop2.default,
  onRowMouseLeave: _noop2.default,
  onHover: _noop2.default,
  onDidUpdate: _noop2.default,
  visible: true,
  hovered: false,
  selected: false,
  disabled: false
};