Skip to content

Commit 8451925

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #604 from hy916/dev
优化Form、Button、Progress组件
2 parents 961c6ec + b193f63 commit 8451925

File tree

7 files changed

+82
-70
lines changed

7 files changed

+82
-70
lines changed

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import React from 'react';
2-
import { View, Text } from 'react-native';
3-
import { Button, Spacing, Icon, Flex } from '@uiw/react-native';
4-
import { ComProps } from '../../routes';
5-
import Layout, { Container } from '../../Layout';
6-
const { Header, Body, Card, Footer } = Layout;
2+
import {View, Text} from 'react-native';
3+
import {Button, Spacing, Icon, Flex} from '@uiw/react-native';
4+
import {ComProps} from '../../routes';
5+
import Layout, {Container} from '../../Layout';
6+
const {Header, Body, Card, Footer} = Layout;
77

8-
export interface ButtonViewProps extends ComProps { }
8+
export interface ButtonViewProps extends ComProps {}
99

1010
export default class ButtonView extends React.Component<ButtonViewProps> {
1111
render() {
12-
const { route } = this.props;
12+
const {route} = this.props;
1313
const description = route.params.description;
1414
const title = route.params.title;
1515
return (
1616
<Container>
1717
<Layout>
1818
<Header title={title} description={description} />
19-
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
19+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2020
<Card title="基础实例">
2121
<Flex>
2222
<Button type="primary">蓝色按钮</Button>
@@ -104,23 +104,23 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
104104
<Button color="#a63d2c">自定义颜色{'color="#a63d2c"'}</Button>
105105
</Card>
106106
<Card title="文本样式">
107-
<Button textStyle={{ fontSize: 20 }} color="yellow">
107+
<Button textStyle={{fontSize: 20}} color="yellow">
108108
字号调整{'textStyle = {{fontSize:20}}'}
109109
</Button>
110110
<Spacing />
111-
<Button textStyle={{ color: 'blue' }}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
111+
<Button textStyle={{color: 'blue'}}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
112112
<Spacing />
113-
<Button color="#a63d2c" textStyle={{ letterSpacing: 2 }}>
113+
<Button color="#a63d2c" textStyle={{letterSpacing: 2}}>
114114
文本间距{'textStyle={{letterSpacing:3}}'}
115115
</Button>
116116
</Card>
117117
<Card title="设置边框">
118-
<Button bordered={false} color="#dc3545">
119-
不显示边框{'bordered={false}'}
118+
<Button bordered={true} color="#ffc107">
119+
显示边框{'bordered={false}'}
120120
</Button>
121121
<Spacing />
122-
<Button bordered={true} color="#28a745">
123-
不显示边框{'bordered={false}'}
122+
<Button bordered={true} color="#1EABCD">
123+
显示边框{'bordered={false}'}
124124
</Button>
125125
</Card>
126126
<Card title="显示图标">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default class ButtonGroupView extends Component<ButtonGroupViewProps> {
6666
<Button>边框</Button>
6767
</ButtonGroup>
6868
<Spacing />
69-
<ButtonGroup bordered={false} color="#ffc107">
69+
<ButtonGroup bordered={true} color="#ffc107">
7070
<Button>警告</Button>
7171
<Button>警告</Button>
7272
<Button>警告</Button>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,11 @@ const FormDemo = () => {
142142
type: 'datePeriodInput',
143143
field: 'datePeriodInput',
144144
name: '时间区间选择器',
145-
attr: {
146-
placeholder: ['请选择1', '请选择1'],
147-
mode: 'date',
148-
format: 'YYYY-MM-DD',
149-
},
145+
},
146+
{
147+
type: 'verificationCode',
148+
field: 'verificationCode',
149+
name: '验证码倒计时',
150150
},
151151
{
152152
type: 'treeSelect',

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

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { View, Text } from 'react-native';
3-
import { Progress, Spacing, Button, Toast } from '@uiw/react-native';
4-
import Layout, { Container } from '../../Layout';
1+
import React, {useState, useEffect} from 'react';
2+
import {View, Text} from 'react-native';
3+
import {Progress, Spacing, Button, Toast} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
55

6-
const { Header, Body, Card } = Layout;
6+
const {Header, Body, Card} = Layout;
77

88
const ProgressDemo = (props: any) => {
9-
const { route } = props;
9+
const {route} = props;
1010
const description = route.params.description;
1111
const title = route.params.title;
1212

@@ -17,84 +17,79 @@ const ProgressDemo = (props: any) => {
1717
if (val < 100) {
1818
setValue(val + 5);
1919
} else {
20-
Toast.info('宝，别点了，要溢出了')
20+
Toast.info('宝，别点了，要溢出了');
2121
}
2222
};
2323

2424
return (
2525
<Container>
2626
<Header title={title} description={description} />
27-
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
27+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2828
<Card title="基础实例">
29-
<Progress type='circle' value={60} />
29+
<Progress type="circle" value={60} />
3030
<Spacing />
31-
<Progress type='line' value={60} />
31+
<Progress type="line" value={60} />
3232
</Card>
3333
<Card title="自定义值">
34-
<Progress type='circle' value={val} />
34+
<Progress type="circle" value={val} />
3535
<Spacing />
36-
<Progress type='line' value={val} />
36+
<Progress type="line" value={val} />
3737
<Spacing />
38-
<Button onPress={() => onPress()} >你点我呀！</Button>
38+
<Button onPress={() => onPress()}>你点我呀！</Button>
3939
</Card>
4040
<Card title="自定义渐变色">
41-
<Progress type='circle' color={['#FFD080', 'red']} value={80} />
41+
<Progress type="circle" color={['#FFD080', 'red']} value={80} />
4242
<Spacing />
43-
<Progress type='line' color={['red', '#FFD080',]} value={80} />
43+
<Progress type="line" color={['red', '#FFD080']} value={80} />
4444
</Card>
4545
<Card title="设置大小">
46-
<Progress type='circle' width={60} left='6.5%' value={10} />
46+
<Progress type="circle" width={60} left="6.5%" value={10} />
4747
<Spacing />
48-
<Progress type='circle' width={80} left='8.5%' value={20} />
48+
<Progress type="circle" width={80} left="8.5%" value={20} />
4949
<Spacing />
50-
<Progress type='line' width={60} value={40} />
50+
<Progress type="line" width={60} value={40} />
5151
<Spacing />
52-
<Progress type='line' width={80} value={60} />
52+
<Progress type="line" width={80} value={60} />
5353
</Card>
5454
<Card title="是否显示单位">
55-
<Progress type='circle' showUnit={false} left='13%' value={20} />
55+
<Progress type="circle" showUnit={false} left="13%" value={20} />
5656
<Spacing />
57-
<Progress type='line' showUnit={false} value={40} />
57+
<Progress type="line" showUnit={false} value={40} />
5858
</Card>
5959
<Card title="自定义单色">
60-
<Progress type='circle' color='#FFD080' value={50} />
60+
<Progress type="circle" color="#FFD080" value={50} />
6161
<Spacing />
62-
<Progress type='line' color='#FFD080' value={60} />
62+
<Progress type="line" color="#FFD080" value={60} />
6363
</Card>
6464
<Card title="自定义背景色">
65-
<Progress type='circle' bgColor="#FFD080" value={5} />
65+
<Progress type="circle" bgColor="#FFD080" value={5} />
6666
<Spacing />
67-
<Progress type='line' bgColor='#FFD080' value={70} />
67+
<Progress type="line" bgColor="#FFD080" value={70} />
6868
</Card>
6969
<Card title="设置外环宽度">
70-
<Progress type='circle' value={5} strokeWidth={25} />
70+
<Progress type="circle" value={5} strokeWidth={25} />
7171
<Spacing />
72-
<Progress type='line' value={70} strokeWidth={15} />
72+
<Progress type="line" value={70} strokeWidth={15} />
7373
</Card>
7474

7575
<Card title="是否显示文本">
76-
<Progress type='circle' value={68} showLabel={false} />
76+
<Progress type="circle" value={68} showLabel={false} />
7777
<Spacing />
78-
<Progress type='line' value={70} showLabel={false} />
78+
<Progress type="line" value={70} showLabel={false} />
7979
</Card>
8080
<Card title="自定义标签">
81-
<Progress type='circle' value={53} label={<Text>饕餮</Text>} />
81+
<Progress type="circle" value={53} label={<Text>饕餮</Text>} />
8282
<Spacing />
83-
<Progress type='line' value={30} label={<Text>饕餮</Text>} />
84-
</Card>
85-
<Card title="设置外环宽度">
86-
<Progress type='circle' value={5} strokeWidth={25} />
87-
<Spacing />
88-
<Progress type='line' value={70} strokeWidth={15} />
83+
<Progress type="line" value={30} label={<Text>饕餮</Text>} />
8984
</Card>
9085
<Card title="自定义文本位置">
91-
<Progress type='circle' value={5} top="50%" left='50%' />
86+
<Progress type="circle" value={5} top="50%" left="50%" />
9287
<Spacing />
93-
<Progress type='line' value={70} top="-20%" left='50%' />
88+
<Progress type="line" value={70} top="-20%" left="50%" />
9489
</Card>
9590
<Spacing />
9691
</Body>
97-
</Container >
92+
</Container>
9893
);
9994
};
10095

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,13 @@ export default function ButtonView<T>(props: ButtonProps) {
8484
// borderWidth = 1;
8585
// }
8686
if (disabled) {
87-
textColor = color(theme.colors.disabled || '#CCCCCC').alpha(0.1).rgb().string();
88-
backgroundColor = color(theme.colors.disabled || '#CCCCCC').rgb().string();
87+
textColor = color(theme.colors.disabled || '#CCCCCC')
88+
.alpha(0.1)
89+
.rgb()
90+
.string();
91+
backgroundColor = color(theme.colors.disabled || '#CCCCCC')
92+
.rgb()
93+
.string();
8994
}
9095
if (buttonColor) {
9196
backgroundColor = color(buttonColor).rgb().string();
@@ -94,22 +99,29 @@ export default function ButtonView<T>(props: ButtonProps) {
9499
borderRadius = rounded;
95100
}
96101
if (bordered) {
97-
borderColor = color(theme.colors.black || '#000000').alpha(0.1).rgb().string();
102+
borderColor = color(theme.colors.gray200 || backgroundColor)
103+
.alpha(1)
104+
.rgb()
105+
.string();
98106
borderWidth = 1;
99107
}
100108
// if (!bordered || buttonColor) {
101109
// borderWidth = 0;
102110
// }
103111
const buttonStyle = {
104-
backgroundColor: backgroundColor || "#3578e5",
112+
backgroundColor: backgroundColor || '#3578e5',
105113
borderColor,
106114
borderWidth,
107115
borderRadius,
108116
};
109-
if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== "light") {
110-
textColor = color(theme.colors.white || '#FFFFFF').rgb().string()
117+
if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== 'light') {
118+
textColor = color(theme.colors.white || '#FFFFFF')
119+
.rgb()
120+
.string();
111121
} else {
112-
textColor = color(theme.colors.black || '#000000').rgb().string();
122+
textColor = color(theme.colors.black || '#000000')
123+
.rgb()
124+
.string();
113125
}
114126
const textStyle = { color: textColor };
115127
let sizeStyle = {};

‎packages/core/src/Form/form.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Slider from '../Slider';
88
import SearchBar from '../SearchBar';
99
import Stepper from '../Stepper';
1010
import TreeSelect from '../TreeSelect';
11+
import VerificationCode from '../VerificationCode';
1112
import DatePeriodInput from '../DatePicker/date-period-input';
1213
import Input from './comps/input';
1314
import Rating from './comps/rate';
@@ -63,6 +64,7 @@ const Form = (baseProps: FormProps) => {
6364
picker: <Picker />,
6465
datePicker: <DatePicker />,
6566
datePeriodInput: <DatePeriodInput />,
67+
verificationCode: <VerificationCode outerStyle={{ backgroundColor: '#FFF' }} />,
6668
},
6769
changeValidate: changeValidate,
6870
};

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ Progress 进度条
1414
import React from 'react';
1515
import { SafeAreaView } from 'react-native';
1616
import { Progress } from '@uiw/react-native';
17-
import { motorcycle } from './svg';
1817

1918
function Demo() {
2019
return (
2120
<SafeAreaView style={{ flex: 1 }}>
22-
<Progress type='circle' />
21+
<Progress type='circle' value={50}/>
2322
</SafeAreaView>
2423
)
2524
}
2625
export default Demo
2726
```
27+
<img src="https://s1.ax1x.com/2023/04/19/p9FcJvd.png" style="width:300px;height:620px"/>
2828

2929
### 自定义颜色
3030

@@ -37,12 +37,14 @@ import { Progress } from '@uiw/react-native';
3737
function Demo() {
3838
return (
3939
<SafeAreaView style={{ flex: 1 }}>
40-
<Progress type='circle' color={['#FFD080', 'red']} />
40+
<Progress type='circle' color={['#FFD080', 'red']} value={50} />
4141
</SafeAreaView>
4242
)
4343
}
4444
export default Demo
4545
```
46+
<img src="https://s1.ax1x.com/2023/04/19/p9Fc88e.png" style="width:300px;height:620px"/>
47+
4648
### 自定义百分比,展示进度
4749

4850
<!--DemoStart-->
@@ -61,6 +63,7 @@ function Demo() {
6163
}
6264
export default Demo
6365
```
66+
<img src="https://s1.ax1x.com/2023/04/19/p9FcGgH.png" style="width:300px;height:620px"/>
6467

6568
### Props
6669

0 commit comments

Comments
 (0)