Skip to content

Commit

Permalink
Merge pull request #613 from hy916/dev
Browse files Browse the repository at this point in the history 
添加LoginPagePC文档和优化LoginPage登录页面组件
  • Loading branch information
@ChenlingasMx
ChenlingasMx committed Apr 26, 2023
2 parents d20c614 + 513565b commit 692d305
Show file tree
Hide file tree
Showing 11 changed files with 297 additions and 2 deletions.
8 changes: 8 additions & 0 deletions example/examples/src/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,4 +514,12 @@ export const stackPageData: Routes[] = [
description: '验证码倒计时组件',
},
},
{
name: 'LoginPage',
component: require('./routes/LoginPage').default,
params: {
title: 'LoginPage 登录页组件',
description: '登录页组件',
},
},
];
27 changes: 27 additions & 0 deletions example/examples/src/routes/LoginPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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 {}

export default class LoginPageView extends Component<LoginPageProps> {
render() {
const {route} = this.props;
const description = route.params.description;
const title = route.params.title;
return (
<Container>
<Layout>
<Header title={title} description={description} />
<Body>
<LoginPage />
</Body>
<Footer />
</Layout>
</Container>
);
}
}
39 changes: 39 additions & 0 deletions packages/core/src/LoginPage/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
LoginPage 登录页
---

用于项目的登录页面
### 基础示例

<!--DemoStart-->
```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>
</Fragment>
);
}
export default Demo
```
<!--End-->

### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|-----|------|
| `usernamePlaceholder` | 自定义账号输入框为空时显示的文字 | `string` | - |
| `inputContainerStyle` | 自定义账号，密码，验证码输入框样式 |`Boolean` | - |
| `buttonStyle` | 登录按钮自定义样式 | `Object` | - |
| `containerStyle` | 登录页自定义最外层样式 | `object` | - |
| `buttonText` | 登录按钮自定义文字 | `string` | - |
| `customContent` | 自定义忘记密码，切换登录方式 | `React.ReactNode` | - |
| `onLogin` | 登录按钮事件 | `(username: string, password: string) => void` | - |
| `onForgetPassword` | 忘记密码按钮事件 | `() => void` | - |


196 changes: 196 additions & 0 deletions packages/core/src/LoginPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from '../Icon';
import VerificationCode from '../VerificationCode';
import { Theme } from '../theme';
import { useTheme } from '@shopify/restyle';
import { logSvg, cEyes, oEyes } from './svg';

interface LoginPageProps {
/** 自定义账号输入框为空时显示的文字 */
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> = ({
usernamePlaceholder,
inputContainerStyle = {},
containerStyle = {},
buttonStyle = {},
buttonText = 'Login',
customContent,
onLogin,
onForgetPassword,
}) => {
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',
putCol: theme.colors.primary_text || '#CCC',
});
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const onChangeUsername = (val: string) => {
console.log('onChange--> 输入改变事件 ', val);
setUsername(val);
};

const onChangePassword = (val: string) => {
console.log('onChange--> 输入改变事件 ', val);
setPassword(val);
};

const handleLogin = () => {
if (onLogin) {
onLogin(username, password);
}
};

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>
<View style={[styles.inputContainer, { paddingHorizontal: 15 }, inputContainerStyle]}>
<TextInput
placeholder={usernamePlaceholder ? usernamePlaceholder : `请输入${showCode ? '手机号码' : '用户名'}`}
placeholderTextColor={theme.colors.border}
style={styles.input}
keyboardType={showCode ? 'numeric' : 'default'}
onChangeText={onChangeUsername}
/>
</View>
{!showCode ? (
<View style={[styles.inputContainer, styles.inputC, { paddingHorizontal: 15 }, inputContainerStyle]}>
<TextInput
placeholder="请输入密码"
placeholderTextColor={theme.colors.border}
secureTextEntry={!showPsd}
style={[styles.input, { width: '92%' }]}
onChangeText={onChangePassword}
/>
<TouchableOpacity onPress={() => setShowPsd(!showPsd)}>
<Icon xml={showPsd ? cEyes : oEyes} size={20} />
</TouchableOpacity>
</View>
) : (
<VerificationCode
value={password}
count={60}
onChange={onChangePassword}
outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
/>
)}

<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>
</View>
</View>
);
};

type CreStyle = {
border: string;
putCol: string;
};

