shineout 1.7.0 → 1.7.1-beta.3

package/es/Select/Select.js

@@ -1,576 +1,619 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { PureComponent } from '../component'
-import { getProps } from '../utils/proptypes'
-import { getUidStr } from '../utils/uid'
-import { selectClass } from './styles'
-import Result from './Result'
-import { getLocale } from '../locale'
-import OptionList from './OptionList'
-import OptionTree from './OptionTree'
-import BoxList from './BoxList'
-import { isObject } from '../utils/is'
-import { docSize } from '../utils/dom/document'
-import { getParent } from '../utils/dom/element'
-import { isRTL } from '../config'
-import absoluteList from '../AnimationList/AbsoluteList'
-
-const WrappedOptionList = absoluteList(OptionList)
-const WrappedBoxList = absoluteList(BoxList)
-const WrappedOptionTree = absoluteList(OptionTree)
-
-const isResult = (el, selector) => getParent(el, selector || `.${selectClass('result')}`)
-
-class Select extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PureComponent } from '../component';
+import { getProps } from '../utils/proptypes';
+import { getUidStr } from '../utils/uid';
+import { selectClass } from './styles';
+import Result from './Result';
+import { getLocale } from '../locale';
+import OptionList from './OptionList';
+import OptionTree from './OptionTree';
+import BoxList from './BoxList';
+import { isObject } from '../utils/is';
+import { docSize } from '../utils/dom/document';
+import { getParent } from '../utils/dom/element';
+import { isRTL } from '../config';
+import absoluteList from '../AnimationList/AbsoluteList';
+var WrappedOptionList = absoluteList(OptionList);
+var WrappedBoxList = absoluteList(BoxList);
+var WrappedOptionTree = absoluteList(OptionTree);
+
+var isResult = function isResult(el, selector) {
+  return getParent(el, selector || "." + selectClass('result'));
+};
+
+var Select =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Select, _PureComponent);
+
+  function Select(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
       control: 'mouse',
       focus: false,
-      position: 'drop-down',
-    }
-
-    this.bindElement = this.bindElement.bind(this)
-    this.bindOptionFunc = this.bindOptionFunc.bind(this)
-    this.setInputReset = this.setInputReset.bind(this)
-    this.shouldFocus = this.shouldFocus.bind(this)
-
-    this.handleClick = this.handleClick.bind(this)
-    this.handleFocus = this.handleFocus.bind(this)
-    this.handleBlur = this.handleState.bind(this, false)
-    this.handleClear = this.handleClear.bind(this)
-    this.handleChange = this.handleChange.bind(this)
-    this.handleRemove = this.handleChange.bind(this, false)
-    this.handleKeyDown = this.handleKeyDown.bind(this)
-    this.handleKeyUp = this.handleKeyUp.bind(this)
-    this.handleInputFocus = this.handleInputFocus.bind(this)
-    this.handleControlChange = this.handleControlChange.bind(this)
-    this.handleClickAway = this.handleClickAway.bind(this)
-    this.handleInputBlur = this.handleInputBlur.bind(this)
-    this.bindFocusInputFunc = this.bindFocusInputFunc.bind(this)
-    this.toInputTriggerCollapse = this.toInputTriggerCollapse.bind(this)
-
-    this.renderItem = this.renderItem.bind(this)
-    this.renderResult = this.renderResult.bind(this)
-
-    this.handleDelete = this.handleDelete.bind(this)
-
-    // option list not render till first focused
-    this.renderPending = true
-
-    this.optionList = {}
-    this.selectId = `select_${getUidStr()}`
-    // this.closeByResult = false
-    this.mouseDown = false
-
-    this.lastResult = undefined
-
-    this.focusInput = null
-  }
+      position: 'drop-down'
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindOptionFunc = _this.bindOptionFunc.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setInputReset = _this.setInputReset.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.shouldFocus = _this.shouldFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleBlur = _this.handleState.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.handleClear = _this.handleClear.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleRemove = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleInputFocus = _this.handleInputFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleControlChange = _this.handleControlChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClickAway = _this.handleClickAway.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleInputBlur = _this.handleInputBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindFocusInputFunc = _this.bindFocusInputFunc.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toInputTriggerCollapse = _this.toInputTriggerCollapse.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderItem = _this.renderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderResult = _this.renderResult.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDelete = _this.handleDelete.bind(_assertThisInitialized(_assertThisInitialized(_this))); // option list not render till first focused
+
+    _this.renderPending = true;
+    _this.optionList = {};
+    _this.selectId = "select_" + getUidStr(); // this.closeByResult = false
+
+    _this.mouseDown = false;
+    _this.lastResult = undefined;
+    _this.focusInput = null;
+    return _this;
+  }
+
+  var _proto = Select.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var onFilter = this.props.onFilter; // clear filter
 
