Merge branch 'feat_v3.x' into feat_sidebar

migrate-from-v2.md

@@ -255,12 +255,8 @@ plugins: [
 
 #### Indicator
 
-- 移除 `block`，暴露自定义节点
-- 移除 `align`，暴露自定义节点
-- `vertical` 重命名为`direction`，默认值为 `horizontal`，可选 `vertical`
-- 移除 `fillZero`，暴露自定义节点
-- `size` 重命名为 `total`
-- 增加非数字展示，并设置为默认状态
+- type 属性的值调整为 `'anchor'` 或 `'slide'`
+- color 属性的值增加 `'white'`
 
 #### Menu
 
@@ -743,9 +739,8 @@ plugins: [
 
 #### Price
 
-- `decimalDigits` 重命名为 `digits`
-- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号
-- 新增 `line`，是否展示划线价
+- 修改 `size`，增加 'xlarge' 尺寸
+- 新增 `color`, 价格类型
 
 #### Progress
 

src/config.json

@@ -1072,6 +1072,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "liukun"
         },
         {
@@ -1107,6 +1108,7 @@
           "sort": 4,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "songsong"
         },
         {

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

@@ -44,7 +44,7 @@ exports[`description slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -68,7 +68,7 @@ exports[`description slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -153,7 +153,7 @@ exports[`extra slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -177,7 +177,7 @@ exports[`extra slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -267,7 +267,7 @@ exports[`priceTag slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -356,7 +356,7 @@ exports[`props test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -380,7 +380,7 @@ exports[`props test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -465,7 +465,7 @@ exports[`tag slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -489,7 +489,7 @@ exports[`tag slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"

src/packages/cell/cell.taro.tsx

@@ -1,20 +1,14 @@
-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'
+import { CellProps } from './types'
 
-export interface CellProps extends BasicComponent {
-  title: ReactNode
-  description: ReactNode
-  extra: ReactNode
-  radius: string | number
-  align: 'flex-start' | 'center' | 'flex-end'
-  clickable: boolean
-  isLast: boolean
+interface CellTaroProps extends CellProps {
   onClick: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
   ) => void
@@ -32,12 +26,12 @@ const defaultProps = {
   onClick: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
   ) => {},
-} as CellProps
+} as CellTaroProps
 
 const classPrefix = 'nut-cell'
 
 export const Cell: FunctionComponent<
-  Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+  Partial<CellTaroProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & { Group: typeof CellGroup } = (props) => {
   const ctx = useContext(CellGroupContext)
   const {

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/indicator/__test__/__snapshots__/indicator.spec.tsx.snap

@@ -6,13 +6,13 @@ exports[`should match snapshot 1`] = `
     class="nut-indicator"
   >
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
   </div>
 </DocumentFragment>

src/packages/indicator/__test__/indicator.spec.tsx

@@ -17,7 +17,9 @@ test('should be shown when passing size and current', () => {
     </Cell>
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(3)
-  expect(container.querySelectorAll('.nut-indicator-active')).toHaveLength(1)
+  expect(container.querySelectorAll('.nut-indicator-dot-active')).toHaveLength(
+    1
+  )
 })
 
 test('should be shown when custom node', () => {
@@ -41,3 +43,14 @@ test('should be shown when custom node', () => {
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
 })
+
+test('should be shown when slide', () => {
+  const { container } = render(
+    <Cell>
+      <Indicator type="slide" total={6} current={5} />
+    </Cell>
+  )
+  expect(container.querySelectorAll('.nut-indicator-line-active')).toHaveLength(
+    1
+  )
+})

src/packages/indicator/demo.taro.tsx

@@ -7,23 +7,31 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -37,6 +45,12 @@ const IndicatorDemo = () => {
         <View className="h2">{translated.basic}</View>
         <Demo1 />
 
+        <View className="h2">{translated.white}</View>
+        <Demo5 />
+
+        <View className="h2">{translated.type}</View>
+        <Demo6 />
+
         <View className="h2">{translated.customNode}</View>
         <Demo2 />
 

src/packages/indicator/demo.tsx

@@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -33,6 +41,12 @@ const IndicatorDemo = () => {
         <h2>{translated.basic}</h2>
         <Demo1 />
 
+        <h2>{translated.white}</h2>
+        <Demo5 />
+
+        <h2>{translated.type}</h2>
+        <Demo6 />
+
         <h2>{translated.customNode}</h2>
         <Demo2 />
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
@@ -8,10 +8,13 @@ const Demo1 = () => {
         <Indicator total={3} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={1} />
+        <Indicator total={2} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={2} />
+        <Indicator total={2} current={0} direction="vertical" />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={2} current={1} direction="vertical" color="white" />
       </Cell>
     </>
   )