diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx index e3e92ebfcd..028e4ee45c 100644 --- a/src/packages/price/demo.taro.tsx +++ b/src/packages/price/demo.taro.tsx @@ -12,6 +12,8 @@ import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' import Demo9 from './demos/taro/demo9' +import Demo10 from './demos/taro/demo10' +import Demo11 from './demos/taro/demo11' const PriceDemo = () => { const [translated] = useTranslate({ @@ -25,6 +27,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符号', title8: '划线价', title9: '场域分类：原子级、模块级、列表级、页面级', + title10: '自定义颜色', + title11: '数据原样输出', }, 'zh-TW': { title1: '支持尺寸：small、normal、large、xlarge', @@ -36,6 +40,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符號', title8: '劃線價', title9: '場域分類：原子級、模塊級、列表級、頁面級', + title10: '自定義顏色', + title11: '數據原樣輸出', }, 'en-US': { title1: 'Support sizes：small、normal、large、xlarge', @@ -48,6 +54,8 @@ const PriceDemo = () => { title7: 'Do not display symbol', title8: 'Line-through price', title9: 'Field classification: atomic, module, list, page', + title10: 'Custom color', + title11: 'Data original output', }, }) return ( @@ -72,6 +80,10 @@ const PriceDemo = () => { {translated.title8} + {translated.title10} + + {translated.title11} + ) diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx index 4b4f672e29..a135a12c4d 100644 --- a/src/packages/price/demo.tsx +++ b/src/packages/price/demo.tsx @@ -9,6 +9,8 @@ import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' import Demo9 from './demos/h5/demo9' +import Demo10 from './demos/h5/demo10' +import Demo11 from './demos/h5/demo11' const PriceDemo = () => { const [translated] = useTranslate({ @@ -22,6 +24,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符号', title8: '划线价', title9: '场域分类：原子级、模块级、列表级、页面级', + title10: '自定义颜色', + title11: '数据原样输出', }, 'zh-TW': { title1: '支持尺寸：small、normal、large、xlarge', @@ -45,6 +49,8 @@ const PriceDemo = () => { title7: 'Do not display symbol', title8: 'Line-through price', title9: 'Field classification: atomic, module, list, page', + title10: 'Custom color', + title11: 'Data original output', }, }) @@ -68,6 +74,10 @@ const PriceDemo = () => {

{translated.title8}

+

{translated.title10}

+ +

{translated.title11}

+ ) } diff --git a/src/packages/price/demos/h5/demo10.tsx b/src/packages/price/demos/h5/demo10.tsx new file mode 100644 index 0000000000..bee08afa1f --- /dev/null +++ b/src/packages/price/demos/h5/demo10.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' + +const Demo10 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/price/demos/h5/demo11.tsx b/src/packages/price/demos/h5/demo11.tsx new file mode 100644 index 0000000000..3dbff463dd --- /dev/null +++ b/src/packages/price/demos/h5/demo11.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' + +const Demo11 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo11 diff --git a/src/packages/price/demos/taro/demo10.tsx b/src/packages/price/demos/taro/demo10.tsx new file mode 100644 index 0000000000..9bc006d177 --- /dev/null +++ b/src/packages/price/demos/taro/demo10.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' + +const Demo10 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/price/demos/taro/demo11.tsx b/src/packages/price/demos/taro/demo11.tsx new file mode 100644 index 0000000000..226220b013 --- /dev/null +++ b/src/packages/price/demos/taro/demo11.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' + +const Demo11 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo11 diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index 5f5bd6a92e..62981b1732 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -82,19 +82,35 @@ import { Price } from '@nutui/nutui-react' ::: +### Custom color + +:::demo + + + +::: + +### Data original output + +:::demo + + + +::: + ## Price ### Props | Property | Description | Type | Default | | --- | --- | --- | --- | -| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` | +| color | Price type, supports custom colors | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | -| digits | Decimal digits | `number` | `2` | +| digits | Decimal digits, pass `null` for original data output | `number` \| `null` | `2` | | thousands | Thousands separation | `boolean` | `false` | | position | The symbol appear before or after the price，`before`、`after` | `string` | `before` | -| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | Line-through price | `boolean` | `false` | ## Theming @@ -105,9 +121,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` | -| \--nutui-price-color | Text color when type is gray | `#888b94` | -| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` | +| \--nutui-price-primary-color | Text color when color is primary | `#ff0f23` | +| \--nutui-price-color | Text color when color is gray | `#888b94` | +| \--nutui-price-darkgray-color | Text color when color is darkgray | `#1a1a1a` | | \--nutui-price-line-color | Underline price color | `#888b94` | | \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 69a0dd5a06..56daa10866 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react' ::: +### 自定义颜色 + +:::demo + + + +::: + +### 数据原样输出 + +:::demo + + + +::: + ## Price ### Props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | -| digits | 小数位位数 | `number` | `2` | +| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | | size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | diff --git a/src/packages/price/doc.taro.md b/src/packages/price/doc.taro.md index 9b9032ad3e..a61fea1bbd 100644 --- a/src/packages/price/doc.taro.md +++ b/src/packages/price/doc.taro.md @@ -82,15 +82,32 @@ import { Price } from '@nutui/nutui-react-taro' ::: +### 自定义颜色 + +:::demo + + + +::: + +### 数据原样输出 + +:::demo + + + +::: + ## Price ### Props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | +| price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | -| digits | 小数位位数 | `number` | `2` | +| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | | size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | @@ -104,9 +121,9 @@ import { Price } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | -| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | -| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-primary-color | color为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | color为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | color为darkgray时文字颜色 | `#1a1a1a` | | \--nutui-price-line-color | 划线价颜色 | `#888b94` | | \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index 898ee311eb..3b48215736 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react' ::: +### 自定義顏色 + +:::demo + + + +::: + +### 數據原樣輸出 + +:::demo + + + +::: + ## Price ### Props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 價格類型, 支持自定義顏色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | -| digits | 小數位位數 | `number` | `2` | +| digits | 小數位位數，傳入`null`數據原樣輸出 | `number` \| `null` | `2` | | thousands | 是否按照千分號形式顯示 | `boolean` | `false` | | position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` | | size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | @@ -105,9 +121,9 @@ import { Price } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` | -| \--nutui-price-color | type為gray時文字顏色 | `#888b94` | -| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` | +| \--nutui-price-primary-color | color為primary時文字顏色 | `#ff0f23` | +| \--nutui-price-color | color為gray時文字顏色 | `#888b94` | +| \--nutui-price-darkgray-color | color為darkgray時文字顏色 | `#1a1a1a` | | \--nutui-price-line-color | 劃線價顏色 | `#888b94` | | \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` | diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index a49c31c08c..04eef72ced 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,9 +1,9 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import { Text, View } from '@tarojs/components' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' -import { TaroPriceProps } from '@/types' +import { TaroPriceProps, PriceColorEnum } from '@/types' import { harmony } from '@/utils/taro/platform' const defaultProps = { @@ -20,7 +20,7 @@ const defaultProps = { export const Price: FunctionComponent> = (props) => { const { color, - price, + price: originalPrice, symbol, digits, thousands, @@ -38,6 +38,23 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const price = useMemo(() => { + return originalPrice.toString().replace(/[^\d.]/g, '') + }, [originalPrice]) + + const isCustomPriceColor = useMemo(() => { + const specificPriceColor = Object.values(PriceColorEnum) + return !specificPriceColor.includes(color as PriceColorEnum) + }, [color]) + + const priceColorStyle = useMemo(() => { + return isCustomPriceColor + ? { + color, + } + : {} + }, [isCustomPriceColor, color]) + const replaceSpecialChar = (url: string) => { url = url.replace(/"/g, '"') url = url.replace(/&/g, '&') @@ -56,9 +73,9 @@ export const Price: FunctionComponent> = (props) => { if (Number(num) === 0) { num = 0 } - num = num.toString() if (checkPoint(num)) { + num = num.toString() num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] } @@ -74,17 +91,20 @@ export const Price: FunctionComponent> = (props) => { } if (checkPoint(decimalNum)) { - decimalNum = Number(decimalNum).toFixed(digits) + decimalNum = digits ? Number(decimalNum).toFixed(digits) : `${decimalNum}` decimalNum = typeof decimalNum.split('.') === 'string' ? 0 - : decimalNum.split('.')[1] || 0 + : decimalNum.split('.')[1] || '' } else { - decimalNum = 0 + decimalNum = '' + } + if (digits) { + const result = `0.${decimalNum}` + const resultFixed = Number(result).toFixed(digits) + return String(resultFixed).substring(2, resultFixed.length) } - const result = `0.${decimalNum}` - const resultFixed = Number(result).toFixed(digits) - return String(resultFixed).substring(2, resultFixed.length) + return decimalNum } const renderSymbol = () => { @@ -98,6 +118,7 @@ export const Price: FunctionComponent> = (props) => { [`${classPrefix}-rtl`]: rtl, }, ])} + style={priceColorStyle} > {symbol ? replaceSpecialChar(symbol) : ''} @@ -111,22 +132,27 @@ export const Price: FunctionComponent> = (props) => { className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${ line ? `${classPrefix}-line` : '' }`} + style={priceColorStyle} > {formatThousands(price)} - {digits ? ( + {digits !== 0 ? ( <> + {checkPoint(price) || digits ? ( + + . + + ) : null} - . - - {formatDecimal(price)} diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index 9773f8685b..3763ad0a49 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index' -import { WebPriceProps } from '@/types' +import { WebPriceProps, PriceColorEnum } from '@/types' const defaultProps = { ...ComponentDefaults, @@ -18,7 +18,7 @@ const defaultProps = { export const Price: FunctionComponent> = (props) => { const { color, - price, + price: originalPrice, symbol, digits, thousands, @@ -37,6 +37,23 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const price = useMemo(() => { + return originalPrice.toString().replace(/[^\d.]/g, '') + }, [originalPrice]) + + const isCustomPriceColor = useMemo(() => { + const specificPriceColor = Object.values(PriceColorEnum) + return !specificPriceColor.includes(color as PriceColorEnum) + }, [color]) + + const priceColorStyle = useMemo(() => { + return isCustomPriceColor + ? { + color, + } + : {} + }, [isCustomPriceColor, color]) + const checkPoint = (price: string | number) => { return String(price).indexOf('.') > 0 } @@ -62,17 +79,20 @@ export const Price: FunctionComponent> = (props) => { } if (checkPoint(decimalNum)) { - decimalNum = Number(decimalNum).toFixed(digits) + decimalNum = digits ? Number(decimalNum).toFixed(digits) : `${decimalNum}` decimalNum = typeof decimalNum.split('.') === 'string' ? 0 - : decimalNum.split('.')[1] || 0 + : decimalNum.split('.')[1] || '' } else { - decimalNum = 0 + decimalNum = '' + } + if (digits) { + const result = `0.${decimalNum}` + const resultFixed = Number(result).toFixed(digits) + return String(resultFixed).substring(2, resultFixed.length) } - const result = `0.${decimalNum}` - const resultFixed = Number(result).toFixed(digits) - return String(resultFixed).substring(2, resultFixed.length) + return decimalNum } const renderSymbol = () => { @@ -86,6 +106,7 @@ export const Price: FunctionComponent> = (props) => { [`${classPrefix}-rtl`]: rtl, }, ])} + style={priceColorStyle} dangerouslySetInnerHTML={{ __html: symbol || '' }} /> ) @@ -93,7 +114,7 @@ export const Price: FunctionComponent> = (props) => { return (
@@ -102,22 +123,27 @@ export const Price: FunctionComponent> = (props) => { className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${ line ? `${classPrefix}-line` : '' }`} + style={priceColorStyle} > {formatThousands(price)}
- {digits ? ( + {digits !== 0 ? ( <> + {checkPoint(price) || digits ? ( +
+ . +
+ ) : null}
- . -
-
{formatDecimal(price)}
diff --git a/src/types/spec/price/base.ts b/src/types/spec/price/base.ts index b21128bf71..82d67de4b3 100644 --- a/src/types/spec/price/base.ts +++ b/src/types/spec/price/base.ts @@ -2,13 +2,19 @@ import { BaseProps } from '../../base/props' import { SimpleValue, UISize } from '../../base/atoms' export type PriceSize = Exclude -export type PriceColor = 'primary' | 'gray' | 'darkgray' +export type SpecificPriceColor = 'primary' | 'gray' | 'darkgray' +export type PriceColor = SpecificPriceColor | string +export enum PriceColorEnum { + Primary = 'primary', + Gray = 'gray', + Darkgray = 'darkgray', +} export interface BasePrice extends BaseProps { color: PriceColor price: SimpleValue symbol: string - digits: number + digits: number | null thousands: boolean position: string size: PriceSize