-  componentDidUpdate(prevProps, prevState) {
-    const { onFilter } = this.props
-
-    // clear filter
     if (prevState.focus !== this.state.focus && !this.state.focus && onFilter) {
-      setTimeout(() => {
-        onFilter('')
-      }, 400)
+      setTimeout(function () {
+        onFilter('');
+      }, 400);
     }
-  }
+  };
 
-  componentWillUnmount() {
-    super.componentWillUnmount()
-    this.clearClickAway()
-  }
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
 
-  getText(key) {
-    return this.props.text[key] || getLocale(key)
-  }
+    this.clearClickAway();
+  };
 
-  getFocusSelected() {
-    const { reFocus, focusSelected } = this.props
-    if (reFocus) return false
-    return focusSelected
-  }
+  _proto.getText = function getText(key) {
+    return this.props.text[key] || getLocale(key);
+  };
 
-  setInputReset(fn) {
-    this.inputReset = fn
-  }
+  _proto.getFocusSelected = function getFocusSelected() {
+    var _this$props = this.props,
+        reFocus = _this$props.reFocus,
+        focusSelected = _this$props.focusSelected;
+    if (reFocus) return false;
+    return focusSelected;
+  };
+
+  _proto.setInputReset = function setInputReset(fn) {
+    this.inputReset = fn;
+  };
 
-  isDescendent(el, id) {
+  _proto.isDescendent = function isDescendent(el, id) {
     // const stay = el.classList.contains(selectClass('input')) || el.classList.contains(selectClass('item'))
     // if (stay) this.optionsHold = true
     // if (el.classList.contains(selectClass('result')) && this.optionsHold === null && this.state.focus) {
     //   this.closeByResult = true
     //   this.optionsHold = false
     // }
-    if (el.getAttribute('data-id') === id) return true
-    if (!el.parentElement) return false
-    return this.isDescendent(el.parentElement, id)
-  }
+    if (el.getAttribute('data-id') === id) return true;
+    if (!el.parentElement) return false;
+    return this.isDescendent(el.parentElement, id);
+  };
 
-  bindOptionFunc(name, fn) {
-    this.optionList[name] = fn
-  }
+  _proto.bindOptionFunc = function bindOptionFunc(name, fn) {
+    this.optionList[name] = fn;
+  };
 
-  bindFocusInputFunc(fn) {
-    this.focusInput = fn
-  }
+  _proto.bindFocusInputFunc = function bindFocusInputFunc(fn) {
+    this.focusInput = fn;
+  };
 
-  bindElement(el) {
-    this.element = el
-  }
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
 
-  bindClickAway() {
-    document.addEventListener('click', this.handleClickAway, true)
-  }
+  _proto.bindClickAway = function bindClickAway() {
+    document.addEventListener('click', this.handleClickAway, true);
+  };
 
