feat(price): v15

migrate-from-v2.md

@@ -747,9 +747,8 @@ plugins: [
 
 #### Price
 
-- `decimalDigits` 重命名为 `digits`
-- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号
-- 新增 `line`，是否展示划线价
+- 修改 `size`，增加 'xlarge' 尺寸
+- 新增 `type`, 价格类型
 
 #### Progress
 

src/packages/cell/cell.taro.tsx

@@ -1,24 +1,12 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
 import CellGroupContext from '@/packages/cellgroup/context'
 import { useRtl } from '@/packages/configprovider/index.taro'
 import pxTransform from '@/utils/px-transform'
-
-export interface CellProps extends BasicComponent {
-  title: ReactNode
-  description: ReactNode
-  extra: ReactNode
-  radius: string | number
-  align: 'flex-start' | 'center' | 'flex-end'
-  clickable: boolean
-  isLast: boolean
-  onClick: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
-  ) => void
-}
+import { CellProps } from './types'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -62,7 +50,7 @@
   const handleClick = (
     event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
   ) => {
     onClick(event)
   }
 
   const radiusNumber = Number(String(radius).replace(/[^\d]/g, ''))

src/packages/cell/cell.tsx

@@ -1,20 +1,10 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import classNames from 'classnames'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import CellGroup from '@/packages/cellgroup'
 import CellGroupContext from '@/packages/cellgroup/context'
 import { useRtl } from '@/packages/configprovider'
