Batch fixes (ElemeFE#632)

hazel54 · Oct 27, 2017 · 4d87a92 · 4d87a92
1 parent 3e18572
commit 4d87a92
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 126 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-react",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Element UI for React",
   "private": false,
   "main": "dist/npm/es5/index.js",

diff --git a/src/auto-complete/Suggestions.jsx b/src/auto-complete/Suggestions.jsx
@@ -29,24 +29,6 @@ export default class Suggestions extends Component {
     };
   }
 
-  componentDidUpdate(): void {
-    // if (this.state.showPopper) {
-    //
-    // } else {
-    //   if (this.popperJS) {
-    //     this.popperJS.destroy();
-    //   }
-    //
-    //   delete this.popperJS;
-    // }
-  }
-
-  componentWillUnmount(): void {
-    if (this.popperJS) {
-      this.popperJS.destroy();
-    }
-  }
-
   onVisibleChange(visible: boolean, inputWidth: string): void {
     this.setState({
       dropdownWidth: inputWidth,
@@ -62,15 +44,17 @@ export default class Suggestions extends Component {
     this.parent().select(item);
   }
 
-  onEnter() {
-    if (!this.popperJS) {
-      const reference = ReactDOM.findDOMNode(this.parent().inputNode);
-      this.popperJS = new Popper(reference, this.refs.popper, {
-        gpuAcceleration: false,
-        forceAbsolute: true
-      });
-    }
-    this.popperJS.update();
+  onEnter(): void {
+    const reference = ReactDOM.findDOMNode(this.parent().inputNode);
+
+    this.popperJS = new Popper(reference, this.refs.popper, {
+      gpuAcceleration: false,
+      forceAbsolute: true
+    });
+  }
+
+  onAfterLeave(): void {
+    this.popperJS.destroy();
   }
 
   render(): React.Element<any> {
@@ -80,49 +64,46 @@ export default class Suggestions extends Component {
     const { showPopper, dropdownWidth } = this.state;
 
     return (
-      <div
-        ref="popper"
-        style={{
-          width: dropdownWidth,
-          zIndex: 1
-        }}
-      >
-        <Transition name="el-zoom-in-top" onEnter={this.onEnter.bind(this)}>
-          <View show={showPopper}>
-            <div
-              className={this.classNames('el-autocomplete-suggestion', {
-                'is-loading': loading
-              })}
+      <Transition name="el-zoom-in-top" onEnter={this.onEnter.bind(this)} onAfterLeave={this.onAfterLeave.bind(this)}>
+        <View show={showPopper}>
+          <div
+            ref="popper"
+            className={this.classNames('el-autocomplete-suggestion', 'el-popper', {
+              'is-loading': loading
+            })}
+            style={{
+              width: dropdownWidth,
+              zIndex: 1
+            }}
+          >
+            <Scrollbar
+              viewComponent="ul"
+              wrapClass="el-autocomplete-suggestion__wrap"
+              viewClass="el-autocomplete-suggestion__list"
             >
-              <Scrollbar
-                viewComponent="ul"
-                wrapClass="el-autocomplete-suggestion__wrap"
-                viewClass="el-autocomplete-suggestion__list"
-              >
-                {
-                  loading ? (
-                    <li><i className="el-icon-loading"></i></li>
-                  ) : suggestions.map((item, index) => {
-                    return (
-                      <li
-                        key={index}
-                        className={this.classNames({'highlighted': highlightedIndex === index})}
-                        onClick={this.onSelect.bind(this, item)}>
-                        {
-                          !customItem ? item.value : React.createElement(customItem, {
-                            index,
-                            item
-                          })
-                        }
-                      </li>
-                    )
-                  })
-                }
-              </Scrollbar>
-            </div>
-          </View>
-        </Transition>
-      </div>
+              {
+                loading ? (
+                  <li><i className="el-icon-loading"></i></li>
+                ) : suggestions.map((item, index) => {
+                  return (
+                    <li
+                      key={index}
+                      className={this.classNames({'highlighted': highlightedIndex === index})}
+                      onClick={this.onSelect.bind(this, item)}>
+                      {
+                        !customItem ? item.value : React.createElement(customItem, {
+                          index,
+                          item
+                        })
+                      }
+                    </li>
+                  )
+                })
+              }
+            </Scrollbar>
+          </div>
+        </View>
+      </Transition>
     )
   }
 }

diff --git a/src/date-picker/BasePicker.jsx b/src/date-picker/BasePicker.jsx
@@ -6,7 +6,6 @@ import ReactDOM from 'react-dom';
 import { PropTypes, Component } from '../../libs';
 import { EventRegister } from '../../libs/internal'
 
-
 import Input from '../input'
 import { PLACEMENT_MAP, HAVE_TRIGGER_TYPES, TYPE_VALUE_RESOLVER_MAP, DEFAULT_FORMATS } from './constants'
 import { Errors, require_condition, IDGenerator } from '../../libs/utils';

diff --git a/src/date-picker/DatePicker.jsx b/src/date-picker/DatePicker.jsx
@@ -43,7 +43,7 @@ export default class DatePicker extends BasePicker {
         {...props}
         value={state.value}
         onPick={this.onPicked.bind(this)}
-        />
+      />
     )
   }
 }
diff --git a/src/dropdown/DropdownMenu.jsx b/src/dropdown/DropdownMenu.jsx
@@ -20,35 +20,6 @@ export default class DropdownMenu extends Component {
     }
   }
 
-  // componentDidUpdate(): void {
-  //   const { showPopper } = this.state;
-  //
-  //   if (showPopper) {
-  //     if (this.popperJS) {
-  //       this.popperJS.update();
-  //     } else {
-  //       const parent: any = ReactDOM.findDOMNode(this.parent());
-  //
-  //       this.popperJS = new Popper(parent, this.refs.popper, {
-  //         placement: this.placement(),
-  //         gpuAcceleration: false
-  //       });
-  //     }
-  //   } else {
-  //     if (this.popperJS) {
-  //       this.popperJS.destroy();
-  //     }
-  //
-  //     delete this.popperJS;
-  //   }
-  // }
-  //
-  // componentWillUnmount(): void {
-  //   if (this.popperJS) {
-  //     this.popperJS.destroy();
-  //   }
-  // }
-
   onVisibleChange(visible: boolean): void {
     this.setState({
       showPopper: visible
@@ -64,7 +35,7 @@ export default class DropdownMenu extends Component {
     });
   }
 
-  onAfterLeave() {
+  onAfterLeave(): void {
     this.popperJS.destroy();
   }
 

diff --git a/src/select/Select.jsx b/src/select/Select.jsx
@@ -149,33 +149,11 @@ class Select extends Component {
   }
 
   componentDidUpdate() {
-    const { visible } = this.state;
-
-    if (visible) {
-      if (this.popperJS) {
-        this.popperJS.update();
-      } else {
-        this.popperJS = new Popper(this.reference, this.popper, {
-          gpuAcceleration: false
-        });
-      }
-    } else {
-      if (this.popperJS) {
-        this.popperJS.destroy();
-      }
-
-      delete this.popperJS;
-    }
-
     this.state.inputWidth = this.reference.getBoundingClientRect().width;
   }
 
   componentWillUnmount() {
     removeResizeListener(this.refs.root, this.resetInputWidth.bind(this));
-
-    if (this.popperJS) {
-      this.popperJS.destroy();
-    }
   }
 
   debounce(): number {
@@ -430,6 +408,16 @@ class Select extends Component {
     this.setState({ hoverIndex, voidRemoteQuery });
   }
 
+  onEnter(): void {
+    this.popperJS = new Popper(this.reference, this.popper, {
+      gpuAcceleration: false
+    });
+  }
+
+  onAfterLeave(): void {
+    this.popperJS.destroy();
+  }
+
   optionsAllDisabled(options: []): boolean {
      return options.length === (options.filter(item => item.props.disabled === true).length);
   }
@@ -939,8 +927,7 @@ class Select extends Component {
             }
           }}
         />
-        <Transition name="el-zoom-in-top">
-          <View show={visible && this.emptyText() !== false}>
+          <Transition name="el-zoom-in-top" onEnter={this.onEnter.bind(this)} onAfterLeave={this.onAfterLeave.bind(this)}>          <View show={visible && this.emptyText() !== false}>
             <div ref="popper" className={this.classNames('el-select-dropdown', {
                 'is-multiple': multiple
             })} style={{