refactor

package.json

@@ -32,6 +32,7 @@
     "lodash.clonedeep": "^4.5.0",
     "moment": "^2.19.1",
     "numeral": "^2.0.6",
+    "omit.js": "^1.0.0",
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
     "react": "^16.0.0",

src/components/Login/LoginItem.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button, Row, Col } from 'antd';
+import omit from 'omit.js';
+import styles from './index.less';
+import map from './map';
+
+const FormItem = Form.Item;
+
+function generator({ defaultProps, defaultRules, type }) {
+  return (WrappedComponent) => {
+    return class BasicComponent extends Component {
+      static contextTypes = {
+        form: PropTypes.object,
+        updateActive: PropTypes.func,
+      };
+      constructor(props) {
+        super(props);
+        this.state = {
+          count: 0,
+        };
+      }
+      componentDidMount() {
+        if (this.context.updateActive) {
+          this.context.updateActive(this.props.itemKey);
+        }
+      }
+      componentWillUnmount() {
+        clearInterval(this.interval);
+      }
+      onGetCaptcha = () => {
+        let count = 59;
+        this.setState({ count });
+        if (this.props.onGetCaptcha) {
+          this.props.onGetCaptcha();
+        }
+        this.interval = setInterval(() => {
+          count -= 1;
+          this.setState({ count });
+          if (count === 0) {
+            clearInterval(this.interval);
+          }
+        }, 1000);
+      }
+      render() {
+        const { getFieldDecorator } = this.context.form;
+        const options = {};
+        let otherProps = {};
+        const { onChange, defaultValue, rules, itemKey, ...restProps } = this.props;
+        const { count } = this.state;
+        options.rules = rules || defaultRules;
+        if (onChange) {
+          options.onChange = onChange;
+        }
+        if (defaultValue) {
+          options.initialValue = defaultValue;
+        }
+        otherProps = restProps || otherProps;
+        if (type === 'Captcha') {
+          const inputProps = omit(otherProps, ['onGetCaptcha']);
+          return (
+            <FormItem>
+              <Row gutter={8}>
+                <Col span={16}>
+                  {getFieldDecorator(itemKey, options)(
+                    <WrappedComponent {...defaultProps} {...inputProps} />
+                  )}
+                </Col>
+                <Col span={8}>
+                  <Button
+                    disabled={count}
+                    className={styles.getCaptcha}
+                    size="large"
+                    onClick={this.onGetCaptcha}
+                  >
+                    {count ? `${count} s` : '获取验证码'}
+                  </Button>
+                </Col>
+              </Row>
+            </FormItem>
+          );
+        }
+        return (
+          <FormItem>
+            {getFieldDecorator(itemKey, options)(
+              <WrappedComponent {...defaultProps} {...otherProps} />
+            )}
+          </FormItem>
+        );
+      }
+    };
+  };
+}
+
+const LoginItem = {};
+Object.keys(map).forEach((item) => {
+  LoginItem[item] = generator({
+    defaultProps: map[item].props,
+    defaultRules: map[item].rules,
+    type: item,
+  })(map[item].component);
+});
+
+export default LoginItem;

src/components/Login/LoginSubmit.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button, Form } from 'antd';
+import styles from './index.less';
+
+const FormItem = Form.Item;
+
+export default ({ className, ...rest }) => {
+  const clsString = classNames(styles.submit, className);
+  return (
+    <FormItem>
+      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} />
+    </FormItem>
+  );
+};

src/components/Login/LoginTab.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
+const generateId = (() => {
+  let i = 0;
+  return (prefix: string = '') => {
+    i += 1;
+    return `${prefix}${i}`;
+  };
+})();
+
+export default class LoginTab extends Component {
+  static contextTypes = {
+    tabUtil: PropTypes.object,
+  };
+  constructor(props) {
+    super(props);
+    this.uniqueId = generateId('login-tab-');
+  }
+  componentWillMount() {
+    if (this.context.tabUtil) {
+      this.context.tabUtil.addTab(this.uniqueId);
+    }
+  }
+  render() {
+    const { tab, children, ...restProps } = this.props;
+    return (
+      <TabPane tab={tab} {...restProps}>{ children }</TabPane>
+    );
+  }
+}

