shineout 1.7.1 → 1.8.0-beta.2

package/es/Select/Option.js

@@ -1,64 +1,86 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { selectClass } from './styles'
-import { isObject } from '../utils/is'
-import shallowEqual from '../utils/shallowEqual'
-import icons from '../icons'
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { selectClass } from './styles';
+import { isObject } from '../utils/is';
+import shallowEqual from '../utils/shallowEqual';
+import icons from '../icons';
 
-class Option extends React.Component {
-  constructor(props) {
-    super(props)
-    this.handleClick = this.handleClick.bind(this)
-    this.handleEnter = this.handleHover.bind(this)
-  }
+var Option =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(Option, _React$Component);
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.props.filterText) return true
-    if (!shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)) return true
-    return false
-  }
+  function Option(props) {
+    var _this;
 
-  handleClick() {
-    const { data, onClick, isActive, index, disabled, groupKey } = this.props
+    _this = _React$Component.call(this, props) || this;
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleEnter = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
 
-    if (this.locked || disabled || (data && data[groupKey])) return
-    this.locked = true
+  var _proto = Option.prototype;
 
-    onClick(!isActive, data, index)
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.filterText) return true;
+    if (!shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)) return true;
+    return false;
+  };
 
-    setTimeout(() => {
-      this.locked = false
-    }, 200)
-  }
+  _proto.handleClick = function handleClick() {
+    var _this2 = this;
 
-  handleHover() {
-    this.props.onHover(this.props.index)
-  }
+    var _this$props = this.props,
+        data = _this$props.data,
+        onClick = _this$props.onClick,
+        isActive = _this$props.isActive,
+        index = _this$props.index,
+        disabled = _this$props.disabled,
+        groupKey = _this$props.groupKey;
+    if (this.locked || disabled || data && data[groupKey]) return;
+    this.locked = true;
+    onClick(!isActive, data, index);
+    setTimeout(function () {
+      _this2.locked = false;
+    }, 200);
+  };
 
-  render() {
-    const { data, isActive, index, renderItem, isHover, disabled, groupKey } = this.props
-    const isGroupTitle = data && data[groupKey]
-    const className = classnames(
-      selectClass('option', isActive && 'active', isHover && 'hover', disabled && 'disabled', isGroupTitle && 'group'),
-      `option-${index}`
-    )
+  _proto.handleHover = function handleHover() {
+    this.props.onHover(this.props.index);
+  };
 
-    const result = isGroupTitle ? data[groupKey] : renderItem(data, index)
-    const title = typeof result === 'string' ? result : ''
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        isActive = _this$props2.isActive,
+        index = _this$props2.index,
+        renderItem = _this$props2.renderItem,
+        isHover = _this$props2.isHover,
+        disabled = _this$props2.disabled,
+        groupKey = _this$props2.groupKey;
+    var isGroupTitle = data && data[groupKey];
+    var className = classnames(selectClass('option', isActive && 'active', isHover && 'hover', disabled && 'disabled', isGroupTitle && 'group'), "option-" + index);
+    var result = isGroupTitle ? data[groupKey] : renderItem(data, index);
+    var title = typeof result === 'string' ? result : '';
 
     if (isObject(data) && result === data) {
-      console.warn('renderItem is essential when data element is Object')
+      console.warn('renderItem is essential when data element is Object');
     }
 
-    return (
-      <a tabIndex={-1} onClick={this.handleClick} onMouseEnter={this.handleEnter} className={className} title={title}>
-        {result}
-        {isActive && icons.Check}
-      </a>
-    )
-  }
-}
+    return React.createElement("a", {
+      tabIndex: -1,
+      onClick: this.handleClick,
+      onMouseEnter: this.handleEnter,
+      className: className,
+      title: title
+    }, result, isActive && icons.Check);
+  };
+
+  return Option;
+}(React.Component);
 
 Option.propTypes = {
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]).isRequired,
@@ -70,7 +92,6 @@ Option.propTypes = {
   onHover: PropTypes.func.isRequired,
   renderItem: PropTypes.func.isRequired,
   groupKey: PropTypes.string,
-  filterText: PropTypes.string,
-}
-
-export default Option
+  filterText: PropTypes.string
+};
+export default Option;