-  clearClickAway() {
-    document.removeEventListener('click', this.handleClickAway, true)
-  }
+  _proto.clearClickAway = function clearClickAway() {
+    document.removeEventListener('click', this.handleClickAway, true);
+  };
+
+  _proto.handleClickAway = function handleClickAway(e) {
+    var desc = this.isDescendent(e.target, this.selectId);
 
-  handleClickAway(e) {
-    const desc = this.isDescendent(e.target, this.selectId)
     if (!desc) {
-      if (!getParent(e.target, `[data-id=${this.selectId}]`)) {
-        this.blured = true
-        this.props.onBlur()
-        this.clearClickAway()
-        if (this.element) this.element.blur()
+      if (!getParent(e.target, "[data-id=" + this.selectId + "]")) {
+        this.blured = true;
+        this.props.onBlur();
+        this.clearClickAway();
+        if (this.element) this.element.blur();
       }
-      this.handleState(false, null)
+
+      this.handleState(false, null);
     }
-  }
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    var _this$props2 = this.props,
+        onCreate = _this$props2.onCreate,
+        onFilter = _this$props2.onFilter;
+    var plain = !onCreate && !onFilter;
 
-  handleClick(e) {
-    const { onCreate, onFilter } = this.props
-    const plain = !onCreate && !onFilter
     if (this.state.focus) {
-      if ((plain && isResult(e.target)) || isResult(e.target, `.${selectClass('caret')}`)) {
-        this.handleState(false, e)
-        return
+      if (plain && isResult(e.target) || isResult(e.target, "." + selectClass('caret'))) {
+        this.handleState(false, e);
+        return;
       }
     }
-    this.handleState(true, e)
-  }
-
-  handleState(focus, e) {
-    if (this.props.disabled === true) return
-    if (focus === this.state.focus) return
-    // click close icon
-    if (focus && e && e.target.classList.contains(selectClass('close'))) return
-
-    const { height, onCollapse } = this.props
-    let { position } = this.props
-    const windowHeight = docSize.height
-    const bottom = height + this.element.getBoundingClientRect().bottom
-    if (bottom > windowHeight && !position) position = 'drop-up'
 
-    if (onCollapse) onCollapse(focus)
-    this.setState({ focus, position: position || 'drop-down' })
+    this.handleState(true, e);
+  };
+
+  _proto.handleState = function handleState(focus, e) {
+    if (this.props.disabled === true) return;
+    if (focus === this.state.focus) return; // click close icon
+
+    if (focus && e && e.target.classList.contains(selectClass('close'))) return;
+    var _this$props3 = this.props,
+        height = _this$props3.height,
+        onCollapse = _this$props3.onCollapse;
+    var position = this.props.position;
+    var windowHeight = docSize.height;
+    var bottom = height + this.element.getBoundingClientRect().bottom;
+    if (bottom > windowHeight && !position) position = 'drop-up';
+    if (onCollapse) onCollapse(focus);
+    this.setState({
+      focus: focus,
+      position: position || 'drop-down'
+    });
 
     if (focus) {
-      this.blured = false
-      this.renderPending = false
+      this.blured = false;
+      this.renderPending = false;
     }
-  }
-
-  handleControlChange(control) {
-    if (control !== this.state.control) this.setState({ control })
-  }
-
-  handleChange(_, data, fromInput) {
-    const { datum, multiple, disabled, emptyAfterSelect, onFilter, filterText, onCreate, reFocus } = this.props
-    if (disabled === true) return
+  };
+
+  _proto.handleControlChange = function handleControlChange(control) {
+    if (control !== this.state.control) this.setState({
+      control: control
+    });
+  };
+
+  _proto.handleChange = function handleChange(_, data, fromInput) {
+    var _this2 = this;
+
+    var _this$props4 = this.props,
+        datum = _this$props4.datum,
+        multiple = _this$props4.multiple,
+        disabled = _this$props4.disabled,
+        emptyAfterSelect = _this$props4.emptyAfterSelect,
+        onFilter = _this$props4.onFilter,
+        filterText = _this$props4.filterText,
+        onCreate = _this$props4.onCreate,
+        reFocus = _this$props4.reFocus;
+    if (disabled === true) return; // if click option, ignore blur event
 
-    // if click option, ignore blur event
     if (this.inputBlurTimer) {
-      this.lastChangeIsOptionClick = true
-      clearTimeout(this.inputBlurTimer)
+      this.lastChangeIsOptionClick = true;
+      clearTimeout(this.inputBlurTimer);
     }
 
     if (multiple) {
       if (isObject(data) && data.IS_NOT_MATCHED_VALUE) {
-        datum.remove(data)
+        datum.remove(data);
       } else {
-        const checked = !datum.check(data)
+        var checked = !datum.check(data);
+
         if (checked) {
-          datum.add(data)
+          datum.add(data);
         } else {
-          if (fromInput === true) return
-          datum.remove(data)
+          if (fromInput === true) return;
+          datum.remove(data);
         }
-        if (this.inputReset) this.inputReset()
+
+        if (this.inputReset) this.inputReset();
       }
     } else {
-      datum.set(data)
-      if (!reFocus) this.handleState(false)
-      //  let the element focus
-      setTimeout(() => {
-        if (reFocus && this.focusInput) this.focusInput(true)
-        if (onCreate && this.blured) return
-        if (this.element) this.element.focus()
-      }, 10)
+      datum.set(data);
+      if (!reFocus) this.handleState(false); //  let the element focus
+
+      setTimeout(function () {
+        if (reFocus && _this2.focusInput) _this2.focusInput(true);
+        if (onCreate && _this2.blured) return;
+        if (_this2.element) _this2.element.focus();
+      }, 10);
     }
 
-    if (emptyAfterSelect && onFilter && filterText) onFilter('')
-  }
+    if (emptyAfterSelect && onFilter && filterText) onFilter('');
+  };
+
+  _proto.toInputTriggerCollapse = function toInputTriggerCollapse(text) {
+    var _this$props5 = this.props,
+        onCreate = _this$props5.onCreate,
+        datum = _this$props5.datum;
 
-  toInputTriggerCollapse(text) {
-    const { onCreate, datum } = this.props
     if (onCreate) {
-      datum.set(onCreate(text))
+      datum.set(onCreate(text));
     }
-    this.handleState(true)
-  }
 
-  shouldFocus(el) {
-    if (el.getAttribute('data-id') === this.selectId) return true
-    if (getParent(el, `.${selectClass('result')}`)) return true
-    return false
-  }
+    this.handleState(true);
+  };
 
-  handleFocus(e) {
-    if (!this.shouldFocus(e.target)) return
-    this.props.onFocus(e)
-    this.bindClickAway()
-  }
+  _proto.shouldFocus = function shouldFocus(el) {
+    if (el.getAttribute('data-id') === this.selectId) return true;
+    if (getParent(el, "." + selectClass('result'))) return true;
+    return false;
+  };
+
+  _proto.handleFocus = function handleFocus(e) {
+    if (!this.shouldFocus(e.target)) return;
+    this.props.onFocus(e);
+    this.bindClickAway();
+  };
+
+  _proto.handleInputFocus = function handleInputFocus() {
+    var _this$props6 = this.props,
+        hideCreateOption = _this$props6.hideCreateOption,
+        onCreate = _this$props6.onCreate;
+    this.inputLocked = true;
+    var noHover = onCreate && hideCreateOption;
 
-  handleInputFocus() {
-    const { hideCreateOption, onCreate } = this.props
-    this.inputLocked = true
-    const noHover = onCreate && hideCreateOption
     if (this.props.inputable && this.state.control === 'keyboard' && !noHover) {
-      if (this.optionList.handleHover) this.optionList.handleHover(0, true)
+      if (this.optionList.handleHover) this.optionList.handleHover(0, true);
     }
-  }
+  };
+
+  _proto.handleInputBlur = function handleInputBlur(text) {
+    var _this3 = this;
+
+    var _this$props7 = this.props,
+        onFilter = _this$props7.onFilter,
+        onCreate = _this$props7.onCreate,
+        multiple = _this$props7.multiple,
+        filterSingleSelect = _this$props7.filterSingleSelect,
+        data = _this$props7.data;
 
-  handleInputBlur(text) {
-    const { onFilter, onCreate, multiple, filterSingleSelect, data } = this.props
     if (onFilter && text && filterSingleSelect && data.length === 1) {
-      this.handleChange(null, data[0], false)
-      return
+      this.handleChange(null, data[0], false);
+      return;
     }
-    if (!onCreate) return
-    if (multiple && !text) return
 
-    if (this.lastChangeIsOptionClick) return
+    if (!onCreate) return;
+    if (multiple && !text) return;
+    if (this.lastChangeIsOptionClick) return; // if click option, ignore input blur
 
-    // if click option, ignore input blur
-    this.inputBlurTimer = setTimeout(() => {
-      const retData = onCreate(text)
-      this.handleChange(null, retData, true)
-    }, 200)
-  }
+    this.inputBlurTimer = setTimeout(function () {
+      var retData = onCreate(text);
 
-  handleClear() {
-    this.props.datum.setValue([])
-    this.element.focus()
+      _this3.handleChange(null, retData, true);
+    }, 200);
+  };
+
+  _proto.handleClear = function handleClear() {
+    this.props.datum.setValue([]);
+    this.element.focus();
 
     if (this.state.focus === false) {
-      this.forceUpdate()
+      this.forceUpdate();
     } else {
-      this.handleState(false)
+      this.handleState(false);
     }
-  }
+  };
+
+  _proto.handleHideOption = function handleHideOption() {
+    var _this$props8 = this.props,
+        datum = _this$props8.datum,
+        innerData = _this$props8.innerData;
+    var checked = datum.check(innerData);
 
-  handleHideOption() {
-    const { datum, innerData } = this.props
-    const checked = datum.check(innerData)
     if (checked) {
-      if (this.inputReset) this.inputReset()
-      return
+      if (this.inputReset) this.inputReset();
+      return;
     }
-    this.handleChange(true, innerData)
-  }
 
-  handleEnter() {
-    const { onCreate, hideCreateOption } = this.props
-    const hoverIndex = this.optionList.getIndex && this.optionList.getIndex()
+    this.handleChange(true, innerData);
+  };
+
+  _proto.handleEnter = function handleEnter() {
+    var _this$props9 = this.props,
+        onCreate = _this$props9.onCreate,
+        hideCreateOption = _this$props9.hideCreateOption;
+    var hoverIndex = this.optionList.getIndex && this.optionList.getIndex();
+
     if (onCreate && hideCreateOption && hoverIndex === -1) {
-      this.handleHideOption()
-      return
+      this.handleHideOption();
+      return;
     }
-    let data = this.props.data[hoverIndex]
+
+    var data = this.props.data[hoverIndex];
+
     if (!data) {
       // eslint-disable-next-line prefer-destructuring
-      data = this.props.data[0]
+      data = this.props.data[0];
     }
+
     if (data && !data[this.props.groupKey]) {
-      const checked = !this.props.datum.check(data)
-      this.handleChange(checked, data)
-      if (this.optionList.handleHover) this.optionList.handleHover(hoverIndex)
+      var checked = !this.props.datum.check(data);
+      this.handleChange(checked, data);
+      if (this.optionList.handleHover) this.optionList.handleHover(hoverIndex);
     }
-  }
+  };
 
-  handleKeyDown(e) {
-    const { onEnterExpand } = this.props
-    this.keyLocked = true
+  _proto.handleKeyDown = function handleKeyDown(e) {
+    var onEnterExpand = this.props.onEnterExpand;
+    this.keyLocked = true; // just for enter to open the list
 
-    // just for enter to open the list
     if ((e.keyCode === 13 || e.keyCode === 40) && !this.state.focus) {
-      e.preventDefault()
+      e.preventDefault();
+
       if (typeof onEnterExpand === 'function') {
-        const canOpen = onEnterExpand(e)
-        if (canOpen === false) return
+        var canOpen = onEnterExpand(e);
+        if (canOpen === false) return;
       }
-      this.handleClick(e)
-      return
-    }
 
-    // fot close the list
+      this.handleClick(e);
+      return;
+    } // fot close the list
+
+
     if (e.keyCode === 9) {
-      this.props.onBlur(e)
-      // e.preventDefault()
-      if (this.state.focus) this.handleState(false, e)
-      else this.clearClickAway()
-      return
-    }
+      this.props.onBlur(e); // e.preventDefault()
 
-    // no focus no event
-    if (!this.state.focus) return
+      if (this.state.focus) this.handleState(false, e);else this.clearClickAway();
+      return;
+    } // no focus no event
 
-    this.handleControlChange('keyboard')
+
+    if (!this.state.focus) return;
+    this.handleControlChange('keyboard');
 
     switch (e.keyCode) {
       case 38:
-        if (this.optionList.hoverMove) this.optionList.hoverMove(-1)
-        e.preventDefault()
-        break
+        if (this.optionList.hoverMove) this.optionList.hoverMove(-1);
+        e.preventDefault();
+        break;
+
       case 40:
-        if (this.optionList.hoverMove) this.optionList.hoverMove(1)
-        e.preventDefault()
-        break
+        if (this.optionList.hoverMove) this.optionList.hoverMove(1);
+        e.preventDefault();
+        break;
+
       case 13:
-        this.handleEnter()
-        e.preventDefault()
-        e.stopPropagation()
-        break
+        this.handleEnter();
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+
       case 8:
-        this.handleDelete(e)
-        break
+        this.handleDelete(e);
+        break;
+
       default:
-        this.lastChangeIsOptionClick = false
+        this.lastChangeIsOptionClick = false;
     }
-  }
+  };
 
