Skip to content

Commit

Permalink
✨ feat: 优化样式 & 新增 props
Browse files Browse the repository at this point in the history
BREAKING CHANGES: 调整了 register 和forgot 的接口用法
  • Loading branch information
arvinxx committed Sep 21, 2021
1 parent b13cf01 commit d6fe164
Show file tree
Hide file tree
Showing 19 changed files with 259 additions and 156 deletions.
6 changes: 4 additions & 2 deletions docs/components/biz/examples/UserPanel/LoginWithFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ const LoginWithFooter = () => {
>
<UserPanel.Login
showFooter
wechatLogin={() => {
onWechatLoginClick={() => {
message.info('微信登录实现方法');
}}
registerUrl="/components/biz/user-panel#显示底部"
onRegisterClick={(history) => {
history.push('/components/biz/user-panel#显示底部');
}}
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ const LoginWithLogo = () => {
padding: 24,
}}
>
<UserPanel.Login forgotUrl={'/components/biz/user-panel'} />
<UserPanel.Login
onForgotClick={(history) => {
history.push('/components/biz/user-panel');
}}
/>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion docs/components/biz/user-panel.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ order: 4

### 显示底部

如果需要显示微信登录按钮, 需要实现 `wechatLogin` 方法. 否则默认不显示
如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示

<code src='./examples/UserPanel/LoginWithFooter.tsx' />

Expand Down
3 changes: 2 additions & 1 deletion packages/user-panel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@ant-design/icons": "^4.x",
"@ant-design/pro-form": "^1.x",
"antd": "^4.x",
"@arvinxu/i18n": "1.0.1"
"@arvinxu/i18n": "1.0.1",
"react-router": "*"
}
}
26 changes: 13 additions & 13 deletions packages/user-panel/src/UserLogin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,39 @@ import type { IUserLogin } from './types';

