linkmore-design/lib/chart-table/table/Item.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 _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _checkbox = _interopRequireDefault(require("../../checkbox"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _image = _interopRequireDefault(require("../../image"));
/** 获取列配置render */
const useColumn = layoutProps => {
  const {
    record,
    instance
  } = layoutProps;
  const {
    columns,
    fieldNames,
    headerTitleRender,
    tagRender,
    headerCodeRender
  } = instance;

  /** 优先取值自定义渲染内容 Render, 其次取值列配置的渲染内容render, 最后取值数据字段 */
  const getRender = field => {
    const dataIndex = fieldNames?.[field];
    const findCol = columns?.find(col => col.dataIndex === dataIndex);
    const text = record[dataIndex];
    if (findCol?.render) return findCol.render?.(text, record);
    return text;
  };
  const title = headerTitleRender ? headerTitleRender?.(layoutProps) : getRender('title');
  const tag = tagRender ? tagRender?.(layoutProps) : getRender('tag');
  const code = headerCodeRender ? headerCodeRender?.(layoutProps) : getRender('code');
  return {
    title,
    tag,
    code
  };
};
const ContentHeader = layoutProps => {
  const {
    instance
  } = layoutProps;
  const {
    actionsRender,
    prefixCls
  } = instance;
  const {
    title,
    tag,
    code
  } = useColumn(layoutProps);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-content-header`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "header-wrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "title-wrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "safe-area-title"
  }, title), /*#__PURE__*/_react.default.createElement("div", {
    className: "dynamic-extra"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "extra-tag"
  }, tag), /*#__PURE__*/_react.default.createElement("div", {
    className: "extra-operate"
  }, actionsRender ? actionsRender(layoutProps) : /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lm-icon-a-tongyonga2gengduo"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "safe-area-code"
  }, code)));
};
const Item = ({
  col,
  record
}) => {
  const text = record[col.dataIndex];
  const content = col.render ? col.render(text, record) : text;
  const title = typeof col.title === 'function' ? col.title(text, record) : col.title;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "desc-item"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "desc-label"
  }, title), /*#__PURE__*/_react.default.createElement("div", {
    className: "desc-content"
  }, content));
};
const ContentBody = layoutProps => {
  const {
    instance
  } = layoutProps;
  const {
    columns,
    contentColumn,
    contentRender,
    contentStyle,
    prefixCls
  } = instance;
  if (contentRender) return contentRender(layoutProps);
  const rowCSSProperties = {
    gridTemplateColumns: `repeat(${contentColumn}, 1fr)`,
    ...contentStyle
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-content-body`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-grid-wrapper`,
    style: rowCSSProperties
  }, columns.map(col => /*#__PURE__*/_react.default.createElement(Item, (0, _extends2.default)({
    key: col?.key || col?.dataIndex,
    col: col
  }, layoutProps)))));
};

/** 图片容器: 宽高比 3:4, 容器固定宽高比, 由内部图片适应容器 */
const Thumb = layoutProps => {
  const {
    instance
  } = layoutProps;
  const {
    imageRender,
    thumbRender,
    prefixCls
  } = instance;
  if (thumbRender) {
    return thumbRender(layoutProps);
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-card-thumb`
  }, imageRender ? imageRender(layoutProps) : /*#__PURE__*/_react.default.createElement(_image.default, {
    src: "https://linkmore-scm-test.oss-cn-hangzhou.aliyuncs.com/BizFile/4595/Product/1694162925394-bc2fc29b2bbb513109a3bff9ba670ca2.jpg?x-oss-process=image/resize,w_260",
    alt: "",
    height: "100%"
  }));
};
const CellContent = layoutProps => {
  const [isHover, setIsHover] = (0, _react.useState)(false);
  const {
    record,
    instance
  } = layoutProps;
  const {
    headerRender,
    id,
    prefixCls,
    checkboxConfig,
    onClick,
    onDoubleClick,
    onCheckboxChange
  } = instance;
  const key = record[id];
  const isSelected = checkboxConfig.selected?.includes(key);

  /** 选中事件防抖操作: 立即执行 */
  const {
    run
  } = (0, _ahooks.useDebounceFn)(() => {
    checkboxConfig.toggle(key);
    typeof onCheckboxChange === 'function' && onCheckboxChange?.({
      checked: !isSelected,
      record,
      instance
    });
  }, {
    wait: 300,
    leading: true,
    trailing: false
  });

  /** 单击事件防抖操作: 立即执行 */
  const {
    run: runClick
  } = (0, _ahooks.useDebounceFn)(() => {
    checkboxConfig.trigger === 'cell' && run();
    onClick?.(record, instance);
  }, {
    wait: 300,
    leading: true,
    trailing: false
  });
  const onMouseEnter = () => setIsHover(true);
  const onMouseLeave = () => setIsHover(false);
  const headerDom = headerRender ? headerRender?.(layoutProps, /*#__PURE__*/_react.default.createElement(ContentHeader, layoutProps)) : /*#__PURE__*/_react.default.createElement(ContentHeader, layoutProps);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${prefixCls}-card-wrapper`, isSelected && `${prefixCls}-card-selected`, isHover && `${prefixCls}-card-hover`),
    onClick: () => runClick(),
    onDoubleClick: () => onDoubleClick?.(record, instance),
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-card-checkbox`
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    checked: isSelected,
    onChange: run
  })), /*#__PURE__*/_react.default.createElement(Thumb, layoutProps), /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-card-complex`
  }, headerDom, /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(ContentBody, layoutProps)));
};
var _default = CellContent;
exports.default = _default;