refactor: refact breadcrumb comp

yezihaohao · Aug 23, 2020 · b890ab8 · b890ab8
1 parent 1ba4cd5
commit b890ab8
Show file tree

Hide file tree

Showing 32 changed files with 278 additions and 171 deletions.
diff --git a/package.json b/package.json
@@ -22,8 +22,8 @@
         "@types/react-loadable": "^5.5.1",
         "@types/react-router-dom": "^5.1.0",
         "@types/recharts": "^1.1.21",
-        "@typescript-eslint/eslint-plugin": "^2.2.0",
-        "@typescript-eslint/parser": "^2.2.0",
+        "@typescript-eslint/eslint-plugin": "^3.9.1",
+        "@typescript-eslint/parser": "^3.9.1",
         "antd": "^3.23.5",
         "axios": "^0.19.0",
         "babel-eslint": "10.0.3",
@@ -90,7 +90,7 @@
         "style-loader": "1.0.0",
         "terser-webpack-plugin": "1.4.1",
         "ts-pnp": "1.1.4",
-        "typescript": "3.6.3",
+        "typescript": "3.9.7",
         "umbrella-storage": "^1.0.2",
         "url-loader": "2.1.0",
         "webpack": "4.41.0",

diff --git a/src/components/BreadcrumbCustom.tsx b/src/components/BreadcrumbCustom.tsx
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -1,17 +1,14 @@
 /**
  * Created by hao.cheng on 2017/4/16.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-class Page extends React.Component {
-    render() {
-        return (
-            <div style={{height: '100%'}}>
-                {this.props.children}
-            </div>
-        )
-
-    }
+interface PageProps {
+    children?: ReactNode;
 }
 
-export default Page;
+const Page = (props: PageProps) => {
+    return <div style={{ height: '100%' }}>{props.children}</div>;
+};
+
+export default Page;
diff --git a/src/components/animation/BasicAnimations.tsx b/src/components/animation/BasicAnimations.tsx
@@ -3,42 +3,103 @@
  */
 import React from 'react';
 import { Row, Col, Card, Switch } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
 
 class BasicAnimations extends React.Component {
     state = {
         animated: false,
-        animatedOne: -1
+        animatedOne: -1,
     };
     animatedAll = (checked: boolean) => {
-        checked && this.setState({animated: true});
-        !checked && this.setState({animated: false});
-
+        checked && this.setState({ animated: true });
+        !checked && this.setState({ animated: false });
     };
     animatedOne = (i: number) => {
-        this.setState({animatedOne: i});
+        this.setState({ animatedOne: i });
     };
     animatedOneOver = () => {
-        this.setState({animatedOne: -1});
+        this.setState({ animatedOne: -1 });
     };
     render() {
         const animations = [
-            'bounce', 'flash', 'rubberBand', 'shake', 'headShake',
-            'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInDown',
-            'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutDown', 'bounceOutLeft',
-            'bounceOutLeft', 'bounceOutUp', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft',
-            'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeOut',
-            'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig',
-            'fadeOutUp', 'fadeOutUpBig', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY',
-            'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft',
-            'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
-            'hinge', 'jackInTheBox', 'rollIn', 'rollOut','zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp',
-            'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideInDown',
-            'slideInLeft', 'slideInRight', 'slideInUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp'
+            'bounce',
+            'flash',
+            'rubberBand',
+            'shake',
+            'headShake',
+            'swing',
+            'tada',
+            'wobble',
+            'jello',
+            'bounceIn',
+            'bounceInDown',
+            'bounceInLeft',
+            'bounceInRight',
+            'bounceOut',
+            'bounceOutDown',
+            'bounceOutLeft',
+            'bounceOutLeft',
+            'bounceOutUp',
+            'fadeIn',
+            'fadeInDown',
+            'fadeInDownBig',
+            'fadeInLeft',
+            'fadeInLeftBig',
+            'fadeInRight',
+            'fadeInRightBig',
+            'fadeInUp',
+            'fadeInUpBig',
+            'fadeOut',
+            'fadeOutDown',
+            'fadeOutDownBig',
+            'fadeOutLeft',
+            'fadeOutLeftBig',
+            'fadeOutRight',
+            'fadeOutRightBig',
+            'fadeOutUp',
+            'fadeOutUpBig',
+            'flipInX',
+            'flipInY',
+            'flipOutX',
+            'flipOutY',
+            'lightSpeedIn',
+            'lightSpeedOut',
+            'rotateIn',
+            'rotateInDownLeft',
+            'rotateInDownRight',
+            'rotateInUpLeft',
+            'rotateInUpRight',
+            'rotateOut',
+            'rotateOutDownLeft',
+            'rotateOutDownRight',
+            'rotateOutUpLeft',
+            'rotateOutUpRight',
+            'hinge',
+            'jackInTheBox',
+            'rollIn',
+            'rollOut',
+            'zoomIn',
+            'zoomInDown',
+            'zoomInLeft',
+            'zoomInRight',
+            'zoomInUp',
+            'zoomOut',
+            'zoomOutDown',
+            'zoomOutLeft',
+            'zoomOutRight',
+            'zoomOutUp',
+            'slideInDown',
+            'slideInLeft',
+            'slideInRight',
+            'slideInUp',
+            'slideOutDown',
+            'slideOutLeft',
+            'slideOutRight',
+            'slideOutUp',
         ];
         return (
             <div className="gutter-example button-demo">
-                <BreadcrumbCustom first="动画" second="基础动画" />
+                <BreadcrumbCustom breads={['动画', '基础动画']} />
                 <Row className="mb-m">
                     <span className="mr-s">全部动画(单个动画请移动鼠标)</span>
                     <Switch onChange={this.animatedAll} />
@@ -48,7 +109,15 @@ class BasicAnimations extends React.Component {
                         <Col className="gutter-row" md={6} key={i}>
                             <div className="gutter-box">
                                 <Card
-                                    className={`${this.state.animated || (this.state.animatedOne === i) ? 'animated' : ''} ${this.state.animated || (this.state.animatedOne === i) ? 'infinite' : ''} ${v}`}
+                                    className={`${
+                                        this.state.animated || this.state.animatedOne === i
+                                            ? 'animated'
+                                            : ''
+                                    } ${
+                                        this.state.animated || this.state.animatedOne === i
+                                            ? 'infinite'
+                                            : ''
+                                    } ${v}`}
                                     onMouseEnter={() => this.animatedOne(i)}
                                     onMouseLeave={() => this.animatedOneOver()}
                                 >
@@ -61,8 +130,8 @@ class BasicAnimations extends React.Component {
                     ))}
                 </Row>
             </div>
-        )
+        );
     }
 }
 
