Merge pull request #611 from hy916/dev

fix(ButtonGroup&ImagePicker)优化ButtonGroup&ImagePicker组件处理报错
uiwjs · Apr 22, 2023 · 7ce2e18 · 7ce2e18
2 parents 5361abb + a72904e
commit 7ce2e18
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 69 deletions.
diff --git a/example/examples/src/routes/ImagePicker/index.tsx b/example/examples/src/routes/ImagePicker/index.tsx
@@ -18,9 +18,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
         <Body>
           <Card title="基础实例">
             <ImagePicker
-              upload={(file: File[]) => {
+              upload={async (file: File[]) => {
                 let imageList: string[] = [];
-                file.forEach(file => imageList.push(file.uri));
+                await file.forEach(file => imageList.push(file.uri));
                 return imageList;
               }}
               selectionLimit={2}
@@ -44,9 +44,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
             <ImagePicker
               value={['https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg']}
               maxCount={2}
-              upload={(file: File[]) => {
+              upload={async (file: File[]) => {
                 let imageList: string[] = [];
-                file.forEach(file => imageList.push(file.uri));
+                await file.forEach(file => imageList.push(file.uri));
                 return imageList;
               }}
             />
@@ -56,9 +56,9 @@ export default function MenuDropdownView(props: ImagePickerProps) {
           </Card>
           <Card title="上传前置处理">
             <ImagePicker
-              upload={(file: File[]) => {
+              upload={async (file: File[]) => {
                 let imageList: string[] = [];
-                file.forEach(file => imageList.push(file.uri));
+                await file.forEach(file => imageList.push(file.uri));
                 return imageList;
               }}
               beforeUpload={(file: File[]) => {

diff --git a/example/examples/src/routes/VerificationCode/index.tsx b/example/examples/src/routes/VerificationCode/index.tsx
@@ -1,95 +1,80 @@
-import React, { Component, useState } from 'react';
-import { VerificationCode } from '@uiw/react-native';
-import Layout, { Container } from '../../Layout';
-import { ComProps } from '../../routes';
+import React, {Component, useState} from 'react';
+import {VerificationCode} from '@uiw/react-native';
+import Layout, {Container} from '../../Layout';
+import {ComProps} from '../../routes';
 
-const { Header, Body, Card, Footer } = Layout;
+const {Header, Body, Card, Footer} = Layout;
 
 export interface VerificationCodeProps extends ComProps {
   onBefore?: () => Promise<boolean>;
   onSend?: () => Promise<boolean> | boolean;
 }
 
-const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
+const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
   const [value, setValue] = useState('');
   const description = route.params.description;
   const title = route.params.title;
 
   const onChange = (val: string) => {
     console.log('onChange--> 输入改变事件	 ', val);
-    setValue(val)
+    setValue(val);
   };
 
   const onBefore = async () => {
     console.log('onBefore--> 发验证码之前的回调	');
     return true;
-  }
+  };
 
   const onSend = async () => {
     console.log('onSend--> 发送验证码');
     return true;
-  }
+  };
 
   const onEnd = () => {
     console.log('onEnd--> 倒计时结束后的回调');
-  }
+  };
 
   return (
     <Container>
       <Layout>
         <Header title={title} description={description} />
-        <Body style={{ paddingLeft: 16, paddingRight: 16 }}>
+        <Body style={{paddingLeft: 16, paddingRight: 16}}>
           <Card title="基础实例">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="无边框">
             <VerificationCode
               bordered={false}
-              label='我没框框哦'
+              label="我没框框哦"
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFF' }}
+              outerStyle={{backgroundColor: '#FFF'}}
+              buttonStyle={{backgroundColor: '#fff'}}
             />
           </Card>
           <Card title="自定义倒计时文字和重新发送文字">
             <VerificationCode
-              label='点我'
-              resendLabel='好了'
+              label="点我"
+              resendLabel="好了"
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义倒计时时长">
-            <VerificationCode
-              count={10}
-              value={value}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="输入改变事件">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="发验证码之前的回调">
             <VerificationCode
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
               onBefore={onBefore}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="发送验证码">
@@ -98,7 +83,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               onSend={onSend}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="倒计时结束后的回调">
@@ -107,15 +92,15 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               onEnd={onEnd}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义外层输入框样式">
             <VerificationCode
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFD21D', borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义内层按钮样式">
@@ -124,34 +109,28 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              buttonStyle={{ backgroundColor: '#F86E21' }}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              buttonStyle={{backgroundColor: '#F86E21'}}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义按钮文字样式">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="自定义输入框提示文字">
             <VerificationCode
               bordered={false}
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              placeholder='请输入112233.....'
-              outerStyle={{ borderBottomWidth: 1, borderBottomColor: '#CCC' }}
+              placeholder="请输入112233....."
+              outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
             />
           </Card>
         </Body>
         <Footer />
       </Layout>
     </Container>
   );
-}
+};
 
 export default VerificationCodeDemo;
-
diff --git a/packages/core/src/ButtonGroup/index.tsx b/packages/core/src/ButtonGroup/index.tsx
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonProps } from '../Button';
 import Flex, { FlexProps } from '../Flex';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
 
 const styles = StyleSheet.create({
   default: {
@@ -43,6 +45,7 @@ export default function ButtonGroup(props: ButtonGroupProps) {
   const porps = { color, type, bordered, disabled, textStyle };
   const flexProps = { direction, justify, align, wrap };
   const childs = React.Children.toArray(children);
+  const theme = useTheme<Theme>();
 
   if (inline) {
     flexProps.direction = 'row';
@@ -77,9 +80,11 @@ export default function ButtonGroup(props: ButtonGroupProps) {
         if (bordered && !gutter) {
           if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
             childStyle.borderRightWidth = StyleSheet.hairlineWidth;
+            childStyle.borderColor = theme.colors.text_active;
           }
           if (idx > 0 && idx < (children as ButtonProps[]).length) {
             childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
+            childStyle.borderColor = theme.colors.text_active;
           }
         }
         if (gutter && inline) {

diff --git a/packages/core/src/Form/form.tsx b/packages/core/src/Form/form.tsx
@@ -62,7 +62,7 @@ const Form = (baseProps: FormProps) => {
       search: <SearchBar />,
       switch: <Switch />,
       checkBox: <CheckBox />,
-      stepper: <Stepper value={0} onChange={() => {}} />,
+      stepper: <Stepper value={0} onChange={() => { }} />,
       treeSelect: <TreeSelect options={[]} />,
       picker: <Picker />,
       datePicker: <DatePicker />,

diff --git a/packages/core/src/Progress/index.tsx b/packages/core/src/Progress/index.tsx
@@ -3,10 +3,11 @@ import { View, Text, Animated } from 'react-native';
 import Svg, { Circle, G, Line, Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
 
 interface ProgressProps {
+  /**设置是进度条还是进度圈*/
   type: 'line' | 'circle';
   /**设置进度圈大小，进度条长度*/
   width?: number;
-  /**颜色 */
+  /**颜色 支持渐变色*/
   color?: string | [string, string];
   /**背景色 */
   bgColor?: string;
@@ -22,6 +23,7 @@ interface ProgressProps {
   showUnit?: boolean;
   /**自定义文本位置 */
   top?: string;
+  /**自定义文本位置 */
   left?: string;
 }
 

diff --git a/packages/core/src/VerificationCode/index.tsx b/packages/core/src/VerificationCode/index.tsx
@@ -9,29 +9,40 @@ import { useTheme } from '@shopify/restyle';
 interface VerificationCodeProps {
   /**是否展示按钮边框 */
   bordered?: boolean;
+  /**自定义验证码文字 */
   label?: string;
+  /**自定义重新发送文字 */
   resendLabel?: string;
+  /**默认倒计时秒数 */
   count?: number;
+  /**验证码值 */
   value?: string;
+  /**输入改变事件 */
   onChange?: (value: string) => void;
+  /**发验证码之前的回调 */
   onBefore?: () => Promise<boolean>;
+  /**发验证码时的回调 */
   onSend?: () => Promise<boolean>;
+  /**发验证码之后的回调 */
   onEnd?: () => void;
+  /**输入框外层自定义样式 */
   outerStyle?: StyleProp<ViewStyle>;
+  /**按钮自定义样式 */
   buttonStyle?: StyleProp<ViewStyle>;
+  /**输入框空白时自定义展示 */
   placeholder?: string;
 }
 
 const VerificationCode: FC<VerificationCodeProps> = ({
-  bordered = true,
+  bordered = false,
   label = '获取验证码',
   resendLabel = '重新发送',
   count = 60,
   value = '',
-  onChange = () => { },
+  onChange = () => {},
   onBefore = async () => true,
   onSend = async () => true,
-  onEnd = () => { },
+  onEnd = () => {},
   outerStyle = {},
   buttonStyle = {},
   placeholder = '请输入验证码',
@@ -40,7 +51,6 @@ const VerificationCode: FC<VerificationCodeProps> = ({
   const [disabled, setDisabled] = useState(false);
   const theme = useTheme<Theme>();
 
-
   useEffect(() => {
     let interval: ReturnType<typeof setInterval>;
     if (timer > 0 && disabled) {
@@ -66,18 +76,23 @@ const VerificationCode: FC<VerificationCodeProps> = ({
   return (
     <Input
       border={null}
-      containerStyle={[{ height: 50 }, outerStyle]}
+      containerStyle={[{ height: 40 }, outerStyle]}
       placeholder={placeholder}
       value={value}
       onChangeText={(text) => onChange(text)}
       extraEnd={
-        <Button bordered={bordered} disabled={disabled} onPress={handleClick} color={theme.colors.background || '#fff'} style={buttonStyle}>
-          <Text color={disabled ? "disabled" : "text"}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
+        <Button
+          bordered={bordered}
+          disabled={disabled}
+          onPress={handleClick}
+          color={theme.colors.background || '#fff'}
+          style={buttonStyle}
+        >
+          <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
         </Button>
       }
     />
   );
 };
 
 export default VerificationCode;
-
diff --git a/packages/react-native-image-picker/src/ImagePicker/types.ts b/packages/react-native-image-picker/src/ImagePicker/types.ts
@@ -22,7 +22,7 @@ export declare type ImagePickerProps = PropsWithChildren<{
   /** 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传,同时可以在里面执行一些上传提示操作 */
   beforeUpload?: (file: File[]) => boolean | ((file: File) => Promise<boolean>);
   /** 上传 */
-  upload?: (file: File[]) => string[];
+  upload?: (file: File[]) => Promise<string[]>;
   /** 上传完成 */
   uploadFinish?: (result?: string[] | undefined) => void;
   /** 取消上传事件回调 */

diff --git a/packages/react-native-image-picker/src/ImagePicker/useImagePicker.ts b/packages/react-native-image-picker/src/ImagePicker/useImagePicker.ts
@@ -140,7 +140,7 @@ export default function useImagePicker({
           }
         }
         setLoading(true);
-        const result = upload?.(imageFiles);
+        const result = await upload?.(imageFiles);
         setLoading(false);
         uploadFinish?.(result);
         setLaunchVisibleFalse();