shineout 1.7.1 → 1.8.0-beta.2

package/es/AnimationList/AbsoluteList.js

@@ -1,256 +1,324 @@
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import shallowEqual from '../utils/shallowEqual'
-import { compose } from '../utils/func'
-import { scrollConsumer } from '../Scroll/context'
-import { listClass } from '../DataList/styles'
-import { docScroll, docSize } from '../utils/dom/document'
-import { getRTLPosition } from '../utils/strings'
-import zIndexConsumer from '../Modal/context'
-import { isRTL } from '../config'
-
-const PICKER_V_MARGIN = 4
-let root
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import shallowEqual from '../utils/shallowEqual';
+import { compose } from '../utils/func';
+import { scrollConsumer } from '../Scroll/context';
+import { listClass } from '../DataList/styles';
+import { docScroll, docSize } from '../utils/dom/document';
+import { getRTLPosition } from '../utils/strings';
+import zIndexConsumer from '../Modal/context';
+import { isRTL } from '../config';
+var PICKER_V_MARGIN = 4;
+var root;
+
 function initRoot() {
-  root = document.createElement('div')
-  root.className = listClass('root')
-  document.body.appendChild(root)
+  root = document.createElement('div');
+  root.className = listClass('root');
+  document.body.appendChild(root);
 }
 
