动态菜单和动态路由的 antd pro

index.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Form, Tabs } from 'antd';
  4. import classNames from 'classnames';
  5. import LoginItem from './LoginItem';
  6. import LoginTab from './LoginTab';
  7. import LoginSubmit from './LoginSubmit';
  8. import styles from './index.less';
  9. class Login extends Component {
  10. static defaultProps = {
  11. className: '',
  12. defaultActiveKey: '',
  13. onTabChange: () => {},
  14. onSubmit: () => {},
  15. };
  16. static propTypes = {
  17. className: PropTypes.string,
  18. defaultActiveKey: PropTypes.string,
  19. onTabChange: PropTypes.func,
  20. onSubmit: PropTypes.func,
  21. };
  22. static childContextTypes = {
  23. tabUtil: PropTypes.object,
  24. form: PropTypes.object,
  25. updateActive: PropTypes.func,
  26. };
  27. state = {
  28. type: this.props.defaultActiveKey,
  29. tabs: [],
  30. active: {},
  31. };
  32. getChildContext() {
  33. return {
  34. tabUtil: {
  35. addTab: id => {
  36. this.setState({
  37. tabs: [...this.state.tabs, id],
  38. });
  39. },
  40. removeTab: id => {
  41. this.setState({
  42. tabs: this.state.tabs.filter(currentId => currentId !== id),
  43. });
  44. },
  45. },
  46. form: this.props.form,
  47. updateActive: activeItem => {
  48. const { type, active } = this.state;
  49. if (active[type]) {
  50. active[type].push(activeItem);
  51. } else {
  52. active[type] = [activeItem];
  53. }
  54. this.setState({
  55. active,
  56. });
  57. },
  58. };
  59. }
  60. onSwitch = type => {
  61. this.setState({
  62. type,
  63. });
  64. this.props.onTabChange(type);
  65. };
  66. handleSubmit = e => {
  67. e.preventDefault();
  68. const { active, type } = this.state;
  69. const activeFileds = active[type];
  70. this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
  71. this.props.onSubmit(err, values);
  72. });
  73. };
  74. render() {
  75. const { className, children } = this.props;
  76. const { type, tabs } = this.state;
  77. const TabChildren = [];
  78. const otherChildren = [];
  79. React.Children.forEach(children, item => {
  80. if (!item) {
  81. return;
  82. }
  83. // eslint-disable-next-line
  84. if (item.type.__ANT_PRO_LOGIN_TAB) {
  85. TabChildren.push(item);
  86. } else {
  87. otherChildren.push(item);
  88. }
  89. });
  90. return (
  91. <div className={classNames(className, styles.login)}>
  92. <Form onSubmit={this.handleSubmit}>
  93. {tabs.length ? (
  94. <div>
  95. <Tabs
  96. animated={false}
  97. className={styles.tabs}
  98. activeKey={type}
  99. onChange={this.onSwitch}
  100. >
  101. {TabChildren}
  102. </Tabs>
  103. {otherChildren}
  104. </div>
  105. ) : (
  106. [...children]
  107. )}
  108. </Form>
  109. </div>
  110. );
  111. }
  112. }
  113. Login.Tab = LoginTab;
  114. Login.Submit = LoginSubmit;
  115. Object.keys(LoginItem).forEach(item => {
  116. Login[item] = LoginItem[item];
  117. });
  118. export default Form.create()(Login);