Skip to content

Commit 5f31c2e

Browse files
Amber-Nan杨楠
Amber-Nan
and
杨楠
authored
feat(TextArea):增加多行输入框 & 文档更新 (#362)
* fix(Divider):优化 gutter属性不生效问题 * feat(Divider): 增加分割线标题的位置调整功能 & 更新文档 * feat(Rating):增加自定义每项的提示信息 & 更新文档 * feat(Rating):增加只读功能 & 文档更新 * feat(Timeline): 增加改变时间轴内容相对位置功能 & 文档更新 * style(Timeline):Update Readme.md img * feat(Timeline):增加自定义图标 & 文档更新 * feat(Timeline):优化自定义图标 & 文档更新 * feat:新增Calendar 日历组件 * doc(website): Update Calendar Readme.md * feat(Calendar):增加农历及假期展示 && 文档更新 * feat(Calendar):增加假日文字颜色 * feat(Calendar):左上角按钮增加自定义跳转功能&文档更新 * feat(Calendar):优化农历假日及文字排版 * feat(Calendar):处理文字长度 * fix(Calendar):优化安卓文字排版 * feat(Calendar):增加农历详情展示 & 文档更新 * feat(DragDrawer):新增DragDrawer 拖曳抽屉 & 文档更新 * doc(website): 增加DragDrawer目录 * feat(DragDrawer):增加自定义图标 & 文档更新 * feat(DragDrawer): 增加抽屉自定义样式 & 文档更新 * feat(DragDrawer): 增加抽屉自定义样式 & 文档更新 * feat(DragDrawer):自定义抽屉样式 * doc(website): Update ios打包Readme.md * doc(website): Update TreeSelect Readme.md * doc(website): Update Readme.md * style(website): Update Readme.md * feat(TextArea):增加多行输入框 & 文档更新 * fix(DragDrawer):修改组件展示示例 * feat(TextArea):增加字数展示 && 文档更新 Co-authored-by: 杨楠 <yangnan@nihaosi.com>
1 parent dfea5a5 commit 5f31c2e

File tree

9 files changed

+439
-1
lines changed

9 files changed

+439
-1
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,4 +482,12 @@ export const stackPageData: Routes[] = [
482482
description: '级联选择器',
483483
},
484484
},
485+
{
486+
name: 'TextArea',
487+
component: require('./routes/TextArea').default,
488+
params: {
489+
title: 'TextArea 多行输入框',
490+
description: '可输入多行文字',
491+
},
492+
},
485493
];

‎example/examples/src/routes/TextArea/index.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet} from 'react-native';
3+
import {TextArea} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
5+
import {ComProps} from '../../routes';
6+
7+
const {Header, Body, Card, Footer} = Layout;
8+
9+
export interface TextAreaProps extends ComProps {}
10+
11+
export default class TextAreaView extends Component<TextAreaProps> {
12+
state = {
13+
value: '',
14+
value1: '只读状态不可输入',
15+
value3: '自定义输入框样式',
16+
value4: '',
17+
};
18+
19+
render() {
20+
const {route} = this.props;
21+
const description = route.params.description;
22+
const title = route.params.title;
23+
24+
return (
25+
<Container>
26+
<Layout>
27+
<Header title={title} description={description} />
28+
<Body>
29+
<Card title="基础实例" style={styles.card}>
30+
<TextArea
31+
onChange={(value: string) => {
32+
this.setState({value});
33+
}}
34+
value={this.state.value}
35+
placeholder="默认提示语"
36+
/>
37+
</Card>
38+
<Card title="展示字数" style={styles.card}>
39+
<TextArea
40+
onChange={(value4: string) => {
41+
this.setState({value4});
42+
}}
43+
value={this.state.value4}
44+
showWords={true}
45+
placeholder="默认展示字数"
46+
/>
47+
</Card>
48+
<Card title="只读状态" style={styles.card}>
49+
<TextArea
50+
editable={false}
51+
onChange={(value1: string) => {
52+
this.setState({value1});
53+
}}
54+
value={this.state.value1}
55+
/>
56+
</Card>
57+
<Card title="自定义输入框样式" style={styles.card}>
58+
<TextArea
59+
style={{
60+
height: 150,
61+
borderColor: 'blue',
62+
borderWidth: 2,
63+
}}
64+
fontStyle={{
65+
fontSize: 20,
66+
color: 'blue',
67+
}}
68+
showWords={true}
69+
onChange={(value3: string) => {
70+
this.setState({value3});
71+
}}
72+
value={this.state.value3}
73+
/>
74+
</Card>
75+
</Body>
76+
<Footer />
77+
</Layout>
78+
</Container>
79+
);
80+
}
81+
}
82+
83+
const styles = StyleSheet.create({
84+
card: {
85+
backgroundColor: '#fff',
86+
},
87+
});

