@aliretail/react-materials-components/es/TradeTable/index.js

B 端物料组件库

import _Table from "@alifd/next/es/table";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import PropTypes from 'prop-types';
import ImageText from "../ImageText";
import StatusTag from "../StatusTag";

var TradeTable = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(TradeTable, _React$Component);

  function TradeTable() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.renderType = function (type) {
      var extendCells = _this.props.extendCells; // type 类型的 cell 是否存在于扩展 cells 中

      if (extendCells && extendCells[type]) {
        return extendCells[type];
      }

      switch (type) {
        case 'imageText':
          return _this.goodsCell();

        case 'price':
          return _this.priceCell;

        case 'text':
          return _this.textCell;

        case 'deliveryInfo':
          return _this.deliveryInfoCell;

        default:
          return _this.textCell;
      }
    };

    _this.headerRender = function (record) {
      var appendGroupHeader = _this.props.appendGroupHeader;

      if (!record.header) {
        return null;
      }

      var _record$header = record === null || record === void 0 ? void 0 : record.header,
          _record$header$title = _record$header.title,
          title = _record$header$title === void 0 ? [] : _record$header$title,
          orderTag = _record$header.orderTag,
          orderStatus = _record$header.orderStatus;

      return /*#__PURE__*/React.createElement("div", {
        className: "order-title"
      }, /*#__PURE__*/React.createElement("div", {
        className: "left-header"
      }, orderTag && /*#__PURE__*/React.createElement(StatusTag, {
        type: orderTag === null || orderTag === void 0 ? void 0 : orderTag.type,
        text: orderTag.tagText,
        className: "Tag"
      }), title.map(function (item, i) {
        return /*#__PURE__*/React.createElement("span", {
          className: "span-text",
          key: i
        }, item === null || item === void 0 ? void 0 : item.label, ": ", item.value);
      })), /*#__PURE__*/React.createElement("div", {
        className: "right-header"
      }, orderStatus === null || orderStatus === void 0 ? void 0 : orderStatus.map(function (item, i) {
        return /*#__PURE__*/React.createElement(StatusTag, {
          type: item === null || item === void 0 ? void 0 : item.type,
          text: item === null || item === void 0 ? void 0 : item.tagText,
          className: "Tag",
          key: i
        });
      }), appendGroupHeader(record)));
    };

    _this.goodsCell = function () {
      return function (item) {
        return /*#__PURE__*/React.createElement(ImageText, {
          imageUrl: item === null || item === void 0 ? void 0 : item.imageUrl,
          title: item === null || item === void 0 ? void 0 : item.title,
          subTitle: item === null || item === void 0 ? void 0 : item.subTitle,
          description: "SKUID:" + (item === null || item === void 0 ? void 0 : item.description),
          isGiftItem: item === null || item === void 0 ? void 0 : item.isGiftItem,
          isCombineItem: item === null || item === void 0 ? void 0 : item.isCombineItem,
          subTitleLength: item === null || item === void 0 ? void 0 : item.subTitleLength,
          rightTitle: item === null || item === void 0 ? void 0 : item.rightTitle,
          rightSubTitle: item === null || item === void 0 ? void 0 : item.rightSubTitle,
          showBalloon: item === null || item === void 0 ? void 0 : item.showBalloon,
          balloonContent: item === null || item === void 0 ? void 0 : item.balloonContent
        });
      };
    };

    _this.deliveryInfoCell = function (deliveryInfo) {
      return /*#__PURE__*/React.createElement("div", {
        className: "deliveryInfo-cell"
      }, deliveryInfo === null || deliveryInfo === void 0 ? void 0 : deliveryInfo.map(function (item, i) {
        return /*#__PURE__*/React.createElement("div", {
          className: "deliveryInfo-detail",
          key: "deliveryItem-" + i
        }, (item === null || item === void 0 ? void 0 : item.title) && /*#__PURE__*/React.createElement("span", {
          className: "deliveryInfo-detail-title"
        }, item === null || item === void 0 ? void 0 : item.title), (item === null || item === void 0 ? void 0 : item.subTitle) && /*#__PURE__*/React.createElement("span", {
          className: "deliveryInfo-detail-subTitle"
        }, item === null || item === void 0 ? void 0 : item.subTitle), (item === null || item === void 0 ? void 0 : item.description) && /*#__PURE__*/React.createElement("span", {
          className: "deliveryInfo-detail-description"
        }, item === null || item === void 0 ? void 0 : item.description), (item === null || item === void 0 ? void 0 : item.other) && /*#__PURE__*/React.createElement("span", {
          className: "deliveryInfo-detail-other"
        }, item === null || item === void 0 ? void 0 : item.other));
      }));
    };

    _this.priceCell = function (itemPrice) {
      return /*#__PURE__*/React.createElement("div", {
        className: "cell-price"
      }, (itemPrice === null || itemPrice === void 0 ? void 0 : itemPrice.lineationPrice) !== (itemPrice === null || itemPrice === void 0 ? void 0 : itemPrice.currentPrice) && /*#__PURE__*/React.createElement("span", {
        className: "lineThrough"
      }, itemPrice === null || itemPrice === void 0 ? void 0 : itemPrice.lineationPrice), /*#__PURE__*/React.createElement("span", {
        className: "price"
      }, itemPrice === null || itemPrice === void 0 ? void 0 : itemPrice.currentPrice));
    };

    _this.textCell = function (params) {
      function getText(text) {
        if (typeof text === 'string') {
          return /*#__PURE__*/React.createElement("span", {
            className: "text-column"
          }, text);
        }

        if (Array.isArray(text)) {
          return /*#__PURE__*/React.createElement("div", {
            className: "text-cell"
          }, text.map(function (item, i) {
            return typeof item === 'string' ? /*#__PURE__*/React.createElement("span", {
              className: "text-column",
              key: i
            }, item) : null;
          }));
        }
      }

      if (typeof params === 'string' || Array.isArray(params)) {
        return getText(params);
      }

      var text = params.text;

      if (text) {
        return getText(text);
      }

      return null;
    };

    return _this;
  }

  var _proto = TradeTable.prototype;

  _proto.render = function render() {
    var _dataSource$,
        _this2 = this;

    var _this$props = this.props,
        _this$props$dataSourc = _this$props.dataSource,
        dataSource = _this$props$dataSourc === void 0 ? [] : _this$props$dataSourc,
        _this$props$columns = _this$props.columns,
        columns = _this$props$columns === void 0 ? [] : _this$props$columns,
        _this$props$cellProps = _this$props.cellProps,
        cellProps = _this$props$cellProps === void 0 ? function () {} : _this$props$cellProps,
        _this$props$className = _this$props.className,
        className = _this$props$className === void 0 ? '' : _this$props$className;
    var hasTableHeader = !!((_dataSource$ = dataSource[0]) !== null && _dataSource$ !== void 0 && _dataSource$.header);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Table, {
      dataSource: dataSource,
      hasBorder: false,
      cellProps: cellProps,
      className: className + " aliretail-trade-table"
    }, hasTableHeader && /*#__PURE__*/React.createElement(_Table.GroupHeader, {
      cell: this.headerRender
    }), columns.map(function (column, index) {
      return /*#__PURE__*/React.createElement(_Table.Column, {
        key: "column-" + index,
        className: column.className,
        title: column.title,
        dataIndex: column.dataIndex,
        cell: column.cell ? column.cell : _this2.renderType(column.type),
        align: column.align || 'left',
        width: column.width
      });
    })));
  };

  return TradeTable;
}(React.Component);

TradeTable.propTypes = {
  dataSource: PropTypes.array,
  extendCells: PropTypes.object,
  appendGroupHeader: PropTypes.func,
  columns: PropTypes.array,
  cellProps: PropTypes.func,
  className: PropTypes.string
};
TradeTable.defaultProps = {
  dataSource: [],
  extendCells: {},
  appendGroupHeader: function appendGroupHeader() {},
  columns: [],
  cellProps: function cellProps() {},
  className: ''
};
export default TradeTable;