package/es/Select/OptionList.js

@@ -1,236 +1,273 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { getKey } from '../utils/uid'
-import { setTranslate } from '../utils/dom/translate'
-import List from '../AnimationList'
-import Scroll from '../Scroll'
-import Spin from '../Spin'
-import { getLocale } from '../locale'
-import { selectClass } from './styles'
-import Option from './Option'
-
-const ScaleList = List(['fade', 'scale-y'], 'fast')
-
-class OptionList extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { getKey } from '../utils/uid';
+import { setTranslate } from '../utils/dom/translate';
+import List from '../AnimationList';
+import Scroll from '../Scroll';
+import Spin from '../Spin';
+import { getLocale } from '../locale';
+import { selectClass } from './styles';
+import Option from './Option';
+var ScaleList = List(['fade', 'scale-y'], 'fast');
+
+var OptionList =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(OptionList, _Component);
+
+  function OptionList(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.state = {
       currentIndex: 0,
       hoverIndex: props.hideCreateOption ? -1 : 0,
-      scrollTop: 0,
-    }
-
-    this.hoverMove = this.hoverMove.bind(this)
-
-    this.handleHover = this.handleHover.bind(this)
-    this.handleScroll = this.handleScroll.bind(this)
-    this.handleMouseMove = this.handleMouseMove.bind(this)
-    this.renderList = this.renderList.bind(this)
+      scrollTop: 0
+    };
+    _this.hoverMove = _this.hoverMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleHover = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderList = _this.renderList.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.lastScrollTop = 0;
+    props.bindOptionFunc('handleHover', _this.handleHover);
+    props.bindOptionFunc('hoverMove', _this.hoverMove);
+    props.bindOptionFunc('getIndex', function () {
+      return _this.state.hoverIndex;
+    });
+    return _this;
+  }
 
-    this.lastScrollTop = 0
+  var _proto = OptionList.prototype;
 
-    props.bindOptionFunc('handleHover', this.handleHover)
-    props.bindOptionFunc('hoverMove', this.hoverMove)
-    props.bindOptionFunc('getIndex', () => this.state.hoverIndex)
-  }
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this2 = this;
 
