From c1e9122b7ccf8bd2ddb5d8198ce71e537a9e35ff Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Fri, 1 Jun 2018 14:44:54 +0800
Subject: [PATCH] fix #1561  fix getDerivedStateFromProps bug

---
 package.json                          |  7 ++--
 src/components/Login/LoginTab.js      |  9 +++--
 src/components/Login/index.js         |  2 +-
 src/components/SiderMenu/SiderMenu.js |  2 +-
 src/components/TopNavHeader/index.js  |  2 +-
 src/e2e/home.e2e.js                   |  2 +-
 src/routes/Forms/TableForm.js         | 49 ++++++++++++++++++++-------
 7 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 2e44151a..541c7152 100755
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
   "private": true,
   "scripts": {
     "precommit": "npm run lint-staged",
-    "start": "cross-env ESLINT=none roadhog dev",
+    "start": "HARD_SOURCE=none cross-env ESLINT=none roadhog dev",
     "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
     "build": "cross-env ESLINT=none roadhog build",
+    "build-site": "roadhog-api-doc static",
     "site": "roadhog-api-doc static && gh-pages -d dist",
     "analyze": "cross-env ANALYZE=true roadhog build",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
@@ -40,10 +41,10 @@
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
     "rc-drawer-menu": "^1.1.0",
-    "react": "^16.3.1",
+    "react": "^16.4.0",
     "react-container-query": "^0.11.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.3.1",
+    "react-dom": "^16.4.0",
     "react-fittext": "^1.0.0",
     "rollbar": "^2.3.4",
     "url-polyfill": "^1.0.10"
diff --git a/src/components/Login/LoginTab.js b/src/components/Login/LoginTab.js
index 30e84ccb..ea42fc8e 100644
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@@ -21,15 +21,20 @@ class LoginTab extends Component {
     this.props.tabUtil.addTab(this.uniqueId);
   }
   render() {
-    return <TabPane {...this.props} />;
+    return <TabPane {...this.props}>{this.props.children}</TabPane>;
   }
 }
 
 const warpContext = props => {
   return (
     <LoginContext.Consumer>
-      {value => <LoginTab tabUtil={value.tabUtil} {...props} />}
+      {value => {
+        return <LoginTab tabUtil={value.tabUtil} {...props} />;
+      }}
     </LoginContext.Consumer>
   );
 };
+// 标志位 用来判断是不是自定义组件
+warpContext.typeName = 'LoginTab';
+
 export default warpContext;
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 686358e0..702c13f1 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -78,7 +78,7 @@ class Login extends Component {
         return;
       }
       // eslint-disable-next-line
-      if (item.type.name === 'warpContext') {
+      if (item.type.typeName === 'LoginTab') {
         TabChildren.push(item);
       } else {
         otherChildren.push(item);
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index 830db64f..6d64a4a3 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -233,7 +233,7 @@ export default class SiderMenu extends PureComponent {
         width={256}
         className={`${styles.sider} ${theme === 'light' ? styles.light : ''}`}
       >
-        <div className={styles.logo} key="logo">
+        <div className={styles.logo} key="logo" id="logo">
           <Link to="/">
             <img src={logo} alt="logo" />
             <h1>Ant Design Pro</h1>
diff --git a/src/components/TopNavHeader/index.js b/src/components/TopNavHeader/index.js
index 1d392aa3..b6483864 100644
--- a/src/components/TopNavHeader/index.js
+++ b/src/components/TopNavHeader/index.js
@@ -10,7 +10,7 @@ export default class TopNavHeader extends PureComponent {
       <div className={`${styles.head} ${this.props.theme === 'light' ? styles.light : ''}`}>
         <div className={`${styles.main} ${this.props.grid === 'Wide' ? styles.wide : ''}`}>
           <div className={styles.left}>
-            <div className={styles.logo} key="logo">
+            <div className={styles.logo} key="logo" id="logo">
               <Link to="/">
                 <img src={this.props.logo} alt="logo" />
                 <h1>Ant Design Pro</h1>
diff --git a/src/e2e/home.e2e.js b/src/e2e/home.e2e.js
index 50447a4a..20763ff6 100644
--- a/src/e2e/home.e2e.js
+++ b/src/e2e/home.e2e.js
@@ -5,7 +5,7 @@ describe('Homepage', () => {
     const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
     const page = await browser.newPage();
     await page.goto('http://localhost:8000', { waitUntil: 'networkidle2' });
-    await page.waitForSelector('h1');
+    await page.waitForSelector('#logo h1');
     const text = await page.evaluate(() => document.body.innerHTML);
     expect(text).toContain('<h1>Ant Design Pro</h1>');
     await page.close();
diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js
index a758d234..4775a903 100644
--- a/src/routes/Forms/TableForm.js
+++ b/src/routes/Forms/TableForm.js
@@ -17,6 +17,7 @@ export default class TableForm extends PureComponent {
     this.state = {
       data: props.value,
       loading: false,
+      editData: [],
     };
   }
 
@@ -39,22 +40,46 @@ export default class TableForm extends PureComponent {
     }
   };
   remove(key) {
+    const { editData } = this.state;
+    const editItem = editData.find(item => item.key === key);
+    if (editItem && editItem.key) {
+      // 如果存在缓存
+      if (this.cacheOriginData[key]) {
+        const data = [...this.state.data];
+        data.push(this.cacheOriginData[key]);
+        this.setState(
+          {
+            data,
+          },
+          () => {
+            delete this.cacheOriginData[key];
+          }
+        );
+      }
+      // 从 editData 中删除
+      this.setState({
+        editData: editData.filter(item => item.key !== key),
+      });
+      return;
+    }
     const newData = this.state.data.filter(item => item.key !== key);
     this.setState({ data: newData });
     this.props.onChange(newData);
   }
   newMember = () => {
-    const newData = this.state.data.map(item => ({ ...item }));
-    newData.push({
-      key: `NEW_TEMP_ID_${this.index}`,
-      workId: '',
-      name: '',
-      department: '',
-      editable: true,
-      isNew: true,
-    });
     this.index += 1;
-    this.setState({ data: newData });
+    this.setState({
+      editData: [
+        {
+          key: `NEW_TEMP_ID_${this.index}`,
+          workId: '',
+          name: '',
+          department: '',
+          editable: true,
+          isNew: true,
+        },
+      ],
+    });
   };
   handleKeyPress(e, key) {
     if (e.key === 'Enter') {
@@ -208,13 +233,13 @@ export default class TableForm extends PureComponent {
         },
       },
     ];
-
+    const dataSource = this.state.data.concat(this.state.editData);
     return (
       <Fragment>
         <Table
           loading={this.state.loading}
           columns={columns}
-          dataSource={this.state.data}
+          dataSource={dataSource}
           pagination={false}
           rowClassName={record => {
             return record.editable ? styles.editable : '';
-- 
GitLab