Skip to content

Commit de678a8

Browse files
hyxingyuefeng
hy
authored and
xingyuefeng
committed
fix: 更改Input输入框和Calendar日历文档和添加文档实例
1 parent c5a56a5 commit de678a8

File tree

5 files changed

+102
-145
lines changed

5 files changed

+102
-145
lines changed

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ ButtonGroup 按钮组
88
<!--DemoStart-->
99
```jsx mdx:preview
1010
import React,{ Component } from "react"
11-
import Button from '@uiw/react-native/lib/Button';
12-
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
11+
import {Button,ButtonGroup} from '@uiw/react-native';
1312

1413
class Demo extends Component {
1514
render() {
@@ -33,9 +32,7 @@ export default Demo
3332
```jsx mdx:preview
3433
import React,{ Component } from "react"
3534
import { View } from 'react-native';
36-
import Button from '@uiw/react-native/lib/Button';
37-
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
38-
import Spacing from '@uiw/react-native/lib/Spacing';
35+
import {Button,ButtonGroup,Spacing} from '@uiw/react-native';
3936

4037
class Demo extends Component {
4138
render() {
@@ -70,9 +67,7 @@ export default Demo
7067
```jsx mdx:preview
7168
import React,{ Component } from "react"
7269
import { View } from 'react-native';
73-
import Button from '@uiw/react-native/lib/Button';
74-
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
75-
import Spacing from '@uiw/react-native/lib/Spacing';
70+
import {Button,ButtonGroup,Spacing} from '@uiw/react-native';
7671

7772
class Demo extends Component {
7873
render() {

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

Lines changed: 65 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -3,138 +3,109 @@ Calendar 日历
33

44
展示日历
55

6-
![](https://user-images.githubusercontent.com/66067296/141939109-5fbd8b77-82fa-4eb4-bd6d-6670fd577878.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
7-
86
### 基础示例
97

10-
```jsx
11-
import React from 'react';
12-
import { Text, View } from 'react-native';
8+
```jsx mdx:preview
9+
import React,{Component} from 'react';
10+
import { View } from 'react-native';
1311
import { Calendar } from '@uiw/react-native';
14-
import { ComProps } from '../../routes';
15-
import Layout, { Container } from '../../Layout';
16-
17-
const { Header, Body, Card, Footer } = Layout;
18-
19-
export interface CalendarViewProps extends ComProps { }
12+
import Layout, { Container } from '../Layout';
13+
const { Header, Body, Footer } = Layout;
2014

21-
export default class CalendarView extends React.Component<CalendarViewProps> {
15+
class CalendarView extends Component {
2216
render() {
23-
const { route } = this.props;
24-
const description = route.params.description;
25-
const title = route.params.title;
17+
const title = 'Calendar';
2618
return (
27-
<Container>
28-
<Layout>
29-
<Header title={title} description={description} />
30-
<Body>
31-
<Calendar />
32-
</Body>
33-
<Footer />
34-
</Layout>
35-
</Container>
19+
<Container>
20+
<Layout>
21+
<Body>
22+
<Calendar />
23+
</Body>
24+
<Footer />
25+
</Layout>
26+
</Container>
3627
);
3728
}
3829
}
30+
export default CalendarView
3931
```
4032

4133
### 自定义日历颜色、农历及假日展示
4234

43-
```jsx
44-
import React from 'react';
45-
import { Text, View } from 'react-native';
35+
```jsx mdx:preview
36+
import React,{Component} from 'react';
37+
import { View } from 'react-native';
4638
import { Calendar } from '@uiw/react-native';
47-
import { ComProps } from '../../routes';
48-
import Layout, { Container } from '../../Layout';
49-
50-
const { Header, Body, Card, Footer } = Layout;
39+
import Layout, { Container } from '../Layout';
40+
const { Header, Body, Footer } = Layout;
5141

52-
export interface CalendarViewProps extends ComProps { }
53-
54-
export default class CalendarView extends React.Component<CalendarViewProps> {
42+
class CalendarView extends Component {
5543
render() {
56-
const { route } = this.props;
57-
const description = route.params.description;
58-
const title = route.params.title;
5944
return (
60-
<Container>
61-
<Layout>
62-
<Header title={title} description={description} />
63-
<Body>
45+
<Container>
46+
<Layout>
47+
<Body>
6448
<Calendar color="red" lunarHoliday={true}/>
65-
</Body>
66-
<Footer />
67-
</Layout>
68-
</Container>
49+
</Body>
50+
<Footer />
51+
</Layout>
52+
</Container>
6953
);
7054
}
7155
}
56+
export default CalendarView
57+
7258
```
7359

7460
### 自定义日历头部及农历详情展示
7561

76-
```jsx
77-
import React from 'react';
62+
```jsx mdx:preview
63+
import React,{ Component } from 'react';
7864
import { Text, View } from 'react-native';
7965
import { Calendar } from '@uiw/react-native';
80-
import { ComProps } from '../../routes';
81-
import Layout, { Container } from '../../Layout';
66+
import Layout, { Container } from '../Layout';
67+
const { Header, Body, Footer } = Layout;
8268

83-
const { Header, Body, Card, Footer } = Layout;
84-
85-
export interface CalendarViewProps extends ComProps { }
86-
87-
export default class CalendarView extends React.Component<CalendarViewProps> {
69+
class CalendarView extends Component {
8870
render() {
89-
const { route } = this.props;
90-
const description = route.params.description;
91-
const title = route.params.title;
9271
const barProps = {
9372
barRightText: "返回",
9473
title : "日历",
9574
onPressBarLeft: () => navigation.goBack(),
9675
barLeftText: "今天"
9776
}
9877
return (
99-
<Container>
100-
<Layout>
101-
<Header title={title} description={description} />
102-
<Body>
103-
<Calendar color="red" bar={barProps} lunarHoliday={true} showLunar={true}/>
104-
</Body>
105-
<Footer />
106-
</Layout>
107-
</Container>
78+
<Container>
79+
<Layout>
80+
<Body>
81+
<Calendar color="red" bar={barProps} lunarHoliday={true} showLunar={true}/>
82+
</Body>
83+
<Footer />
84+
</Layout>
85+
</Container>
10886
);
10987
}
11088
}
89+
export default CalendarView
11190
```
11291

113-
### props
114-
115-
```ts
116-
117-
interface barState {
118-
// 导航栏标题
119-
title?: string
120-
//是否显示农历及假日
121-
lunarHoliday:Boolean
122-
// 导航左侧文本
123-
barRightText?: string;
124-
// 导航右侧文本
125-
barLeftText?: string;
126-
// 导航左侧点击事件
127-
onPressBarLeft?: () => void;
128-
// 自定义导航栏
129-
render?: React.ReactNode
130-
}
131-
export interface CalendarProps extends ViewProps {
132-
// 日历颜色
133-
color?: string;
134-
//是否显示农历及假日
135-
lunarHoliday: boolean;
136-
bar: barState ;
137-
//农历详情
138-
showLunar: boolean;
139-
}
140-
```
92+
### Props
93+
94+
集成继承 `Button` 组件自定义属性，外层包裹继承 [`Flex`] 组件。
95+
96+
| 参数 | 说明 | 类型 | 默认值 |
97+
|------|------|-----|------|
98+
| `color` | 日历颜色 | string | - |
99+
| `lunarHoliday` | 是否显示农历及假日 | Boolean | `false` |
100+
| `showLunar` | 农历详情 | Boolean | `false` |
101+
| `bar` | 导航栏 | React.ReactNode | - |
102+
103+
### bar 参数
104+
| 参数 | 说明 | 类型 | 默认值 |
105+
|------|------|-----|------|
106+
| `title` | 导航栏标题 | string | - |
107+
| `lunarHoliday` | 是否显示农历及假日 | Boolean | `false` |
108+
| `barLeftText` | 导航左侧文本 | string | - |
109+
| `barRightText` | 导航右侧文本 | string | - |
110+
| `onPressBarLeft` | 是否显示农历及假日 | `() => void` | - |
111+
| `render` | 自定义导航栏 | React.ReactNode | - |

‎packages/core/src/Calendar/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const Calendar = (props: CalendarProps) => {
112112

113113
let nameLen = getNameLen(day.lunarHolidays);
114114
let lineHeight =
115-
lunarHoliday === true && Platform.OS === 'ios' ? 0 : lunarHoliday === true ? 18 : MainWidth / 7 - 4.5;
115+
lunarHoliday === true && Platform.OS === 'ios' ? 0 : lunarHoliday === true ? 18 : MainWidth < 1000 ? MainWidth / 7 - 4.5 : MainWidth / 14.5;
116116
let paddingTop = lunarHoliday === true ? 4 : 0;
117117
let colorType = '';
118118
if (day.colorType === '') {
@@ -127,10 +127,10 @@ const Calendar = (props: CalendarProps) => {
127127
lunarAll.type === 1
128128
? [styles.dateBase, styles.otherMonth]
129129
: lunarAll.type === 2
130-
? [styles.currentMonth, styles.dateBase, { backgroundColor: color }]
131-
: lunarAll.type === 3
132-
? [styles.selectMonth, styles.dateBase, { borderColor: color }]
133-
: styles.dateBase
130+
? [styles.currentMonth, styles.dateBase, { backgroundColor: color }]
131+
: lunarAll.type === 3
132+
? [styles.selectMonth, styles.dateBase, { borderColor: color }]
133+
: styles.dateBase
134134
}
135135
onPress={() => goSelectDay(day)}
136136
>
@@ -300,7 +300,7 @@ const styles = StyleSheet.create({
300300
flexDirection: 'row',
301301
justifyContent: 'space-between',
302302
alignItems: 'center',
303-
paddingHorizontal: MainWidth / 7 - 33,
303+
paddingHorizontal: MainWidth < 1000 ? MainWidth / 7 - 33 : MainWidth / 30,
304304
paddingTop: 10,
305305
},
306306
calendarWedText: {
@@ -316,8 +316,8 @@ const styles = StyleSheet.create({
316316
},
317317
dateBase: {
318318
marginHorizontal: 2,
319-
width: MainWidth / 7 - 4.5,
320-
height: MainWidth / 7 - 4.5,
319+
width: MainWidth < 1000 ? MainWidth / 7 - 4.5 : MainWidth / 14,
320+
height: MainHeight < 300 ? MainWidth / 7 - 4.5 : MainWidth / 14,
321321
...Platform.select({
322322
ios: {},
323323
android: {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Divider 分割线
88
```jsx mdx:preview
99
import React,{Component, Fragment } from "react"
1010
import { View, Text } from 'react-native';
11-
import Divider from '@uiw/react-native/lib/Divider';
11+
import { Divider } from '@uiw/react-native';
1212

1313
class Demo extends Component {
1414
render() {
@@ -32,7 +32,7 @@ export default Demo
3232
```jsx mdx:preview
3333
import React,{Component, Fragment } from "react"
3434
import { View, Text } from 'react-native';
35-
import Divider from '@uiw/react-native/lib/Divider';
35+
import { Divider } from '@uiw/react-native';
3636

3737
class Demo extends Component {
3838
render() {
@@ -57,7 +57,7 @@ export default Demo
5757
```jsx mdx:preview
5858
import React,{Component} from "react"
5959
import { View, Text } from 'react-native';
60-
import Divider from '@uiw/react-native/lib/Divider';
60+
import { Divider } from '@uiw/react-native';
6161

6262
class Demo extends Component {
6363
render() {

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

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,23 @@ Input 文本输入
33

44
单行文本输入
55

6-
![](https://user-images.githubusercontent.com/66067296/139397369-576c0bec-4870-4c02-aa70-11707eb59d26.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
7-
86
### 基础示例
97

10-
```jsx
11-
12-
import React from 'react';
13-
import { View, Input } from '@uiw/react-native';
14-
import {View} from 'react-native';
8+
```jsx mdx:preview
9+
import React,{ Component } from "react"
10+
import { View } from 'react-native';
11+
import { Input } from '@uiw/react-native';
1512

16-
export default class BasicInputExample extends React.Component {
13+
class BasicInputExample extends Component {
1714
render() {
1815
return <View>
19-
<Input onChange={(value) => {this.setState({value})}} value={this.state.value} />
16+
<Input value={6666} />
2017
<Input extra="小数" />
2118
<Input error />
2219
</View>
2320
}
2421
}
25-
22+
export default BasicInputExample
2623
```
2724

2825

@@ -32,28 +29,7 @@ export default class BasicInputExample extends React.Component {
3229
import { StyleProp,TextStyle,TextInputProps, NativeSyntheticEvent, TextInputFocusEventData, TextInputChangeEventData, KeyboardTypeOptions,ViewStyle } from 'react-native'
3330

3431
export interface InputProps extends TextInputProps {
35-
/** 输入框默认值 */
36-
value?: string;
37-
/** 限制输入条件 */
38-
rule?: RegExp | (value: string)=>boolean;
39-
/** 输入不合法时触发方法 */
40-
wrongfulHandle?: Function;
41-
/** 限制文本框中最多的字符数。使用这个属性而不用 JS 逻辑去实现，可以避免闪烁的现象。 */
42-
maxLength?: number;
43-
/** 如果没有任何文字输入，会显示此字符串。 */
44-
placeholder: string;
45-
/** 输入框样式 */
46-
style?: StyleProp<TextStyle>;
47-
/** 容器样式 */
48-
containerStyle?: StyleProp<ViewStyle>;
49-
/** 显示错误 */
50-
error?: boolean;
51-
/** 自定义错误提示 */
52-
renderError?: React.ReactNode;
53-
/** 边框 */
54-
border?: 'bottom'|'top'|'left'|'right'|null|'always';
55-
/** 边框颜色 */
56-
borderColor?: string;
32+
5733
/** 唤起键盘类型 详情 https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/ */
5834
keyboardType?: KeyboardTypeOptions;
5935
/** 如果为 true，文本框是不可编辑的。默认值为 false */
@@ -88,5 +64,20 @@ export interface InputProps extends TextInputProps {
8864

8965
```
9066

67+
| 参数 | 说明 | 类型 | 默认值 |
68+
|------|------|-----|------|
69+
| `value` | 输入框默认值 | string | - |
70+
| `rule` | 限制输入条件 | RegExp | - |
71+
| `wrongfulHandle` | 输入不合法时触发方法 | Function | - |
72+
| `maxLength` | 限制文本框中最多的字符数 | number | - |
73+
| `placeholder` | 如果没有任何文字输入，会显示此字符串 | string | - |
74+
| `style` | 输入框样式 | `StyleProp<TextStyle>` | - |
75+
| `containerStyle` | 容器样式 | `StyleProp<ViewStyle>` | - |
76+
| `error` | 显示错误 | boolean | - |
77+
| `renderError` | 自定义错误提示 | React.ReactNode | - |
78+
| `border` | 边框 | `'bottom'|'top'|'left'|'right'|null|'always'` | - |
79+
| `borderColor` | 边框颜色 | string | - |
80+
| `keyboardType` | 唤起键盘类型 | KeyboardTypeOptions | - |
81+
9182

9283
> 更多 react-native Input 属性请参考 react-native TextInput (https://www.react-native.cn/docs/textinput)

0 commit comments

Comments
 (0)