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

🌈 🚀lm组件库。🚀

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

// 左图右文
var PictureTextRow = function PictureTextRow(_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,
    checkboxChange = table.checkboxChange,
    ellipsis = table.ellipsis;
  var trigger = state.checkboxConfig.trigger;
  var resetDefaultConfig = _objectSpread({
    checkbox: true,
    imgurl: 'imgurl',
    title: function title() {
      return '物料名称';
    },
    code: 'code',
    operate: null,
    extend: null,
    columns: null,
    footer: null,
    // 底部区域
    extra: null
  }, defaultConfig);

  // 复选框改变事件, 将复选数据保存到缓存中
  var onSelctChange = function onSelctChange(val) {
    toggleCheckboxKey(cell[cellKey]);
    checkboxChange === null || checkboxChange === void 0 ? void 0 : checkboxChange(val, cell, index);
  };

  // 单元格单击事件
  var onClick = function onClick() {
    cellClick === null || cellClick === void 0 ? void 0 : cellClick(cell, index);
    if (trigger === 'cell') {
      onSelctChange === null || onSelctChange === void 0 ? void 0 : onSelctChange(!checked);
    }
  };

  // 单元格双击事件: 双击时避免单击事件触发自己实现
  var onDoubleClick = function onDoubleClick() {
    cellDoubleClick === null || cellDoubleClick === void 0 ? void 0 : cellDoubleClick(cell, index);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "card_PTR"
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('card_PTR_container', checked && 'checked')
  }, /*#__PURE__*/React.createElement("div", {
    className: "card_PTR_body",
    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 onSelctChange(e.target.checked);
    }
  })), 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.extra(cell, table);
    }
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "lmweb-gengduotianchong"
  }))) : null, /*#__PURE__*/React.createElement("div", {
    className: "card_PTR_left"
  }, typeof resetDefaultConfig.imgurl === 'function' ? resetDefaultConfig.imgurl(cell, table) : /*#__PURE__*/React.createElement(Image, {
    src: cell[resetDefaultConfig.imgurl],
    fallback: ""
  })), /*#__PURE__*/React.createElement("div", {
    className: "card_PTR_right"
  }, 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, resetDefaultConfig.columns ? /*#__PURE__*/React.createElement("div", {
    className: "PTR_column"
  }, /*#__PURE__*/React.createElement("div", {
    className: "PTR_column_box"
  }, resetDefaultConfig.columns.map(function (v, idx) {
    var isVisible = v.show || typeof v.show !== 'boolean';
    return isVisible ? /*#__PURE__*/React.createElement("div", {
      key: (v === null || v === void 0 ? void 0 : v.dataIndex) || idx
    }, v.title, "\uFF1A", /*#__PURE__*/React.createElement("div", {
      className: cn({
        ellipsis: ellipsis
      })
    }, typeof v.render === 'function' ? v.render(cell[v.dataIndex], cell, table) : cell[v.dataIndex])) : null;
  }))) : null, resetDefaultConfig.extend ? /*#__PURE__*/React.createElement("div", {
    className: "PTR_extend"
  }, resetDefaultConfig.extend(cell, table)) : null, resetDefaultConfig.desc ? /*#__PURE__*/React.createElement("div", {
    className: "PTR_desc"
  }, typeof resetDefaultConfig.desc === 'function' ? resetDefaultConfig.desc(cell, table) : cell[resetDefaultConfig.desc]) : null)), /*#__PURE__*/React.createElement("div", {
    className: "card_PTR_footer"
  }, resetDefaultConfig.footer || resetDefaultConfig.operate ? (resetDefaultConfig.footer || resetDefaultConfig.operate)(cell, table) : null)));
};
export default PictureTextRow;