-const listPosition = ['drop-down', 'drop-up']
-const pickerPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top']
-const dropdownPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right']
+var listPosition = ['drop-down', 'drop-up'];
+var pickerPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top'];
+var dropdownPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+export default function (List) {
+  var AbsoluteList =
+  /*#__PURE__*/
+  function (_Component) {
+    _inheritsLoose(AbsoluteList, _Component);
 
-export default function(List) {
-  class AbsoluteList extends Component {
-    state = {
-      overdoc: false,
-    }
+    function AbsoluteList(props) {
+      var _this;
+
+      _this = _Component.call(this, props) || this;
 
-    constructor(props) {
-      super(props)
-      this.handleRef = this.handleRef.bind(this)
-      if (!props.absolute) return
-      this.lastStyle = {}
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+        overdoc: false
+      });
+
+      _this.handleRef = _this.handleRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      if (!props.absolute) return _assertThisInitialized(_this);
+      _this.lastStyle = {};
+      if (!root) initRoot();
+      _this.container = typeof _this.props.absolute === 'function' ? _this.props.absolute() : root;
+      _this.element = document.createElement('div');
+      if (_this.container) _this.container.appendChild(_this.element);
 
-      if (!root) initRoot()
-      this.container = typeof this.props.absolute === 'function' ? this.props.absolute() : root
-      this.element = document.createElement('div')
-      if (this.container) this.container.appendChild(this.element)
       if (props.getResetPosition) {
-        props.getResetPosition(this.resetPosition.bind(this))
+        props.getResetPosition(_this.resetPosition.bind(_assertThisInitialized(_assertThisInitialized(_this))));
       }
+
+      return _this;
     }
 
-    componentDidMount() {
+    var _proto = AbsoluteList.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
       if (this.props.absolute && !this.container) {
-        this.container = typeof this.props.absolute === 'function' ? this.props.absolute() : root
-        this.container.appendChild(this.element)
+        this.container = typeof this.props.absolute === 'function' ? this.props.absolute() : root;
+        this.container.appendChild(this.element);
+
         if (this.props.focus) {
-          this.forceUpdate()
+          this.forceUpdate();
         }
       }
-    }
+    };
 
-    componentDidUpdate(prevProps) {
-      if (shallowEqual(prevProps.value, this.props.value)) return
-      if (!this.props.focus) this.ajustdoc = false
-      setTimeout(() => {
-        this.forceUpdate()
-      })
-    }
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      if (shallowEqual(prevProps.value, this.props.value)) return;
+      if (!this.props.focus) this.ajustdoc = false;
+      setTimeout(function () {
+        _this2.forceUpdate();
+      });
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      var absolute = this.props.absolute;
+      if (!absolute) return;
 
-    componentWillUnmount() {
-      const { absolute } = this.props
-      if (!absolute) return
       if (this.container) {
-        this.container.removeChild(this.element)
+        this.container.removeChild(this.element);
       }
-    }
+    };
 
-    getPosition(rect) {
-      const { fixed, absolute } = this.props
-      let { position } = this.props
+    _proto.getPosition = function getPosition(rect) {
+      var _this$props = this.props,
+          fixed = _this$props.fixed,
+          absolute = _this$props.absolute;
+      var position = this.props.position;
+      var rtl = isRTL();
+      var style = {
+        position: 'absolute'
+      };
 
-      const rtl = isRTL()
-      const style = {
-        position: 'absolute',
-      }
       if (fixed) {
-        const widthKey = fixed === 'min' ? 'minWidth' : 'width'
-        style[widthKey] = rect.width
+        var widthKey = fixed === 'min' ? 'minWidth' : 'width';
+        style[widthKey] = rect.width;
       }
+
       if (dropdownPosition.includes(position)) {
-        position = position
-          .split('-')
-          .reverse()
-          .join('-')
+        position = position.split('-').reverse().join('-');
       }
 
       if (rtl) {
-        position = getRTLPosition(position)
+        position = getRTLPosition(position);
       }
 
-      let containerScroll = docScroll
-      let containerRect = { left: 0, top: 0, right: 0, bottom: 0 }
-      const { container } = this
+      var containerScroll = docScroll;
+      var containerRect = {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      };
+      var container = this.container;
+
       if (typeof absolute === 'function' && container) {
-        containerRect = container.getBoundingClientRect()
+        containerRect = container.getBoundingClientRect();
         containerScroll = {
           left: container.scrollLeft,
-          top: container.scrollTop,
-        }
+          top: container.scrollTop
+        };
       }
-      this.containerRect = containerRect
+
+      this.containerRect = containerRect;
 
       if (listPosition.includes(position)) {
-        style.left = rect.left - containerRect.left + containerScroll.left
+        style.left = rect.left - containerRect.left + containerScroll.left;
+
         if (rtl) {
-          style.left += rect.width
+          style.left += rect.width;
         }
+
         if (position === 'drop-down') {
-          style.top = rect.top - containerRect.top + rect.height + containerScroll.top
+          style.top = rect.top - containerRect.top + rect.height + containerScroll.top;
         } else {
-          style.bottom = -(rect.top - containerRect.top + containerScroll.top)
+          style.bottom = -(rect.top - containerRect.top + containerScroll.top);
         }
       } else if (pickerPosition.includes(position)) {
-        const [h, v] = position.split('-')
+        var _position$split = position.split('-'),
+            h = _position$split[0],
+            v = _position$split[1];
+
         if (h === 'left') {
-          style.left = rect.left - containerRect.left + containerScroll.left
+          style.left = rect.left - containerRect.left + containerScroll.left;
         } else {
-          style.left = rect.right - containerRect.right + containerScroll.left
-          style.transform = 'translateX(-100%)'
+          style.left = rect.right - containerRect.right + containerScroll.left;
+          style.transform = 'translateX(-100%)';
         }
+
         if (v === 'bottom') {
-          style.top = rect.bottom - containerRect.bottom + containerScroll.top + PICKER_V_MARGIN
+          style.top = rect.bottom - containerRect.bottom + containerScroll.top + PICKER_V_MARGIN;
         } else {
-          style.top = rect.top - containerRect.top + containerScroll.top - PICKER_V_MARGIN
-          style.transform = style.transform ? 'translate(-100%, -100%)' : 'translateY(-100%)'
+          style.top = rect.top - containerRect.top + containerScroll.top - PICKER_V_MARGIN;
+          style.transform = style.transform ? 'translate(-100%, -100%)' : 'translateY(-100%)';
         }
       }
-      return style
-    }
 
-    getStyle() {
-      const { parentElement, scrollElement, focus } = this.props
-      const lazyResult = { focus, style: this.lastStyle }
-      if (!focus) return lazyResult
-      let style = {}
+      return style;
+    };
+
+    _proto.getStyle = function getStyle() {
+      var _this$props2 = this.props,
+          parentElement = _this$props2.parentElement,
+          scrollElement = _this$props2.scrollElement,
+          focus = _this$props2.focus;
+      var lazyResult = {
+        focus: focus,
+        style: this.lastStyle
+      };
+      if (!focus) return lazyResult;
+      var style = {};
+
       if (parentElement) {
-        const rect = parentElement.getBoundingClientRect()
-        const scrollRect = scrollElement ? scrollElement.getBoundingClientRect() : {}
-
-        if (
-          rect.bottom < scrollRect.top ||
-          rect.top > scrollRect.bottom ||
-          rect.right < scrollRect.left ||
-          rect.left > scrollRect.right
-        ) {
-          return { focus: false, style: this.lastStyle }
+        var rect = parentElement.getBoundingClientRect();
+        var scrollRect = scrollElement ? scrollElement.getBoundingClientRect() : {};
+
+        if (rect.bottom < scrollRect.top || rect.top > scrollRect.bottom || rect.right < scrollRect.left || rect.left > scrollRect.right) {
+          return {
+            focus: false,
+            style: this.lastStyle
+          };
         }
-        style = this.getPosition(rect)
+
+        style = this.getPosition(rect);
       }
 
-      if (shallowEqual(style, this.lastStyle)) return lazyResult
+      if (shallowEqual(style, this.lastStyle)) return lazyResult;
+      this.lastStyle = style;
+      return {
+        focus: focus,
+        style: style
+      };
+    };
 
-      this.lastStyle = style
-      return { focus, style }
-    }
+    _proto.resetPosition = function resetPosition(clean) {
+      var _this$props3 = this.props,
+          focus = _this$props3.focus,
+          parentElement = _this$props3.parentElement;
+      if (!this.el || !focus || this.ajustdoc && !clean) return;
+      var pos = this.el.getBoundingClientRect();
+      var left = pos.left;
 
-    resetPosition(clean) {
-      const { focus, parentElement } = this.props
-      if (!this.el || !focus || (this.ajustdoc && !clean)) return
-      const pos = this.el.getBoundingClientRect()
-      let { left } = pos
       if (parentElement) {
         // because the position changes
         // eslint-disable-next-line prefer-destructuring
-        left = parentElement.getBoundingClientRect().left
+        left = parentElement.getBoundingClientRect().left;
       }
-      const containerRect = this.containerRect || { left: 0, width: 0 }
-      const overdoc = left - containerRect.left + pos.width > (containerRect.width || docSize.width)
-      if (this.state.overdoc === overdoc) return
-      this.ajustdoc = true
+
+      var containerRect = this.containerRect || {
+        left: 0,
+        width: 0
+      };
+      var overdoc = left - containerRect.left + pos.width > (containerRect.width || docSize.width);
+      if (this.state.overdoc === overdoc) return;
+      this.ajustdoc = true;
       this.setState({
-        overdoc,
-      })
-    }
+        overdoc: overdoc
+      });
+    };
 
