From 4d87a9275e9fb131a4ae2afc998c49adb8f99b96 Mon Sep 17 00:00:00 2001 From: e1emeb0t Date: Fri, 27 Oct 2017 12:09:57 +0800 Subject: [PATCH] Batch fixes (#632) --- package.json | 2 +- src/auto-complete/Suggestions.jsx | 119 +++++++++++++----------------- src/date-picker/BasePicker.jsx | 1 - src/date-picker/DatePicker.jsx | 2 +- src/dropdown/DropdownMenu.jsx | 31 +------- src/select/Select.jsx | 35 +++------ 6 files changed, 64 insertions(+), 126 deletions(-) diff --git a/package.json b/package.json index 620e2b42908..85733689cbf 100644 --- 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 index 482d516bf98..fe06bf4af3a 100644 --- 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 { @@ -80,49 +64,46 @@ export default class Suggestions extends Component { const { showPopper, dropdownWidth } = this.state; return ( -
- - -
+ +
+ - - { - loading ? ( -
    • - ) : suggestions.map((item, index) => { - return ( -
  • - { - !customItem ? item.value : React.createElement(customItem, { - index, - item - }) - } -
    • - ) - }) - } -     -
    -     - -
    + { + loading ? ( +
    • + ) : suggestions.map((item, index) => { + return ( +
  • + { + !customItem ? item.value : React.createElement(customItem, { + index, + item + }) + } +
    • + ) + }) + } + +
    + + ) } } diff --git a/src/date-picker/BasePicker.jsx b/src/date-picker/BasePicker.jsx index d94818d175f..5f74e7febcc 100644 --- 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 index 9625a529453..fb5bdfb12c1 100644 --- 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 index 233fec75d1a..efe3c8227d8 100644 --- 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 index 6c7bc0c5215..53168cd1d7c 100644 --- 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 { } }} /> - - +