🍇 add customizible semantic less files

.babelrc

@@ -1,4 +1,12 @@
 {
     "presets": ["react", "es2015"],
-    "comments": false
+    "comments": false,
+    "plugins": [
+        [
+            "transform-semantic-ui-react-imports",
+            {
+                "addLessImports": true
+            }
+        ]
+    ]
 }

package.json

@@ -12,6 +12,7 @@
         "@types/react-dom": "^15.5.4",
         "assets-webpack-plugin": "^3.5.1",
         "babel-loader": "^7.1.2",
+        "babel-plugin-transform-semantic-ui-react-imports": "^1.3.1",
         "babel-register": "^6.26.0",
         "copy-webpack-plugin": "^4.0.1",
         "cross-env": "^5.0.5",
@@ -20,6 +21,7 @@
         "customized-progress-webpack-plugin": "^0.0.3",
         "extract-text-webpack-plugin": "^3.0.0",
         "file-loader": "^0.11.2",
+        "hierarchical-copy": "^0.3.2",
         "html-webpack-plugin": "^2.30.1",
         "js-yaml": "^3.10.0",
         "json-loader": "^0.5.7",
@@ -59,19 +61,22 @@
         "react": "^15.6.1",
         "react-dom": "^15.6.1",
         "react-router-dom": "^4.2.2",
+        "semantic-ui-less": "^2.2.12",
         "semantic-ui-react": "^0.73.0"
     },
     "scripts": {
+        "copy-semantic":
+            "rcp 'src/assets/styles/global/semantic/**/*.*' node_modules/semantic-ui-less",
         "dll":
             "cross-env NODE_ENV=production webpack -p --hide-modules --config webpack/dll.conf.babel.js",
         "dll:dev":
-            "cross-env NODE_ENV=development webpack --hide-modules --config webpack/dll.conf.babel.js",
+            "npm run copy-semantic && cross-env NODE_ENV=development webpack --hide-modules --config webpack/dll.conf.babel.js",
         "build":
-            "rimraf dist && mkdirp dist && cross-env NODE_ENV=production npm run dll && webpack -p --progress --hide-modules --config webpack/prod.conf.babel.js",
+            "npm run copy-semantic && rimraf dist && mkdirp dist && cross-env NODE_ENV=production npm run dll && webpack -p --progress --hide-modules --config webpack/prod.conf.babel.js",
         "analyze":
             "rimraf dist && mkdirp dist && cross-env ANALYZE_ENV=true npm run build",
         "build:dev":
-            "rimraf dist && mkdirp dist && cross-env NODE_ENV=development npm run dll:dev && webpack --progress --hide-modules --config webpack/dev.conf.babel.js",
+            "npm run copy-semantic && rimraf dist && mkdirp dist && cross-env NODE_ENV=development npm run dll:dev && webpack --progress --hide-modules --config webpack/dev.conf.babel.js",
         "dev":
             "npm run build:dev && webpack-dev-server --config webpack/dev.conf.babel.js",
         "lint": "npm run lint:ts && npm run lint:style",

src/shared/components/header/index.tsx

@@ -1,9 +1,54 @@
 import * as React from "react";
 import ClassNames from "classnames";
+import LoginModal from "components/loginModal";
 
 const styles = require("./index.less");
 
-export default class Header extends React.Component<any, any> {
+interface HeaderProps {}
+
+interface HeaderState {
+    showLogin: boolean;
+    showRegister: boolean;
+}
+
+export default class Header extends React.Component<HeaderProps, HeaderState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            showLogin: false,
+            showRegister: false
+        };
+    }
+
+    toggleLoginPannel = () => {
+        const { showLogin } = this.state;
+        this.setState({
+            showLogin: !showLogin
+        });
+        if (!showLogin) {
+            this.setState({
+                showRegister: false
+            });
+        }
+    };
+
+    toggleRegisterPannel = () => {
+        const { showRegister } = this.state;
+        this.setState({
+            showRegister: !showRegister
+        });
+        if (!showRegister) {
+            this.setState({
+                showLogin: false
+            });
+        }
+    };
+
+    renderLoginPanel = () => {
+        const { showLogin } = this.state;
+        return <LoginModal open={showLogin} />;
+    };
+
     render() {
         return (
             <header id="header" className={styles.appHeader}>
@@ -47,6 +92,7 @@ export default class Header extends React.Component<any, any> {
                                     ])}
                                     type="button"
                                     title="注册"
+                                    onClick={this.toggleRegisterPannel}
                                 >
                                     <span className={styles.btnLabel}>注册</span>
                                 </button>
@@ -58,6 +104,7 @@ export default class Header extends React.Component<any, any> {
                                     ])}
                                     type="button"
                                     title="登录"
+                                    onClick={this.toggleLoginPannel}
                                 >
                                     <span className={styles.btnLabel}>登录</span>
                                 </button>

src/shared/components/loginModal/index.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Modal } from "semantic-ui-react";
+
+interface LoginModalProps {
+    open: boolean;
+}
+
+interface LoginModalState {}
+
+export default class LoginModal extends React.Component<
+    LoginModalProps,
+    LoginModalState
+> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { open } = this.props;
+        return (
+            <Modal dimmer open={open}>
+                <Modal.Header>注册</Modal.Header>
+                <Modal.Content>
+                    <p>That's everything!</p>
+                </Modal.Content>
+            </Modal>
+        );
+    }
+}