feat(v15): indicator adaptation (#2746)

* feat(v14): indicator adaptation * feat(v14): indicator adaptation * feat: 增加视觉限制最大宽度 * fix: review * fix: update test * fix: 覆盖率 * fix: review * fix: review --------- Co-authored-by: xiaoyatong <[email protected]>
jdf2e · Dec 27, 2024 · c3cb26b · c3cb26b
1 parent f764c71
commit c3cb26b
Show file tree

Hide file tree

Showing 22 changed files with 606 additions and 174 deletions.
diff --git a/migrate-from-v2.md b/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
 

diff --git a/src/config.json b/src/config.json
@@ -1048,6 +1048,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "liukun"
         },
         {

diff --git a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap b/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>

diff --git a/src/packages/indicator/__test__/indicator.spec.tsx b/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
+  )
+})
diff --git a/src/packages/indicator/demo.taro.tsx b/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 />
 

diff --git a/src/packages/indicator/demo.tsx b/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 />
 

diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/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>
     </>
   )

diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
@@ -1,38 +1,61 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Indicator total={6} current={5} direction="vertical">
-        <div
+    <>
+      <Cell>
+        <Indicator total={6} current={5} direction="vertical">
+          <div
+            style={{
+              display: 'inline-block',
+              width: '14px',
+              height: '14px',
+              lineHeight: '14px',
+              textAlign: 'center',
+              fontSize: '12px',
+              color: '#FFFFFF',
+              border: '1px solid #FFFFFF',
+              borderRadius: '50%',
+              margin: '4px',
+              background: `var(--nutui-color-primary)`,
+              boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            }}
+          >
+            {5}
+          </div>
+        </Indicator>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
           style={{
-            display: 'inline-block',
-            width: '14px',
-            height: '14px',
-            lineHeight: '14px',
-            textAlign: 'center',
-            fontSize: '12px',
-            color: '#FFFFFF',
-            border: '1px solid #FFFFFF',
-            borderRadius: '50%',
-            margin: '4px',
-            background: `var(--nutui-color-primary)`,
-            boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            marginLeft: '50px',
           }}
-        >
-          {5}
-        </div>
-      </Indicator>
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
-    </Cell>
+        />
+
+        <Indicator
+          total={6}
+          current={5}
+          direction="vertical"
+          type="slide"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          color="white"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" direction="vertical" />
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
 
 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>
     </>
   )