fix(drag): demo拆解与规范 (#2163)

* fix(drag): demo拆解与规范 * chore(tag): demo * fix: update
jdf2e · Apr 12, 2024 · f5f26ab · f5f26ab
1 parent de455fb
commit f5f26ab
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 531 deletions.
diff --git a/src/packages/drag/demo.taro.tsx b/src/packages/drag/demo.taro.tsx
@@ -1,132 +1,52 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { Drag, Button } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 
-interface T {
-  basic: string
-  dragBasic: string
-  direction: string
-  directionX: string
-  directionY: string
-  attract: string
-  attractText: string
-  limitBoundaries: string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+
 const DragDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
-      dragBasic: '触摸移动',
       direction: '限制拖拽方向',
-      directionX: '只能X轴拖动',
-      directionY: '只能Y轴拖动',
       attract: '自动吸边',
-      attractText: '按钮',
       limitBoundaries: '限制拖拽边界',
     },
     'zh-TW': {
       basic: '基础用法',
-      dragBasic: '觸摸移動',
       direction: '限製拖拽方向',
-      directionX: '只能X軸拖動',
-      directionY: '只能Y軸拖動',
       attract: '自動吸邊',
-      attractText: '按鈕',
       limitBoundaries: '限製拖拽邊界',
     },
     'en-US': {
       basic: 'Basic Usage',
-      dragBasic: 'Button',
       direction: 'Limit Direction',
-      directionX: 'X axis',
-      directionY: 'Y axis',
       attract: 'Attract',
-      attractText: 'Button',
       limitBoundaries: 'Limit Boundaries',
     },
   })
-  const { screenWidth, windowHeight } = Taro.getSystemInfoSync()
 
   const isTaroWeb = Taro.getEnv() === 'WEB'
 
