fix(textarea): demo拆解与规范 (jdf2e#2132)

src/packages/textarea/demo.taro.tsx

@@ -1,8 +1,15 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
-import { useTranslate } from '@/sites/assets/locale/taro'
-import { TextArea, ConfigProvider } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
+import { useTranslate } from '@/sites/assets/locale/taro'
+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'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
 
 interface T {
   basic: string
@@ -60,67 +67,26 @@ const TextAreaDemo = () => {
       alignRight: 'TextAlign Right',
     },
   })
-
-  const [value, setValue] = useState(translated.controlled)
-
-  const customTheme = {
-    nutuiTextareaTextCurrorColor: `red`,
-    nutuiTextareaLimitColor: `red`,
-  }
-
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
-        <TextArea
-          defaultValue={translated.basic}
-          className="text-1"
-          style={{ fontSize: '12px' }}
-          onChange={(value) => {
-            console.log('change', value)
-          }}
-          onBlur={() => {
-            console.log('blur')
-          }}
-          onFocus={() => {
-            console.log('focus')
-          }}
-        />
+        <Demo1 />
         <h2>{translated.controlled}</h2>
-        <TextArea
-          value={value}
-          onChange={(value) => {
-            setValue(value)
-          }}
-        />
+        <Demo2 />
         <h2>{translated.numbers}</h2>
-        <TextArea showCount maxLength={20} />
+        <Demo3 />
         <h2>{translated.autoHeight}</h2>
-        <TextArea rows={1} autoSize />
+        <Demo4 />
         <h2>{translated.we2312222}</h2>
-        <ConfigProvider theme={customTheme}>
-          <TextArea showCount maxLength={20} />
-        </ConfigProvider>
+        <Demo5 />
         <h2>{translated.readOnly}</h2>
-        <TextArea
-          readOnly
-          defaultValue={`textarea${translated.readOnlyState}`}
-        />
+        <Demo6 />
         <h2>{translated.disabled}</h2>
-        <TextArea
-          disabled
-          defaultValue={`textarea${translated.disabledState}`}
-          showCount
-          maxLength={20}
-        />
+        <Demo7 />
         <h2>{translated.textAlign}</h2>
-        <TextArea
-          defaultValue={translated.alignRight}
-          style={{
-            textAlign: 'right',
-          }}
-        />
+        <Demo8 />
       </div>
     </>
   )

src/packages/textarea/demo.tsx

@@ -1,7 +1,13 @@
-import React, { useState } from 'react'
-import { TextArea } from './textarea'
+import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import ConfigProvider from '@/packages/configprovider'
+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'
+import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
 
 interface T {
   basic: string
@@ -60,65 +66,25 @@ const TextAreaDemo = () => {
     },
   })
 
-  const [value, setValue] = useState(translated.controlled)
-
-  const customTheme = {
-    nutuiTextareaTextCurrorColor: `red`,
-    nutuiTextareaLimitColor: `red`,
-  }
-
   return (
     <>
       <div className="demo" style={{ paddingBottom: '20px' }}>
         <h2>{translated.basic}</h2>
-        <TextArea
-          defaultValue={translated.basic}
-          className="text-1"
-          style={{ fontSize: '12px' }}
-          onChange={(value) => {
-            console.log('change', value)
-          }}
-          onBlur={() => {
-            console.log('blur')
-          }}
-          onFocus={() => {
-            console.log('focus')
-          }}
-        />
+        <Demo1 />
         <h2>{translated.controlled}</h2>
-        <TextArea
-          value={value}
-          onChange={(value) => {
-            setValue(value)
-          }}
-        />
+        <Demo2 />
         <h2>{translated.numbers}</h2>
-        <TextArea showCount maxLength={20} />
+        <Demo3 />
         <h2>{translated.autoHeight}</h2>
-        <TextArea rows={1} autoSize />
+        <Demo4 />
         <h2>{translated.we2312222}</h2>
-        <ConfigProvider theme={customTheme}>
-          <TextArea showCount maxLength={20} />
-        </ConfigProvider>
+        <Demo5 />
         <h2>{translated.readOnly}</h2>
-        <TextArea
-          readOnly
-          defaultValue={`textarea${translated.readOnlyState}`}
-        />
+        <Demo6 />
         <h2>{translated.disabled}</h2>
-        <TextArea
-          disabled
-          defaultValue={`textarea${translated.disabledState}`}
-          showCount
-          maxLength={20}
-        />
+        <Demo7 />
         <h2>{translated.textAlign}</h2>
-        <TextArea
-          defaultValue={translated.alignRight}
-          style={{
-            textAlign: 'right',
-          }}
-        />
+        <Demo8 />
       </div>
     </>
   )

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <TextArea
+      defaultValue="基础用法"
+      className="text-1"
+      style={{ fontSize: '12px' }}
+      onChange={(value) => console.log('change', value)}
+      onBlur={() => console.log('blur')}
+      onFocus={() => console.log('focus')}
+    />
+  )
+}
+export default Demo1

