123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- import React, { Component } from 'react';
- import PropTypes from 'prop-types';
- import { Form, Tabs } from 'antd';
- import classNames from 'classnames';
- import LoginItem from './LoginItem';
- import LoginTab from './LoginTab';
- import LoginSubmit from './LoginSubmit';
- import styles from './index.less';
-
- class Login extends Component {
- static defaultProps = {
- className: '',
- defaultActiveKey: '',
- onTabChange: () => {},
- onSubmit: () => {},
- };
- static propTypes = {
- className: PropTypes.string,
- defaultActiveKey: PropTypes.string,
- onTabChange: PropTypes.func,
- onSubmit: PropTypes.func,
- };
- static childContextTypes = {
- tabUtil: PropTypes.object,
- form: PropTypes.object,
- updateActive: PropTypes.func,
- };
- state = {
- type: this.props.defaultActiveKey,
- tabs: [],
- active: {},
- };
- getChildContext() {
- return {
- tabUtil: {
- addTab: id => {
- this.setState({
- tabs: [...this.state.tabs, id],
- });
- },
- removeTab: id => {
- this.setState({
- tabs: this.state.tabs.filter(currentId => currentId !== id),
- });
- },
- },
- form: this.props.form,
- updateActive: activeItem => {
- const { type, active } = this.state;
- if (active[type]) {
- active[type].push(activeItem);
- } else {
- active[type] = [activeItem];
- }
- this.setState({
- active,
- });
- },
- };
- }
- onSwitch = type => {
- this.setState({
- type,
- });
- this.props.onTabChange(type);
- };
- handleSubmit = e => {
- e.preventDefault();
- const { active, type } = this.state;
- const activeFileds = active[type];
- this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
- this.props.onSubmit(err, values);
- });
- };
- render() {
- const { className, children } = this.props;
- const { type, tabs } = this.state;
- const TabChildren = [];
- const otherChildren = [];
- React.Children.forEach(children, item => {
- if (!item) {
- return;
- }
- // eslint-disable-next-line
- if (item.type.__ANT_PRO_LOGIN_TAB) {
- TabChildren.push(item);
- } else {
- otherChildren.push(item);
- }
- });
- return (
- <div className={classNames(className, styles.login)}>
- <Form onSubmit={this.handleSubmit}>
- {tabs.length ? (
- <div>
- <Tabs
- animated={false}
- className={styles.tabs}
- activeKey={type}
- onChange={this.onSwitch}
- >
- {TabChildren}
- </Tabs>
- {otherChildren}
- </div>
- ) : (
- [...children]
- )}
- </Form>
- </div>
- );
- }
- }
-
- Login.Tab = LoginTab;
- Login.Submit = LoginSubmit;
- Object.keys(LoginItem).forEach(item => {
- Login[item] = LoginItem[item];
- });
-
- export default Form.create()(Login);
|