Skip to content

Commit 7ce2e18

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #611 from hy916/dev
fix(ButtonGroup&ImagePicker)优化ButtonGroup&ImagePicker组件处理报错
2 parents 5361abb + a72904e commit 7ce2e18

File tree

8 files changed

+70
-69
lines changed

8 files changed

+70
-69
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
1818
<Body>
1919
<Card title="基础实例">
2020
<ImagePicker
21-
upload={(file: File[]) => {
21+
upload={async (file: File[]) => {
2222
let imageList: string[] = [];
23-
file.forEach(file => imageList.push(file.uri));
23+
await file.forEach(file => imageList.push(file.uri));
2424
return imageList;
2525
}}
2626
selectionLimit={2}
@@ -44,9 +44,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
4444
<ImagePicker
4545
value={['https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg']}
4646
maxCount={2}
47-
upload={(file: File[]) => {
47+
upload={async (file: File[]) => {
4848
let imageList: string[] = [];
49-
file.forEach(file => imageList.push(file.uri));
49+
await file.forEach(file => imageList.push(file.uri));
5050
return imageList;
5151
}}
5252
/>
@@ -56,9 +56,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
5656
</Card>
5757
<Card title="上传前置处理">
5858
<ImagePicker
59-
upload={(file: File[]) => {
59+
upload={async (file: File[]) => {
6060
let imageList: string[] = [];
61-
file.forEach(file => imageList.push(file.uri));
61+
await file.forEach(file => imageList.push(file.uri));
6262
return imageList;
6363
}}
6464
beforeUpload={(file: File[]) => {

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

Lines changed: 30 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,80 @@
1-
import React, { Component, useState } from 'react';
2-
import { VerificationCode } from '@uiw/react-native';
3-
import Layout, { Container } from '../../Layout';
4-
import { ComProps } from '../../routes';
1+
import React, {Component, useState} from 'react';
2+
import {VerificationCode} from '@uiw/react-native';
3+
import Layout, {Container} from '../../Layout';
4+
import {ComProps} from '../../routes';
55

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

88
export interface VerificationCodeProps extends ComProps {
99
onBefore?: () => Promise<boolean>;
1010
onSend?: () => Promise<boolean> | boolean;
1111
}
1212

13-
const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
13+
const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
1414
const [value, setValue] = useState('');
1515
const description = route.params.description;
1616
const title = route.params.title;
1717

1818
const onChange = (val: string) => {
1919
console.log('onChange--> 输入改变事件 ', val);
20-
setValue(val)
20+
setValue(val);
2121
};
2222

2323
const onBefore = async () => {
2424
console.log('onBefore--> 发验证码之前的回调 ');
2525
return true;
26-
}
26+
};
2727

2828
const onSend = async () => {
2929
console.log('onSend--> 发送验证码');
3030
return true;
31-
}
31+
};
3232

3333
const onEnd = () => {
3434
console.log('onEnd--> 倒计时结束后的回调');
35-
}
35+
};
3636

3737
return (
3838
<Container>
3939
<Layout>
4040
<Header title={title} description={description} />
41-
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
41+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
4242
<Card title="基础实例">
43-
<VerificationCode
44-
value={value}
45-
count={3}
46-
onChange={(text: string) => onChange(text)}
47-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
48-
49-
/>
43+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
5044
</Card>
5145
<Card title="无边框">
5246
<VerificationCode
5347
bordered={false}
54-
label='我没框框哦'
48+
label="我没框框哦"
5549
count={3}
5650
onChange={(text: string) => onChange(text)}
57-
outerStyle={{ backgroundColor: '#FFF' }}
51+
outerStyle={{backgroundColor: '#FFF'}}
52+
buttonStyle={{backgroundColor: '#fff'}}
5853
/>
5954
</Card>
6055
<Card title="自定义倒计时文字和重新发送文字">
6156
<VerificationCode
62-
label='点我'
63-
resendLabel='好了'
57+
label="点我"
58+
resendLabel="好了"
6459
value={value}
6560
count={3}
6661
onChange={(text: string) => onChange(text)}
67-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
62+
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
6863
/>
6964
</Card>
7065
<Card title="自定义倒计时时长">
71-
<VerificationCode
72-
count={10}
73-
value={value}
74-
onChange={(text: string) => onChange(text)}
75-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
76-
/>
66+
<VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
7767
</Card>
7868
<Card title="输入改变事件">
79-
<VerificationCode
80-
value={value}
81-
count={3}
82-
onChange={(text: string) => onChange(text)}
83-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
84-
/>
69+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
8570
</Card>
8671
<Card title="发验证码之前的回调">
8772
<VerificationCode
8873
value={value}
8974
count={3}
9075
onChange={(text: string) => onChange(text)}
9176
onBefore={onBefore}
92-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
77+
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
9378
/>
9479
</Card>
9580
<Card title="发送验证码">
@@ -98,7 +83,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
9883
count={3}
9984
onChange={(text: string) => onChange(text)}
10085
onSend={onSend}
101-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
86+
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
10287
/>
10388
</Card>
10489
<Card title="倒计时结束后的回调">
@@ -107,15 +92,15 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
10792
count={3}
10893
onChange={(text: string) => onChange(text)}
10994
onEnd={onEnd}
110-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
95+
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
11196
/>
11297
</Card>
11398
<Card title="自定义外层输入框样式">
11499
<VerificationCode
115100
value={value}
116101
count={3}
117102
onChange={(text: string) => onChange(text)}
118-
outerStyle={{ backgroundColor: '#FFD21D', borderWidth: 1, borderColor: "#ccc" }}
103+
outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
119104
/>
120105
</Card>
121106
<Card title="自定义内层按钮样式">
@@ -124,34 +109,28 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
124109
value={value}
125110
count={3}
126111
onChange={(text: string) => onChange(text)}
127-
buttonStyle={{ backgroundColor: '#F86E21' }}
128-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
112+
buttonStyle={{backgroundColor: '#F86E21'}}
113+
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
129114
/>
130115
</Card>
131116
<Card title="自定义按钮文字样式">
132-
<VerificationCode
133-
value={value}
134-
count={3}
135-
onChange={(text: string) => onChange(text)}
136-
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
137-
/>
117+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
138118
</Card>
139119
<Card title="自定义输入框提示文字">
140120
<VerificationCode
141121
bordered={false}
142122
value={value}
143123
count={3}
144124
onChange={(text: string) => onChange(text)}
145-
placeholder='请输入112233.....'
146-
outerStyle={{ borderBottomWidth: 1, borderBottomColor: '#CCC' }}
125+
placeholder="请输入112233....."
126+
outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
147127
/>
148128
</Card>
149129
</Body>
150130
<Footer />
151131
</Layout>
152132
</Container>
153133
);
154-
}
134+
};
155135

156136
export default VerificationCodeDemo;
157-

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
22
import { StyleSheet } from 'react-native';
33
import { ButtonProps } from '../Button';
44
import Flex, { FlexProps } from '../Flex';
5+
import { useTheme } from '@shopify/restyle';
6+
import { Theme } from '../theme';
57

68
const styles = StyleSheet.create({
79
default: {
@@ -43,6 +45,7 @@ export default function ButtonGroup(props: ButtonGroupProps) {
4345
const porps = { color, type, bordered, disabled, textStyle };
4446
const flexProps = { direction, justify, align, wrap };
4547
const childs = React.Children.toArray(children);
48+
const theme = useTheme<Theme>();
4649

4750
if (inline) {
4851
flexProps.direction = 'row';
@@ -77,9 +80,11 @@ export default function ButtonGroup(props: ButtonGroupProps) {
7780
if (bordered && !gutter) {
7881
if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
7982
childStyle.borderRightWidth = StyleSheet.hairlineWidth;
83+
childStyle.borderColor = theme.colors.text_active;
8084
}
8185
if (idx > 0 && idx < (children as ButtonProps[]).length) {
8286
childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
87+
childStyle.borderColor = theme.colors.text_active;
8388
}
8489
}
8590
if (gutter && inline) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const Form = (baseProps: FormProps) => {
6262
search: <SearchBar />,
6363
switch: <Switch />,
6464
checkBox: <CheckBox />,
65-
stepper: <Stepper value={0} onChange={() => {}} />,
65+
stepper: <Stepper value={0} onChange={() => { }} />,
6666
treeSelect: <TreeSelect options={[]} />,
6767
picker: <Picker />,
6868
datePicker: <DatePicker />,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { View, Text, Animated } from 'react-native';
33
import Svg, { Circle, G, Line, Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
44

55
interface ProgressProps {
6+
/**设置是进度条还是进度圈*/
67
type: 'line' | 'circle';
78
/**设置进度圈大小，进度条长度*/
89
width?: number;
9-
/**颜色 */
10+
/**颜色 支持渐变色*/
1011
color?: string | [string, string];
1112
/**背景色 */
1213
bgColor?: string;
@@ -22,6 +23,7 @@ interface ProgressProps {
2223
showUnit?: boolean;
2324
/**自定义文本位置 */
2425
top?: string;
26+
/**自定义文本位置 */
2527
left?: string;
2628
}
2729

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,40 @@ import { useTheme } from '@shopify/restyle';
99
interface VerificationCodeProps {
1010
/**是否展示按钮边框 */
1111
bordered?: boolean;
12+
/**自定义验证码文字 */
1213
label?: string;
14+
/**自定义重新发送文字 */
1315
resendLabel?: string;
16+
/**默认倒计时秒数 */
1417
count?: number;
18+
/**验证码值 */
1519
value?: string;
20+
/**输入改变事件 */
1621
onChange?: (value: string) => void;
22+
/**发验证码之前的回调 */
1723
onBefore?: () => Promise<boolean>;
24+
/**发验证码时的回调 */
1825
onSend?: () => Promise<boolean>;
26+
/**发验证码之后的回调 */
1927
onEnd?: () => void;
28+
/**输入框外层自定义样式 */
2029
outerStyle?: StyleProp<ViewStyle>;
30+
/**按钮自定义样式 */
2131
buttonStyle?: StyleProp<ViewStyle>;
32+
/**输入框空白时自定义展示 */
2233
placeholder?: string;
2334
}
2435

2536
const VerificationCode: FC<VerificationCodeProps> = ({
26-
bordered = true,
37+
bordered = false,
2738
label = '获取验证码',
2839
resendLabel = '重新发送',
2940
count = 60,
3041
value = '',
31-
onChange = () => { },
42+
onChange = () => {},
3243
onBefore = async () => true,
3344
onSend = async () => true,
34-
onEnd = () => { },
45+
onEnd = () => {},
3546
outerStyle = {},
3647
buttonStyle = {},
3748
placeholder = '请输入验证码',
@@ -40,7 +51,6 @@ const VerificationCode: FC<VerificationCodeProps> = ({
4051
const [disabled, setDisabled] = useState(false);
4152
const theme = useTheme<Theme>();
4253

43-
4454
useEffect(() => {
4555
let interval: ReturnType<typeof setInterval>;
4656
if (timer > 0 && disabled) {
@@ -66,18 +76,23 @@ const VerificationCode: FC<VerificationCodeProps> = ({
6676
return (
6777
<Input
6878
border={null}
69-
containerStyle={[{ height: 50 }, outerStyle]}
79+
containerStyle={[{ height: 40 }, outerStyle]}
7080
placeholder={placeholder}
7181
value={value}
7282
onChangeText={(text) => onChange(text)}
7383
extraEnd={
74-
<Button bordered={bordered} disabled={disabled} onPress={handleClick} color={theme.colors.background || '#fff'} style={buttonStyle}>
75-
<Text color={disabled ? "disabled" : "text"}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
84+
<Button
85+
bordered={bordered}
86+
disabled={disabled}
87+
onPress={handleClick}
88+
color={theme.colors.background || '#fff'}
89+
style={buttonStyle}
90+
>
91+
<Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
7692
</Button>
7793
}
7894
/>
7995
);
8096
};
8197

8298
export default VerificationCode;
83-

‎packages/react-native-image-picker/src/ImagePicker/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export declare type ImagePickerProps = PropsWithChildren<{
2222
/** 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传,同时可以在里面执行一些上传提示操作 */
2323
beforeUpload?: (file: File[]) => boolean | ((file: File) => Promise<boolean>);
2424
/** 上传 */
25-
upload?: (file: File[]) => string[];
25+
upload?: (file: File[]) => Promise<string[]>;
2626
/** 上传完成 */
2727
uploadFinish?: (result?: string[] | undefined) => void;
2828
/** 取消上传事件回调 */

‎packages/react-native-image-picker/src/ImagePicker/useImagePicker.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export default function useImagePicker({
140140
}
141141
}
142142
setLoading(true);
143-
const result = upload?.(imageFiles);
143+
const result = await upload?.(imageFiles);
144144
setLoading(false);
145145
uploadFinish?.(result);
146146
setLaunchVisibleFalse();

0 commit comments

Comments
 (0)