linkmore-design/es/chart-table/table/Item.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { useDebounceFn } from 'ahooks';
import classNames from 'classnames';
import React, { useState } from 'react';
import Checkbox from "../../checkbox";
import IconFont from "../../icon-font";
import Image from "../../image";

/** 获取列配置render */
var useColumn = function useColumn(layoutProps) {
  var record = layoutProps.record,
    instance = layoutProps.instance;
  var columns = instance.columns,
    fieldNames = instance.fieldNames,
    headerTitleRender = instance.headerTitleRender,
    tagRender = instance.tagRender,
    headerCodeRender = instance.headerCodeRender;

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

/** 图片容器: 宽高比 3:4, 容器固定宽高比, 由内部图片适应容器 */
var Thumb = function Thumb(layoutProps) {
  var instance = layoutProps.instance;
  var imageRender = instance.imageRender,
    thumbRender = instance.thumbRender,
    prefixCls = instance.prefixCls;
  if (thumbRender) {
    return thumbRender(layoutProps);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-card-thumb")
  }, imageRender ? imageRender(layoutProps) : /*#__PURE__*/React.createElement(Image, {
    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%"
  }));
};
var CellContent = function CellContent(layoutProps) {
  var _checkboxConfig$selec;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isHover = _useState2[0],
    setIsHover = _useState2[1];
  var record = layoutProps.record,
    instance = layoutProps.instance;
  var headerRender = instance.headerRender,
    id = instance.id,
    prefixCls = instance.prefixCls,
    checkboxConfig = instance.checkboxConfig,
    onClick = instance.onClick,
    _onDoubleClick = instance.onDoubleClick,
    onCheckboxChange = instance.onCheckboxChange;
  var key = record[id];
  var isSelected = (_checkboxConfig$selec = checkboxConfig.selected) === null || _checkboxConfig$selec === void 0 ? void 0 : _checkboxConfig$selec.includes(key);

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

  /** 单击事件防抖操作: 立即执行 */
  var _useDebounceFn2 = useDebounceFn(function () {
      checkboxConfig.trigger === 'cell' && run();
      onClick === null || onClick === void 0 ? void 0 : onClick(record, instance);
    }, {
      wait: 300,
      leading: true,
      trailing: false
    }),
    runClick = _useDebounceFn2.run;
  var onMouseEnter = function onMouseEnter() {
    return setIsHover(true);
  };
  var onMouseLeave = function onMouseLeave() {
    return setIsHover(false);
  };
  var headerDom = headerRender ? headerRender === null || headerRender === void 0 ? void 0 : headerRender(layoutProps, /*#__PURE__*/React.createElement(ContentHeader, layoutProps)) : /*#__PURE__*/React.createElement(ContentHeader, layoutProps);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-card-wrapper"), isSelected && "".concat(prefixCls, "-card-selected"), isHover && "".concat(prefixCls, "-card-hover")),
    onClick: function onClick() {
      return runClick();
    },
    onDoubleClick: function onDoubleClick() {
      return _onDoubleClick === null || _onDoubleClick === void 0 ? void 0 : _onDoubleClick(record, instance);
    },
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-card-checkbox")
  }, /*#__PURE__*/React.createElement(Checkbox, {
    checked: isSelected,
    onChange: run
  })), /*#__PURE__*/React.createElement(Thumb, layoutProps), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-card-complex")
  }, headerDom, /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(ContentBody, layoutProps)));
};
export default CellContent;