UNPKG

@nutui/nutui-react

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

130 lines (129 loc) 5.63 kB
import { _ as _define_property } from "@swc/helpers/_/_define_property"; import { _ as _object_spread } from "@swc/helpers/_/_object_spread"; import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props"; import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties"; import React, { useMemo } from "react"; import classNames from "classnames"; import { ComponentDefaults } from "../../utils/typings"; import { useRtl } from "../configprovider/index"; import { PriceColorEnum } from "../../types"; import { shouldRenderPriceAsRaw } from "../../utils/should-render-price-raw"; var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), { color: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', size: 'normal', line: false }); export var Price = function(props) { var _ref = _object_spread({}, defaultProps, props), color = _ref.color, originalPrice = _ref.price, symbol = _ref.symbol, digits = _ref.digits, thousands = _ref.thousands, position = _ref.position, size = _ref.size, line = _ref.line, className = _ref.className, style = _ref.style, rest = _object_without_properties(_ref, [ "color", "price", "symbol", "digits", "thousands", "position", "size", "line", "className", "style" ]); var classPrefix = 'nut-price'; var rtl = useRtl(); var isRenderPriceRaw = useMemo(function() { return typeof originalPrice === 'string' && shouldRenderPriceAsRaw(originalPrice); }, [ originalPrice ]); var price = useMemo(function() { if (isRenderPriceRaw) return ''; return originalPrice.toString().replace(/[^\d.]/g, ''); }, [ originalPrice, isRenderPriceRaw ]); var isCustomPriceColor = useMemo(function() { var specificPriceColor = Object.values(PriceColorEnum); return !specificPriceColor.includes(color); }, [ color ]); var priceColorStyle = useMemo(function() { return isCustomPriceColor ? { color: color } : {}; }, [ isCustomPriceColor, color ]); var checkPoint = function(price) { return String(price).indexOf('.') > 0; }; var formatThousands = function(num) { if (Number(num) === 0) { num = 0; } if (checkPoint(num)) { num = num.toString(); num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0]; } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); } return num; }; var formatDecimal = function(decimalNum) { if (Number(decimalNum) === 0) { decimalNum = 0; } if (checkPoint(decimalNum)) { decimalNum = digits ? Number(decimalNum).toFixed(digits) : "".concat(decimalNum); decimalNum = typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] || ''; } else { decimalNum = ''; } if (digits) { var result = "0.".concat(decimalNum); var resultFixed = Number(result).toFixed(digits); return String(resultFixed).substring(2, resultFixed.length); } return decimalNum; }; var renderSymbol = function() { var _obj; return /*#__PURE__*/ React.createElement("div", { className: classNames([ "".concat(classPrefix, "-symbol"), "".concat(classPrefix, "-symbol-").concat(size), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-line"), line), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj) ]), style: priceColorStyle, dangerouslySetInnerHTML: { __html: symbol || '' } }); }; var renderRawContent = function() { return /*#__PURE__*/ React.createElement(React.Fragment, null, originalPrice); }; var renderInner = function() { return /*#__PURE__*/ React.createElement(React.Fragment, null, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ React.createElement("div", { className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''), style: priceColorStyle }, formatThousands(price)), digits !== 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, checkPoint(price) || digits ? /*#__PURE__*/ React.createElement("div", { className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''), style: priceColorStyle }, ".") : null, /*#__PURE__*/ React.createElement("div", { className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''), style: priceColorStyle }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null); }; return /*#__PURE__*/ React.createElement("div", _object_spread({ className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(isCustomPriceColor ? 'custom' : color, " ").concat(className), style: style }, rest), isRenderPriceRaw ? renderRawContent() : renderInner()); }; Price.displayName = 'NutPrice';