export interface UserLoginProps
extends Omit<LayoutProps, 'type'>,
Pick<LoginProps, 'onClickCaptcha' | 'forgotUrl'> {
Pick<LoginProps, 'onCaptchaClick' | 'onForgotClick'> {
/**
* 登录方法
*/
onLoginSubmit?: IUserLogin.LoginSubmit;
}

const UserLogin: FC<UserLoginProps> = ({
onClickCaptcha,
export const UserLogin: FC<UserLoginProps> = ({
onCaptchaClick,
onLoginSubmit,
logo,
logoUrl,
wechatLogin,
onWechatLoginClick,
showFooter,
forgotUrl,
registerUrl,
onForgotClick,
onRegisterClick,
style,
}) => {
return (
<Layout
logoUrl={logoUrl}
logo={logo}
showFooter={showFooter}
registerUrl={registerUrl}
wechatLogin={wechatLogin}
onRegisterClick={onRegisterClick}
onWechatLoginClick={onWechatLoginClick}
type={'login'}
style={style}
>
<Login
onClickCaptcha={onClickCaptcha}
handleSubmit={onLoginSubmit}
forgotUrl={forgotUrl}
onCaptchaClick={onCaptchaClick}
onSubmit={onLoginSubmit}
onForgotClick={onForgotClick}
/>
</Layout>
);
};

export default UserLogin;
Original file line number Diff line number Diff line change
Expand Up @@ -159,9 +159,7 @@ exports[`Footer 组件 空 1`] = `
<div
class="avx-user-panel-footer-register"
>
<a
href=""
>
<a>
登录
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/user-panel/src/components/Footer/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { render } from '@testing-library/react';

import Footer from './index';
import { Footer } from './index';
import { IntlProvider } from '../Intl';

describe('Footer 组件', () => {
Expand All @@ -16,7 +16,7 @@ describe('Footer 组件', () => {
it('微信登陆页面', () => {
const { container } = render(
<IntlProvider>
<Footer type={'register'} wechatLogin={() => {}} />
<Footer type={'register'} onWechatLoginClick={() => {}} />
</IntlProvider>,
);
expect(container).toMatchSnapshot();
Expand Down
30 changes: 19 additions & 11 deletions packages/user-panel/src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type * as H from 'history';
import { useHistory } from 'react-router';
import { Typography, Divider } from 'antd';

import WechatLogin from '../WechatLogin';
Expand All @@ -10,29 +12,37 @@ import type { PanelContentType } from '../../types';
import './style.less';

const { Text } = Typography;

export interface FooterProps {
/**
* 类型
*/
type: PanelContentType;
/**
* 微信登录方法
* @title 微信登录方法
*/
wechatLogin?: () => void;
onWechatLoginClick?: () => void;

/**
* 注册页面 Url
* @title 注册页面 Url
*/
registerUrl?: string;
onRegisterClick?: (history: H.History) => void;
}

const Footer: FC<FooterProps> = ({ type, wechatLogin, registerUrl }) => {
export const Footer: FC<FooterProps> = ({
type,
onWechatLoginClick,
onRegisterClick,
}) => {
const f = useFormatMessage();

const getButtonUrl = () => {
const history = useHistory();

const onClick = () => {
switch (type) {
case 'login':
return registerUrl;
onRegisterClick?.(history);
break;
case 'register':
break;
case 'forgot':
Expand All @@ -46,19 +56,17 @@ const Footer: FC<FooterProps> = ({ type, wechatLogin, registerUrl }) => {
<Divider dashed className="avx-user-panel-footer-divider">
{f('login.or')}
</Divider>
{wechatLogin ? <WechatLogin login={wechatLogin} /> : null}
{onWechatLoginClick ? <WechatLogin login={onWechatLoginClick} /> : null}
<div className="avx-user-panel-footer-other">
<Text>
{f(type === 'login' ? 'login.no-account' : 'register.have-account')}
</Text>
<div className="avx-user-panel-footer-register">
<a href={getButtonUrl()}>
<a onClick={() => onClick()}>
{f(type === 'login' ? 'login.signup' : 'register.sign-in')}
</a>
</div>
</div>
</div>
);
};

export default Footer;
2 changes: 1 addition & 1 deletion packages/user-panel/src/components/Header/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { render } from '@testing-library/react';

import Header from './index';
import { Header } from './index';
import { IntlProvider } from '../Intl';

describe('Header 组件', () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/user-panel/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export interface HeaderProps {
logoUrl?: string;
}

const Header: FC<HeaderProps> = ({ type, logo, logoUrl }) => {
export const Header: FC<HeaderProps> = ({ type, logo, logoUrl }) => {
const f = useFormatMessage();

return (
Expand All @@ -51,5 +51,3 @@ const Header: FC<HeaderProps> = ({ type, logo, logoUrl }) => {
</div>
);
};

export default Header;
4 changes: 2 additions & 2 deletions packages/user-panel/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export * from './Intl';
export { default as Header, HeaderProps } from './Header';
export { default as Footer, FooterProps } from './Footer';
export * from './Header';
export * from './Footer';
6 changes: 2 additions & 4 deletions packages/user-panel/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import UserLogin from './UserLogin';
import { UserLogin } from './UserLogin';

const UserPanel = {
Login: UserLogin,
};

export default UserPanel;

export const Login = UserLogin;

export { UserLoginProps as LoginProps } from './UserLogin';
export * from './UserLogin';

export { IUserLogin } from './types';
16 changes: 9 additions & 7 deletions packages/user-panel/src/layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import type { FC } from 'react';
import type { FooterProps, HeaderProps } from '../components';
import { IntlProvider, Header, Footer } from '../components';
Expand All @@ -9,27 +9,29 @@ export interface LayoutProps extends FooterProps, HeaderProps {
* 显示底部
*/
showFooter?: boolean;
style?: CSSProperties;
}

const Layout: FC<LayoutProps> = ({
logo,
logoUrl,
wechatLogin,
onWechatLoginClick,
children,
showFooter,
type,
registerUrl,
onRegisterClick,
style,
}) => {
return (
<IntlProvider>
<div className="avx-user-panel-container">
<div className="avx-user-panel-container" style={style}>
<Header type={type} logo={logo} logoUrl={logoUrl} />
{children}
{showFooter ? (
{(onWechatLoginClick || onRegisterClick) && showFooter ? (
<Footer
type={type}
wechatLogin={wechatLogin}
registerUrl={registerUrl}
onWechatLoginClick={onWechatLoginClick}
onRegisterClick={onRegisterClick}
/>
) : null}
</div>
Expand Down
35 changes: 5 additions & 30 deletions packages/user-panel/src/login/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`Login 组件 获取验证码 1`] = `
class="avx-user-panel-login-container"
>
<form
autocomplete="off"
class="ant-form ant-form-vertical"
>
<input
Expand Down Expand Up @@ -156,16 +157,7 @@ exports[`Login 组件 获取验证码 1`] = `
width="1em"
>
<path
d="M744 64H280c-35.3 0-64 28.7-64 64v768c0 35.3 28.7 64 64 64h464c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64zm-8 824H288V136h448v752z"
fill="#1890ff"
/>
<path
d="M288 888h448V136H288v752zm224-142c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40z"
fill="#e6f7ff"
/>
<path
d="M472 786a40 40 0 1080 0 40 40 0 10-80 0z"
fill="#1890ff"
d="M744 62H280c-35.3 0-64 28.7-64 64v768c0 35.3 28.7 64 64 64h464c35.3 0 64-28.7 64-64V126c0-35.3-28.7-64-64-64zm-8 824H288V134h448v752zM472 784a40 40 0 1080 0 40 40 0 10-80 0z"
/>
</svg>
</span>
Expand Down Expand Up @@ -252,16 +244,7 @@ exports[`Login 组件 获取验证码 1`] = `
width="1em"
>
<path
d="M477.5 536.3L135.9 270.7l-27.5-21.4 27.6 21.5V792h752V270.8L546.2 536.3a55.99 55.99 0 01-68.7 0z"
fill="#e6f7ff"
/>
<path
d="M876.3 198.8l39.3 50.5-27.6 21.5 27.7-21.5-39.3-50.5z"
fill="#e6f7ff"
/>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-94.5 72.1L512 482 190.5 232.1h643zm54.5 38.7V792H136V270.8l-27.6-21.5 27.5 21.4 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5h.1l39.3 50.5-27.7 21.5z"
fill="#1890ff"
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
Expand Down Expand Up @@ -334,6 +317,7 @@ exports[`Login 组件 默认状态 1`] = `
class="avx-user-panel-login-container"
>
<form
autocomplete="off"
class="ant-form ant-form-vertical"
>
<input
Expand Down Expand Up @@ -556,16 +540,7 @@ exports[`Login 组件 默认状态 1`] = `
width="1em"
>
<path
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304z"
fill="#1890ff"
/>
<path
d="M232 840h560V536H232v304zm280-226a48.01 48.01 0 0128 87v53c0 4.4-3.6 8-8 8h-40c-4.4 0-8-3.6-8-8v-53a48.01 48.01 0 0128-87z"
fill="#e6f7ff"
/>
<path
d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
fill="#1890ff"
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
/>
</svg>
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/user-panel/src/login/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
height: 48px !important;
font-size: 16px;
line-height: 48px !important;
border-radius: 2px !important;
border-radius: @border-radius-base !important;
}

.ant-tabs-tab-active {
Expand Down
Loading

0 comments on commit d6fe164

Please sign in to comment.