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

The React library for Chatbot UI

import React from 'react';
import clsx from 'clsx';
import { Price } from '../Price';
import { Button } from '../Button';
import { Flex, FlexItem } from '../Flex';
import { Text } from '../Text';
import { Image } from '../Image';
import { Ribbon } from '../Ribbon';
import { formatExpireTime } from '../../utils/date';
var statusLabelMap = {
  normal: '',
  nearExpired: '快失效',
  expired: '已过期',
  used: '已使用'
};
export var 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,
    _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] || '';
  return /*#__PURE__*/React.createElement(Flex, {
    className: clsx('RedPacket', className),
    "data-variant": variant,
    "data-status": status,
    "data-in-list": inList,
    onClick: inList ? undefined : onClick
  }, /*#__PURE__*/React.createElement(Flex, {
    className: "RedPacket-object",
    center: true,
    direction: "column"
  }, image ? /*#__PURE__*/React.createElement(Image, {
    className: "RedPacket-img",
    src: image,
    width: "70",
    height: "53"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, value && /*#__PURE__*/React.createElement(Price, {
    className: "RedPacket-value",
    price: value,
    currency: "\xA5",
    autoFit: true
  }), /*#__PURE__*/React.createElement(Text, {
    className: "RedPacket-condition",
    truncate: true
  }, condition)), /*#__PURE__*/React.createElement("svg", {
    className: "RedPacket-arc",
    width: "12",
    height: "80",
    viewBox: "0 0 24 160",
    fill: "none"
  }, /*#__PURE__*/React.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.createElement(FlexItem, {
    className: "RedPacket-main"
  }, /*#__PURE__*/React.createElement(Text, {
    className: "RedPacket-name",
    truncate: true
  }, name), dateDesc ? /*#__PURE__*/React.createElement(Text, {
    className: "RedPacket-desc",
    truncate: true
  }, dateDesc) : endAt ? /*#__PURE__*/React.createElement(Text, {
    className: "RedPacket-desc",
    truncate: true
  }, formatExpireTime(endAt)) : null, /*#__PURE__*/React.createElement(Text, {
    className: "RedPacket-desc",
    truncate: true
  }, desc)), onClick && /*#__PURE__*/React.createElement(Flex, {
    className: "RedPacket-actions",
    center: true
  }, /*#__PURE__*/React.createElement(Button, {
    className: "RedPacket-btn",
    onClick: inList ? onClick : undefined
  }, btnText)), statusLabel && /*#__PURE__*/React.createElement(Ribbon, {
    color: ['expired', 'used'].includes(status) ? 'gray' : 'primary',
    position: "right",
    size: "sm"
  }, statusLabel), tag && /*#__PURE__*/React.createElement(Ribbon, null, tag));
};