‎packages/core/src/TextArea/README.md‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
TextArea 多行输入框
2+
---
3+
4+
![](https://user-images.githubusercontent.com/66067296/147332763-7126a61c-0476-497e-8e52-5c2805ae346e.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
5+
6+
可输入多行。
7+
8+
### 基础示例
9+
10+
```jsx
11+
import React, { Component } from 'react';
12+
import { StyleSheet } from 'react-native';
13+
import { TextArea } from '@uiw/react-native';
14+
import Layout, { Container } from '../../Layout';
15+
import { ComProps } from '../../routes';
16+
17+
const { Header, Body, Card, Footer } = Layout;
18+
export interface TextAreaProps extends ComProps { }
19+
export default class TextAreaView extends Component<TextAreaProps> {
20+
state = {
21+
value: '',
22+
};
23+
render() {
24+
const { route } = this.props;
25+
const description = route.params.description;
26+
const title = route.params.title;
27+
return (
28+
<Container>
29+
<Layout>
30+
<Header title={title} description={description} />
31+
<Body>
32+
<Card title="基础实例" style={styles.card}>
33+
<TextArea
34+
onChange={(value: string) => {
35+
this.setState({ value });
36+
}}
37+
value={this.state.value}
38+
placeholder='默认提示语'
39+
/>
40+
</Card>
41+
</Body>
42+
<Footer />
43+
</Layout>
44+
</Container>
45+
);
46+
}
47+
}
48+
const styles = StyleSheet.create({
49+
card: {
50+
backgroundColor: '#fff',
51+
},
52+
});
53+
```
54+
55+
### 只读状态
56+
57+
```jsx
58+
import React, { Component } from 'react';
59+
import { StyleSheet } from 'react-native';
60+
import { TextArea } from '@uiw/react-native';
61+
import Layout, { Container } from '../../Layout';
62+
import { ComProps } from '../../routes';
63+
64+
const { Header, Body, Card, Footer } = Layout;
65+
export interface TextAreaProps extends ComProps { }
66+
export default class TextAreaView extends Component<TextAreaProps> {
67+
state = {
68+
value4: '',
69+
};
70+
render() {
71+
const { route } = this.props;
72+
const description = route.params.description;
73+
const title = route.params.title;
74+
return (
75+
<Container>
76+
<Layout>
77+
<Header title={title} description={description} />
78+
<Body>
79+
<Card title="展示字数" style={styles.card}>
80+
<TextArea
81+
onChange={(value4: string) => {
82+
this.setState({ value4 });
83+
}}
84+
value={this.state.value4}
85+
showWords={true}
86+
placeholder="默认展示字数"
87+
/>
88+
</Card>
89+
</Body>
90+
<Footer />
91+
</Layout>
92+
</Container>
93+
);
94+
}
95+
}
96+
const styles = StyleSheet.create({
97+
card: {
98+
backgroundColor: '#fff',
99+
},
100+
});
101+
```
102+
103+
### 只读状态
104+
105+
```jsx
106+
import React, { Component } from 'react';
107+
import { StyleSheet } from 'react-native';
108+
import { TextArea } from '@uiw/react-native';
109+
import Layout, { Container } from '../../Layout';
110+
import { ComProps } from '../../routes';
111+
112+
const { Header, Body, Card, Footer } = Layout;
113+
export interface TextAreaProps extends ComProps { }
114+
export default class TextAreaView extends Component<TextAreaProps> {
115+
state = {
116+
value1: '只读状态不可输入',
117+
};
118+
render() {
119+
const { route } = this.props;
120+
const description = route.params.description;
121+
const title = route.params.title;
122+
return (
123+
<Container>
124+
<Layout>
125+
<Header title={title} description={description} />
126+
<Body>
127+
<Card title="只读状态" style={styles.card}>
128+
<TextArea
129+
editable={false}
130+
onChange={(value1: string) => {
131+
this.setState({ value1 });
132+
}}
133+
value={this.state.value1}
134+
/>
135+
</Card>
136+
</Body>
137+
<Footer />
138+
</Layout>
139+
</Container>
140+
);
141+
}
142+
}
143+
const styles = StyleSheet.create({
144+
card: {
145+
backgroundColor: '#fff',
146+
},
147+
});
148+
```
149+
150+
### 自定义输入框样式
151+
152+
```jsx
153+
import React, { Component } from 'react';
154+
import { StyleSheet } from 'react-native';
155+
import { TextArea } from '@uiw/react-native';
156+
import Layout, { Container } from '../../Layout';
157+
import { ComProps } from '../../routes';
158+
159+
const { Header, Body, Card, Footer } = Layout;
160+
export interface TextAreaProps extends ComProps { }
161+
export default class TextAreaView extends Component<TextAreaProps> {
162+
state = {
163+
value3: '自定义输入框样式',
164+
};
165+
render() {
166+
const { route } = this.props;
167+
const description = route.params.description;
168+
const title = route.params.title;
169+
return (
170+
<Container>
171+
<Layout>
172+
<Header title={title} description={description} />
173+
<Body>
174+
<Card title="自定义输入框样式" style={styles.card}>
175+
<TextArea
176+
style={{
177+
height: 150,
178+
borderColor: 'blue',
179+
borderWidth: 2,
180+
}}
181+
fontStyle={{
182+
fontSize: 16,
183+
color: 'blue',
184+
}}
185+
showWords={true}
186+
onChange={(value3: string) => {
187+
this.setState({ value3 });
188+
}}
189+
value={this.state.value3}
190+
/>
191+
</Card>
192+
</Body>
193+
<Footer />
194+
</Layout>
195+
</Container>
196+
);
197+
}
198+
}
199+
const styles = StyleSheet.create({
200+
card: {
201+
backgroundColor: '#fff',
202+
},
203+
});
204+
```
205+
206+
### props
207+
208+
| 参数 | 说明 | 类型 | 默认值 |
209+
|------|------|-----|------|
210+
| `textAlignVertical` | 文本位置 | `"top" | "center" | "auto" | "bottom"` | `top` |
211+
| `placeholder` | 默认提示语 | String | |
212+
| `placeholderTextColor` | 提示语颜色 | `string` | `#989FB2` |
213+
| `maxLength` | 最大字符数 | `number` | `100` |
214+
| `numberOfLines` | 输入框的行数(Android) | `number` | `30` |
215+
| `editable` | 是否禁用 | `boolean` | `true` |
216+
| `onChange` | 文本域内容变化时触发 | `(val: string) => void` | |
217+
| `value` | 文本框中的文字内容 | `string` | |
218+
| `showWords` | 是否展示字数 | `boolean` | `false` |
219+
| `fontStyle` | 输入框文字样式 | ` StyleProp<TextStyle>` | |

0 commit comments

Comments
 (0)