function createStyles({ border, putCol }: CreStyle) {
return StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
content: {
width: '80%',
},
center: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginLeft: 15,
color: putCol,
},
inputContainer: {
height: 40,
borderColor: border,
borderWidth: 1,
borderRadius: 5,
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
},
inputC: {
paddingHorizontal: 10,
marginTop: 20,
marginBottom: 5,
},
input: {
flex: 1,
color: putCol,
},
button: {
backgroundColor: '#1890ff',
height: 40,
marginTop: 5,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: '#fff',
},
buttonTextStyle: {
color: '#fff',
},
textSty: {
color: '#3578e5',
fontWeight: 'bold',
},
textSty1: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
});
}

export default LoginPage;
12 changes: 12 additions & 0 deletions packages/core/src/LoginPage/svg.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const logSvg = (theme: any) => `
<svg width="28" height="28" viewBox="0 0 92 92"><path fill=${theme.colors.primary_text} d="M64.0334418,3.00001993 C79.6854418,3.00001993 89.016442,12.3310199 88.9737367,27.9830199 L88.9737367,64.0170199 C88.9737367,79.6690199 79.6424418,89.0000199 63.9904418,89.0000199 L27.9994418,89.0000199 C12.347442,89.0000199 3.01644198,79.6690199 3.01644198,63.9740199 L3.01644198,27.9830199 C3.01644198,12.3310199 12.347442,3.00001993 27.9994418,3.00001993 L64.0334418,3.00001993 Z M32.6078468,17.0000199 C31.7278468,17.0000199 30.8478468,17.2400199 30.1278468,17.7200199 C29.3278468,18.2000199 28.7678468,18.8400199 28.4478468,19.6400199 C27.8878468,20.6000199 27.6478468,21.6400199 27.5678468,22.7600199 C27.5678468,23.8000199 27.4878468,24.9200199 27.4078468,25.9600199 L27.4078468,26.3600199 C27.3278468,29.9600199 27.2478468,32.6000199 27.2478468,36.4400199 L27.2478468,47.1600199 L27.0878468,58.7600199 C27.0878468,62.2000199 26.8478468,65.7200199 27.2478468,69.3200199 C27.2478468,69.8000199 27.4078468,70.3600199 27.5678468,70.8400199 C29.2478468,75.4000199 36.6078468,74.1200199 40.7678468,74.2800199 C45.1678468,74.3600199 49.3278468,74.3600199 53.4878468,74.2800199 L53.8078468,74.2800199 C55.0878468,74.1200199 56.3678468,74.1200199 57.5678468,74.0400199 C58.7678468,74.0400199 59.9678468,73.8000199 61.1678468,73.4000199 C62.0478468,73.0800199 62.6878468,72.6800199 63.2478468,71.9600199 C63.7278468,71.3200199 64.1278468,70.5200199 64.1278468,69.7200199 C64.1278468,69.0800199 64.1278468,67.8800199 63.9678468,67.3200199 C63.8078468,66.7600199 63.4878468,66.2800199 62.8478468,65.7200199 C62.5278468,65.4000199 62.0478468,65.0800199 61.4078468,64.9200199 C60.7678468,64.7600199 60.1278468,64.6000199 59.3278468,64.5200199 C58.6078468,64.4400199 57.8078468,64.3600199 57.1678468,64.3600199 L53.4078468,64.3600199 L37.5678468,64.2000199 L37.8878468,26.5200199 L37.8878468,25.0800199 C37.8878468,24.5200199 37.8878468,23.8800199 38.0478468,23.2400199 C38.0478468,22.6000199 37.8878468,21.9600199 37.8078468,21.2400199 C37.7278468,20.6000199 37.5678468,19.9600199 37.4078468,19.4800199 C37.1678468,18.9200199 36.8478468,18.4400199 36.5278468,18.1200199 C35.8878468,17.6400199 35.3278468,17.2400199 34.6878468,17.1600199 C34.0478468,17.0800199 33.3278468,17.0000199 32.6078468,17.0000199 Z" transform="rotate(7 45.995 46)"></path></svg>`;

