refactor(Rate): v16 适配

src/packages/configprovider/types.ts

@@ -441,6 +441,7 @@ export type NutCSSVariables =
   | 'nutuiRateFontSize'
   | 'nutuiRateFontSizeLarge'
   | 'nutuiRateFontSizeSmall'
+  | 'nutuiRateLabelColor'
   | 'nutuiTabbarHeight'
   | 'nutuiTabbarActiveColor'
   | 'nutuiTabbarInactiveColor'

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

@@ -3,24 +3,28 @@
 exports[`size test 1`] = `
 <div>
   <div
-    class="nut-rate"
+    class="nut-rate nut-rate-horizontal"
   >
     <div
-      class="nut-rate-item nut-rate-item-large"
+      class="nut-rate-list"
     >
       <div
-        class="nut-rate-item-icon nut-rate-item-icon-disabled"
+        class="nut-rate-item nut-rate-item-large"
       >
-        <svg
-          class="nut-icon nut-icon-StarFill "
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="nut-rate-item-icon nut-rate-item-icon-disabled"
         >
-          <path
-            d="M512 2.13a32 32 0 0 1 27.65 15.9l156.07 267.94 303.06 65.65a32 32 0 0 1 17.07 52.6L809.26 635.46l31.23 308.52a32 32 0 0 1-44.74 32.51L512 851.41 228.27 976.47a32 32 0 0 1-44.76-32.51l31.23-308.53L8.13 404.18a32 32 0 0 1 17.11-52.59l303.04-65.62L484.35 18.05A32 32 0 0 1 512 2.13"
-            fill="currentColor"
-          />
-        </svg>
+          <svg
+            class="nut-icon nut-icon-StarFill "
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M512 2.13a32 32 0 0 1 27.65 15.9l156.07 267.94 303.06 65.65a32 32 0 0 1 17.07 52.6L809.26 635.46l31.23 308.52a32 32 0 0 1-44.74 32.51L512 851.41 228.27 976.47a32 32 0 0 1-44.76-32.51l31.23-308.53L8.13 404.18a32 32 0 0 1 17.11-52.59l303.04-65.62L484.35 18.05A32 32 0 0 1 512 2.13"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>

src/packages/rate/__test__/rate.spec.tsx

@@ -33,17 +33,17 @@ test('props test', () => {
     )
   }
 
-  const { getByTestId, container } = render(<RateParent />)
+  const { container } = render(<RateParent />)
   const valueEl = container.querySelector('.score')
   const el = container.querySelectorAll('.nut-rate-item')
   if (el && valueEl) {
-    expect(el.length).toBe(state.count) // count
-    expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon') // active
+    expect(el.length).toBe(state.count)
+    expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon')
     expect(el[2].childNodes[0].childNodes[0]).toHaveClass('nut-icon-HeartFill')
-    expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled') // disabled
+    expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled')
     expect(el[3].childNodes[0].childNodes[0]).toHaveClass('nut-icon-Heart')
     fireEvent.click(el[1])
-    expect(valueEl.innerHTML).toBe('2') // onChange
+    expect(valueEl.innerHTML).toBe('2')
   }
 })
 
@@ -74,6 +74,7 @@ test('allowHalf test', () => {
     )
   }
 })
+
 test('size test', () => {
   const { container } = render(<Rate count={1} size="large" />)
   const el = container.querySelector('.nut-rate-item')
@@ -91,6 +92,62 @@ test('showScore test', () => {
   }
 })
 
+test('direction horizontal test', () => {
+  const { container } = render(<Rate defaultValue={3} direction="horizontal" />)
+  const root = container.querySelector('.nut-rate')
+  expect(root).toHaveClass('nut-rate-horizontal')
+  expect(container.querySelector('.nut-rate-list')).toBeTruthy()
+})
+
+test('direction vertical test', () => {
+  const { container } = render(<Rate defaultValue={3} direction="vertical" />)
+  const root = container.querySelector('.nut-rate')
+  expect(root).toHaveClass('nut-rate-vertical')
+})
+
+test('label test horizontal', () => {
+  const { container } = render(
+    <Rate defaultValue={3} label="评分" direction="horizontal" />
+  )
+  const label = container.querySelector('.nut-rate-label')
+  expect(label).toBeTruthy()
+  expect(label?.innerHTML).toBe('评分')
+  const root = container.querySelector('.nut-rate')
+  const list = container.querySelector('.nut-rate-list')
+  if (root && label && list) {
+    const children = Array.from(root.children)
+    expect(children.indexOf(label)).toBeLessThan(children.indexOf(list))
+  }
+})
+
+test('label test vertical', () => {
+  const { container } = render(
+    <Rate defaultValue={3} label="非常满意" direction="vertical" />
+  )
+  const label = container.querySelector('.nut-rate-label')
+  expect(label).toBeTruthy()
+  expect(label?.innerHTML).toBe('非常满意')
+  const root = container.querySelector('.nut-rate')
+  const list = container.querySelector('.nut-rate-list')
+  if (root && label && list) {
+    const children = Array.from(root.children)
+    expect(children.indexOf(label)).toBeGreaterThan(children.indexOf(list))
+  }
+})
+
+test('array label test vertical', () => {
+  const labels = ['不满意', '', '', '', '非常满意']
+  const { container } = render(
+    <Rate defaultValue={3} label={labels} direction="vertical" />
+  )
+  const labelsRow = container.querySelector('.nut-rate-labels')
+  expect(labelsRow).toBeTruthy()
+  const items = container.querySelectorAll('.nut-rate-labels-item')
+  expect(items.length).toBe(5)
+  expect(items[0].innerHTML).toBe('不满意')
+  expect(items[4].innerHTML).toBe('非常满意')
+})
+
 test('touchable', () => {
   const state = {
     count: 5,

src/packages/rate/demo.taro.tsx

@@ -16,6 +16,9 @@ import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
 import Demo12 from './demos/taro/demo12'
+import Demo13 from './demos/taro/demo13'
+import Demo14 from './demos/taro/demo14'
+import Demo15 from './demos/taro/demo15'
 
 const RateDemo = () => {
   const [translated] = useTranslate({
@@ -32,6 +35,9 @@ const RateDemo = () => {
       event: '绑定事件',
       touchable: '滑动选择',
       touchend: '滑动事件',
+      verticalLayout: '上下布局',
+      withLabel: '带标签',
+      animation: '过渡动画',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -46,6 +52,9 @@ const RateDemo = () => {
       event: '綁定事件',
       touchable: '滑動選擇',
       touchend: '滑動事件',
+      verticalLayout: '上下佈局',
+      withLabel: '帶標籤',
+      animation: '過渡動畫',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -60,6 +69,9 @@ const RateDemo = () => {
       event: 'Event',
       touchable: 'Touch to Select',
       touchend: 'Touch Event',
+      verticalLayout: 'Vertical Layout',
+      withLabel: 'With Label',
+      animation: 'Transition Animation',
     },
   })
   const cellStyle: CSSProperties = {
@@ -133,6 +145,21 @@ const RateDemo = () => {
             </Cell>
           </>
         )}
+
+        <View className="h2">{translated.verticalLayout}</View>
+        <Cell style={cellStyle}>
+          <Demo13 />
+        </Cell>
+
+        <View className="h2">{translated.withLabel}</View>
+        <Cell style={cellStyle}>
+          <Demo14 />
+        </Cell>
+
+        <View className="h2">{translated.animation}</View>
+        <Cell style={cellStyle}>
+          <Demo15 />
+        </Cell>
       </ScrollView>
     </>
   )

src/packages/rate/demo.tsx

@@ -13,6 +13,9 @@ import Demo9 from './demos/h5/demo9'
 import Demo10 from './demos/h5/demo10'
 import Demo11 from './demos/h5/demo11'
 import Demo12 from './demos/h5/demo12'
+import Demo13 from './demos/h5/demo13'
+import Demo14 from './demos/h5/demo14'
+import Demo15 from './demos/h5/demo15'
 
 const RateDemo = () => {
   const [translated] = useTranslate({
@@ -29,6 +32,9 @@ const RateDemo = () => {
       event: '绑定事件',
       touchable: '滑动选择',
       touchevent: '滑动事件',
+      verticalLayout: '上下布局',
+      withLabel: '带标签',
+      animation: '过渡动画',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -43,6 +49,9 @@ const RateDemo = () => {
       event: '綁定事件',
       touchable: '滑動選擇',
       touchevent: '滑動事件',
+      verticalLayout: '上下佈局',
+      withLabel: '帶標籤',
+      animation: '過渡動畫',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -57,6 +66,9 @@ const RateDemo = () => {
       event: 'Event',
       touchable: 'Touch to Select',
       touchevent: 'Touch Event',
+      verticalLayout: 'Vertical Layout',
+      withLabel: 'With Label',
+      animation: 'Transition Animation',
     },
   })
   const cellStyle: CSSProperties = {
@@ -126,6 +138,21 @@ const RateDemo = () => {
         <Cell style={cellStyle}>
           <Demo12 />
         </Cell>
+
+        <h2>{translated.verticalLayout}</h2>
+        <Cell style={cellStyle}>
+          <Demo13 />
+        </Cell>
+
+        <h2>{translated.withLabel}</h2>
+        <Cell style={cellStyle}>
+          <Demo14 />
+        </Cell>
+
+        <h2>{translated.animation}</h2>
+        <Cell style={cellStyle}>
+          <Demo15 />
+        </Cell>
       </div>
     </>
   )

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

@@ -4,9 +4,9 @@ import { Rate, Space } from '@nutui/nutui-react'
 const Demo1 = () => {
   return (
     <Space direction="vertical">
-      <Rate defaultValue={3} size="large" />
-      <Rate defaultValue={3} />
       <Rate defaultValue={3} size="small" />
+      <Rate defaultValue={3} />
+      <Rate defaultValue={3} size="large" />
     </Space>
   )
 }

src/packages/rate/demos/h5/demo13.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Rate, Space } from '@nutui/nutui-react'
+
+const Demo13 = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Rate
+        defaultValue={4}
+        direction="vertical"
+        label={['不满意', '', '', '', '非常满意']}
+      />
+      <Rate
+        defaultValue={4}
+        direction="vertical"
+        size="large"
+        label={['不满意', '', '', '', '非常满意']}
+      />
+    </Space>
+  )
+}
+export default Demo13

src/packages/rate/demos/h5/demo14.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Rate, Space } from '@nutui/nutui-react'
+
+const Demo14 = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Rate defaultValue={4} size="small" label="一键评分" />
+      <Rate defaultValue={4} label="一键评分" />
+      <Rate defaultValue={4} size="large" label="一键评分" />
+      <Rate
+        defaultValue={4}
+        direction="vertical"
+        size="large"
+        label={['非常不满', '不满意', '一般', '满意', '非常满意']}
+      />
+    </Space>
+  )
+}
+export default Demo14

src/packages/rate/demos/h5/demo15.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Rate, Space } from '@nutui/nutui-react'
+
+const Demo15 = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Rate defaultValue={0} size="large" />
+      <Rate defaultValue={0} direction="vertical" size="large" />
+    </Space>
+  )
+}
+export default Demo15

src/packages/rate/demos/h5/demo9.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
-import { Rate } from '@nutui/nutui-react'
+import { Rate, Space } from '@nutui/nutui-react'
 
 const Demo9 = () => {
-  return <Rate defaultValue={3} readOnly />
+  return (
+    <Space direction="vertical">
+      <Rate defaultValue={3} readOnly />
+      <Rate defaultValue={4} readOnly showScore label="评分" />
+    </Space>
+  )
 }
 export default Demo9

src/packages/rate/demos/taro/demo1.tsx

@@ -4,9 +4,9 @@ import { Rate, Space } from '@nutui/nutui-react-taro'
 const Demo1 = () => {
   return (
     <Space direction="vertical">
-      <Rate defaultValue={3} size="large" />
-      <Rate defaultValue={3} />
       <Rate defaultValue={3} size="small" />
+      <Rate defaultValue={3} />
+      <Rate defaultValue={3} size="large" />
     </Space>
   )
 }

src/packages/rate/demos/taro/demo13.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Rate, Space } from '@nutui/nutui-react-taro'
+
+const Demo13 = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Rate
+        defaultValue={4}
+        direction="vertical"
+        label={['不满意', '', '', '', '非常满意']}
+      />
+      <Rate
+        defaultValue={4}
+        direction="vertical"
+        size="large"
+        label={['不满意', '', '', '', '非常满意']}
+      />
+    </Space>
+  )
+}
+export default Demo13