src/components/Login/demo/basic.md

@@ -1,103 +1,80 @@
 ---
 order: 0
-title: 标准登录框
+title: Standard Login
 ---
 
 支持账号密码及手机号登录两种模式。
 
 ````jsx
 import Login from 'ant-design-pro/lib/Login';
-import { Icon, Checkbox, Alert } from 'antd';
+import { Alert, Checkbox } from 'antd';
 
-const data = [{
-  loginType: '账户密码登录',
-  key: 'account',
-  inputControls: [{
-    key: 'userName',
-    type: 'userName',
-  }, {
-    key: 'password',
-    type: 'password',
-  }],
-}, {
-  loginType: '手机号登录',
-  key: 'mobile',
-  inputControls: [{
-    key: 'mobile',
-    type: 'mobile',
-  }, {
-    key: 'captcha',
-    type: 'captcha',
-  }],
-}]
-
-const extra = (
-  <div>
-    <Checkbox>自动登录</Checkbox>
-    <a style={{ float: 'right' }} href="">忘记密码</a>
-  </div>
-);
-
-const moreLoginTypes = {
-  types: (
-    <span>
-      <span className="icon icon-alipay" />
-      <span className="icon icon-taobao" />
-      <span className="icon icon-weibo" />
-    </span>
-  ),
-};
+const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
 
 class LoginDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      notice: {},
-      key: 'account',
-    };
+  state = {
+    notice: '',
+    type: 'tab2',
+    autoLogin: true,
   }
   onSubmit = (err, values) => {
-    console.log(err, values);
-    if (!err) {
+    console.log(`value collected ->`, {...values, autoLogin: this.state.autoLogin});
+    if (this.state.type === 'tab1') {
       this.setState({
-        notice: {},
+        notice: '',
       }, () => {
-        setTimeout(() => {
-          if (this.state.key === 'account' && (values.userName !== 'admin' || values.password !== '888888')) {
-            const { notice } = this.state;
-            notice.message = '账号或密码错误！';
-            notice.type = 'error';
-            notice.closable = true;
-            notice.showIcon = true;
+        if (!err && (values.username !== 'admin' || values.password !== '888888')) {
+          setTimeout(() => {
             this.setState({
-              notice,
+              notice: '账号或密码错误！',
             })
-          }
-        }, 500);
+          }, 500);
+        }
       })
     }
   }
   onTabChange = (key) => {
     this.setState({
-      key,
-      notice: {},
-    });
+      type: key,
+    })
+  }
+  changeAutoLogin = (e) => {
+    this.setState({
+      autoLogin: e.target.checked,
+    })
   }
   render() {
     return (
-      <div>
-        <Login
-          defaultActiveKey={this.state.key}
-          data={data}
-          extra={extra}
-          moreLoginTypes={moreLoginTypes}
-          register={{ href: '/' }}
-          notice={this.state.notice}
-          onTabChange={this.onTabChange}
-          onSubmit={this.onSubmit}
-          onGetCaptcha={() => {console.log('clicked!')}}
-        />
-      </div>
+      <Login
+        defaultActiveKey={this.state.type}
+        onTabChange={this.onTabChange}
+        onSubmit={this.onSubmit}
+      >
+        <Tab key="tab1" tab="账号密码登录">
+          {
+            this.state.notice &&
+            <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
+          }
+          <UserName itemKey="username" />
+          <Password itemKey="password" />
+        </Tab>
+        <Tab key="tab2" tab="手机号登录">
+          <Mobile itemKey="mobile" />
+          <Captcha onGetCaptcha={() => console.log('Get captcha!')} itemKey="captcha" />
+        </Tab>
+        <div>
+          <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>自动登录</Checkbox>
+          <a style={{ float: 'right' }} href="">忘记密码</a>
+        </div>
+        <Submit>登录</Submit>
+        <div>
+          其他登录方式
+          <span className="icon icon-alipay" />
+          <span className="icon icon-taobao" />
+          <span className="icon icon-weibo" />
+          <a style={{ float: 'right' }} href="">注册账户</a>
+        </div>
+      </Login>
     )
   }
 }