-  const right = () => {
-    return screenWidth - 300 - 9
-  }
-  const bottom = () => {
-    return windowHeight - 501 - (isTaroWeb ? 57 : 0)
-  }
   return (
     <>
       <Header />
-      <div className={`demo ${isTaroWeb ? 'web' : ''}`}>
+      <div className={`demo full ${isTaroWeb ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
-        <Drag style={{ left: '8px' }}>
-          <Button type="primary">{translated.dragBasic}</Button>
-        </Drag>
-        <h2 style={{ top: '30px', position: 'relative' }}>
-          {translated.direction}
-        </h2>
-        <Drag
-          direction="x"
-          style={{
-            top: isTaroWeb ? '197px' : '140px',
-            left: '8px',
-          }}
-        >
-          <Button type="primary"> {translated.directionX}</Button>
-        </Drag>
-        <Drag
-          direction="y"
-          style={{
-            top: isTaroWeb ? '197px' : '140px',
-            right: '50px',
-          }}
-        >
-          <Button type="primary"> {translated.directionY}</Button>
-        </Drag>
-        <h2 style={{ top: '60px', position: 'relative' }}>
-          {translated.attract}
-        </h2>
-        <Drag
-          direction="x"
-          attract
-          style={{
-            top: isTaroWeb ? '277px' : '220px',
-            left: '8px',
-          }}
-        >
-          <Button type="primary">{translated.attractText}</Button>
-        </Drag>
-        <h2 style={{ top: '90px', position: 'relative' }}>
-          {translated.limitBoundaries}
-        </h2>
-        <div
-          className="drag-boundary"
-          style={{
-            position: 'absolute',
-            top: isTaroWeb ? '357px' : '300px',
-            left: '8px',
-            width: '300px',
-            height: '200px',
-            border: '1px solid var(--nutui-color-primary)',
-          }}
-        />
-        <Drag
-          boundary={{
-            top: isTaroWeb ? 358 : 301,
-            left: 9,
-            bottom: bottom(),
-            right: right(),
-          }}
-          style={{
-            top: isTaroWeb ? '417px' : '360px',
-            left: '50px',
-          }}
-        >
-          <Button type="primary">{translated.limitBoundaries}</Button>
-        </Drag>
+        <Demo1 />
+
+        <h2 style={{ paddingTop: '30px' }}>{translated.direction}</h2>
+        <Demo2 />
+
+        <h2 style={{ paddingTop: '30px' }}>{translated.attract}</h2>
+        <Demo3 />
+
+        <h2 style={{ paddingTop: '30px' }}>{translated.limitBoundaries}</h2>
+        <Demo4 />
       </div>
     </>
   )

diff --git a/src/packages/drag/demo.tsx b/src/packages/drag/demo.tsx
@@ -1,99 +1,46 @@
 import React from 'react'
-import { Drag } from './drag'
 import { useTranslate } from '../../sites/assets/locale'
-import Button from '@/packages/button'
 
-interface T {
-  basic: string
-  dragBasic: string
-  direction: string
-  directionX: string
-  directionY: string
-  attract: string
-  attractText: string
-  limitBoundaries: string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+
 const DragDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
-      dragBasic: '触摸移动',
       direction: '限制拖拽方向',
-      directionX: '只能X轴拖动',
-      directionY: '只能Y轴拖动',
       attract: '自动吸边',
-      attractText: '按钮',
       limitBoundaries: '限制拖拽边界',
     },
     'zh-TW': {
       basic: '基础用法',
-      dragBasic: '觸摸移動',
       direction: '限製拖拽方向',
-      directionX: '只能X軸拖動',
-      directionY: '只能Y軸拖動',
       attract: '自動吸邊',
-      attractText: '按鈕',
       limitBoundaries: '限製拖拽邊界',
     },
     'en-US': {
       basic: 'Basic Usage',
-      dragBasic: 'Button',
       direction: 'Limit Direction',
-      directionX: 'X axis',
-      directionY: 'Y axis',
       attract: 'Attract',
-      attractText: 'Button',
       limitBoundaries: 'Limit Boundaries',
     },
   })
-  const right = () => {
-    return document.documentElement.clientWidth - 300 - 9
-  }
-  const bottom = () => {
-    return document.documentElement.clientHeight - 559
-  }
 
   return (
-    <div className="demo">
+    <div className="demo full">
       <h2>{translated.basic}</h2>
-      <Drag style={{ top: '120px', left: '8px' }}>
-        <Button type="primary">{translated.dragBasic}</Button>
-      </Drag>
-      <h2 style={{ top: '30px', position: 'relative' }}>
-        {translated.direction}
-      </h2>
-      <Drag direction="x" style={{ top: '200px', left: '8px' }}>
-        <Button type="primary">{translated.directionX}</Button>
-      </Drag>
-      <Drag direction="y" style={{ top: '200px', right: '50px' }}>
-        <Button type="primary">{translated.directionY}</Button>
-      </Drag>
-      <h2 style={{ top: '60px', position: 'relative' }}>
-        {translated.attract}
-      </h2>
-      <Drag direction="x" attract style={{ top: '275px', left: '8px' }}>
-        <Button type="primary">{translated.attractText}</Button>
-      </Drag>
-      <h2 style={{ top: '90px', position: 'relative' }}>
-        {translated.limitBoundaries}
-      </h2>
-      <div
-        className="drag-boundary"
-        style={{
-          position: 'absolute',
-          top: '360px',
-          left: '8px',
-          width: '300px',
-          height: '200px',
-          border: '1px solid var(--nutui-color-primary)',
-        }}
-      />
-      <Drag
-        boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}
-        style={{ top: '400px', left: '50px' }}
-      >
-        <Button type="primary">{translated.limitBoundaries}</Button>
-      </Drag>
+      <Demo1 />
+
+      <h2 style={{ paddingTop: '30px' }}>{translated.direction}</h2>
+      <Demo2 />
+
+      <h2 style={{ paddingTop: '30px' }}>{translated.attract}</h2>
+      <Demo3 />
+
+      <h2 style={{ paddingTop: '30px' }}>{translated.limitBoundaries}</h2>
+      <Demo4 />
     </div>
   )
 }

diff --git a/src/packages/drag/demos/h5/demo1.tsx b/src/packages/drag/demos/h5/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <Drag style={{ top: '120px', left: '24px' }}>
+      <Button type="primary">drag</Button>
+    </Drag>
+  )
+}
+export default Demo1
diff --git a/src/packages/drag/demos/h5/demo2.tsx b/src/packages/drag/demos/h5/demo2.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Drag direction="x" style={{ top: '200px', left: '24px' }}>
+        <Button type="primary">X</Button>
+      </Drag>
+      <Drag direction="y" style={{ top: '200px', right: '50px' }}>
+        <Button type="primary">Y</Button>
+      </Drag>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/drag/demos/h5/demo3.tsx b/src/packages/drag/demos/h5/demo3.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return (
+    <Drag direction="x" attract style={{ top: '275px', left: '0px' }}>
+      <Button type="primary">attract</Button>
+    </Drag>
+  )
+}
+export default Demo3
diff --git a/src/packages/drag/demos/h5/demo4.tsx b/src/packages/drag/demos/h5/demo4.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  const right = () => {
+    return document.documentElement.clientWidth - 300 - 9
+  }
+  const bottom = () => {
+    return document.documentElement.clientHeight - 559
+  }
+  return (
+    <>
+      <div
+        className="drag-boundary"
+        style={{
+          position: 'absolute',
+          top: '360px',
+          left: '8px',
+          width: '300px',
+          height: '200px',
+          border: '1px solid var(--nutui-color-primary)',
+        }}
+      />
+      <Drag
+        boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}
+        style={{ top: '400px', left: '50px' }}
+      >
+        <Button type="primary">boundary</Button>
+      </Drag>
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/drag/demos/taro/demo1.tsx b/src/packages/drag/demos/taro/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <Drag style={{ left: '8px' }}>
+      <Button type="primary">drag</Button>
+    </Drag>
+  )
+}
+export default Demo1
diff --git a/src/packages/drag/demos/taro/demo2.tsx b/src/packages/drag/demos/taro/demo2.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Drag, Button } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Drag
+        direction="x"
+        style={{
+          top: '200px',
+          left: '8px',
+        }}
+      >
+        <Button type="primary">X</Button>
+      </Drag>
+      <Drag
+        direction="y"
+        style={{
+          top: '200px',
+          right: '50px',
+        }}
+      >
+        <Button type="primary">Y</Button>
+      </Drag>
+    </>
+  )
+}
+export default Demo2