@chatui/core/lib/components/RedPacket/index.js

The React library for Chatbot UI

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RedPacket = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Price = require("../Price");
var _Button = require("../Button");
var _Flex = require("../Flex");
var _Text = require("../Text");
var _Countdown = require("../Countdown");
var _StatusBadge = require("../StatusBadge");
var _Image = require("../Image");
var _date = require("../../utils/date");
var statusLabelMap = {
  normal: '',
  nearExpired: '快失效',
  expired: '已过期',
  used: '已使用'
};
var RedPacket = exports.RedPacket = function RedPacket(props) {
  var className = props.className,
    value = props.value,
    condition = props.condition,
    name = props.name,
    endAt = props.endAt,
    dateDesc = props.dateDesc,
    desc = props.desc,
    _props$status = props.status,
    status = _props$status === void 0 ? 'normal' : _props$status,
    _props$variant = props.variant,
    variant = _props$variant === void 0 ? 'redPacket' : _props$variant,
    tag = props.tag,
    image = props.image,
    oShowCountdown = props.showCountdown,
    _props$inList = props.inList,
    inList = _props$inList === void 0 ? false : _props$inList,
    _props$btnText = props.btnText,
    btnText = _props$btnText === void 0 ? '查看' : _props$btnText,
    onClick = props.onClick;
  var statusLabel = statusLabelMap[status] || '';
  var nearExpired = status === 'nearExpired' || endAt && (0, _date.isWithin24Hours)(endAt);
  var showCountdown = oShowCountdown === true || oShowCountdown === 'auto' && nearExpired;
  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
    className: (0, _clsx.default)('RedPacket', className),
    "data-variant": variant,
    "data-status": status,
    "data-in-list": inList,
    onClick: inList ? undefined : onClick
  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
    className: "RedPacket-object",
    center: true,
    direction: "column"
  }, image ? /*#__PURE__*/_react.default.createElement(_Image.Image, {
    className: "RedPacket-img",
    src: image,
    width: "70",
    height: "53"
  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value && /*#__PURE__*/_react.default.createElement(_Price.Price, {
    className: "RedPacket-value",
    price: value,
    currency: "\xA5",
    autoFit: true
  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
    className: "RedPacket-condition",
    truncate: true
  }, condition)), /*#__PURE__*/_react.default.createElement("svg", {
    className: "RedPacket-arc",
    width: "12",
    height: "80",
    viewBox: "0 0 24 160",
    fill: "none"
  }, /*#__PURE__*/_react.default.createElement("path", {
    fill: "var(--red-packet-arc-color)",
    d: "M0 160h24V0H.4C6.77 20.445 10.7 48.462 10.7 79.369 10.701 110.917 6.607 139.454 0 160"
  }))), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, {
    className: "RedPacket-main"
  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
    className: "RedPacket-name",
    truncate: true
  }, name), dateDesc ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
    className: "RedPacket-desc",
    truncate: true
  }, dateDesc) : endAt ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
    className: "RedPacket-desc",
    truncate: true
  }, showCountdown ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "\u9650\u65F6"), " ", /*#__PURE__*/_react.default.createElement(_Countdown.Countdown, {
    targetDate: endAt
  })) : (0, _date.formatExpireTime)(endAt)) : null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
    className: "RedPacket-desc",
    truncate: true
  }, desc)), onClick && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
    className: "RedPacket-actions",
    center: true
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    className: "RedPacket-btn",
    onClick: inList ? onClick : undefined
  }, btnText)), statusLabel && /*#__PURE__*/_react.default.createElement(_StatusBadge.StatusBadge, {
    text: statusLabel
  }), tag && /*#__PURE__*/_react.default.createElement("div", {
    className: "RedPacket-tag"
  }, tag));
};