Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions migrate-from-v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -516,12 +516,9 @@ plugins: [

#### TextArea

- `maxlength` 重命名为 `maxLength`
- `readonly` 重命名为 `readOnly`
- `limitShow` 重命名为 `showCount`
- `autosize` 重命名为 `autoSize`
- 移除 `textAlign`,可通过 `style` 传入
- `defaultValue` 改为非受控,增加受控值 `value`
- 新增 `plain` 属性,标记为 纯文本型;该值默认为false,标记为 container 容器型;
- 新增 `status` 属性,值为 `default` | `error`,可定义输入框的状态;
- 删掉一些可使用基础样式变量,并且建议使用基础样式变量的样式变量,比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`

#### Uploader

Expand Down
1 change: 1 addition & 0 deletions src/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,7 @@
"sort": 2,
"show": true,
"taro": true,
"v15": true,
"author": "VickyYe"
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`textarea props test 1`] = `
<div>
<div
class="nut-textarea"
class="nut-textarea nut-textarea-container nut-textarea-default"
>
<textarea
class="nut-textarea-textarea "
Expand Down
7 changes: 7 additions & 0 deletions src/packages/textarea/demo.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
import Demo8 from './demos/taro/demo8'
import Demo9 from './demos/taro/demo9'

interface T {
basic: string
Expand All @@ -24,6 +25,7 @@ interface T {
disabledState: string
textAlign: string
alignRight: string
error: string
}

const TextAreaDemo = () => {
Expand All @@ -40,6 +42,7 @@ const TextAreaDemo = () => {
disabledState: '禁用状态',
textAlign: '文本位置',
alignRight: '文本居右',
error: '错误状态',
},
'zh-TW': {
basic: '基礎用法',
Expand All @@ -53,6 +56,7 @@ const TextAreaDemo = () => {
disabledState: '禁用狀態',
textAlign: '文本位置',
alignRight: '文本居右',
error: '錯誤狀態',
},
'en-US': {
basic: 'Basic usage',
Expand All @@ -66,6 +70,7 @@ const TextAreaDemo = () => {
disabledState: 'Disabled state',
textAlign: 'TextAlign',
alignRight: 'TextAlign Right',
error: 'Status is error',
},
})
return (
Expand All @@ -89,6 +94,8 @@ const TextAreaDemo = () => {
<Demo7 />
<View className="h2">{translated.textAlign}</View>
<Demo8 />
<h2>{translated.error}</h2>
<Demo9 />
</ScrollView>
</>
)
Expand Down
7 changes: 7 additions & 0 deletions src/packages/textarea/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
import Demo8 from './demos/h5/demo8'
import Demo9 from './demos/h5/demo9'

interface T {
basic: string
Expand All @@ -21,6 +22,7 @@ interface T {
disabledState: string
textAlign: string
alignRight: string
error: string
}

const TextAreaDemo = () => {
Expand All @@ -37,6 +39,7 @@ const TextAreaDemo = () => {
disabledState: '禁用状态',
textAlign: '文本位置',
alignRight: '文本居右',
error: '错误状态',
},
'zh-TW': {
basic: '基礎用法',
Expand All @@ -50,6 +53,7 @@ const TextAreaDemo = () => {
disabledState: '禁用狀態',
textAlign: '文本位置',
alignRight: '文本居右',
error: '錯誤狀態',
},
'en-US': {
basic: 'Basic usage',
Expand All @@ -63,6 +67,7 @@ const TextAreaDemo = () => {
disabledState: 'Disabled state',
textAlign: 'TextAlign',
alignRight: 'TextAlign Right',
error: 'Status is error',
},
})

Expand All @@ -85,6 +90,8 @@ const TextAreaDemo = () => {
<Demo7 />
<h2>{translated.textAlign}</h2>
<Demo8 />
<h2>{translated.error}</h2>
<Demo9 />
</div>
</>
)
Expand Down
25 changes: 16 additions & 9 deletions src/packages/textarea/demos/h5/demo1.tsx
Original file line number Diff line number Diff line change
@@ -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
plain
defaultValue="基础用法:纯文本型"
onChange={(value) => console.log('change', value)}
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
<TextArea
defaultValue="基础用法:容器型"
onChange={(value) => console.log('change', value)}
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
</Space>
)
}
export default Demo1
7 changes: 7 additions & 0 deletions src/packages/textarea/demos/h5/demo9.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react'
import { TextArea } from '@nutui/nutui-react'

const Demo8 = () => {
return <TextArea status="error" defaultValue="输入内容错误" />
}
export default Demo8
26 changes: 16 additions & 10 deletions src/packages/textarea/demos/taro/demo1.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import React from 'react'
import { TextArea } from '@nutui/nutui-react-taro'
import pxTransform from '@/utils/px-transform'
import { Space, TextArea } from '@nutui/nutui-react-taro'

const Demo1 = () => {
return (
<TextArea
defaultValue="基础用法"
className="text-1"
style={{ fontSize: pxTransform(12) }}
onChange={(value) => console.log('change', value)}
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
<Space direction="vertical">
<TextArea
plain
defaultValue="基础用法:纯文本型"
onChange={(value) => console.log('change', value)}
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
<TextArea
defaultValue="基础用法:容器型"
onChange={(value) => console.log('change', value)}
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
</Space>
)
}
export default Demo1
7 changes: 7 additions & 0 deletions src/packages/textarea/demos/taro/demo9.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react'
import { TextArea } from '@nutui/nutui-react-taro'

const Demo8 = () => {
return <TextArea status="error" defaultValue="输入内容错误" />
}
export default Demo8
5 changes: 2 additions & 3 deletions src/packages/textarea/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react'
| autoSize | whether to adapt the content height. | `boolean` | `false` |
| readOnly | read only attribute | `boolean` | `false` |
| disabled | disable attribute | `boolean` | `false` |
| plain | mark textarea's container type, false is for `container`, true is for `纯文本型` | `boolean` | `false` |
| status | textarea status, with default and error | `default /\ error` | `default` |
| onChange | Triggered when the value of the input box changes | `(value) => void` | `-` |
| onFocus | Triggered when focusing | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
| onBlur | Triggered when out of focus | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
Expand All @@ -101,9 +103,6 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default |
| --- | --- | --- |
| \--nutui-textarea-font | fontSize | `$font-size-base` |
| \--nutui-textarea-padding | padding | `10px 25px` |
| \--nutui-textarea-limit-color | limit color | `$color-text` |
| \--nutui-textarea-text-color | text color | `$color-title` |
| \--nutui-textarea-text-curror-color | caret color | `$color-title` |
| \--nutui-textarea-disabled-color | disabled color | `$color-text-disabled` |
7 changes: 3 additions & 4 deletions src/packages/textarea/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react'
| autoSize | 高度是否可拉伸 | `boolean` | `false` |
| readOnly | 只读属性 | `boolean` | `false` |
| disabled | 禁用属性 | `boolean` | `false` |
| plain | 标记文本域的容器类型,false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
| status | 文本域状态,可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
| onChange | 输入内容时触发 | `(value) => void` | `-` |
| onFocus | 聚焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
| onBlur | 失焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
Expand All @@ -101,9 +103,6 @@ import { TextArea } from '@nutui/nutui-react'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
| \--nutui-textarea-padding | 内边距 | `10px 25px` |
| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
| \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-primary` |
5 changes: 2 additions & 3 deletions src/packages/textarea/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react-taro'
| autoSize | 高度是否可拉伸 | `boolean` | `false` |
| readOnly | 只读属性 | `boolean` | `false` |
| disabled | 禁用属性 | `boolean` | `false` |
| plain | 标记文本域的容器类型,false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
| status | 文本域状态,可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
| onChange | 输入内容时触发 | `(value) => void` | `-` |
| onFocus | 聚焦时触发 | `(event) => void` | `-` |
| onBlur | 失焦时触发 | `(event) => void` | `-` |
Expand All @@ -101,9 +103,6 @@ import { TextArea } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
| \--nutui-textarea-padding | 内边距 | `10px 25px` |
| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
| \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
5 changes: 2 additions & 3 deletions src/packages/textarea/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ import { TextArea } from '@nutui/nutui-react'
| autoSize | 高度是否可拉伸 | `boolean` | `false` |
| readOnly | 只讀屬性 | `boolean` | `false` |
| disabled | 禁用屬性 | `boolean` | `false` |
| plain | 標記文本域的容器類型,false 為容器型 `container`, true 為 `純文本型` | `boolean` | `false` |
| status | 文本域狀態,可標記為 默認狀態 和 錯誤狀態 | `default /\ error` | `default` |
| onChange | 輸入內容時觸發 | `(value) => void` | `-` |
| onFocus | 聚焦時觸發 | `(event) => void` | `-` |
| onBlur | 失焦時觸發 | `(event) => void` | `-` |
Expand All @@ -100,9 +102,6 @@ import { TextArea } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-textarea-font | 字體大小 | `$font-size-base` |
| \--nutui-textarea-padding | 內邊距 | `10px 25px` |
| \--nutui-textarea-limit-color | 字數統計顏色 | `$color-text` |
| \--nutui-textarea-text-color | 文本顏色 | `$color-title` |
| \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` |
| \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disabled` |
59 changes: 43 additions & 16 deletions src/packages/textarea/textarea.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
.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;
}

&-error {
border: 0.5px solid $color-danger;
background-color: $color-danger-light;
}

&-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: $spacing-base;
color: $color-text-help;
&-disabled {
cursor: not-allowed;
color: $textarea-disabled-color;
color: $color-text-disabled;
}
}

Expand All @@ -25,33 +34,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;
Comment on lines +37 to +41
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

文本域强制固定 height: 40px 可能影响自适应布局。
若设计需求存在高度自动扩展,可考虑以 min-height 替换固定高度,更灵活地展示多行文本。

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;
}
}
}
Expand Down
Loading
Loading