-
-export interface CellProps extends BasicComponent {
-  title: ReactNode
-  description: ReactNode
-  extra: ReactNode
-  radius: string | number
-  align: 'flex-start' | 'center' | 'flex-end'
-  clickable: boolean
-  isLast: boolean
-  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-}
+import { CellProps } from './types'
 
 const defaultProps = {
   ...ComponentDefaults,

src/packages/cell/index.taro.ts

@@ -1,4 +1,4 @@
 import { Cell } from './cell.taro'
 
-export type { CellProps } from './cell.taro'
+export type { CellProps, CellAlign } from './types'
 export default Cell

src/packages/cell/index.ts

@@ -1,4 +1,4 @@
 import { Cell } from './cell'
 
-export type { CellProps } from './cell'
+export type { CellProps, CellAlign } from './types'
 export default Cell

src/packages/cell/types.ts

@@ -0,0 +1,14 @@
+import { BasicComponent } from '@/utils/typings'
+
+export type CellAlign = 'flex-start' | 'center' | 'flex-end' | 'baseline'
+
+export interface CellProps extends BasicComponent {
+  title: React.ReactNode
+  description: React.ReactNode
+  extra: React.ReactNode
+  radius: string | number
+  align: CellAlign
+  clickable: boolean
+  isLast: boolean
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+}

src/packages/price/__test__/__snapshots__/price.spec.tsx.snap

@@ -3,25 +3,25 @@
 exports[`props digits test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       ¥
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       15213
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       122
     </div>
@@ -32,25 +32,25 @@ exports[`props digits test 1`] = `
 exports[`props symbol test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       $
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       10010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       00
     </div>
@@ -61,20 +61,20 @@ exports[`props symbol test 1`] = `
 exports[`props test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       1,010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       00
     </div>
@@ -85,25 +85,25 @@ exports[`props test 1`] = `
 exports[`props thousands test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       $
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       10010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       01
     </div>

src/packages/price/demo.taro.tsx

@@ -11,31 +11,34 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const PriceDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      title1: '支持三种尺寸：small、normal、large',
+      title1: '支持尺寸：small、normal、large、xlarge',
       title2: '不保留小数',
       title3: '有人民币符号，无千位分隔',
       title4: '有人民币符号，有千位分隔，保留小数点后三位',
       title5: '调整 symbol 符号位置',
       title6: '异步随机变更',
       title7: '不展示 symbol 符号',
       title8: '划线价',
+      title9: '场域分类：原子级、模块级、列表级、页面级',
     },
     'zh-TW': {
-      title1: '支持三種尺寸：small、normal、large',
+      title1: '支持尺寸：small、normal、large、xlarge',
       title2: '不保留小數',
       title3: '有人民幣符號，無千位分隔',
       title4: '有人民幣符號，有千位分隔，保留小數點後三位',
       title5: '調整 symbol 符號位置',
       title6: '異步隨機變更',
       title7: '不展示 symbol 符號',
       title8: '劃線價',
+      title9: '場域分類：原子級、模塊級、列表級、頁面級',
     },
     'en-US': {
-      title1: 'Support three sizes：small、normal、large',
+      title1: 'Support sizes：small、normal、large、xlarge',
       title2: 'No decimals',
       title3: 'With RMB symbol, no thousands separator',
       title4:
@@ -44,6 +47,7 @@ const PriceDemo = () => {
       title6: 'Asynchronous random changes',
       title7: 'Do not display symbol',
       title8: 'Line-through price',
+      title9: 'Field classification: atomic, module, list, page',
     },
   })
   return (
@@ -52,6 +56,8 @@ const PriceDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.title1}</View>
         <Demo1 />
+        <View className="h2">{translated.title9}</View>
+        <Demo9 />
         <View className="h2">{translated.title2}</View>
         <Demo2 />
         <View className="h2">{translated.title3}</View>

src/packages/price/demo.tsx

@@ -8,31 +8,34 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const PriceDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      title1: '支持三种尺寸：small、normal、large',
+      title1: '支持尺寸：small、normal、large、xlarge',
       title2: '不保留小数',
       title3: '有人民币符号，无千位分隔',
       title4: '有人民币符号，有千位分隔，保留小数点后三位',
       title5: '调整 symbol 符号位置',
       title6: '异步随机变更',
       title7: '不展示 symbol 符号',
       title8: '划线价',
+      title9: '场域分类：原子级、模块级、列表级、页面级',
     },
     'zh-TW': {
-      title1: '支持三種尺寸：small、normal、large',
+      title1: '支持尺寸：small、normal、large、xlarge',
       title2: '不保留小數',
       title3: '有人民幣符號，無千位分隔',
       title4: '有人民幣符號，有千位分隔，保留小數點後三位',
       title5: '調整 symbol 符號位置',
       title6: '異步隨機變更',
       title7: '不展示 symbol 符號',
       title8: '劃線價',
+      title9: '場域分類：原子級、模塊級、列表級、頁面級',
     },
     'en-US': {
-      title1: 'Support three sizes：small、normal、large',
+      title1: 'Support sizes：small、normal、large、xlarge',
       title2: 'No decimals',
       title3: 'With RMB symbol, no thousands separator',
       title4:
@@ -41,13 +44,16 @@ const PriceDemo = () => {
       title6: 'Asynchronous random changes',
       title7: 'Do not display symbol',
       title8: 'Line-through price',
+      title9: 'Field classification: atomic, module, list, page',
     },
   })
 
   return (
     <div className="demo">
       <h2>{translated.title1}</h2>
       <Demo1 />
+      <h2>{translated.title9}</h2>
+      <Demo9 />
       <h2>{translated.title2}</h2>
       <Demo2 />
       <h2>{translated.title3}</h2>

src/packages/price/demos/h5/demo1.tsx

@@ -1,19 +1,22 @@
 import React from 'react'
-import { Price, Cell } from '@nutui/nutui-react'
+import { Price, Cell, CellGroup } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <>
+    <CellGroup>
       <Cell>
-        <Price price={0} size="small" thousands />
+        <Price price={618.68} size="small" thousands />
       </Cell>
       <Cell>
-        <Price price={0} size="normal" thousands />
+        <Price price={618.68} size="normal" thousands />
       </Cell>
       <Cell>
-        <Price price={0} size="large" thousands />
+        <Price price={618.68} size="large" thousands />
       </Cell>
-    </>
+      <Cell>
+        <Price price={618.68} size="xlarge" thousands />
+      </Cell>
+    </CellGroup>
   )
 }
 export default Demo1

src/packages/price/demos/h5/demo2.tsx

@@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react'
 const Demo2 = () => {
   return (
     <Cell>
-      <Price price={8888} digits={0} size="normal" thousands />
+      <Price price={618.68} digits={0} thousands />
     </Cell>
   )
 }

src/packages/price/demos/h5/demo3.tsx

@@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react'
 const Demo3 = () => {
   return (
     <Cell>
-      <Price price={10010.01} size="normal" thousands={false} />
+      <Price price={10010.01} thousands={false} />
     </Cell>
   )
 }

src/packages/price/demos/h5/demo4.tsx

@@ -4,7 +4,7 @@ import { Price, Cell } from '@nutui/nutui-react'
 const Demo4 = () => {
   return (
     <Cell>
-      <Price price={15213.1221} size="normal" digits={3} thousands />
+      <Price price={15213.1221} digits={3} thousands />
     </Cell>
   )
 }

src/packages/price/demos/h5/demo5.tsx

@@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react'
 const Demo5 = () => {
   return (
     <Cell>
-      <Price
-        price={8888.01}
-        size="normal"
-        position="after"
-        symbol="元"
-        thousands
-      />
+      <Price price={8888.01} position="after" symbol="元" thousands />
     </Cell>
   )
 }

src/packages/price/demos/h5/demo6.tsx

@@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react'
 const Demo6 = () => {
   return (
     <Cell>
-      <Price price={15213.1221} size="normal" symbol="" />
+      <Price price={15213.1221} symbol="" />
     </Cell>
   )
 }