-    handleRef(ref) {
-      this.el = ref
-    }
+    _proto.handleRef = function handleRef(ref) {
+      this.el = ref;
+    };
 
-    renderList() {
-      const {
-        parentElement,
-        absolute,
-        focus,
-        rootClass,
-        position,
-        scrollLeft,
-        scrollTop,
-        scrollElement,
-        style = {},
-        zIndex,
-        getResetPosition,
-        autoAdapt: ignore,
-        ...props
-      } = this.props
-      const parsed = parseInt(zIndex, 10)
-      if (!Number.isNaN(parsed)) style.zIndex = parsed
-      const mergeStyle = Object.assign({}, style, this.state.overdoc ? { right: 0, left: 'auto' } : undefined)
-      return <List getRef={this.handleRef} {...props} focus={focus} style={mergeStyle} />
-    }
+    _proto.renderList = function renderList() {
+      var _this$props4 = this.props,
+          parentElement = _this$props4.parentElement,
+          absolute = _this$props4.absolute,
+          focus = _this$props4.focus,
+          rootClass = _this$props4.rootClass,
+          position = _this$props4.position,
+          scrollLeft = _this$props4.scrollLeft,
+          scrollTop = _this$props4.scrollTop,
+          scrollElement = _this$props4.scrollElement,
+          _this$props4$style = _this$props4.style,
+          style = _this$props4$style === void 0 ? {} : _this$props4$style,
+          zIndex = _this$props4.zIndex,
+          getResetPosition = _this$props4.getResetPosition,
+          ignore = _this$props4.autoAdapt,
+          props = _objectWithoutPropertiesLoose(_this$props4, ["parentElement", "absolute", "focus", "rootClass", "position", "scrollLeft", "scrollTop", "scrollElement", "style", "zIndex", "getResetPosition", "autoAdapt"]);
+
+      var parsed = parseInt(zIndex, 10);
+      if (!Number.isNaN(parsed)) style.zIndex = parsed;
+      var mergeStyle = Object.assign({}, style, this.state.overdoc ? {
+        right: 0,
+        left: 'auto'
+      } : undefined);
+      return React.createElement(List, _extends({
+        getRef: this.handleRef
+      }, props, {
+        focus: focus,
+        style: mergeStyle
+      }));
+    };
 
