feat: textarea v15

xiaoyatong · xiaoyatong · commit 3d51df2264cb · 2024-12-25T21:31:13.000+08:00
diff --git a/migrate-from-v2.md b/migrate-from-v2.md
@@ -516,12 +516,8 @@ plugins: [
 
 #### TextArea
 
-- `maxlength` 重命名为 `maxLength`
-- `readonly` 重命名为 `readOnly`
-- `limitShow` 重命名为 `showCount`
-- `autosize` 重命名为 `autoSize`
-- 移除 `textAlign`，可通过 `style` 传入
-- `defaultValue` 改为非受控，增加受控值 `value`
+- 增加 `type`，只为 `plain` 和 `container`
+- 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
 
diff --git a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`textarea props test 1`] = `
 <div>
   <div
-    class="nut-textarea"
+    class="nut-textarea nut-textarea-plain"
   >
     <textarea
       class="nut-textarea-textarea "
diff --git a/src/packages/textarea/demos/h5/demo1.tsx b/src/packages/textarea/demos/h5/demo1.tsx
@@ -1,16 +1,23 @@
 import React from 'react'
-import { TextArea } from '@nutui/nutui-react'
+import { Space, 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')}
-    />
+    <Space direction="vertical">
+      <TextArea
+        defaultValue="基础用法1"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+      <TextArea
+        defaultValue="基础用法2"
+        type="container"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+    </Space>
   )
 }
 export default Demo1
diff --git a/src/packages/textarea/demos/h5/demo2.tsx b/src/packages/textarea/demos/h5/demo2.tsx
@@ -3,6 +3,12 @@ import { TextArea } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return <TextArea value={value} onChange={(value) => setValue(value)} />
+  return (
+    <TextArea
+      type="container"
+      value={value}
+      onChange={(value) => setValue(value)}
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/h5/demo3.tsx b/src/packages/textarea/demos/h5/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} />
+  return <TextArea showCount maxLength={20} type="container" />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/h5/demo4.tsx b/src/packages/textarea/demos/h5/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} />
+  return <TextArea autoSize maxLength={-1} type="container" />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/h5/demo5.tsx b/src/packages/textarea/demos/h5/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} />
+      <TextArea showCount maxLength={20} type="container" />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo6.tsx b/src/packages/textarea/demos/h5/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" />
+      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo7.tsx b/src/packages/textarea/demos/h5/demo7.tsx
@@ -8,6 +8,7 @@ const Demo7 = () => {
         disabled
         defaultValue="textarea禁用状态"
         showCount
+        type="container"
         maxLength={20}
       />
     </>
diff --git a/src/packages/textarea/demos/h5/demo8.tsx b/src/packages/textarea/demos/h5/demo8.tsx
@@ -5,6 +5,7 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
+      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/demos/taro/demo2.tsx b/src/packages/textarea/demos/taro/demo2.tsx
@@ -3,6 +3,12 @@ import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return <TextArea value={value} onChange={(value) => setValue(value)} />
+  return (
+    <TextArea
+      value={value}
+      onChange={(value) => setValue(value)}
+      type="container"
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/taro/demo3.tsx b/src/packages/textarea/demos/taro/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} />
+  return <TextArea showCount maxLength={20} type="container" />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/taro/demo4.tsx b/src/packages/textarea/demos/taro/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} />
+  return <TextArea autoSize maxLength={-1} type="container" />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/taro/demo5.tsx b/src/packages/textarea/demos/taro/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} />
+      <TextArea showCount maxLength={20} type="container" />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo6.tsx b/src/packages/textarea/demos/taro/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react-taro'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" />
+      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo7.tsx b/src/packages/textarea/demos/taro/demo7.tsx
@@ -7,6 +7,7 @@ const Demo7 = () => {
       <TextArea
         disabled
         defaultValue="textarea禁用状态"
+        type="container"
         showCount
         maxLength={20}
       />
diff --git a/src/packages/textarea/demos/taro/demo8.tsx b/src/packages/textarea/demos/taro/demo8.tsx
@@ -5,6 +5,7 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
+      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
@@ -1,22 +1,26 @@
 .nut-textarea {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  background-color: $color-background-overlay;
-  font-size: $textarea-font;
-  padding: $textarea-padding;
+  font-size: $font-size-base;
+  border-radius: $radius-s;
+
+  &-container {
+    padding: $textarea-padding;
+    background-color: $color-background-overlay;
+  }
 
   &-limit {
-    position: absolute;
-    right: 15px;
-    bottom: 12px;
-    font-size: $textarea-font;
-    color: $textarea-limit-color;
+    text-align: right;
+    font-size: $font-size-base;
+    line-height: $font-size-base;
+    margin-top: 8px;
+    color: $color-text-help;
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
     }
   }
 
@@ -25,33 +29,51 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
+    height: 40px;
     min-width: 0;
     margin: 0;
     padding: 0;
-    font-size: $textarea-font;
+    font-size: $font-size-base;
     color: $textarea-text-color;
     caret-color: $textarea-text-curror-color;
     text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
 
+    // &::after{
+    //   content: '';
+    //   position: absolute;
+    //   width: 2px;
+    //   height: 14px;
+    //   background-color: red;
+    //   // left: 10px;
+    //   // top: 50%;
+    //   transform: translateY(-50%);
+    //   z-index: 1;
+    //   pointer-events: none;
+    // }
+
     .taro-textarea {
       color: $textarea-text-color;
       background-color: transparent;
       resize: none;
     }
 
+    &::placeholder {
+      color: $color-text-help;
+    }
+
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
       &::placeholder {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
       }
       .taro-textarea {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
         &::placeholder {
-          color: $textarea-disabled-color;
+          color: $color-text-disabled;
         }
       }
     }
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
@@ -21,6 +21,7 @@ export interface TextAreaProps
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  type: 'plain' | 'container'
   onChange: (value: string) => void
   onBlur: (event: Event) => void
   onFocus: (event: Event) => void
@@ -35,6 +36,7 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  type: 'plain',
 } as TextAreaProps
 export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   const { locale } = useConfig()
@@ -50,6 +52,7 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     disabled,
     autoSize,
     style,
+    type,
     onChange,
     onBlur,
     onFocus,
@@ -103,6 +106,7 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
         {
           [`${classPrefix}-disabled`]: disabled,
           [`${classPrefix}-rtl`]: rtl,
+          [`${classPrefix}-${type}`]: type,
         },
         className
       )}
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
@@ -15,6 +15,7 @@ export interface TextAreaProps extends BasicComponent {
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  type: 'plain' | 'container'
   onChange: (value: string) => void
   onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
   onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
@@ -30,6 +31,7 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  type: 'plain',
 } as TextAreaProps
 export const TextArea: FunctionComponent<
   Partial<TextAreaProps> &
@@ -51,6 +53,7 @@ export const TextArea: FunctionComponent<
     disabled,
     autoSize,
     style,
+    type,
     onChange,
     onBlur,
     onFocus,
@@ -118,6 +121,7 @@ export const TextArea: FunctionComponent<
         {
           [`${classPrefix}-disabled`]: disabled,
           [`${classPrefix}-rtl`]: rtl,
+          [`${classPrefix}-${type}`]: type,
         },
         className
       )}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -561,22 +561,22 @@ $input-background-color: var(
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 // textarea（✅）
-$textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
-$textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
-$textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default;
+// $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
+$textarea-padding: var(--nutui-textarea-padding, 12px) !default;
+// $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text-help) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
   $color-title
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
-  30px
-) !default;
-$textarea-disabled-color: var(
-  --nutui-textarea-disabled-color,
-  $color-text-disabled
+  20px
 ) !default;
+// $textarea-disabled-color: var(
+//   --nutui-textarea-disabled-color,
+//   $color-text-disabled
+// ) !default;
 
 // inputnumber（✅）
 $inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	exports[`textarea props test 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<div`
`6`		`- class="nut-textarea"`
	`6`	`+ class="nut-textarea nut-textarea-plain"`
`7`	`7`	`>`
`8`	`8`	`<textarea`
`9`	`9`	`class="nut-textarea-textarea "`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import React from 'react'`
`2`	`2`	`import { TextArea } from '@nutui/nutui-react'`
`3`	`3`
`4`	`4`	`const Demo3 = () => {`
`5`		`- return <TextArea showCount maxLength={20} />`
	`5`	`+ return <TextArea showCount maxLength={20} type="container" />`
`6`	`6`	`}`
`7`	`7`	`export default Demo3`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import React from 'react'`
`2`	`2`	`import { TextArea } from '@nutui/nutui-react'`
`3`	`3`
`4`	`4`	`const Demo4 = () => {`
`5`		`- return <TextArea autoSize maxLength={-1} />`
	`5`	`+ return <TextArea autoSize maxLength={-1} type="container" />`
`6`	`6`	`}`
`7`	`7`	`export default Demo4`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ const Demo5 = () => {`
`8`	`8`	`}`
`9`	`9`	`return (`
`10`	`10`	`<ConfigProvider theme={customTheme}>`
`11`		`- <TextArea showCount maxLength={20} />`
	`11`	`+ <TextArea showCount maxLength={20} type="container" />`
`12`	`12`	`</ConfigProvider>`
`13`	`13`	`)`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react'`
`4`	`4`	`const Demo6 = () => {`
`5`	`5`	`return (`
`6`	`6`	`<>`
`7`		`- <TextArea readOnly defaultValue="textarea只读状态" />`
	`7`	`+ <TextArea readOnly defaultValue="textarea只读状态" type="container" />`
`8`	`8`	`</>`
`9`	`9`	`)`
`10`	`10`	`}`