@aliretail/react-materials-components/lib/ImageText/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));

var React = _interopRequireWildcard(require("react"));

var PropTypes = _interopRequireWildcard(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _StatusTag = require("../StatusTag");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Tooltip = _balloon["default"].Tooltip;
var CLS_PREFIX = 'aliretail-imageText';
var ImageIconType = {
  giftItem: '赠',
  combineItem: '组'
};

var ImageText = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(ImageText, _React$Component);

  function ImageText() {
    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.wrapTooltip = function (trigger, tip, key) {
      if (key === void 0) {
        key = tip;
      }

      return /*#__PURE__*/React.createElement(Tooltip, {
        trigger: trigger,
        key: key
      }, tip);
    };

    _this.renderSubTitle = function () {
      var _this$props = _this.props,
          subTitle = _this$props.subTitle,
          subTitleLength = _this$props.subTitleLength,
          showBalloon = _this$props.showBalloon,
          balloonContent = _this$props.balloonContent;
      var subTitleEle = null;
      var displaySubTitle = subTitle;

      if (subTitleLength && subTitle.length > subTitleLength) {
        displaySubTitle = subTitle.substring(0, subTitleLength - 1) + "...";
      }

      if (subTitle) {
        subTitleEle = /*#__PURE__*/React.createElement("p", {
          className: "description titleLineOne"
        }, displaySubTitle);
      }

      if (showBalloon) {
        // subTitleEle = (
        //   <Balloon
        //     className="imageText-balloon"
        //     trigger={subTitleEle}
        //     triggerType="hover"
        //     closable={false}
        //     needAdjust
        //   >
        //     {balloonContent}
        //   </Balloon>
        // );
        subTitleEle = _this.wrapTooltip(subTitleEle, balloonContent);
      }

      return subTitleEle;
    };

    return _this;
  }

  var _proto = ImageText.prototype;

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

    var _this$props2 = this.props,
        imageUrl = _this$props2.imageUrl,
        title = _this$props2.title,
        titleSize = _this$props2.titleSize,
        description = _this$props2.description,
        rightTitle = _this$props2.rightTitle,
        rightSubTitle = _this$props2.rightSubTitle,
        otherTexts = _this$props2.otherTexts,
        appendElement = _this$props2.appendElement,
        hasImagePlace = _this$props2.hasImagePlace,
        iconType = _this$props2.iconType,
        tagList = _this$props2.tagList; // 由于 description 和 otherTexts 的渲染完全一致，合并成一个数组进行渲染

    var descList = [description].concat(Array.isArray(otherTexts) ? otherTexts : []).filter(function (item) {
      return item;
    });
    return /*#__PURE__*/React.createElement("div", {
      className: CLS_PREFIX
    }, /*#__PURE__*/React.createElement("div", {
      className: "left-content"
    }, iconType ? /*#__PURE__*/React.createElement("p", {
      className: (0, _classnames["default"])('icon', iconType)
    }, ImageIconType[iconType]) : null, imageUrl ? /*#__PURE__*/React.createElement("img", {
      className: "image",
      src: imageUrl,
      alt: ""
    }) : null, !imageUrl && hasImagePlace ? /*#__PURE__*/React.createElement("div", {
      className: "image"
    }) : null, /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
      className: CLS_PREFIX + "-title-row"
    }, title ? this.wrapTooltip( /*#__PURE__*/React.createElement("p", {
      className: (0, _classnames["default"])(CLS_PREFIX + "-title", imageUrl ? 'titleLineTwo' : 'titleLineOne', CLS_PREFIX + "-title-" + titleSize)
    }, title), title) : null, tagList.map(function (tagProps, i) {
      return /*#__PURE__*/React.createElement(_StatusTag.StatusTag, (0, _extends2["default"])({
        key: i
      }, tagProps));
    })), this.renderSubTitle(), descList.map(function (text, index) {
      return _this2.wrapTooltip( /*#__PURE__*/React.createElement("p", {
        className: "description titleLineOne"
      }, text), text, index);
    }), appendElement && /*#__PURE__*/React.createElement("div", {
      className: "append-element"
    }, appendElement))), rightTitle || rightSubTitle ? /*#__PURE__*/React.createElement("section", {
      className: "right-content"
    }, rightTitle ? /*#__PURE__*/React.createElement("p", {
      className: "right-color"
    }, rightTitle) : null, rightSubTitle ? /*#__PURE__*/React.createElement("p", {
      className: "right-color"
    }, rightSubTitle) : null) : null);
  };

  return ImageText;
}(React.Component);

ImageText.propTypes = {
  imageUrl: PropTypes.string,
  title: PropTypes.string,
  subTitle: PropTypes.string,
  description: PropTypes.string,
  rightTitle: PropTypes.string,
  rightSubTitle: PropTypes.string,
  showBalloon: PropTypes.bool,
  iconType: PropTypes.string,
  balloonContent: PropTypes.string,
  subTitleLength: PropTypes.number,
  hasImagePlace: PropTypes.bool,
  titleSize: PropTypes.oneOf(['s', 'm', 'l']),
  tagList: PropTypes.arrayOf(PropTypes.any)
};
ImageText.defaultProps = {
  titleSize: 'm',
  tagList: []
};
var _default = ImageText;
exports["default"] = _default;