-  handleKeyUp() {
-    this.keyLocked = false
-  }
+  _proto.handleKeyUp = function handleKeyUp() {
+    this.keyLocked = false;
+  };
 
-  handleDelete(e) {
-    const { multiple, filterText, datum, value, data } = this.props
-    if (!multiple || filterText) return
-    if (!value || !value.length) return
-    e.preventDefault()
-    const raws = Array.isArray(value) ? value : [value]
-    const values = [...raws]
-    const last = values.pop()
-    datum.handleChange(values, datum.getDataByValue(data, last), false)
-  }
+  _proto.cancelDeleteLock = function cancelDeleteLock() {
+    var _this4 = this;
 
-  renderItem(data, index) {
-    const { renderItem } = this.props
-    return typeof renderItem === 'function' ? renderItem(data, index) : data[renderItem]
-  }
+    if (this.cancelDeleteLockTimer) {
+      clearTimeout(this.cancelDeleteLockTimer);
+    }
 
-  renderResult(data, index) {
-    const { renderResult } = this.props
-    if (!renderResult) return this.renderItem(data, index)
-    return typeof renderResult === 'function' ? renderResult(data, index) : data[renderResult]
-  }
+    this.cancelDeleteLockTimer = setTimeout(function () {
+      _this4.deleteLock = false;
+    }, 400);
+  };
+
+  _proto.handleDelete = function handleDelete(e) {
+    var _this$props10 = this.props,
+        multiple = _this$props10.multiple,
+        filterText = _this$props10.filterText,
+        datum = _this$props10.datum,
+        value = _this$props10.value,
+        data = _this$props10.data;
+    if (!multiple) return;
+
+    if (filterText) {
+      this.deleteLock = true;
+    } else if (this.deleteLock) {
+      this.cancelDeleteLock();
+    }
 
+    if (filterText || this.deleteLock) return;
+    if (!value || !value.length) return;
+    e.preventDefault();
+    var raws = Array.isArray(value) ? value : [value];
+    var values = [].concat(raws);
+    var last = values.pop();
+    datum.handleChange(values, datum.getDataByValue(data, last), false);
+  };
+
+  _proto.renderItem = function renderItem(data, index) {
+    var renderItem = this.props.renderItem;
+    return typeof renderItem === 'function' ? renderItem(data, index) : data[renderItem];
+  };
+
+  _proto.renderResult = function renderResult(data, index) {
+    var renderResult = this.props.renderResult;
+    if (!renderResult) return this.renderItem(data, index);
+    return typeof renderResult === 'function' ? renderResult(data, index) : data[renderResult];
+  }
   /**
    * custom options list header
    */
