Merge branch 'dev' of github.com:uiwjs/react-native-uiw into dev

hy916 · hy916 · commit 618ab6c576e5 · 2023-04-26T18:22:33.000+08:00
diff --git a/example/examples/src/routes/LoginPage/index.tsx b/example/examples/src/routes/LoginPage/index.tsx
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import Layout, {Container} from '../../Layout';
 import {LoginPage} from '@uiw/react-native';
 import {ComProps} from '../../routes';
+import {View} from 'react-native';
 const {Header, Body, Card, Footer} = Layout;
 
 export interface LoginPageProps extends ComProps {}
@@ -16,7 +17,7 @@ export default class LoginPageView extends Component<LoginPageProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body>
-            <LoginPage showPassword={true} />
+            <LoginPage />
           </Body>
           <Footer />
         </Layout>
diff --git a/packages/core/src/LoginPage/README.md b/packages/core/src/LoginPage/README.md
@@ -1,41 +1,21 @@
-MaskLayer 遮罩层
+LoginPage 登录页
 ---
 
-用于模态对话框，中的遮罩层。
-
-<!-- ![](https://user-images.githubusercontent.com/66067296/139398306-d038225d-0fee-4009-a4f7-a06c7beabf45.gif) -->
-<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
+用于项目的登录页面
 ### 基础示例
 
 <!--DemoStart-->
 ```jsx mdx:preview&background=#bebebe29
-import React, { Fragment, useState } from 'react';
-import { Text,  SafeAreaView } from 'react-native';
-import { Button, MaskLayer,Grid,Icon } from '@uiw/react-native';
+import React,{Fragment} from 'react';
+import { View} from 'react-native';
+import { LoginPage } from '@uiw/react-native';
 
 const Demo = () => {
-  const [visible, setVisible] = useState(false);
-    const data = Array.from(new Array(24)).map((_val, i) => {
-    return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
-  });
   return (
     <Fragment>
-      <MaskLayer
-        visible={visible}
-        onDismiss={() => {
-          setVisible(!visible);
-        }}>
-        <SafeAreaView style={{alignItems:'center'}}>
-            <Grid style={{width:500,heigth:500,}} data={data} columns='6' hasLine={false}/>
-        </SafeAreaView>
-      </MaskLayer>
-      <Button
-        onPress={() => {
-          setVisible(true);
-        }}>
-        {visible ? '隐藏模态框' : '显示模态框'}
-      </Button>
+        <View>
+         <LoginPage />
+        </View>
     </Fragment>
   );
 }
@@ -45,14 +25,15 @@ export default Demo
 
 ### Props
 
-继承原生 Modal 属性 [`ModalProps`](https://facebook.github.io/react-native/docs/modal.html#props)
-
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
-| `maskClosable` | 遮罩层是否禁止点击 | `Boolean` | `true` |
-| `visible` | 遮罩层是否隐藏 |`Boolean` | - |
-| `opacity` | 遮罩层透明度 | - | 0.6 |
-| `onDismiss` | 隐藏消除回调事件 | () => void | - |
-| `children` | 子元素 | JSX.Element |  |
+| `usernamePlaceholder` | 自定义账号输入框为空时显示的文字 | `string` | - |
+| `inputContainerStyle` | 自定义账号，密码，验证码输入框样式 |`Boolean` | - |
+| `buttonStyle` | 登录按钮自定义样式 | `Object` | - |
+| `containerStyle` | 登录页自定义最外层样式 | `object` | - |
+| `buttonText` | 登录按钮自定义文字 | `string` | - |
+| `customContent` | 自定义忘记密码，切换登录方式 | `React.ReactNode` | - |
+| `onLogin` | 登录按钮事件 | `(username: string, password: string) => void` | - |
+| `onForgetPassword` | 忘记密码按钮事件 | `() => void` | - |
 
 
diff --git a/packages/core/src/LoginPage/index.tsx b/packages/core/src/LoginPage/index.tsx
@@ -7,25 +7,38 @@ import { useTheme } from '@shopify/restyle';
 import { logSvg, cEyes, oEyes } from './svg';
 
 interface LoginPageProps {
-  showPassword?: boolean;
+  /** 自定义账号输入框为空时显示的文字 */
   usernamePlaceholder?: string;
+  /** 自定义账号，密码，验证码输入框样式 */
   inputContainerStyle?: object;
+  /** 登录按钮自定义样式 */
   buttonStyle?: object;
+  /** 登录页自定义最外层样式 */
   containerStyle?: object;
+  /** 登录按钮自定义文字 */
   buttonText?: string;
+  /** 自定义忘记密码，切换登录方式 */
+  customContent?: React.ReactNode;
+  /** 登录按钮事件 */
   onLogin?: (username: string, password: string) => void;
+  /** 忘记密码按钮事件 */
+  onForgetPassword?: () => void;
 }
 
 const LoginPage: React.FC<LoginPageProps> = ({
-  showPassword = true,
-  usernamePlaceholder = '请输入用户名',
+  usernamePlaceholder,
   inputContainerStyle = {},
   containerStyle = {},
   buttonStyle = {},
   buttonText = 'Login',
+  customContent,
   onLogin,
+  onForgetPassword,
 }) => {
-  const [isShowPassword, setIsShowPassword] = useState(false);
+  const [showPsd, setShowPsd] = useState(false);
+  const [showCode, setShowCode] = useState(false); // added state
+  console.log('showCode', showCode);
+
   const theme = useTheme<Theme>();
   const styles = createStyles({
     border: theme.colors.border || '#CCC',
@@ -57,43 +70,50 @@ const LoginPage: React.FC<LoginPageProps> = ({
           <Icon xml={logSvg(theme)} size={30} />
           <Text style={styles.title}>Login</Text>
         </View>
-        <View style={[styles.inputContainer, inputContainerStyle]}>
+        <View style={[styles.inputContainer, { paddingHorizontal: 15 }, inputContainerStyle]}>
           <TextInput
-            placeholder={usernamePlaceholder}
-            placeholderTextColor={theme.colors.icon}
+            placeholder={usernamePlaceholder ? usernamePlaceholder : `请输入${showCode ? '手机号码' : '用户名'}`}
+            placeholderTextColor={theme.colors.border}
             style={styles.input}
+            keyboardType={showCode ? 'numeric' : 'default'}
             onChangeText={onChangeUsername}
           />
         </View>
-        {showPassword ? (
-          <View style={[styles.inputContainers, inputContainerStyle]}>
+        {!showCode ? (
+          <View style={[styles.inputContainer, styles.inputC, { paddingHorizontal: 15 }, inputContainerStyle]}>
             <TextInput
               placeholder="请输入密码"
-              placeholderTextColor={theme.colors.icon}
-              secureTextEntry={!isShowPassword}
+              placeholderTextColor={theme.colors.border}
+              secureTextEntry={!showPsd}
               style={[styles.input, { width: '92%' }]}
               onChangeText={onChangePassword}
             />
-            <TouchableOpacity onPress={() => setIsShowPassword(!isShowPassword)}>
-              <Icon xml={isShowPassword ? cEyes : oEyes} size={20} />
+            <TouchableOpacity onPress={() => setShowPsd(!showPsd)}>
+              <Icon xml={showPsd ? cEyes : oEyes} size={20} />
             </TouchableOpacity>
           </View>
         ) : (
           <VerificationCode
             value={password}
             count={60}
             onChange={onChangePassword}
-            outerStyle={[styles.inputContainer, inputContainerStyle]}
+            outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
           />
         )}
-        <View style={styles.textSty1}>
-          <TouchableOpacity>
-            <Text style={styles.textSty}>忘记密码</Text>
-          </TouchableOpacity>
-          <TouchableOpacity>
-            <Text style={styles.textSty}>验证码登录</Text>
-          </TouchableOpacity>
+
+        <View>
+          {customContent || (
+            <View style={styles.textSty1}>
+              <TouchableOpacity onPress={onForgetPassword}>
+                <Text style={styles.textSty}>忘记密码</Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => setShowCode(!showCode)}>
+                <Text style={styles.textSty}>{`${showCode ? '用户名' : '验证码'}登录`}</Text>
+              </TouchableOpacity>
+            </View>
+          )}
         </View>
+
         <TouchableOpacity style={[styles.button, buttonStyle]} onPress={handleLogin}>
           <Text style={[styles.buttonText, styles.buttonTextStyle]}>{buttonText}</Text>
         </TouchableOpacity>
@@ -126,30 +146,22 @@ function createStyles({ border, putCol }: CreStyle) {
     title: {
       fontSize: 24,
       fontWeight: 'bold',
-      marginLeft: 20,
+      marginLeft: 15,
       color: putCol,
     },
     inputContainer: {
       height: 40,
-      marginBottom: 20,
       borderColor: border,
       borderWidth: 1,
       borderRadius: 5,
       justifyContent: 'center',
-      paddingHorizontal: 15,
       flexDirection: 'row',
       alignItems: 'center',
     },
-    inputContainers: {
-      height: 40,
+    inputC: {
+      paddingHorizontal: 10,
+      marginTop: 20,
       marginBottom: 5,
-      borderColor: border,
-      borderWidth: 1,
-      borderRadius: 5,
-      justifyContent: 'center',
-      paddingHorizontal: 15,
-      flexDirection: 'row',
-      alignItems: 'center',
     },
     input: {
       flex: 1,
@@ -158,6 +170,7 @@ function createStyles({ border, putCol }: CreStyle) {
     button: {
       backgroundColor: '#1890ff',
       height: 40,
+      marginTop: 5,
       borderRadius: 5,
       justifyContent: 'center',
       alignItems: 'center',
@@ -176,7 +189,6 @@ function createStyles({ border, putCol }: CreStyle) {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      marginBottom: 30,
     },
   });
 }
diff --git a/packages/core/src/VerificationCode/index.tsx b/packages/core/src/VerificationCode/index.tsx
@@ -78,6 +78,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
       border={null}
       containerStyle={[{ height: 40 }, outerStyle]}
       placeholder={placeholder}
+      placeholderTextColor={theme.colors.border}
       value={value}
       onChangeText={(text) => onChange(text)}
       extraEnd={
@@ -86,7 +87,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
           disabled={disabled}
           onPress={handleClick}
           color={theme.colors.background || '#fff'}
-          style={buttonStyle}
+          style={[buttonStyle]}
         >
           <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
         </Button>
diff --git a/website/src/pages/components/loginPage/index.tsx b/website/src/pages/components/loginPage/index.tsx
@@ -0,0 +1,5 @@
+import Preview from 'src/component/Preview';
+import md from '@uiw/react-native/lib/LoginPage/README.md';
+
+const DEMO = () => <Preview {...md} path="/packages/core/src/LoginPage/README.md" />;
+export default DEMO;
diff --git a/website/src/pages/docs/environment-setup/ios/README.md b/website/src/pages/docs/environment-setup/ios/README.md
@@ -157,7 +157,7 @@ $ yarn install # 安装node依赖
 **🚧🚧 如果你要运行 `react-native@0.70.0` or 或更高版本**
 [help](https://github.com/facebook/react-native/issues/34608#)
 #### 请保证你的ruby版本为2.7.5或更高版本
-你可以使用 [ruby](https://github.com/rbenv/rbenv#readme) 来管理你的ruby版本
+你可以使用 [rbenv](https://github.com/rbenv/rbenv#readme) 来管理你的ruby版本
 
 ```
 bundle install
diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -42,6 +42,7 @@ export const componentMenus: MenuData[] = [
   { path: '/components/timeLine', name: 'Timeline 时间轴' },
   { path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
   { path: '/components/verificationCode', name: 'VerificationCode  验证码倒计时组件' },
+  { path: '/components/loginPage', name: 'LoginPage  登录页组件' },
 
   { divider: true, name: 'Data Display 信息录入' },
   { path: '/components/checkbox', name: 'CheckBox 复选框' },
diff --git a/website/src/routes/router.tsx b/website/src/routes/router.tsx
@@ -305,6 +305,10 @@ export const routeData = [
         path: '/components/verificationCode',
         component: lazy(() => import('../pages/components/verificationCode')),
       },
+      {
+        path: '/components/loginPage',
+        component: lazy(() => import('../pages/components/loginPage')),
+      },
       {
         path: '/components/actionSheet',
         component: lazy(() => import('../pages/components/actionSheet')),
