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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _typography = _interopRequireDefault(require("../../typography"));
var _checkbox = _interopRequireDefault(require("../../checkbox"));
var _button = _interopRequireDefault(require("../../button"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _message = _interopRequireDefault(require("../../message"));
var _image = _interopRequireDefault(require("../../image"));
const {
  Paragraph
} = _typography.default;

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

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

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

  // 单元格双击事件: 双击时避免单击事件触发自己实现
  const onDoubleClick = () => {
    // clearTimeout(clickFlag.current); // 清除第一个单击事件
    cellDoubleClick?.(cell, index);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "card_PTC"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('card_PTC_container', checked && 'checked'),
    onClick: onClick,
    onDoubleClick: onDoubleClick
  }, resetDefaultConfig.checkbox && /*#__PURE__*/_react.default.createElement("div", {
    className: "card_checkbox",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    checked: checked,
    onChange: e => onSelectChange(e.target.checked)
  })), resetDefaultConfig.operate || resetDefaultConfig.extra ? /*#__PURE__*/_react.default.createElement("div", {
    className: "card_extra",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    placement: "bottomRight",
    trigger: "click",
    overlay: () => (resetDefaultConfig.operate || resetDefaultConfig.extra)(cell, table)
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-gengduotianchong"
  }))) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: "card_PTC_top"
  }, typeof resetDefaultConfig.imgurl === 'function' ? resetDefaultConfig.imgurl(cell, table) : /*#__PURE__*/_react.default.createElement(_image.default, {
    src: cell[resetDefaultConfig.imgurl],
    fallback: ""
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "card_PTC_center"
  }, resetDefaultConfig.title ? /*#__PURE__*/_react.default.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.default.createElement("div", {
    className: "card_copy_text"
  }, typeof resetDefaultConfig.code === 'function' ? resetDefaultConfig.code(cell, table) : /*#__PURE__*/_react.default.createElement(Paragraph, {
    copyable: {
      tooltips: false,
      onCopy: () => _message.default.success('复制成功！', 1.5)
    },
    ellipsis: true
  }, cell[resetDefaultConfig.code])) : null), /*#__PURE__*/_react.default.createElement("div", {
    className: "card_PTC_bottom"
  }, resetDefaultConfig.extend ? resetDefaultConfig.extend(cell, table) : null)));
};
var _default = PictureTextColumn;
exports.default = _default;