linkmore-design/lib/table/rc-table/Cell/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ref = require("rc-util/lib/ref");
var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
var React = _interopRequireWildcard(require("react"));
var _shallowequal = _interopRequireDefault(require("shallowequal"));
var _BodyContext = _interopRequireDefault(require("../context/BodyContext"));
var _HoverContext = _interopRequireDefault(require("../context/HoverContext"));
var _PerfContext = _interopRequireDefault(require("../context/PerfContext"));
var _StickyContext = _interopRequireDefault(require("../context/StickyContext"));
var _ContextSelector = require("../ContextSelector");
var _valueUtil = require("../utils/valueUtil");
/** Check if cell is in hover range */
function inHoverRange(cellStartRow, cellRowSpan, startRow, endRow) {
  const cellEndRow = cellStartRow + cellRowSpan - 1;
  return cellStartRow <= endRow && cellEndRow >= startRow;
}
function isRenderCell(data) {
  return data && typeof data === 'object' && !Array.isArray(data) && ! /*#__PURE__*/React.isValidElement(data);
}
function isRefComponent(component) {
  // String tag component also support ref
  if (typeof component === 'string') {
    return true;
  }
  return (0, _ref.supportRef)(component);
}
const getTitleFromCellRenderChildren = ({
  ellipsis,
  rowType,
  children
}) => {
  let title;
  const ellipsisConfig = ellipsis === true ? {
    showTitle: true
  } : ellipsis;
  if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
    if (typeof children === 'string' || typeof children === 'number') {
      title = children.toString();
    } else if ( /*#__PURE__*/React.isValidElement(children) && typeof children.props.children === 'string') {
      title = children.props.children;
    }
  }
  return title;
};
function Cell({
  prefixCls,
  className,
  record,
  index,
  renderIndex,
  dataIndex,
  render,
  children,
  component: Component = 'td',
  colSpan,
  rowSpan,
  // This is already merged on WrapperCell
  fixLeft,
  fixRight,
  firstFixLeft,
  lastFixLeft,
  firstFixRight,
  lastFixRight,
  appendNode,
  additionalProps = {},
  ellipsis,
  align,
  rowType,
  isSticky,
  // Hover
  hovering,
  onHover
}, ref) {
  const cellPrefixCls = `${prefixCls}-cell`;
  const perfRecord = React.useContext(_PerfContext.default);
  const supportSticky = React.useContext(_StickyContext.default);
  const allColumnsFixedLeft = (0, _ContextSelector.useContextSelector)(_BodyContext.default, 'allColumnsFixedLeft');

  // ==================== Child Node ====================
  const [childNode, legacyCellProps] = React.useMemo(() => {
    if ((0, _valueUtil.validateValue)(children)) {
      return [children];
    }
    let value = (0, _valueUtil.getPathValue)(record, dataIndex);

    // Customize render node
    let returnChildNode = value;
    let returnCellProps = undefined;
    if (render) {
      const renderData = render(value, record, renderIndex);
      if (isRenderCell(renderData)) {
        if (process.env.NODE_ENV !== 'production') {
          (0, _warning.default)(false, '`columns.render` return cell props is deprecated with perf issue, please use `onCell` instead.');
        }
        returnChildNode = renderData.children;
        returnCellProps = renderData.props;
        perfRecord.renderWithProps = true;
      } else {
        returnChildNode = renderData;
      }
    }
    // guyue start
    if (returnChildNode === undefined) {
      returnChildNode = '-';
    }
    // guyue end
    return [returnChildNode, returnCellProps];
  }, [/* eslint-disable react-hooks/exhaustive-deps */
  // Always re-render if `renderWithProps`
  perfRecord.renderWithProps ? Math.random() : 0, /* eslint-enable */
  children, dataIndex, perfRecord, record, render, renderIndex]);
  let mergedChildNode = childNode;

  // Not crash if final `childNode` is not validate ReactNode
  if (typeof mergedChildNode === 'object' && !Array.isArray(mergedChildNode) && ! /*#__PURE__*/React.isValidElement(mergedChildNode)) {
    mergedChildNode = null;
  }
  if (ellipsis && (lastFixLeft || firstFixRight)) {
    mergedChildNode = /*#__PURE__*/React.createElement("span", {
      className: `${cellPrefixCls}-content`
    }, mergedChildNode);
  }
  const {
    colSpan: cellColSpan,
    rowSpan: cellRowSpan,
    style: cellStyle,
    className: cellClassName,
    ...restCellProps
  } = legacyCellProps || {};
  const mergedColSpan = (cellColSpan !== undefined ? cellColSpan : colSpan) ?? 1;
  const mergedRowSpan = (cellRowSpan !== undefined ? cellRowSpan : rowSpan) ?? 1;
  if (mergedColSpan === 0 || mergedRowSpan === 0) {
    return null;
  }

  // ====================== Fixed =======================
  const fixedStyle = {};
  const isFixLeft = typeof fixLeft === 'number' && supportSticky;
  const isFixRight = typeof fixRight === 'number' && supportSticky;
  if (isFixLeft) {
    fixedStyle.position = 'sticky';
    fixedStyle.left = fixLeft;
  }
  if (isFixRight) {
    fixedStyle.position = 'sticky';
    fixedStyle.right = fixRight;
  }

  // ====================== Align =======================
  const alignStyle = {};
  if (align) {
    alignStyle.textAlign = align;
  }

  // ====================== Hover =======================
  const onMouseEnter = event => {
    if (record) {
      onHover(index, index + mergedRowSpan - 1);
    }
    additionalProps?.onMouseEnter?.(event);
  };
  const onMouseLeave = event => {
    if (record) {
      onHover(-1, -1);
    }
    additionalProps?.onMouseLeave?.(event);
  };

  // ====================== Render ======================
  const title = getTitleFromCellRenderChildren({
    rowType,
    ellipsis,
    children: childNode
  });
  const componentProps = {
    title,
    ...restCellProps,
    ...additionalProps,
    colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
    rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
    className: (0, _classnames.default)(cellPrefixCls, className, {
      [`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky,
      [`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky,
      [`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky,
      [`${cellPrefixCls}-fix-left-all`]: lastFixLeft && allColumnsFixedLeft && supportSticky,
      [`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky,
      [`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
      [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
      [`${cellPrefixCls}-ellipsis`]: ellipsis,
      [`${cellPrefixCls}-with-append`]: appendNode,
      [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
      [`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering
    }, additionalProps.className, cellClassName),
    style: {
      ...additionalProps.style,
      ...alignStyle,
      ...fixedStyle,
      ...cellStyle
    },
    onMouseEnter,
    onMouseLeave,
    ref: isRefComponent(Component) ? ref : null
  };
  return /*#__PURE__*/React.createElement(Component, componentProps, appendNode, mergedChildNode);
}
const RefCell = /*#__PURE__*/React.forwardRef(Cell);
RefCell.displayName = 'Cell';
const comparePropList = ['expanded', 'className', 'hovering'];
const MemoCell = /*#__PURE__*/React.memo(RefCell, (prev, next) => {
  if (next.shouldCellUpdate) {
    return (
      // Additional handle of expanded logic
      comparePropList.every(propName => prev[propName] === next[propName]) &&
      // User control update logic
      !next.shouldCellUpdate(next.record, prev.record)
    );
  }
  return (0, _shallowequal.default)(prev, next);
});

/** Inject hover data here, we still wish MemoCell keep simple `shouldCellUpdate` logic */
const WrappedCell = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    index,
    additionalProps = {},
    colSpan,
    rowSpan
  } = props;
  const {
    colSpan: cellColSpan,
    rowSpan: cellRowSpan
  } = additionalProps;
  const mergedColSpan = colSpan ?? cellColSpan;
  const mergedRowSpan = rowSpan ?? cellRowSpan;
  const {
    onHover,
    hovering
  } = (0, _ContextSelector.useContextSelector)(_HoverContext.default, cxt => {
    const isHovering = inHoverRange(index, mergedRowSpan || 1, cxt?.startRow, cxt?.endRow);
    return {
      onHover: cxt?.onHover,
      hovering: isHovering
    };
  });
  return /*#__PURE__*/React.createElement(MemoCell, (0, _extends2.default)({}, props, {
    colSpan: mergedColSpan,
    rowSpan: mergedRowSpan,
    hovering: hovering,
    ref: ref,
    onHover: onHover
  }));
});
WrappedCell.displayName = 'WrappedCell';
var _default = WrappedCell;
exports.default = _default;