-  renderCustomHeader() {
-    const { header } = this.props
-    if (React.isValidElement(header)) return <div className={selectClass('custom-header')}>{header}</div>
-    return null
-  }
-
-  renderTree() {
-    const { focus, position } = this.state
-    const { optionWidth } = this.props
-    const props = {}
-    ;[
-      'treeData',
-      'expanded',
-      'onExpand',
-      'loader',
-      'defaultExpanded',
-      'defaultExpandAll',
-      'datum',
-      'keygen',
-      'multiple',
-      'text',
-      'height',
-      'loading',
-      'onFilter',
-      'filterText',
-      'absolute',
-      'zIndex',
-      'childrenKey',
-      'expandIcons',
-    ].forEach(k => {
-      props[k] = this.props[k]
-    })
-    const style = optionWidth && { width: optionWidth }
-    props.renderItem = this.renderItem
-    return (
-      <WrappedOptionTree
-        onChange={this.handleChange}
-        parentElement={this.element}
-        position={position}
-        rootClass={selectClass(position)}
-        selectId={this.selectId}
-        focus={focus}
-        renderPending={this.renderPending}
-        fixed="min"
-        {...props}
-        style={style}
-        customHeader={this.renderCustomHeader()}
-      />
-    )
-  }
-
-  renderList() {
-    const { focus, control, position } = this.state
-    const { autoAdapt, value, optionWidth } = this.props
-    const props = {}
-    ;[
-      'data',
-      'datum',
-      'keygen',
-      'multiple',
-      'columns',
-      'columnWidth',
-      'columnsTitle',
-      'text',
-      'itemsInView',
-      'absolute',
-      'lineHeight',
-      'height',
-      'loading',
-      'onFilter',
-      'filterText',
-      'zIndex',
-      'groupKey',
-      'hideCreateOption',
-    ].forEach(k => {
-      props[k] = this.props[k]
-    })
-
-    const List = props.columns >= 1 || props.columns === -1 ? WrappedBoxList : WrappedOptionList
-    const style = optionWidth && { width: optionWidth }
-    return (
-      <List
-        {...props}
-        style={style}
-        rootClass={selectClass(position, isRTL() && 'rtl')}
-        autoClass={selectClass(autoAdapt && 'auto-adapt')}
-        bindOptionFunc={this.bindOptionFunc}
-        renderPending={this.renderPending}
-        focus={focus}
-        control={control}
-        selectId={this.selectId}
-        onControlChange={this.handleControlChange}
-        onChange={this.handleChange}
-        renderItem={this.renderItem}
-        parentElement={this.element}
-        position={position}
-        onBlur={this.handleBlur}
-        fixed={autoAdapt ? 'min' : true}
-        value={value}
-        customHeader={this.renderCustomHeader()}
-      />
-    )
-  }
-
-  renderOptions() {
-    const { treeData } = this.props
-    if (treeData) return this.renderTree()
-    return this.renderList()
-  }
-
-  render() {
-    const {
-      placeholder,
-      multiple,
-      clearable,
-      disabled,
-      size,
-      onFilter,
-      datum,
-      filterText,
-      onCreate,
-      result,
-      compressed,
-      trim,
-      renderUnmatched,
-      showArrow,
-      compressedClassName,
-      resultClassName,
-    } = this.props
-    const className = selectClass(
-      'inner',
-      size,
-      this.state.focus && 'focus',
-      this.state.position,
-      multiple && 'multiple',
-      disabled === true && 'disabled',
-      !trim && 'pre'
-    )
-
-    return (
-      <div
-        // eslint-disable-next-line
-        tabIndex={disabled === true ? -1 : 0}
-        ref={this.bindElement}
-        className={className}
-        data-id={this.selectId}
-        onFocus={this.handleFocus}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeyDown}
-        onKeyUp={this.handleKeyUp}
-      >
-        <Result
-          trim={trim}
-          filterText={filterText}
-          onClear={clearable ? this.handleClear : undefined}
-          onCreate={onCreate}
-          onRemove={this.handleRemove}
-          onFilter={onFilter}
-          datum={datum}
-          disabled={disabled}
-          focus={this.state.focus}
-          result={result}
-          multiple={multiple}
-          placeholder={placeholder}
-          renderResult={this.renderResult}
-          renderUnmatched={renderUnmatched}
-          onInputBlur={this.handleInputBlur}
-          onInputFocus={this.handleInputFocus}
-          setInputReset={this.setInputReset}
-          bindFocusInputFunc={this.bindFocusInputFunc}
-          collapse={this.toInputTriggerCollapse}
-          compressed={compressed}
-          showArrow={showArrow}
-          focusSelected={this.getFocusSelected()}
-          compressedClassName={compressedClassName}
-          resultClassName={resultClassName}
-        />
-        {this.renderOptions()}
-      </div>
-    )
-  }
-}
-
-Select.propTypes = {
-  ...getProps(PropTypes, 'placehodler', 'keygen'),
-  absolute: PropTypes.bool,
+  ;
+
+  _proto.renderCustomHeader = function renderCustomHeader() {
+    var header = this.props.header;
+    if (React.isValidElement(header)) return React.createElement("div", {
+      className: selectClass('custom-header')
+    }, header);
+    return null;
+  };
+
+  _proto.renderTree = function renderTree() {
+    var _this5 = this;
+
+    var _this$state = this.state,
+        focus = _this$state.focus,
+        position = _this$state.position;
+    var optionWidth = this.props.optionWidth;
+    var props = {};
+    ['treeData', 'expanded', 'onExpand', 'loader', 'defaultExpanded', 'defaultExpandAll', 'datum', 'keygen', 'multiple', 'text', 'height', 'loading', 'onFilter', 'filterText', 'absolute', 'zIndex', 'childrenKey', 'expandIcons', 'emptyText'].forEach(function (k) {
+      props[k] = _this5.props[k];
+    });
+    var style = optionWidth && {
+      width: optionWidth
+    };
+    props.renderItem = this.renderItem;
+    return React.createElement(WrappedOptionTree, _extends({
+      onChange: this.handleChange,
+      parentElement: this.element,
+      position: position,
+      rootClass: selectClass(position),
+      selectId: this.selectId,
+      focus: focus,
+      renderPending: this.renderPending,
+      fixed: "min"
+    }, props, {
+      style: style,
+      customHeader: this.renderCustomHeader()
+    }));
+  };
+
+  _proto.renderList = function renderList() {
+    var _this6 = this;
+
+    var _this$state2 = this.state,
+        focus = _this$state2.focus,
+        control = _this$state2.control,
+        position = _this$state2.position;
+    var _this$props11 = this.props,
+        autoAdapt = _this$props11.autoAdapt,
+        value = _this$props11.value,
+        optionWidth = _this$props11.optionWidth;
+    var props = {};
+    ['data', 'datum', 'keygen', 'multiple', 'columns', 'columnWidth', 'columnsTitle', 'text', 'itemsInView', 'absolute', 'lineHeight', 'height', 'loading', 'onFilter', 'filterText', 'zIndex', 'groupKey', 'hideCreateOption', 'emptyText'].forEach(function (k) {
+      props[k] = _this6.props[k];
+    });
+    var List = props.columns >= 1 || props.columns === -1 ? WrappedBoxList : WrappedOptionList;
+    var style = optionWidth && {
+      width: optionWidth
+    };
+    return React.createElement(List, _extends({}, props, {
+      style: style,
+      rootClass: selectClass(position, isRTL() && 'rtl'),
+      autoClass: selectClass(autoAdapt && 'auto-adapt'),
+      bindOptionFunc: this.bindOptionFunc,
+      renderPending: this.renderPending,
+      focus: focus,
+      control: control,
+      selectId: this.selectId,
+      onControlChange: this.handleControlChange,
+      onChange: this.handleChange,
+      renderItem: this.renderItem,
+      parentElement: this.element,
+      position: position,
+      onBlur: this.handleBlur,
+      fixed: autoAdapt ? 'min' : true,
+      value: value,
+      customHeader: this.renderCustomHeader()
+    }));
+  };
+
+  _proto.renderOptions = function renderOptions() {
+    var treeData = this.props.treeData;
+    if (treeData) return this.renderTree();
+    return this.renderList();
+  };
+
+  _proto.render = function render() {
+    var _this$props12 = this.props,
+        placeholder = _this$props12.placeholder,
+        multiple = _this$props12.multiple,
+        clearable = _this$props12.clearable,
+        disabled = _this$props12.disabled,
+        size = _this$props12.size,
+        onFilter = _this$props12.onFilter,
+        datum = _this$props12.datum,
+        filterText = _this$props12.filterText,
+        onCreate = _this$props12.onCreate,
+        result = _this$props12.result,
+        compressed = _this$props12.compressed,
+        trim = _this$props12.trim,
+        renderUnmatched = _this$props12.renderUnmatched,
+        showArrow = _this$props12.showArrow,
+        compressedClassName = _this$props12.compressedClassName,
+        resultClassName = _this$props12.resultClassName;
+    var className = selectClass('inner', size, this.state.focus && 'focus', this.state.position, multiple && 'multiple', disabled === true && 'disabled', !trim && 'pre');
+    return React.createElement("div", {
+      // eslint-disable-next-line
+      tabIndex: disabled === true ? -1 : 0,
+      ref: this.bindElement,
+      className: className,
+      "data-id": this.selectId,
+      onFocus: this.handleFocus,
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: this.handleKeyUp
+    }, React.createElement(Result, {
+      trim: trim,
+      filterText: filterText,
+      onClear: clearable ? this.handleClear : undefined,
+      onCreate: onCreate,
+      onRemove: this.handleRemove,
+      onFilter: onFilter,
+      datum: datum,
+      disabled: disabled,
+      focus: this.state.focus,
+      result: result,
+      multiple: multiple,
+      placeholder: placeholder,
+      renderResult: this.renderResult,
+      renderUnmatched: renderUnmatched,
+      onInputBlur: this.handleInputBlur,
+      onInputFocus: this.handleInputFocus,
+      setInputReset: this.setInputReset,
+      bindFocusInputFunc: this.bindFocusInputFunc,
+      collapse: this.toInputTriggerCollapse,
+      compressed: compressed,
+      showArrow: showArrow,
+      focusSelected: this.getFocusSelected(),
+      compressedClassName: compressedClassName,
+      resultClassName: resultClassName
+    }), this.renderOptions());
+  };
+
+  return Select;
+}(PureComponent);
+
+Select.propTypes = _objectSpread({}, getProps(PropTypes, 'placehodler', 'keygen'), {
+  absolute: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   clearable: PropTypes.bool,
   columns: PropTypes.number,
   data: PropTypes.array,
@@ -604,9 +647,8 @@ Select.propTypes = {
   onCollapse: PropTypes.func,
   resultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   reFocus: PropTypes.bool,
-  header: PropTypes.node,
-}
-
+  header: PropTypes.node
+});
 Select.defaultProps = {
   clearable: false,
   data: [],
@@ -615,13 +657,14 @@ Select.defaultProps = {
   lineHeight: 34,
   loading: false,
   multiple: false,
-  renderItem: e => e,
+  renderItem: function renderItem(e) {
+    return e;
+  },
   text: {},
   compressed: false,
   trim: true,
   autoAdapt: false,
   showArrow: true,
-  focusSelected: true,
-}
-
-export default Select
+  focusSelected: true
+};
+export default Select;