Browse Source
* ✨ feat: use ProForm replace compents form
* up version
* fix lint error
pull/7588/head
陈帅
5 years ago
committed by
GitHub
GitHub
15 changed files with 250 additions and 648 deletions
@ -0,0 +1,23 @@ |
|||||
|
export default { |
||||
|
'pages.layouts.userLayout.title': 'Ant Design 是西湖区最具影响力的 Web 设计规范', |
||||
|
'pages.login.accountLogin.tab': '账户密码登录', |
||||
|
'pages.login.accountLogin.errorMessage': '错误的用户名和密码（admin/ant.design)', |
||||
|
'pages.login.username.placeholder': '用户名: admin or user', |
||||
|
'pages.login.username.required': '用户名是必填项！', |
||||
|
'pages.login.password.placeholder': '密码: ant.design', |
||||
|
'pages.login.password.required': '密码是必填项！', |
||||
|
'pages.login.phoneLogin.tab': '手机号登录', |
||||
|
'pages.login.phoneLogin.errorMessage': '验证码错误', |
||||
|
'pages.login.phoneNumber.placeholder': '请输入手机号！', |
||||
|
'pages.login.phoneNumber.required': '手机号是必填项！', |
||||
|
'pages.login.phoneNumber.invalid': '不合法的手机号！', |
||||
|
'pages.login.captcha.placeholder': '请输入验证码！', |
||||
|
'pages.login.captcha.required': '验证码是必填项！', |
||||
|
'pages.login.phoneLogin.getVerificationCode': '获取验证码', |
||||
|
'pages.getCaptchaSecondText': '秒后重新获取', |
||||
|
'pages.login.rememberMe': '自动登录', |
||||
|
'pages.login.forgotPassword': '忘记密码 ?', |
||||
|
'pages.login.submit': '提交', |
||||
|
'pages.login.loginWith': '其他登录方式 :', |
||||
|
'pages.login.registerAccount': '注册账户', |
||||
|
}; |
||||
@ -1,13 +0,0 @@ |
|||||
import { createContext } from 'react'; |
|
||||
|
|
||||
export interface LoginContextProps { |
|
||||
tabUtil?: { |
|
||||
addTab: (id: string) => void; |
|
||||
removeTab: (id: string) => void; |
|
||||
}; |
|
||||
updateActive?: (activeItem: { [key: string]: string } | string) => void; |
|
||||
} |
|
||||
|
|
||||
const LoginContext: React.Context<LoginContextProps> = createContext({}); |
|
||||
|
|
||||
export default LoginContext; |
|
||||
@ -1,177 +0,0 @@ |
|||||
import { Button, Col, Input, Row, Form, message } from 'antd'; |
|
||||
import React, { useState, useCallback, useEffect } from 'react'; |
|
||||
import omit from 'omit.js'; |
|
||||
import { FormItemProps } from 'antd/es/form/FormItem'; |
|
||||
import { getFakeCaptcha } from '@/services/login'; |
|
||||
import { FormattedMessage } from 'umi'; |
|
||||
|
|
||||
import ItemMap from './map'; |
|
||||
import LoginContext, { LoginContextProps } from './LoginContext'; |
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
export type WrappedLoginItemProps = LoginItemProps; |
|
||||
export type LoginItemKeyType = keyof typeof ItemMap; |
|
||||
export interface LoginItemType { |
|
||||
UserName: React.FC<WrappedLoginItemProps>; |
|
||||
Password: React.FC<WrappedLoginItemProps>; |
|
||||
Mobile: React.FC<WrappedLoginItemProps>; |
|
||||
Captcha: React.FC<WrappedLoginItemProps>; |
|
||||
} |
|
||||
|
|
||||
export interface LoginItemProps extends Partial<FormItemProps> { |
|
||||
name?: string; |
|
||||
style?: React.CSSProperties; |
|
||||
placeholder?: string; |
|
||||
buttonText?: React.ReactNode; |
|
||||
countDown?: number; |
|
||||
getCaptchaButtonText?: string; |
|
||||
getCaptchaSecondText?: string; |
|
||||
updateActive?: LoginContextProps['updateActive']; |
|
||||
type?: string; |
|
||||
defaultValue?: string; |
|
||||
customProps?: { [key: string]: unknown }; |
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; |
|
||||
tabUtil?: LoginContextProps['tabUtil']; |
|
||||
} |
|
||||
|
|
||||
const FormItem = Form.Item; |
|
||||
|
|
||||
const getFormItemOptions = ({ |
|
||||
onChange, |
|
||||
defaultValue, |
|
||||
customProps = {}, |
|
||||
rules, |
|
||||
}: LoginItemProps) => { |
|
||||
const options: { |
|
||||
rules?: LoginItemProps['rules']; |
|
||||
onChange?: LoginItemProps['onChange']; |
|
||||
initialValue?: LoginItemProps['defaultValue']; |
|
||||
} = { |
|
||||
rules: rules || (customProps.rules as LoginItemProps['rules']), |
|
||||
}; |
|
||||
if (onChange) { |
|
||||
options.onChange = onChange; |
|
||||
} |
|
||||
if (defaultValue) { |
|
||||
options.initialValue = defaultValue; |
|
||||
} |
|
||||
return options; |
|
||||
}; |
|
||||
|
|
||||
const LoginItem: React.FC<LoginItemProps> = (props) => { |
|
||||
const [count, setCount] = useState<number>(props.countDown || 0); |
|
||||
const [timing, setTiming] = useState(false); |
|
||||
// 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
|
|
||||
const { |
|
||||
onChange, |
|
||||
customProps, |
|
||||
defaultValue, |
|
||||
rules, |
|
||||
name, |
|
||||
getCaptchaButtonText, |
|
||||
getCaptchaSecondText, |
|
||||
updateActive, |
|
||||
type, |
|
||||
tabUtil, |
|
||||
...restProps |
|
||||
} = props; |
|
||||
|
|
||||
const onGetCaptcha = useCallback(async (mobile: string) => { |
|
||||
const result = await getFakeCaptcha(mobile); |
|
||||
if (result === false) { |
|
||||
return; |
|
||||
} |
|
||||
message.success('获取验证码成功！验证码为：1234'); |
|
||||
setTiming(true); |
|
||||
}, []); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
let interval: number = 0; |
|
||||
const { countDown } = props; |
|
||||
if (timing) { |
|
||||
interval = window.setInterval(() => { |
|
||||
setCount((preSecond) => { |
|
||||
if (preSecond <= 1) { |
|
||||
setTiming(false); |
|
||||
clearInterval(interval); |
|
||||
// 重置秒数
|
|
||||
return countDown || 60; |
|
||||
} |
|
||||
return preSecond - 1; |
|
||||
}); |
|
||||
}, 1000); |
|
||||
} |
|
||||
return () => clearInterval(interval); |
|
||||
}, [timing]); |
|
||||
if (!name) { |
|
||||
return null; |
|
||||
} |
|
||||
// get getFieldDecorator props
|
|
||||
const options = getFormItemOptions(props); |
|
||||
const otherProps = restProps || {}; |
|
||||
|
|
||||
if (type === 'Captcha') { |
|
||||
const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']); |
|
||||
|
|
||||
return ( |
|
||||
<FormItem shouldUpdate noStyle> |
|
||||
{({ getFieldValue }) => ( |
|
||||
<Row gutter={8}> |
|
||||
<Col span={16}> |
|
||||
<FormItem name={name} {...options}> |
|
||||
<Input {...customProps} {...inputProps} /> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
<Col span={8}> |
|
||||
<Button |
|
||||
disabled={timing} |
|
||||
className={styles.getCaptcha} |
|
||||
size="large" |
|
||||
onClick={() => { |
|
||||
const value = getFieldValue('mobile'); |
|
||||
onGetCaptcha(value); |
|
||||
}} |
|
||||
> |
|
||||
{timing ? ( |
|
||||
`${count} 秒` |
|
||||
) : ( |
|
||||
<FormattedMessage |
|
||||
id="pages.login.phoneLogin.getVerificationCode" |
|
||||
defaultMessage="获取验证码" |
|
||||
/> |
|
||||
)} |
|
||||
</Button> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
)} |
|
||||
</FormItem> |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<FormItem name={name} {...options}> |
|
||||
<Input {...customProps} {...otherProps} /> |
|
||||
</FormItem> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
const LoginItems: Partial<LoginItemType> = {}; |
|
||||
|
|
||||
Object.keys(ItemMap).forEach((key) => { |
|
||||
const item = ItemMap[key]; |
|
||||
LoginItems[key] = (props: LoginItemProps) => ( |
|
||||
<LoginContext.Consumer> |
|
||||
{(context) => ( |
|
||||
<LoginItem |
|
||||
customProps={item.props} |
|
||||
rules={item.rules} |
|
||||
{...props} |
|
||||
type={key} |
|
||||
{...context} |
|
||||
updateActive={context.updateActive} |
|
||||
/> |
|
||||
)} |
|
||||
</LoginContext.Consumer> |
|
||||
); |
|
||||
}); |
|
||||
|
|
||||
export default LoginItems as LoginItemType; |
|
||||
@ -1,23 +0,0 @@ |
|||||
import { Button, Form } from 'antd'; |
|
||||
|
|
||||
import { ButtonProps } from 'antd/es/button'; |
|
||||
import React from 'react'; |
|
||||
import classNames from 'classnames'; |
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
const FormItem = Form.Item; |
|
||||
|
|
||||
interface LoginSubmitProps extends ButtonProps { |
|
||||
className?: string; |
|
||||
} |
|
||||
|
|
||||
const LoginSubmit: React.FC<LoginSubmitProps> = ({ className, ...rest }) => { |
|
||||
const clsString = classNames(styles.submit, className); |
|
||||
return ( |
|
||||
<FormItem> |
|
||||
<Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} /> |
|
||||
</FormItem> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default LoginSubmit; |
|
||||
@ -1,45 +0,0 @@ |
|||||
import React, { useEffect } from 'react'; |
|
||||
import { Tabs } from 'antd'; |
|
||||
import LoginContext, { LoginContextProps } from './LoginContext'; |
|
||||
|
|
||||
const { TabPane } = Tabs; |
|
||||
|
|
||||
const generateId = (() => { |
|
||||
let i = 0; |
|
||||
return (prefix = '') => { |
|
||||
i += 1; |
|
||||
return `${prefix}${i}`; |
|
||||
}; |
|
||||
})(); |
|
||||
|
|
||||
type TabPaneProps = Parameters<typeof Tabs.TabPane>[0]; |
|
||||
|
|
||||
interface LoginTabProps extends TabPaneProps { |
|
||||
tabUtil: LoginContextProps['tabUtil']; |
|
||||
active?: boolean; |
|
||||
} |
|
||||
|
|
||||
const LoginTab: React.FC<LoginTabProps> = (props) => { |
|
||||
useEffect(() => { |
|
||||
const uniqueId = generateId('login-tab-'); |
|
||||
const { tabUtil } = props; |
|
||||
if (tabUtil) { |
|
||||
tabUtil.addTab(uniqueId); |
|
||||
} |
|
||||
}, []); |
|
||||
const { children } = props; |
|
||||
return <TabPane {...props}>{props.active && children}</TabPane>; |
|
||||
}; |
|
||||
|
|
||||
const WrapContext: React.FC<TabPaneProps> & { |
|
||||
typeName: string; |
|
||||
} = (props) => ( |
|
||||
<LoginContext.Consumer> |
|
||||
{(value) => <LoginTab tabUtil={value.tabUtil} {...props} />} |
|
||||
</LoginContext.Consumer> |
|
||||
); |
|
||||
|
|
||||
// 标志位 用来判断是不是自定义组件
|
|
||||
WrapContext.typeName = 'LoginTab'; |
|
||||
|
|
||||
export default WrapContext; |
|
||||
@ -1,49 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.login { |
|
||||
:global { |
|
||||
.ant-tabs .ant-tabs-bar { |
|
||||
margin-bottom: 24px; |
|
||||
text-align: center; |
|
||||
border-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.getCaptcha { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
margin-left: 16px; |
|
||||
color: rgba(0, 0, 0, 0.2); |
|
||||
font-size: 24px; |
|
||||
vertical-align: middle; |
|
||||
cursor: pointer; |
|
||||
transition: color 0.3s; |
|
||||
|
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.other { |
|
||||
margin-top: 24px; |
|
||||
line-height: 22px; |
|
||||
text-align: left; |
|
||||
|
|
||||
.register { |
|
||||
float: right; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.prefixIcon { |
|
||||
color: @disabled-color; |
|
||||
font-size: @font-size-base; |
|
||||
} |
|
||||
|
|
||||
.submit { |
|
||||
width: 100%; |
|
||||
margin-top: 24px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,119 +0,0 @@ |
|||||
import { Tabs, Form } from 'antd'; |
|
||||
import React, { useState } from 'react'; |
|
||||
import useMergeValue from 'use-merge-value'; |
|
||||
import classNames from 'classnames'; |
|
||||
import { FormInstance } from 'antd/es/form'; |
|
||||
import { LoginParamsType } from '@/services/login'; |
|
||||
|
|
||||
import LoginContext from './LoginContext'; |
|
||||
import LoginItem, { LoginItemProps } from './LoginItem'; |
|
||||
import LoginSubmit from './LoginSubmit'; |
|
||||
import LoginTab from './LoginTab'; |
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
export interface LoginProps { |
|
||||
activeKey?: string; |
|
||||
onTabChange?: (key: string) => void; |
|
||||
style?: React.CSSProperties; |
|
||||
onSubmit?: (values: LoginParamsType) => void; |
|
||||
className?: string; |
|
||||
from?: FormInstance; |
|
||||
children: React.ReactElement<typeof LoginTab>[]; |
|
||||
} |
|
||||
|
|
||||
interface LoginType extends React.FC<LoginProps> { |
|
||||
Tab: typeof LoginTab; |
|
||||
Submit: typeof LoginSubmit; |
|
||||
UserName: React.FunctionComponent<LoginItemProps>; |
|
||||
Password: React.FunctionComponent<LoginItemProps>; |
|
||||
Mobile: React.FunctionComponent<LoginItemProps>; |
|
||||
Captcha: React.FunctionComponent<LoginItemProps>; |
|
||||
} |
|
||||
|
|
||||
const Login: LoginType = (props) => { |
|
||||
const { className } = props; |
|
||||
const [tabs, setTabs] = useState<string[]>([]); |
|
||||
const [active, setActive] = useState({}); |
|
||||
const [type, setType] = useMergeValue('', { |
|
||||
value: props.activeKey, |
|
||||
onChange: props.onTabChange, |
|
||||
}); |
|
||||
const TabChildren: React.ReactComponentElement<typeof LoginTab>[] = []; |
|
||||
const otherChildren: React.ReactElement<unknown>[] = []; |
|
||||
React.Children.forEach( |
|
||||
props.children, |
|
||||
(child: React.ReactComponentElement<typeof LoginTab> | React.ReactElement<unknown>) => { |
|
||||
if (!child) { |
|
||||
return; |
|
||||
} |
|
||||
if ((child.type as { typeName: string }).typeName === 'LoginTab') { |
|
||||
TabChildren.push(child as React.ReactComponentElement<typeof LoginTab>); |
|
||||
} else { |
|
||||
otherChildren.push(child); |
|
||||
} |
|
||||
}, |
|
||||
); |
|
||||
return ( |
|
||||
<LoginContext.Provider |
|
||||
value={{ |
|
||||
tabUtil: { |
|
||||
addTab: (id) => { |
|
||||
setTabs([...tabs, id]); |
|
||||
}, |
|
||||
removeTab: (id) => { |
|
||||
setTabs(tabs.filter((currentId) => currentId !== id)); |
|
||||
}, |
|
||||
}, |
|
||||
updateActive: (activeItem) => { |
|
||||
if (!active) return; |
|
||||
if (active[type]) { |
|
||||
active[type].push(activeItem); |
|
||||
} else { |
|
||||
active[type] = [activeItem]; |
|
||||
} |
|
||||
setActive(active); |
|
||||
}, |
|
||||
}} |
|
||||
> |
|
||||
<div className={classNames(className, styles.login)}> |
|
||||
<Form |
|
||||
form={props.from} |
|
||||
onFinish={(values) => { |
|
||||
if (props.onSubmit) { |
|
||||
props.onSubmit(values as LoginParamsType); |
|
||||
} |
|
||||
}} |
|
||||
> |
|
||||
{tabs.length ? ( |
|
||||
<React.Fragment> |
|
||||
<Tabs |
|
||||
destroyInactiveTabPane |
|
||||
animated={false} |
|
||||
className={styles.tabs} |
|
||||
activeKey={type} |
|
||||
onChange={(activeKey) => { |
|
||||
setType(activeKey); |
|
||||
}} |
|
||||
> |
|
||||
{TabChildren} |
|
||||
</Tabs> |
|
||||
{otherChildren} |
|
||||
</React.Fragment> |
|
||||
) : ( |
|
||||
props.children |
|
||||
)} |
|
||||
</Form> |
|
||||
</div> |
|
||||
</LoginContext.Provider> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
Login.Tab = LoginTab; |
|
||||
Login.Submit = LoginSubmit; |
|
||||
|
|
||||
Login.UserName = LoginItem.UserName; |
|
||||
Login.Password = LoginItem.Password; |
|
||||
Login.Mobile = LoginItem.Mobile; |
|
||||
Login.Captcha = LoginItem.Captcha; |
|
||||
|
|
||||
export default Login; |
|
||||
@ -1,72 +0,0 @@ |
|||||
import { LockTwoTone, MailTwoTone, MobileTwoTone, UserOutlined } from '@ant-design/icons'; |
|
||||
import React from 'react'; |
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
export default { |
|
||||
UserName: { |
|
||||
props: { |
|
||||
size: 'large', |
|
||||
id: 'userName', |
|
||||
prefix: ( |
|
||||
<UserOutlined |
|
||||
style={{ |
|
||||
color: '#1890ff', |
|
||||
}} |
|
||||
className={styles.prefixIcon} |
|
||||
/> |
|
||||
), |
|
||||
placeholder: 'admin', |
|
||||
}, |
|
||||
rules: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: 'Please enter username!', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
Password: { |
|
||||
props: { |
|
||||
size: 'large', |
|
||||
prefix: <LockTwoTone className={styles.prefixIcon} />, |
|
||||
type: 'password', |
|
||||
id: 'password', |
|
||||
placeholder: '888888', |
|
||||
}, |
|
||||
rules: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: 'Please enter password!', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
Mobile: { |
|
||||
props: { |
|
||||
size: 'large', |
|
||||
prefix: <MobileTwoTone className={styles.prefixIcon} />, |
|
||||
placeholder: 'mobile number', |
|
||||
}, |
|
||||
rules: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: 'Please enter mobile number!', |
|
||||
}, |
|
||||
{ |
|
||||
pattern: /^1\d{10}$/, |
|
||||
message: 'Wrong mobile number format!', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
Captcha: { |
|
||||
props: { |
|
||||
size: 'large', |
|
||||
prefix: <MailTwoTone className={styles.prefixIcon} />, |
|
||||
placeholder: 'captcha', |
|
||||
}, |
|
||||
rules: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: 'Please enter Captcha!', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
}; |
|
||||
Loading…
Reference in new issue