-  componentDidUpdate(prevProps) {
-    const { data } = this.props
+    var data = this.props.data;
 
     if (data !== prevProps.data && data.length !== prevProps.data.length) {
-      this.lastScrollTop = 0
-      // eslint-disable-next-line
-      this.setState({ currentIndex: 0, scrollTop: 0 }, () => {
-        if (this.optionInner) {
-          setTranslate(this.optionInner, '0px', '0px')
-          this.optionInner.style.marginTop = '0px'
+      this.lastScrollTop = 0; // eslint-disable-next-line
+
+      this.setState({
+        currentIndex: 0,
+        scrollTop: 0
+      }, function () {
+        if (_this2.optionInner) {
+          setTranslate(_this2.optionInner, '0px', '0px');
+          _this2.optionInner.style.marginTop = '0px';
         }
-      })
+      });
     }
-  }
+  };
+
+  _proto.getText = function getText(key) {
+    return this.props.text[key] || getLocale(key);
+  };
+
+  _proto.hoverMove = function hoverMove(step) {
+    var max = this.props.data.length;
+    var _this$props = this.props,
+        lineHeight = _this$props.lineHeight,
+        height = _this$props.height,
+        groupKey = _this$props.groupKey;
+    var _this$state = this.state,
+        hoverIndex = _this$state.hoverIndex,
+        currentIndex = _this$state.currentIndex;
+    if (hoverIndex === undefined) hoverIndex = currentIndex;else hoverIndex += step;
 
-  getText(key) {
-    return this.props.text[key] || getLocale(key)
-  }
+    if (hoverIndex >= max) {
+      hoverIndex = 0;
+      this.lastScrollTop = 0;
+    } // jump the group, the group would't be the last, so do't need to fixed the last
 
-  hoverMove(step) {
-    const max = this.props.data.length
-    const { lineHeight, height, groupKey } = this.props
-    let { hoverIndex, currentIndex } = this.state
-    if (hoverIndex === undefined) hoverIndex = currentIndex
-    else hoverIndex += step
 
-    if (hoverIndex >= max) {
-      hoverIndex = 0
-      this.lastScrollTop = 0
-    }
+    var data = this.props.data[hoverIndex];
 
-    // jump the group, the group would't be the last, so do't need to fixed the last
-    const data = this.props.data[hoverIndex]
     if (data && data[groupKey]) {
-      if (step > 0) hoverIndex += 1
-      else hoverIndex -= 1
+      if (step > 0) hoverIndex += 1;else hoverIndex -= 1;
     }
-    if (hoverIndex < 0) hoverIndex = max - 1
 
-    const scrollTop = hoverIndex / max
-    const offset = scrollTop * height
-    const emptyHeight = hoverIndex * lineHeight + offset
+    if (hoverIndex < 0) hoverIndex = max - 1;
+    var scrollTop = hoverIndex / max;
+    var offset = scrollTop * height;
+    var emptyHeight = hoverIndex * lineHeight + offset;
 
     if (emptyHeight < this.lastScrollTop + offset) {
       // absolute at top
-
-      this.optionInner.style.marginTop = `${offset}px`
-      setTranslate(this.optionInner, '0px', `-${emptyHeight}px`)
-      this.lastScrollTop = emptyHeight - offset
-
-      currentIndex = hoverIndex - 1
-      if (currentIndex < 0) currentIndex = max
-      this.setState({ currentIndex, scrollTop: emptyHeight / (lineHeight * max) })
+      this.optionInner.style.marginTop = offset + "px";
+      setTranslate(this.optionInner, '0px', "-" + emptyHeight + "px");
+      this.lastScrollTop = emptyHeight - offset;
+      currentIndex = hoverIndex - 1;
+      if (currentIndex < 0) currentIndex = max;
+      this.setState({
+        currentIndex: currentIndex,
+        scrollTop: emptyHeight / (lineHeight * max)
+      });
     } else if (emptyHeight + lineHeight > this.lastScrollTop + offset + height) {
       // absolute at bottom
-
-      this.optionInner.style.marginTop = `${offset}px`
-      const scrollHeight = emptyHeight + lineHeight - height
-      setTranslate(this.optionInner, '0px', `-${scrollHeight}px`)
-      this.lastScrollTop = scrollHeight - offset
-
-      currentIndex = hoverIndex - Math.ceil(height / lineHeight)
-      if (currentIndex < 0) currentIndex = 0
-      this.setState({ currentIndex, scrollTop: scrollHeight / (lineHeight * max) })
+      this.optionInner.style.marginTop = offset + "px";
+      var scrollHeight = emptyHeight + lineHeight - height;
+      setTranslate(this.optionInner, '0px', "-" + scrollHeight + "px");
+      this.lastScrollTop = scrollHeight - offset;
+      currentIndex = hoverIndex - Math.ceil(height / lineHeight);
+      if (currentIndex < 0) currentIndex = 0;
+      this.setState({
+        currentIndex: currentIndex,
+        scrollTop: scrollHeight / (lineHeight * max)
+      });
     } else if (hoverIndex === 0 && emptyHeight === 0) {
       // reset to top
-
-      this.optionInner.style.marginTop = '0px'
-      setTranslate(this.optionInner, '0px', '0px')
-      this.setState({ currentIndex: 0, scrollTop: 0 })
+      this.optionInner.style.marginTop = '0px';
+      setTranslate(this.optionInner, '0px', '0px');
+      this.setState({
+        currentIndex: 0,
+        scrollTop: 0
+      });
     }
-    this.setState({ hoverIndex })
-  }
-
-  handleScroll(x, y, max, bar, v, h, pixelX, pixelY) {
-    if (!this.optionInner) return
-    const { data, itemsInView, lineHeight } = this.props
-    const fullHeight = itemsInView * lineHeight
-    const contentHeight = data.length * lineHeight - h
-    let scrollTop = h > fullHeight ? 0 : y
 
-    this.optionInner.style.marginTop = `${scrollTop * h}px`
+    this.setState({
+      hoverIndex: hoverIndex
+    });
+  };
+
+  _proto.handleScroll = function handleScroll(x, y, max, bar, v, h, pixelX, pixelY) {
+    if (!this.optionInner) return;
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        itemsInView = _this$props2.itemsInView,
+        lineHeight = _this$props2.lineHeight;
+    var fullHeight = itemsInView * lineHeight;
+    var contentHeight = data.length * lineHeight - h;
+    var scrollTop = h > fullHeight ? 0 : y;
+    this.optionInner.style.marginTop = scrollTop * h + "px";
 
     if (pixelY === undefined || pixelY === 0) {
-      this.lastScrollTop = scrollTop * contentHeight
+      this.lastScrollTop = scrollTop * contentHeight;
     } else {
-      this.lastScrollTop += pixelY
-      if (this.lastScrollTop < 0) this.lastScrollTop = 0
+      this.lastScrollTop += pixelY;
+      if (this.lastScrollTop < 0) this.lastScrollTop = 0; // scroll over bottom
 
-      // scroll over bottom
-      if (this.lastScrollTop > contentHeight) this.lastScrollTop = contentHeight
-      scrollTop = this.lastScrollTop / contentHeight
-      this.optionInner.style.marginTop = `${scrollTop * h}px`
+      if (this.lastScrollTop > contentHeight) this.lastScrollTop = contentHeight;
+      scrollTop = this.lastScrollTop / contentHeight;
+      this.optionInner.style.marginTop = scrollTop * h + "px";
     }
 
-    let index = Math.floor(this.lastScrollTop / lineHeight) - 1
-    if (data.length - itemsInView < index) index = data.length - itemsInView
-    if (index < 0) index = 0
-
-    setTranslate(this.optionInner, '0px', `-${this.lastScrollTop + scrollTop * h}px`)
-
-    this.setState({ scrollTop, currentIndex: index })
-  }
-
-  handleHover(index, force) {
+    var index = Math.floor(this.lastScrollTop / lineHeight) - 1;
+    if (data.length - itemsInView < index) index = data.length - itemsInView;
+    if (index < 0) index = 0;
+    setTranslate(this.optionInner, '0px', "-" + (this.lastScrollTop + scrollTop * h) + "px");
+    this.setState({
+      scrollTop: scrollTop,
+      currentIndex: index
+    });
+  };
+
+  _proto.handleHover = function handleHover(index, force) {
     if ((this.props.control === 'mouse' || force) && this.state.hoverIndex !== index) {
-      this.setState({ hoverIndex: index })
+      this.setState({
+        hoverIndex: index
+      });
     }
-  }
-
-  handleMouseMove() {
-    this.props.onControlChange('mouse')
-  }
+  };
+
+  _proto.handleMouseMove = function handleMouseMove() {
+    this.props.onControlChange('mouse');
+  };
+
+  _proto.renderList = function renderList() {
+    var _this3 = this;
+
+    var _this$props3 = this.props,
+        loading = _this$props3.loading,
+        data = _this$props3.data,
+        renderPending = _this$props3.renderPending,
+        height = _this$props3.height,
+        lineHeight = _this$props3.lineHeight,
+        itemsInView = _this$props3.itemsInView,
+        datum = _this$props3.datum,
+        keygen = _this$props3.keygen,
+        multiple = _this$props3.multiple,
+        onChange = _this$props3.onChange,
+        renderItem = _this$props3.renderItem,
+        groupKey = _this$props3.groupKey,
+        filterText = _this$props3.filterText,
+        emptyText = _this$props3.emptyText;
+    var _this$state2 = this.state,
+        hoverIndex = _this$state2.hoverIndex,
+        currentIndex = _this$state2.currentIndex;
+    var scroll = '';
+    var scrollHeight = lineHeight * data.length;
 
-  renderList() {
-    const {
-      loading,
-      data,
-      renderPending,
-      height,
-      lineHeight,
-      itemsInView,
-      datum,
-      keygen,
-      multiple,
-      onChange,
-      renderItem,
-      groupKey,
-      filterText,
-      emptyText,
-    } = this.props
-    const { hoverIndex, currentIndex } = this.state
-    let scroll = ''
-    const scrollHeight = lineHeight * data.length
     if (height < scrollHeight) {
-      scroll = 'y'
+      scroll = 'y';
     }
-    if (loading)
-      return (
-        <span className={selectClass('option')}>{typeof loading === 'boolean' ? <Spin size={20} /> : loading}</span>
-      )
-    if (data.length === 0 || renderPending)
-      return <span className={selectClass('option')}>{emptyText || this.getText('noData')}</span>
-    return (
-      <Scroll
-        scroll={scroll}
-        style={{ height: scroll ? height : undefined }}
-        onScroll={this.handleScroll}
-        scrollHeight={data.length * lineHeight}
-        scrollTop={this.state.scrollTop}
-      >
-        <div
-          ref={el => {
-            this.optionInner = el
-          }}
-        >
-          <div style={{ height: currentIndex * lineHeight }} />
-          {data.slice(currentIndex, currentIndex + itemsInView).map((d, i) => (
-            <Option
-              isActive={datum.check(d)}
-              disabled={datum.disabled(d)}
-              isHover={hoverIndex === currentIndex + i}
-              key={d && d[groupKey] ? `__${d[groupKey]}__` : getKey(d, keygen, i)}
-              index={currentIndex + i}
-              data={d}
-              multiple={multiple}
-              onClick={onChange}
-              renderItem={renderItem}
-              onHover={this.handleHover}
-              groupKey={groupKey}
-              filterText={filterText}
-            />
-          ))}
-        </div>
-      </Scroll>
-    )
-  }
 
-  render() {
-    const { control, focus, style, selectId, autoClass, getRef, customHeader } = this.props
-
-    return (
-      <ScaleList
-        show={focus}
-        onMouseMove={this.handleMouseMove}
-        style={style}
-        data-id={selectId}
-        className={classnames(selectClass('options', `control-${control}`), autoClass)}
-        getRef={getRef}
-      >
-        {customHeader}
-        {this.renderList()}
-      </ScaleList>
-    )
-  }
-}
+    if (loading) return React.createElement("span", {
+      className: selectClass('option')
+    }, typeof loading === 'boolean' ? React.createElement(Spin, {
+      size: 20
+    }) : loading);
+    if (data.length === 0 || renderPending) return React.createElement("span", {
+      className: selectClass('option')
+    }, emptyText || this.getText('noData'));
+    return React.createElement(Scroll, {
+      scroll: scroll,
+      style: {
+        height: scroll ? height : undefined
+      },
+      onScroll: this.handleScroll,
+      scrollHeight: data.length * lineHeight,
+      scrollTop: this.state.scrollTop
+    }, React.createElement("div", {
+      ref: function ref(el) {
+        _this3.optionInner = el;
+      }
+    }, React.createElement("div", {
+      style: {
+        height: currentIndex * lineHeight
+      }
+    }), data.slice(currentIndex, currentIndex + itemsInView).map(function (d, i) {
+      return React.createElement(Option, {
+        isActive: datum.check(d),
+        disabled: datum.disabled(d),
+        isHover: hoverIndex === currentIndex + i,
+        key: d && d[groupKey] ? "__" + d[groupKey] + "__" : getKey(d, keygen, i),
+        index: currentIndex + i,
+        data: d,
+        multiple: multiple,
+        onClick: onChange,
+        renderItem: renderItem,
+        onHover: _this3.handleHover,
+        groupKey: groupKey,
+        filterText: filterText
+      });
+    })));
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        control = _this$props4.control,
+        focus = _this$props4.focus,
+        style = _this$props4.style,
+        selectId = _this$props4.selectId,
+        autoClass = _this$props4.autoClass,
+        getRef = _this$props4.getRef,
+        customHeader = _this$props4.customHeader;
+    return React.createElement(ScaleList, {
+      show: focus,
+      onMouseMove: this.handleMouseMove,
+      style: style,
+      "data-id": selectId,
+      className: classnames(selectClass('options', "control-" + control), autoClass),
+      getRef: getRef
+    }, customHeader, this.renderList());
+  };
+
+  return OptionList;
+}(Component);
 
 OptionList.propTypes = {
   control: PropTypes.oneOf(['mouse', 'keyboard']),
@@ -257,7 +294,6 @@ OptionList.propTypes = {
   customHeader: PropTypes.node,
   filterText: PropTypes.string,
   hideCreateOption: PropTypes.bool,
-  emptyText: PropTypes.node,
-}
-
-export default OptionList
+  emptyText: PropTypes.node
+};
+export default OptionList;