Skip to content

Commit 562f497

Browse files
nullptr-zxingyuefeng
nullptr-z
authored and
xingyuefeng
committed
doc(TextArea): 重构多行输入框TextArea文档 (#410)
1 parent f340347 commit 562f497

File tree

2 files changed

+148
-193
lines changed

2 files changed

+148
-193
lines changed

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

Lines changed: 143 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,166 @@
11
TextArea 多行输入框
22
---
33

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-
可输入多行。
4+
<!-- ![](https://user-images.githubusercontent.com/66067296/147332763-7126a61c-0476-497e-8e52-5c2805ae346e.png) -->
5+
<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
76

87
### 基础示例
98

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-
}
9+
```jsx mdx:preview
10+
import React from 'react';
11+
import TextArea from '@uiw/react-native/lib/TextArea';
12+
13+
function Demo() {
14+
return (
15+
<TextArea
16+
value={"Hello TextArea \nplease input word"}
17+
placeholder='请输入'
18+
/>
19+
)
4720
}
48-
const styles = StyleSheet.create({
49-
card: {
50-
backgroundColor: '#fff',
51-
},
52-
});
21+
export default Demo
22+
```
23+
24+
### 监听输入内容
25+
```jsx mdx:preview
26+
import React, { useState } from 'react';
27+
import TextArea from '@uiw/react-native/lib/TextArea';
28+
29+
function Demo() {
30+
const [value, setValue] = useState('修改我')
31+
32+
return (
33+
<TextArea
34+
onChange={(value) => {
35+
console.log('输入内容: ', value);
36+
setValue(value);
37+
}}
38+
value={value}
39+
placeholder='请输入'
40+
/>
41+
)
42+
}
43+
44+
export default Demo
5345
```
5446

5547
### 只读状态
5648

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-
}
49+
```jsx mdx:preview
50+
import React, { useState } from 'react';
51+
import TextArea from '@uiw/react-native/lib/TextArea';
52+
53+
function Demo() {
54+
const [value, setValue] = useState('不可修改')
55+
56+
return (
57+
<TextArea
58+
editable={false}
59+
value={value}
60+
placeholder='请输入'
61+
/>
62+
)
9563
}
96-
const styles = StyleSheet.create({
97-
card: {
98-
backgroundColor: '#fff',
99-
},
100-
});
64+
65+
export default Demo
10166
```
10267

103-
### 只读状态
68+
### 显示输入文字数量
69+
```jsx mdx:preview
70+
import React, { useState } from 'react';
71+
import TextArea from '@uiw/react-native/lib/TextArea';
72+
73+
function Demo() {
74+
const [value, setValue] = useState('此处省略..字')
75+
76+
return (
77+
<TextArea
78+
onChange={(value) => {
79+
setValue(value);
80+
}}
81+
maxLength={100}
82+
showWords={true}
83+
value={value}
84+
placeholder='请输入'
85+
/>
86+
)
87+
}
88+
89+
export default Demo
90+
```
10491

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-
}
92+
### 限制输入行数
93+
```jsx mdx:preview
94+
import React, { useState } from 'react';
95+
import TextArea from '@uiw/react-native/lib/TextArea';
96+
97+
function Demo() {
98+
const [value, setValue] = useState('第1行\n第2行\n第3行')
99+
100+
return (
101+
<TextArea
102+
onChange={(value) => {
103+
setValue(value);
104+
}}
105+
numberOfLines={3}
106+
value={value}
107+
placeholder='请输入'
108+
/>
109+
)
142110
}
143-
const styles = StyleSheet.create({
144-
card: {
145-
backgroundColor: '#fff',
146-
},
147-
});
111+
112+
export default Demo
148113
```
149114

150115
### 自定义输入框样式
116+
```jsx mdx:preview
117+
import React, { useState } from 'react';
118+
import TextArea from '@uiw/react-native/lib/TextArea';
119+
120+
function Demo() {
121+
const [value, setValue] = useState('')
122+
123+
return (
124+
<TextArea
125+
onChange={(value) => {
126+
setValue(value);
127+
}}
128+
style={{
129+
height: 150,
130+
borderColor: 'green',
131+
borderWidth: 2,
132+
}}
133+
fontStyle={{ fontSize: 25 }}
134+
value={value}
135+
placeholder='请输入'
136+
/>
137+
)
138+
}
139+
140+
export default Demo
141+
```
151142

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-
}
143+
### 文字定位
144+
```jsx mdx:preview
145+
import React, { useState } from 'react';
146+
import TextArea from '@uiw/react-native/lib/TextArea';
147+
148+
function Demo() {
149+
const [value, setValue] = useState('我在这呢')
150+
151+
return (
152+
<TextArea
153+
onChange={(value) => {
154+
setValue(value);
155+
}}
156+
textAlignVertical="center"
157+
value={value}
158+
placeholder='请输入'
159+
/>
160+
)
198161
}
199-
const styles = StyleSheet.create({
200-
card: {
201-
backgroundColor: '#fff',
202-
},
203-
});
162+
163+
export default Demo
204164
```
205165

206166
### props
@@ -209,7 +169,7 @@ const styles = StyleSheet.create({
209169

210170
| 参数 | 说明 | 类型 | 默认值 |
211171
|------|------|-----|------|
212-
| `textAlignVertical` | 文本位置 | `"top" | "center" | "auto" | "bottom"` | `top` |
172+
| `textAlignVertical` | 文本位置 | "top" \| "center" \| "auto" \| "bottom" | `top` |
213173
| `placeholder` | 默认提示语 | String | |
214174
| `placeholderTextColor` | 提示语颜色 | `string` | `#989FB2` |
215175
| `maxLength` | 最大字符数 | `number` | `100` |

‎website/src/pages/components/textarea/index.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Markdown, { importAll } from '../../../component/Markdown';
1+
// import Markdown, { importAll } from '../../../component/Markdown';
2+
import Preview from 'src/component/Preview';
3+
import md from '@uiw/react-native/lib/TextArea/README.md';
24

3-
export default class Page extends Markdown {
4-
path = '/packages/core/src/TextArea/README.md';
5-
getMarkdown = async () => {
6-
const md = await import('@uiw/react-native/lib/TextArea/README.md');
7-
// 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
8-
importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
9-
return md.default || md;
10-
};
11-
}
5+
const DEMO = () => <Preview {...md} />;
6+
export default DEMO;

0 commit comments

Comments
 (0)