src/packages/textarea/demos/h5/demo2.tsx

@@ -0,0 +1,8 @@
+import React, { useState } from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  const [value, setValue] = useState('')
+  return <TextArea value={value} onChange={(value) => setValue(value)} />
+}
+export default Demo2

src/packages/textarea/demos/h5/demo3.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return <TextArea showCount maxLength={20} />
+}
+export default Demo3

src/packages/textarea/demos/h5/demo4.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  return <TextArea rows={1} autoSize />
+}
+export default Demo4

src/packages/textarea/demos/h5/demo5.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ConfigProvider, TextArea } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  const customTheme = {
+    nutuiTextareaTextCurrorColor: `red`,
+    nutuiTextareaLimitColor: `red`,
+  }
+  return (
+    <ConfigProvider theme={customTheme}>
+      <TextArea showCount maxLength={20} />
+    </ConfigProvider>
+  )
+}
+export default Demo5

src/packages/textarea/demos/h5/demo6.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <TextArea readOnly defaultValue="textarea只读状态" />
+    </>
+  )
+}
+export default Demo6

src/packages/textarea/demos/h5/demo7.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return (
+    <>
+      <TextArea
+        disabled
+        defaultValue="textarea禁用状态"
+        showCount
+        maxLength={20}
+      />
+    </>
+  )
+}
+export default Demo7

src/packages/textarea/demos/h5/demo8.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  return (
+    <TextArea
+      defaultValue="文本居右"
+      style={{
+        textAlign: 'right',
+      }}
+    />
+  )
+}
+export default Demo8

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

@@ -0,0 +1,16 @@
+import { TextArea } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <TextArea
+      defaultValue="基础用法"
+      className="text-1"
+      style={{ fontSize: '12px' }}
+      onChange={(value) => console.log('change', value)}
+      onBlur={() => console.log('blur')}
+      onFocus={() => console.log('focus')}
+    />
+  )
+}
+export default Demo1

src/packages/textarea/demos/taro/demo2.tsx

@@ -0,0 +1,8 @@
+import React, { useState } from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  const [value, setValue] = useState('')
+  return <TextArea value={value} onChange={(value) => setValue(value)} />
+}
+export default Demo2

src/packages/textarea/demos/taro/demo3.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  return <TextArea showCount maxLength={20} />
+}
+export default Demo3

src/packages/textarea/demos/taro/demo4.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  return <TextArea rows={1} autoSize />
+}
+export default Demo4

src/packages/textarea/demos/taro/demo5.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ConfigProvider, TextArea } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  const customTheme = {
+    nutuiTextareaTextCurrorColor: `red`,
+    nutuiTextareaLimitColor: `red`,
+  }
+  return (
+    <ConfigProvider theme={customTheme}>
+      <TextArea showCount maxLength={20} />
+    </ConfigProvider>
+  )
+}
+export default Demo5

src/packages/textarea/demos/taro/demo6.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  return (
+    <>
+      <TextArea readOnly defaultValue="textarea只读状态" />
+    </>
+  )
+}
+export default Demo6

src/packages/textarea/demos/taro/demo7.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <>
+      <TextArea
+        disabled
+        defaultValue="textarea禁用状态"
+        showCount
+        maxLength={20}
+      />
+    </>
+  )
+}
+export default Demo7

src/packages/textarea/demos/taro/demo8.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  return (
+    <TextArea
+      defaultValue="文本居右"
+      style={{
+        textAlign: 'right',
+      }}
+    />
+  )
+}
+export default Demo8