fix(divider): demo拆解与规范 (#2013)

jdf2e · Mar 13, 2024 · 4deeb8d · 4deeb8d
1 parent 397aa3d
commit 4deeb8d
Show file tree

Hide file tree

Showing 18 changed files with 231 additions and 458 deletions.
diff --git a/src/packages/divider/demo.taro.tsx b/src/packages/divider/demo.taro.tsx
@@ -1,30 +1,24 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { Divider, Cell } from '@/packages/nutui.react.taro'
+import { Cell } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
+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'
 
-interface T {
-  basic: string
-  withText: string
-  contentPosition: string
-  dashed: string
-  customStyle: string
-  verticalDivider: string
-  text: string
-  link: string
-}
 const DividerDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       withText: '展示文本',
       contentPosition: '内容位置',
       dashed: '虚线',
       customStyle: '自定义样式',
       verticalDivider: '垂直分割线',
-      text: '文本',
-      link: '链接',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -33,8 +27,6 @@ const DividerDemo = () => {
       dashed: 'Dashed',
       customStyle: 'Custom Style',
       verticalDivider: 'Vertical Divider',
-      text: 'Text',
-      link: 'Link',
     },
   })
   return (
@@ -43,65 +35,25 @@ const DividerDemo = () => {
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
         <Cell>
-          <Divider />
+          <Demo1 />
         </Cell>
         <h2>{translated.withText}</h2>
         <Cell>
-          <Divider>{translated.text}</Divider>
+          <Demo2 />
         </Cell>
         <h2>{translated.contentPosition}</h2>
-        <Cell>
-          <Divider contentPosition="left">{translated.text}</Divider>
-        </Cell>
-        <Cell>
-          <Divider contentPosition="right">{translated.text}</Divider>
-        </Cell>
+        <Demo3 />
         <h2>{translated.dashed}</h2>
         <Cell>
-          <Divider
-            style={{
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo4 />
         </Cell>
         <h2>{translated.customStyle}</h2>
         <Cell>
-          <Divider
-            style={{
-              color: '#1989fa',
-              borderColor: '#1989fa',
-              padding: '0 16px',
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo5 />
         </Cell>
         <h2>{translated.verticalDivider}</h2>
         <Cell>
-          <div style={{ fontSize: '14px', color: '#909ca4' }}>
-            {translated.text}
-            <Divider direction="vertical" />
-            <span
-              onClick={() => {
-                Taro.navigateTo({ url: '/pages/index/index' })
-              }}
-              style={{ color: '#1989fa', display: 'inline-block' }}
-            >
-              {translated.link}
-            </span>
-            <Divider direction="vertical" />
-            <span
-              onClick={() => {
-                Taro.navigateTo({ url: '/pages/index/index' })
-              }}
-              style={{ color: '#1989fa', display: 'inline-block' }}
-            >
-              {translated.link}
-            </span>
-          </div>
+          <Demo6 />
         </Cell>
       </div>
     </>

diff --git a/src/packages/divider/demo.tsx b/src/packages/divider/demo.tsx
@@ -1,29 +1,22 @@
 import React from 'react'
-import { Divider } from './divider'
 import { useTranslate } from '../../sites/assets/locale'
 import Cell from '@/packages/cell'
+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'
 
-interface T {
-  basic: string
-  withText: string
-  contentPosition: string
-  dashed: string
-  customStyle: string
-  verticalDivider: string
-  text: string
-  link: string
-}
 const DividerDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       withText: '展示文本',
       contentPosition: '内容位置',
       dashed: '虚线',
       customStyle: '自定义样式',
       verticalDivider: '垂直分割线',
-      text: '文本',
-      link: '链接',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -32,68 +25,32 @@ const DividerDemo = () => {
       dashed: 'Dashed',
       customStyle: 'Custom Style',
       verticalDivider: 'Vertical Divider',
-      text: 'Text',
-      link: 'Link',
     },
   })
   return (
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
         <Cell>
-          <Divider />
+          <Demo1 />
         </Cell>
-
         <h2>{translated.withText}</h2>
         <Cell>
-          <Divider>{translated.text}</Divider>
+          <Demo2 />
         </Cell>
-
         <h2>{translated.contentPosition}</h2>
-        <Cell>
-          <Divider contentPosition="left">{translated.text}</Divider>
-        </Cell>
-        <Cell>
-          <Divider contentPosition="right">{translated.text}</Divider>
-        </Cell>
+        <Demo3 />
         <h2>{translated.dashed}</h2>
         <Cell>
-          <Divider
-            style={{
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo4 />
         </Cell>
-
         <h2>{translated.customStyle}</h2>
         <Cell>
-          <Divider
-            style={{
-              color: '#1989fa',
-              borderColor: '#1989fa',
-              padding: '0 16px',
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo5 />
         </Cell>
         <h2>{translated.verticalDivider}</h2>
         <Cell>
-          <div style={{ fontSize: '14px', color: '' }}>
-            {translated.text}
-
-            <Divider direction="vertical" />
-            <a href="#/Divider" style={{ color: '#4d88ff' }}>
-              {translated.link}
-            </a>
-            <Divider direction="vertical" />
-            <a href="#/Divider" style={{ color: '#4d88ff' }}>
-              {translated.link}
-            </a>
-          </div>
+          <Demo6 />
         </Cell>
       </div>
     </>

diff --git a/src/packages/divider/demos/h5/demo1.tsx b/src/packages/divider/demos/h5/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Divider />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/divider/demos/h5/demo2.tsx b/src/packages/divider/demos/h5/demo2.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Divider>文本</Divider>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/divider/demos/h5/demo3.tsx b/src/packages/divider/demos/h5/demo3.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Divider, Cell } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Cell>
+        <Divider contentPosition="left">文本</Divider>
+      </Cell>
+      <Cell>
+        <Divider contentPosition="right">文本</Divider>
+      </Cell>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/divider/demos/h5/demo4.tsx b/src/packages/divider/demos/h5/demo4.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/divider/demos/h5/demo5.tsx b/src/packages/divider/demos/h5/demo5.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Divider
+        style={{
+          color: '#1989fa',
+          borderColor: '#1989fa',
+          padding: '0 16px',
+          borderStyle: 'dashed',
+        }}
+      >
+        文本
+      </Divider>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/divider/demos/h5/demo6.tsx b/src/packages/divider/demos/h5/demo6.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <div>
+        文本
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+      </div>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/divider/demos/taro/demo1.tsx b/src/packages/divider/demos/taro/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Divider />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/divider/demos/taro/demo2.tsx b/src/packages/divider/demos/taro/demo2.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Divider>文本</Divider>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/divider/demos/taro/demo3.tsx b/src/packages/divider/demos/taro/demo3.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Divider, Cell } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Cell>
+        <Divider contentPosition="left">文本</Divider>
+      </Cell>
+      <Cell>
+        <Divider contentPosition="right">文本</Divider>
+      </Cell>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/divider/demos/taro/demo4.tsx b/src/packages/divider/demos/taro/demo4.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </>
+  )
+}
+export default Demo4