Skip to content

Commit 513565b

Browse files
author
hy
committed
fix(LoginPage):添加LoginPagePC文档和优化LoginPage登录页面组件
1 parent 690581f commit 513565b

File tree

7 files changed

+52
-50
lines changed

7 files changed

+52
-50
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
22
import Layout, {Container} from '../../Layout';
33
import {LoginPage} from '@uiw/react-native';
44
import {ComProps} from '../../routes';
5+
import {View} from 'react-native';
56
const {Header, Body, Card, Footer} = Layout;
67

78
export interface LoginPageProps extends ComProps {}
@@ -16,7 +17,7 @@ export default class LoginPageView extends Component<LoginPageProps> {
1617
<Layout>
1718
<Header title={title} description={description} />
1819
<Body>
19-
<LoginPage showPassword={true} />
20+
<LoginPage />
2021
</Body>
2122
<Footer />
2223
</Layout>

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

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,21 @@
1-
MaskLayer 遮罩层
1+
LoginPage 登录页
22
---
33

4-
用于模态对话框，中的遮罩层。
5-
6-
<!-- ![](https://user-images.githubusercontent.com/66067296/139398306-d038225d-0fee-4009-a4f7-a06c7beabf45.gif) -->
7-
<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
8-
4+
用于项目的登录页面
95
### 基础示例
106

117
<!--DemoStart-->
128
```jsx mdx:preview&background=#bebebe29
13-
import React, { Fragment, useState } from 'react';
14-
import { Text, SafeAreaView } from 'react-native';
15-
import { Button, MaskLayer,Grid,Icon } from '@uiw/react-native';
9+
import React,{Fragment} from 'react';
10+
import { View} from 'react-native';
11+
import { LoginPage } from '@uiw/react-native';
1612

1713
const Demo = () => {
18-
const [visible, setVisible] = useState(false);
19-
const data = Array.from(new Array(24)).map((_val, i) => {
20-
return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
21-
});
2214
return (
2315
<Fragment>
24-
<MaskLayer
25-
visible={visible}
26-
onDismiss={() => {
27-
setVisible(!visible);
28-
}}>
29-
<SafeAreaView style={{alignItems:'center'}}>
30-
<Grid style={{width:500,heigth:500,}} data={data} columns='6' hasLine={false}/>
31-
</SafeAreaView>
32-
</MaskLayer>
33-
<Button
34-
onPress={() => {
35-
setVisible(true);
36-
}}>
37-
{visible ? '隐藏模态框' : '显示模态框'}
38-
</Button>
16+
<View>
17+
<LoginPage />
18+
</View>
3919
</Fragment>
4020
);
4121
}
@@ -45,14 +25,15 @@ export default Demo
4525

4626
### Props
4727

48-
继承原生 Modal 属性 [`ModalProps`](https://facebook.github.io/react-native/docs/modal.html#props)
49-
5028
| 参数 | 说明 | 类型 | 默认值 |
5129
|------|------|-----|------|
52-
| `maskClosable` | 遮罩层是否禁止点击 | `Boolean` | `true` |
53-
| `visible` | 遮罩层是否隐藏 |`Boolean` | - |
54-
| `opacity` | 遮罩层透明度 | - | 0.6 |
55-
| `onDismiss` | 隐藏消除回调事件 | () => void | - |
56-
| `children` | 子元素 | JSX.Element | |
30+
| `usernamePlaceholder` | 自定义账号输入框为空时显示的文字 | `string` | - |
31+
| `inputContainerStyle` | 自定义账号，密码，验证码输入框样式 |`Boolean` | - |
32+
| `buttonStyle` | 登录按钮自定义样式 | `Object` | - |
33+
| `containerStyle` | 登录页自定义最外层样式 | `object` | - |
34+
| `buttonText` | 登录按钮自定义文字 | `string` | - |
35+
| `customContent` | 自定义忘记密码，切换登录方式 | `React.ReactNode` | - |
36+
| `onLogin` | 登录按钮事件 | `(username: string, password: string) => void` | - |
37+
| `onForgetPassword` | 忘记密码按钮事件 | `() => void` | - |
5738

5839

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

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,21 @@ import { useTheme } from '@shopify/restyle';
77
import { logSvg, cEyes, oEyes } from './svg';
88

99
interface LoginPageProps {
10+
/** 自定义账号输入框为空时显示的文字 */
1011
usernamePlaceholder?: string;
12+
/** 自定义账号，密码，验证码输入框样式 */
1113
inputContainerStyle?: object;
14+
/** 登录按钮自定义样式 */
1215
buttonStyle?: object;
16+
/** 登录页自定义最外层样式 */
1317
containerStyle?: object;
18+
/** 登录按钮自定义文字 */
1419
buttonText?: string;
20+
/** 自定义忘记密码，切换登录方式 */
1521
customContent?: React.ReactNode;
22+
/** 登录按钮事件 */
1623
onLogin?: (username: string, password: string) => void;
24+
/** 忘记密码按钮事件 */
1725
onForgetPassword?: () => void;
1826
}
1927

@@ -92,18 +100,20 @@ const LoginPage: React.FC<LoginPageProps> = ({
92100
outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
93101
/>
94102
)}
95-
{customContent ? (
96-
customContent
97-
) : (
98-
<View style={styles.textSty1}>
99-
<TouchableOpacity onPress={onForgetPassword}>
100-
<Text style={styles.textSty}>忘记密码</Text>
101-
</TouchableOpacity>
102-
<TouchableOpacity onPress={() => setShowCode(!showCode)}>
103-
<Text style={styles.textSty}>{`${showCode ? '用户名' : '验证码'}登录`}</Text>
104-
</TouchableOpacity>
105-
</View>
106-
)}
103+
104+
<View>
105+
{customContent || (
106+
<View style={styles.textSty1}>
107+
<TouchableOpacity onPress={onForgetPassword}>
108+
<Text style={styles.textSty}>忘记密码</Text>
109+
</TouchableOpacity>
110+
<TouchableOpacity onPress={() => setShowCode(!showCode)}>
111+
<Text style={styles.textSty}>{`${showCode ? '用户名' : '验证码'}登录`}</Text>
112+
</TouchableOpacity>
113+
</View>
114+
)}
115+
</View>
116+
107117
<TouchableOpacity style={[styles.button, buttonStyle]} onPress={handleLogin}>
108118
<Text style={[styles.buttonText, styles.buttonTextStyle]}>{buttonText}</Text>
109119
</TouchableOpacity>
@@ -160,6 +170,7 @@ function createStyles({ border, putCol }: CreStyle) {
160170
button: {
161171
backgroundColor: '#1890ff',
162172
height: 40,
173+
marginTop: 5,
163174
borderRadius: 5,
164175
justifyContent: 'center',
165176
alignItems: 'center',
@@ -178,7 +189,6 @@ function createStyles({ border, putCol }: CreStyle) {
178189
flexDirection: 'row',
179190
alignItems: 'center',
180191
justifyContent: 'space-between',
181-
marginBottom: 30,
182192
},
183193
});
184194
}

‎website/src/pages/components/loginPage/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Preview from 'src/component/Preview';
2+
import md from '@uiw/react-native/lib/LoginPage/README.md';
3+
4+
const DEMO = () => <Preview {...md} path="/packages/core/src/LoginPage/README.md" />;
5+
export default DEMO;

‎website/src/pages/docs/environment-setup/ios/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ $ yarn install # 安装node依赖
157157
**🚧🚧 如果你要运行 `react-native@0.70.0` or 或更高版本**
158158
[help](https://github.com/facebook/react-native/issues/34608#)
159159
#### 请保证你的ruby版本为2.7.5或更高版本
160-
你可以使用 [ruby](https://github.com/rbenv/rbenv#readme) 来管理你的ruby版本
160+
你可以使用 [rbenv](https://github.com/rbenv/rbenv#readme) 来管理你的ruby版本
161161

162162
```
163163
bundle install

‎website/src/routes/menus.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const componentMenus: MenuData[] = [
4242
{ path: '/components/timeLine', name: 'Timeline 时间轴' },
4343
{ path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
4444
{ path: '/components/verificationCode', name: 'VerificationCode 验证码倒计时组件' },
45+
{ path: '/components/loginPage', name: 'LoginPage 登录页组件' },
4546

4647
{ divider: true, name: 'Data Display 信息录入' },
4748
{ path: '/components/checkbox', name: 'CheckBox 复选框' },

‎website/src/routes/router.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,10 @@ export const routeData = [
305305
path: '/components/verificationCode',
306306
component: lazy(() => import('../pages/components/verificationCode')),
307307
},
308+
{
309+
path: '/components/loginPage',
310+
component: lazy(() => import('../pages/components/loginPage')),
311+
},
308312
{
309313
path: '/components/actionSheet',
310314
component: lazy(() => import('../pages/components/actionSheet')),

0 commit comments

Comments
 (0)