Merge pull request #620 from hy916/dev

优化迭代组件
uiwjs · Apr 28, 2023 · 8701050 · 8701050
2 parents 4681580 + 1d5f246
commit 8701050
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 59 deletions.
diff --git a/example/examples/src/routes/VerificationCode/index.tsx b/example/examples/src/routes/VerificationCode/index.tsx
@@ -8,6 +8,7 @@ const {Header, Body, Card, Footer} = Layout;
 export interface VerificationCodeProps extends ComProps {
   onBefore?: () => Promise<boolean>;
   onSend?: () => Promise<boolean> | boolean;
+  inputBorder?: boolean;
 }
 
 const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
@@ -40,13 +41,14 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
         <Header title={title} description={description} />
         <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={{borderColor: '#ccc'}} />
           </Card>
           <Card title="无边框">
             <VerificationCode
               bordered={false}
               label="我没框框哦"
               count={3}
+              inputBorder={false}
               onChange={(text: string) => onChange(text)}
               outerStyle={{backgroundColor: '#FFF'}}
               buttonStyle={{backgroundColor: '#fff'}}
@@ -59,48 +61,30 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
+              outerStyle={{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={{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={{borderColor: '#ccc'}} />
           </Card>
           <Card title="发验证码之前的回调">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onBefore={onBefore}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onBefore={onBefore} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="发送验证码">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onSend={onSend}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onSend={onSend} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="倒计时结束后的回调">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onEnd={onEnd}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onEnd={onEnd} outerStyle={{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', borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义内层按钮样式">
@@ -110,11 +94,11 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               buttonStyle={{backgroundColor: '#F86E21'}}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
+              outerStyle={{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={{borderColor: '#ccc'}} />
           </Card>
           <Card title="自定义输入框提示文字">
             <VerificationCode
@@ -123,7 +107,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               placeholder="请输入112233....."
-              outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
+              outerStyle={{borderBottomColor: '#CCC'}}
             />
           </Card>
         </Body>

diff --git a/packages/core/src/ImageHeader/README.md b/packages/core/src/ImageHeader/README.md
@@ -4,7 +4,8 @@
 
 ### 1. 基础示例 ImageHeader
 
-```jsx
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React, { Component } from 'react';
 import { ImageHeader,Avatar } from '@uiw/react-native';
 import { View, Text } from 'react-native';
@@ -13,7 +14,7 @@ function Demo () {
   return (
   <ImageHeader
         safeBgColor='#010101'
-        headerHeight={150}
+        headerHeight={200}
         headerLeft={<></>}
       >
         <View style={{
@@ -65,6 +66,8 @@ function Demo () {
 }
 export default Demo
 ```
+<!--End-->
+
 ## ImageHeader 组件 API
 
 | 属性                  | 必填    | 说明                 | 类型                  | 默认值                      |
@@ -74,12 +77,13 @@ export default Demo
 | headerLeft            | `false` | 头部左侧内容         | `ReactNode`           |                             |
 | headerLeftColor       | `false` | 左侧返回键和字体颜色 | `string`              | `theme.colors.primaryColor` |
 | headerBackgroundColor | `false` | 头部背景颜色         | `string`              | `transparent`               |
-| headerBackgroundImg   | `true`  | 头部背景图片         | `ImageSourcePropType` |                             |
+| safeBgColor           | `true`  | 设置全局背景色         | `string`             |                             |
 | headerHeight          | `false` | 头部高度             | `number`              |                             |
 | onPress               | `false` | 左边图标点击事件     | `() => void`          |                             |
 | showLeft              | `false` | 是否显示左边图标     | `boolean`             | `true`                      |
+| statusBarStyle        | `false` | 设置状态栏颜色      | `'default' | 'dark-content' | 'light-content'` | `default` |
 
-## AnimateHeader 组件 API
+<!-- ## AnimateHeader 组件 API
 
 | 属性 | 必填 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- | --- |
@@ -93,4 +97,4 @@ export default Demo
 | headerLeftColor | `false` | 左侧返回键和字体颜色 | `string` | `theme.colors.primaryColor` |
 | headerBackgroundColor | `false` | 头部背景颜色 | `string` | `transparent` |
 | onPress | `false` | 左边按钮点击事件 | `() => void` |  |
-| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` |
+| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` | -->
diff --git a/packages/core/src/ImageHeader/index.tsx b/packages/core/src/ImageHeader/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC, PropsWithChildren, ReactNode } from 'react';
 import { Text, SafeAreaView, StatusBar, TouchableOpacity, View, Platform } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Theme } from '../theme';
 import { useTheme } from '@shopify/restyle';
 
@@ -37,7 +36,6 @@ export type ImageHeaderProps = PropsWithChildren<{
 
 const ImageHeader: FC<ImageHeaderProps> = (props) => {
   const theme = useTheme<Theme>();
-  const insets = useSafeAreaInsets();
 
   const {
     headerRight,
@@ -71,7 +69,7 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
       <SafeAreaView style={{ width: '100%', height: headerHeight, backgroundColor: safeBgColor }}>
         <Flex
           style={{
-            paddingTop: isIOS ? insets.top + theme.spacing.x2 : theme.spacing.x5,
+            paddingTop: isIOS ? theme.spacing.x2 : theme.spacing.x5,
             paddingBottom: theme.spacing.x2,
             paddingRight: theme.spacing.x3,
             backgroundColor: headerBackgroundColor,

diff --git a/packages/core/src/LoginPage/README.md b/packages/core/src/LoginPage/README.md
@@ -5,17 +5,16 @@ LoginPage 登录页
 ### 基础示例
 
 <!--DemoStart-->
-```jsx 
+
+```jsx mdx:preview&background=#bebebe29
 import React,{Fragment} from 'react';
 import { View} from 'react-native';
 import { LoginPage } from '@uiw/react-native';
 
 const Demo = () => {
   return (
     <Fragment>
-        <View>
-         <LoginPage />
-        </View>
+        <LoginPage />
     </Fragment>
   );
 }

diff --git a/packages/core/src/LoginPage/index.tsx b/packages/core/src/LoginPage/index.tsx
@@ -4,7 +4,7 @@ import Icon from '../Icon';
 import VerificationCode from '../VerificationCode';
 import { Theme } from '../theme';
 import { useTheme } from '@shopify/restyle';
-import { logSvg, cEyes, oEyes } from './svg';
+// import { logSvg, cEyes, oEyes } from './svg';
 
 interface LoginPageProps {
   /** 自定义账号输入框为空时显示的文字 */
@@ -19,6 +19,8 @@ interface LoginPageProps {
   buttonText?: string;
   /** 自定义忘记密码，切换登录方式 */
   customContent?: React.ReactNode;
+  /** 自定义登录logo和login文字 */
+  titleContent?: React.ReactNode;
   /** 登录按钮事件 */
   onLogin?: (username: string, password: string) => void;
   /** 忘记密码按钮事件 */
@@ -32,12 +34,12 @@ const LoginPage: React.FC<LoginPageProps> = ({
   buttonStyle = {},
   buttonText = 'Login',
   customContent,
+  titleContent,
   onLogin,
   onForgetPassword,
 }) => {
   const [showPsd, setShowPsd] = useState(false);
-  const [showCode, setShowCode] = useState(false); // added state
-  console.log('showCode', showCode);
+  const [showCode, setShowCode] = useState(false);
 
   const theme = useTheme<Theme>();
   const styles = createStyles({
@@ -48,12 +50,10 @@ const LoginPage: React.FC<LoginPageProps> = ({
   const [password, setPassword] = useState('');
 
   const onChangeUsername = (val: string) => {
-    console.log('onChange--> 输入改变事件	 ', val);
     setUsername(val);
   };
 
   const onChangePassword = (val: string) => {
-    console.log('onChange--> 输入改变事件	 ', val);
     setPassword(val);
   };
 
@@ -66,10 +66,12 @@ const LoginPage: React.FC<LoginPageProps> = ({
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.background }, containerStyle]}>
       <View style={styles.content}>
-        <View style={styles.center}>
-          <Icon xml={logSvg(theme)} size={30} />
-          <Text style={styles.title}>Login</Text>
-        </View>
+        {titleContent || (
+          <View style={styles.center}>
+            <Icon name="uiw" size={35} />
+            <Text style={styles.title}>Login</Text>
+          </View>
+        )}
         <View style={[styles.inputContainer, { paddingHorizontal: 15 }, inputContainerStyle]}>
           <TextInput
             placeholder={usernamePlaceholder ? usernamePlaceholder : `请输入${showCode ? '手机号码' : '用户名'}`}
@@ -80,7 +82,9 @@ const LoginPage: React.FC<LoginPageProps> = ({
           />
         </View>
         {!showCode ? (
-          <View style={[styles.inputContainer, styles.inputC, { paddingHorizontal: 15 }, inputContainerStyle]}>
+          <View
+            style={[styles.inputContainer, styles.inputC, { paddingLeft: 15, paddingRight: 15 }, inputContainerStyle]}
+          >
             <TextInput
               placeholder="请输入密码"
               placeholderTextColor={theme.colors.border}
@@ -89,18 +93,18 @@ const LoginPage: React.FC<LoginPageProps> = ({
               onChangeText={onChangePassword}
             />
             <TouchableOpacity onPress={() => setShowPsd(!showPsd)}>
-              <Icon xml={showPsd ? cEyes : oEyes} size={20} />
+              <Icon name={showPsd ? 'eye' : 'eye-o'} size={20} color="#8a8a8a" />
             </TouchableOpacity>
           </View>
         ) : (
           <VerificationCode
             value={password}
             count={60}
             onChange={onChangePassword}
+            inputBorder={false}
             outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
           />
         )}
-
         <View>
           {customContent || (
             <View style={styles.textSty1}>
@@ -113,7 +117,6 @@ const LoginPage: React.FC<LoginPageProps> = ({
             </View>
           )}
         </View>
-
         <TouchableOpacity style={[styles.button, buttonStyle]} onPress={handleLogin}>
           <Text style={[styles.buttonText, styles.buttonTextStyle]}>{buttonText}</Text>
         </TouchableOpacity>
@@ -159,7 +162,7 @@ function createStyles({ border, putCol }: CreStyle) {
       alignItems: 'center',
     },
     inputC: {
-      paddingHorizontal: 10,
+      paddingLeft: 10,
       marginTop: 20,
       marginBottom: 5,
     },

diff --git a/packages/core/src/VerificationCode/README.md b/packages/core/src/VerificationCode/README.md
@@ -19,7 +19,7 @@ function Demo() {
               value={value}
               count={60}
               onChange={(text) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFF', borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{ backgroundColor: '#FFF' }}
             />
     </View>
   );
@@ -43,3 +43,4 @@ export default Demo
 | `outerStyle` | 输入框外层自定义样式 | `StyleProp<ViewStyle>` | - |
 | `buttonStyle` | 按钮自定义样式 | `StyleProp<ViewStyle>` | - |
 | `placeholder` | 输入框空白时自定义展示 | string | `请输入验证码` |
+| `inputBorder` | 是否展示输入框边框 | boolean | true |
diff --git a/packages/core/src/VerificationCode/index.tsx b/packages/core/src/VerificationCode/index.tsx
@@ -31,6 +31,8 @@ interface VerificationCodeProps {
   buttonStyle?: StyleProp<ViewStyle>;
   /**输入框空白时自定义展示 */
   placeholder?: string;
+  /**是否展示输入框边框 */
+  inputBorder?: boolean;
 }
 
 const VerificationCode: FC<VerificationCodeProps> = ({
@@ -46,6 +48,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
   outerStyle = {},
   buttonStyle = {},
   placeholder = '请输入验证码',
+  inputBorder = true,
 }) => {
   const [timer, setTimer] = useState(count);
   const [disabled, setDisabled] = useState(false);
@@ -75,7 +78,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
 
   return (
     <Input
-      border={null}
+      border={inputBorder ? 'always' : null}
       containerStyle={[{ height: 40 }, outerStyle]}
       placeholder={placeholder}
       placeholderTextColor={theme.colors.border}
@@ -86,8 +89,9 @@ const VerificationCode: FC<VerificationCodeProps> = ({
           bordered={bordered}
           disabled={disabled}
           onPress={handleClick}
-          color={theme.colors.background || '#fff'}
+          color={theme.colors.background || 'transparent'}
           style={[buttonStyle]}
+          size="small"
         >
           <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
         </Button>

diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -43,7 +43,7 @@ export const componentMenus: MenuData[] = [
   { path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
   { path: '/components/verificationCode', name: 'VerificationCode  验证码倒计时组件' },
   { path: '/components/loginPage', name: 'LoginPage  登录页组件' },
-  { path: '/components/imageHeader', name: 'imageHeader  图片头部组件' },
+  { path: '/components/imageHeader', name: 'ImageHeader  图片头部组件' },
 
   { divider: true, name: 'Data Display 信息录入' },
   { path: '/components/checkbox', name: 'CheckBox 复选框' },