linkmore-design/es/card-table/card/PictureTextColumn.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useMemo, useRef } from 'react';
import cn from 'classnames';
import Typography from "../../typography";
import Checkbox from "../../checkbox";
import Button from "../../button";
import IconFont from "../../icon-font";
import Dropdown from "../../dropdown";
import message from "../../message";
import Image from "../../image";
var Paragraph = Typography.Paragraph;

// 上图下文
var PictureTextColumn = function PictureTextColumn(_ref) {
  var index = _ref.index,
    cell = _ref.cell,
    table = _ref.table,
    checked = _ref.checked;
  var cellKey = table.cellKey,
    state = table.state,
    defaultConfig = table.defaultConfig,
    cellClick = table.cellClick,
    cellDoubleClick = table.cellDoubleClick,
    toggleCheckboxKey = table.toggleCheckboxKey;
  var trigger = state.checkboxConfig.trigger;
  var clickFlag = useRef(null);
  var resetDefaultConfig = _objectSpread({
    checkbox: true,
    imgurl: 'imgurl',
    title: function title() {
      return '物料名称';
    },
    code: 'code',
    operate: null,
    extend: null,
    extra: null
  }, defaultConfig);

  // 复选框改变事件, 将复选数据保存到缓存中
  var onSelectChange = function onSelectChange(val, trigger) {
    toggleCheckboxKey(cell[cellKey], {
      cell: cell,
      cellIndex: index,
      trigger: trigger
    });
  };

  // 单元格单击事件
  var onClick = function onClick() {
    // clearTimeout(clickFlag.current); // 清除第一个单击事件
    // clickFlag.current = setTimeout(() => {
    // 触发区域为单元格时仅触发复选事件
    cellClick === null || cellClick === void 0 ? void 0 : cellClick(cell, index);
    if (trigger === 'cell') {
      onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(!checked, trigger);
    }
    // }, 200)
  };

  // 单元格双击事件: 双击时避免单击事件触发自己实现
  var onDoubleClick = function onDoubleClick() {
    // clearTimeout(clickFlag.current); // 清除第一个单击事件
    cellDoubleClick === null || cellDoubleClick === void 0 ? void 0 : cellDoubleClick(cell, index);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "card_PTC"
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('card_PTC_container', checked && 'checked'),
    onClick: onClick,
    onDoubleClick: onDoubleClick
  }, resetDefaultConfig.checkbox && /*#__PURE__*/React.createElement("div", {
    className: "card_checkbox",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(Checkbox, {
    checked: checked,
    onChange: function onChange(e) {
      return onSelectChange(e.target.checked);
    }
  })), resetDefaultConfig.operate || resetDefaultConfig.extra ? /*#__PURE__*/React.createElement("div", {
    className: "card_extra",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(Dropdown, {
    placement: "bottomRight",
    trigger: "click",
    overlay: function overlay() {
      return (resetDefaultConfig.operate || resetDefaultConfig.extra)(cell, table);
    }
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "lmweb-gengduotianchong"
  }))) : null, /*#__PURE__*/React.createElement("div", {
    className: "card_PTC_top"
  }, typeof resetDefaultConfig.imgurl === 'function' ? resetDefaultConfig.imgurl(cell, table) : /*#__PURE__*/React.createElement(Image, {
    src: cell[resetDefaultConfig.imgurl],
    fallback: ""
  })), /*#__PURE__*/React.createElement("div", {
    className: "card_PTC_center"
  }, resetDefaultConfig.title ? /*#__PURE__*/React.createElement("div", {
    className: "card_title lm-font-middle-bold"
  }, typeof resetDefaultConfig.title === 'function' ? resetDefaultConfig.title(cell, table) : cell[resetDefaultConfig.title]) : null, resetDefaultConfig.code ? /*#__PURE__*/React.createElement("div", {
    className: "card_copy_text"
  }, typeof resetDefaultConfig.code === 'function' ? resetDefaultConfig.code(cell, table) : /*#__PURE__*/React.createElement(Paragraph, {
    copyable: {
      tooltips: false,
      onCopy: function onCopy() {
        return message.success('复制成功！', 1.5);
      }
    },
    ellipsis: true
  }, cell[resetDefaultConfig.code])) : null), /*#__PURE__*/React.createElement("div", {
    className: "card_PTC_bottom"
  }, resetDefaultConfig.extend ? resetDefaultConfig.extend(cell, table) : null)));
};
export default PictureTextColumn;