-export default BasicAnimations;
+export default BasicAnimations;
diff --git a/src/components/animation/ExampleAnimations.tsx b/src/components/animation/ExampleAnimations.tsx
@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { Row, Col, Card, Table, Popconfirm, Button } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
 
 type ExampleAnimationsProps = {};
 type ExampleAnimationsState = {
@@ -90,7 +90,7 @@ class ExampleAnimations extends React.Component<ExampleAnimationsProps, ExampleA
         const columns = this.columns;
         return (
             <div className="gutter-example">
-                <BreadcrumbCustom first="动画" second="动画案例" />
+                <BreadcrumbCustom breads={['动画', '动画案例']} />
                 <Row gutter={16}>
                     <Col className="gutter-row" md={24}>
                         <div className="gutter-box">

diff --git a/src/components/auth/Basic.tsx b/src/components/auth/Basic.tsx
@@ -4,14 +4,14 @@
 import React, { Component } from 'react';
 import { Row, Col, Card } from 'antd';
 import beauty from '@/style/imgs/beauty.jpg';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
 import { AuthWidget } from '../widget';
 
 class Basic extends Component {
     render() {
         return (
             <div>
-                <BreadcrumbCustom first="权限管理" second="基础演示" />
+                <BreadcrumbCustom breads={['权限管理', '基础演示']} />
                 <AuthWidget
                     children={(auth: any) => (
                         <Row>

diff --git a/src/components/auth/RouterEnter.tsx b/src/components/auth/RouterEnter.tsx
@@ -6,7 +6,7 @@
  */
 import React, { Component } from 'react';
 import { Row, Col, Card } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
 import { AuthWidget } from '../widget';
 
 class RouterEnter extends Component {
@@ -16,7 +16,7 @@ class RouterEnter extends Component {
     render() {
         return (
             <div>
-                <BreadcrumbCustom first="权限管理" second="路由拦截" />
+                <BreadcrumbCustom breads={['权限管理', '路由拦截']} />
                 <AuthWidget
                     children={(auth: any) => (
                         <Row>

diff --git a/src/components/cssmodule/index.tsx b/src/components/cssmodule/index.tsx
@@ -6,14 +6,14 @@
  */
 import React, { Component } from 'react';
 import { Col, Card, Row } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
 import styles from './index.module.less';
 
 class Cssmodule extends Component {
     render() {
         return (
             <div>
-                <BreadcrumbCustom first="cssModule" />
+                <BreadcrumbCustom breads={['cssModule']} />
                 <Row gutter={16}>
                     <Col md={24}>
                         <Card title="cssModule" bordered={false}>