-    render() {
-      const { autoAdapt } = this.props
-      setTimeout(() => {
-        this.resetPosition(autoAdapt)
-      })
+    _proto.render = function render() {
+      var _this3 = this;
+
+      var autoAdapt = this.props.autoAdapt;
+      setTimeout(function () {
+        _this3.resetPosition(autoAdapt);
+      });
 
       if (!this.props.absolute) {
-        return this.renderList()
+        return this.renderList();
       }
-      if (!this.container) return null
-      const {
-        parentElement,
-        rootClass,
-        absolute,
-        position,
-        scrollLeft,
-        scrollTop,
-        scrollElement,
-        autoClass,
-        zIndex,
-        // do not need the getUpdate
-        getResetPosition,
-        // do not need the value
-        value,
-        autoAdapt: ignore,
-        ...props
-      } = this.props
-      const mergeClass = classnames(listClass('absolute-wrapper'), rootClass, autoClass)
-      const { focus, style } = props.focus ? this.getStyle() : { style: this.lastStyle }
-      this.element.className = mergeClass
-      const mergeStyle = Object.assign(
-        {},
-        style,
-        props.style,
-        this.state.overdoc ? { right: 0, left: 'auto' } : undefined
-      )
-      if (zIndex || typeof zIndex === 'number') mergeStyle.zIndex = parseInt(zIndex, 10)
-      return ReactDOM.createPortal(
-        <List getRef={this.handleRef} {...props} focus={focus} style={mergeStyle} />,
-        this.element
-      )
-    }
-  }
+
+      if (!this.container) return null;
+
+      var _this$props5 = this.props,
+          parentElement = _this$props5.parentElement,
+          rootClass = _this$props5.rootClass,
+          absolute = _this$props5.absolute,
+          position = _this$props5.position,
+          scrollLeft = _this$props5.scrollLeft,
+          scrollTop = _this$props5.scrollTop,
+          scrollElement = _this$props5.scrollElement,
+          autoClass = _this$props5.autoClass,
+          zIndex = _this$props5.zIndex,
+          getResetPosition = _this$props5.getResetPosition,
+          value = _this$props5.value,
+          ignore = _this$props5.autoAdapt,
+          props = _objectWithoutPropertiesLoose(_this$props5, ["parentElement", "rootClass", "absolute", "position", "scrollLeft", "scrollTop", "scrollElement", "autoClass", "zIndex", "getResetPosition", "value", "autoAdapt"]);
+
+      var mergeClass = classnames(listClass('absolute-wrapper'), rootClass, autoClass);
+
+      var _ref = props.focus ? this.getStyle() : {
+        style: this.lastStyle
+      },
+          focus = _ref.focus,
+          style = _ref.style;
+
+      this.element.className = mergeClass;
+      var mergeStyle = Object.assign({}, style, props.style, this.state.overdoc ? {
+        right: 0,
+        left: 'auto'
+      } : undefined);
+      if (zIndex || typeof zIndex === 'number') mergeStyle.zIndex = parseInt(zIndex, 10);
+      return ReactDOM.createPortal(React.createElement(List, _extends({
+        getRef: this.handleRef
+      }, props, {
+        focus: focus,
+        style: mergeStyle
+      })), this.element);
+    };
+
+    return AbsoluteList;
+  }(Component);
 
   AbsoluteList.propTypes = {
     focus: PropTypes.bool,
-    fixed: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), // same width with parentElement
+    fixed: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    // same width with parentElement
     parentElement: PropTypes.object,
     position: PropTypes.string,
     absolute: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
@@ -263,11 +331,7 @@ export default function(List) {
     autoClass: PropTypes.string,
     value: PropTypes.any,
     getResetPosition: PropTypes.func,
-    autoAdapt: PropTypes.bool,
-  }
-
-  return compose(
-    scrollConsumer,
-    zIndexConsumer
-  )(AbsoluteList)
-}
+    autoAdapt: PropTypes.bool
+  };
+  return compose(scrollConsumer, zIndexConsumer)(AbsoluteList);
+}