export const cEyes: string = `
<svg t="1682326713832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1092" width="200" height="200"><path d="M511.930182 209.454545c174.638545 0 335.965091 128.907636 458.007273 290.932364a39.563636 39.563636 0 0 1 3.211636 41.122909l-3.328 5.399273-4.328727 5.701818C842.984727 712.727273 683.054545 837.818182 512 837.818182c-174.382545 0-335.150545-128.512-457.890909-290.978909a39.447273 39.447273 0 0 1-3.258182-41.169455l3.351273-5.422545 4.421818-5.678546C186.298182 330.705455 340.968727 209.454545 511.906909 209.454545z m0.139636 74.868364c-134.144 0-265.355636 95.301818-375.738182 228.026182l-9.099636 11.077818 9.192727 11.287273c107.008 128.791273 230.888727 220.858182 360.517818 227.514182l14.987637 0.395636c133.981091 0 264.075636-94.394182 376.087273-227.956364l9.239272-11.240727-9.239272-11.170909c-107.845818-128.581818-232.424727-220.881455-361.099637-227.560727l-14.848-0.372364z m-1.559273 82.664727a138.705455 138.705455 0 0 1 93.463273 36.957091l8.285091 8.261818 7.586909 8.773819a160.186182 160.186182 0 0 1 34.350546 99.630545c0 84.805818-64.279273 153.646545-143.709091 153.646546-79.313455 0-143.592727-68.840727-143.592728-153.646546 0-81.408 59.182545-148.084364 134.144-153.297454l9.472-0.325819zM464.756364 458.938182l-5.818182 5.655273-5.166546 6.167272a83.246545 83.246545 0 0 0-13.777454 71.773091l2.653091 8.075637 3.281454 7.424c11.52 22.877091 32.744727 38.074182 56.552728 40.890181l8.005818 0.465455 0.581818 0.605091 7.726545-0.442182a70.516364 70.516364 0 0 0 37.469091-16.756364l6.190546-5.981091a81.454545 81.454545 0 0 0 21.387636-56.203636c0-31.883636-17.943273-60.695273-45.335273-72.797091a69.469091 69.469091 0 0 0-73.774545 11.124364z" fill="#8a8a8a" p-id="1093"></path>
</svg>
`;

export const oEyes: string = `
<svg t="1682326825185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1414" width="200" height="200"><path d="M963.909818 289.233455c16.244364 14.894545 18.152727 41.122909 4.258909 58.554181a629.573818 629.573818 0 0 1-110.010182 107.799273l84.014546 90.112c14.824727 16.523636 14.405818 42.798545-0.977455 58.740364a36.840727 36.840727 0 0 1-53.76 0l-97.163636-104.168728a571.112727 571.112727 0 0 1-140.101818 56.48291l44.916363 132.212363c7.284364 21.573818-3.072 45.381818-23.156363 53.248-20.107636 7.842909-42.309818-3.258182-49.617455-24.832l-49.570909-146.338909a567.575273 567.575273 0 0 1-122.135273 0.488727l-49.547636 145.850182c-7.307636 21.550545-29.509818 32.674909-49.617454 24.832-20.084364-7.842909-30.440727-31.674182-23.133091-53.248l44.590545-131.025454a574.976 574.976 0 0 1-141.428364-55.924364l-95.534545 102.4a36.864 36.864 0 0 1-54.714182-1.000727 43.752727 43.752727 0 0 1 0-57.716364l82.059637-88.017454a623.429818 623.429818 0 0 1-107.613091-103.656728c-13.777455-17.524364-11.706182-43.729455 4.608-58.507636 15.895273-14.382545 39.517091-12.753455 53.527272 3.700364 99.793455 122.368 244.014545 192.465455 395.566546 192.256 155.810909 0 300.567273-73.076364 399.965091-197.655273 13.893818-17.454545 38.330182-19.479273 54.574545-4.584727z" fill="#8a8a8a" p-id="1415"></path>
</svg>
`;
3 changes: 2 additions & 1 deletion packages/core/src/VerificationCode/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,8 @@ export { default as Accordion } from './Accordion';
export * from './Accordion';
export { default as VerificationCode } from './VerificationCode';
export * from './VerificationCode';
export { default as LoginPage } from './LoginPage';
export * from './LoginPage';
/**
* Typography
*/
Expand Down
5 changes: 5 additions & 0 deletions website/src/pages/components/loginPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion website/src/pages/docs/environment-setup/ios/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions website/src/routes/menus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 复选框' },
Expand Down
4 changes: 4 additions & 0 deletions website/src/routes/router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')),
Expand Down

0 comments on commit 692d305

Please sign in to comment.