UNPKG

@nutui/nutui-react-taro

Version:

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

118 lines (117 loc) 5.56 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 React, { useMemo } from "react"; import { Text, View } from "@tarojs/components"; import classNames from "classnames"; import { ComponentDefaults } from "../../utils/typings"; import { useRtl } from "../configprovider/index"; import { PriceColorEnum } from "../../types"; import { harmony } from "../../utils/taro/platform"; var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), { color: 'primary', price: 0, symbol: '&yen;', digits: 2, thousands: false, position: 'before', size: 'normal', line: false }); export var Price = function(props) { var _$_object_spread = _object_spread({}, defaultProps, props), color = _$_object_spread.color, originalPrice = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, className = _$_object_spread.className, style = _$_object_spread.style; var classPrefix = 'nut-price'; var rtl = useRtl(); var price = useMemo(function() { return originalPrice.toString().replace(/[^\d.]/g, ''); }, [ originalPrice ]); 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 replaceSpecialChar = function(url) { url = url.replace(/&quot;/g, '"'); url = url.replace(/&amp;/g, '&'); url = url.replace(/&lt;/g, '<'); url = url.replace(/&gt;/g, '>'); url = url.replace(/&nbsp;/g, ' '); url = url.replace(/&yen;/g, '¥'); return url; }; 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(Text, { 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 }, symbol ? replaceSpecialChar(symbol) : ''); }; var renderInner = function() { return /*#__PURE__*/ React.createElement(React.Fragment, null, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ React.createElement(Text, { 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(Text, { className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''), style: priceColorStyle }, ".") : null, /*#__PURE__*/ React.createElement(Text, { 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(React.Fragment, null, harmony() || process.env.TARO_ENV === 'dynamic' ? /*#__PURE__*/ React.createElement(Text, { className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className), style: style }, renderInner()) : /*#__PURE__*/ React.createElement(View, { className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className), style: style }, renderInner())); }; Price.displayName = 'NutPrice';