shineout 1.7.0 → 1.7.1-beta.3

package/es/Popover/Panel.js

@@ -1,272 +1,327 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { Component } from '../component'
-import { getPosition } from '../utils/dom/popover'
-import { isFunc } from '../utils/is'
-import { getParent } from '../utils/dom/element'
-import { popoverClass } from './styles'
-import { docSize } from '../utils/dom/document'
-import isDOMElement from '../utils/dom/isDOMElement'
-import { Provider as AbsoluteProvider } from '../Table/context'
-import { getRTLPosition } from '../utils/strings'
-import { isRTL } from '../config'
-import { consumer, Provider } from './context'
-import { getUidStr } from '../utils/uid'
-import getCommonContainer from '../utils/dom/popContainer'
-
-const emptyEvent = e => e.stopPropagation()
-
-const getCurrentPosition = position => {
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Component } from '../component';
+import { getPosition } from '../utils/dom/popover';
+import { isFunc } from '../utils/is';
+import { getParent } from '../utils/dom/element';
+import { popoverClass } from './styles';
+import { docSize } from '../utils/dom/document';
+import isDOMElement from '../utils/dom/isDOMElement';
+import { Provider as AbsoluteProvider } from '../Table/context';
+import { getRTLPosition } from '../utils/strings';
+import { isRTL } from '../config';
+import { consumer, Provider } from './context';
+import { getUidStr } from '../utils/uid';
+import getCommonContainer from '../utils/dom/popContainer';
+
+var emptyEvent = function emptyEvent(e) {
+  return e.stopPropagation();
+};
+
+var getCurrentPosition = function getCurrentPosition(position) {
   if (isRTL()) {
-    return getRTLPosition(position)
-  }
-  return position
-}
-
-class Panel extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { show: props.defaultVisible || false }
-    this.isRendered = false
-    this.chain = []
-    this.id = `popover_${getUidStr()}`
-    this.placeholderRef = this.placeholderRef.bind(this)
-    this.clickAway = this.clickAway.bind(this)
-    this.handleShow = this.handleShow.bind(this)
-    this.handleHide = this.handleHide.bind(this)
-    this.setShow = this.setShow.bind(this)
-    this.bindChain = this.bindChain.bind(this)
-    this.handleCancel = this.handleCancel.bind(this)
-
-    this.element = document.createElement('div')
-  }
-
-  componentDidMount() {
-    super.componentDidMount()
-
-    const { bindChain, zIndex } = this.props
-    if (bindChain) bindChain(this.id)
-
-    this.parentElement = this.placeholder.parentElement
-    this.bindEvents()
-    this.container = this.getContainer()
-    this.element.style.zIndex = zIndex
-    this.container.appendChild(this.element)
-
-    if (this.props.visible) this.forceUpdate()
+    return getRTLPosition(position);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.props.visible === true || nextProps.visible === true) return true
-    if (this.state.show === true || nextState.show === true) return true
-    return false
+  return position;
+};
+
+var Panel =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Panel, _Component);
+
+  function Panel(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.state = {
+      show: props.defaultVisible || false
+    };
+    _this.isRendered = false;
+    _this.chain = [];
+    _this.id = "popover_" + getUidStr();
+    _this.placeholderRef = _this.placeholderRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.clickAway = _this.clickAway.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleShow = _this.handleShow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleHide = _this.handleHide.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setShow = _this.setShow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindChain = _this.bindChain.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleCancel = _this.handleCancel.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.element = document.createElement('div');
+    return _this;
   }
 
-  componentDidUpdate(prevProps) {
+  var _proto = Panel.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _Component.prototype.componentDidMount.call(this);
+
+    var _this$props = this.props,
+        bindChain = _this$props.bindChain,
+        zIndex = _this$props.zIndex;
+    if (bindChain) bindChain(this.id);
+    this.parentElement = this.placeholder.parentElement;
+    this.bindEvents();
+    this.container = this.getContainer();
+    this.element.style.zIndex = zIndex;
+    this.container.appendChild(this.element);
+    if (this.props.visible) this.forceUpdate();
+  };
+
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.visible === true || nextProps.visible === true) return true;
+    if (this.state.show === true || nextState.show === true) return true;
+    return false;
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (this.props.trigger !== prevProps.trigger) {
-      this.bindEvents()
+      this.bindEvents();
     }
+
     if (this.props.zIndex !== prevProps.zIndex && this.element) {
-      this.element.style.zIndex = this.props.zIndex
+      this.element.style.zIndex = this.props.zIndex;
     }
-  }
+  };
 
-  componentWillUnmount() {
-    super.componentWillUnmount()
-    this.parentElement.removeEventListener('mouseenter', this.handleShow)
-    this.parentElement.removeEventListener('mouseleave', this.handleHide)
-    this.parentElement.removeEventListener('click', this.handleShow)
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _Component.prototype.componentWillUnmount.call(this);
 
-    document.removeEventListener('click', this.clickAway)
-    document.removeEventListener('mousedown', this.clickAway)
+    this.parentElement.removeEventListener('mouseenter', this.handleShow);
+    this.parentElement.removeEventListener('mouseleave', this.handleHide);
+    this.parentElement.removeEventListener('click', this.handleShow);
+    document.removeEventListener('click', this.clickAway);
+    document.removeEventListener('mousedown', this.clickAway);
+    if (!this.container) return;
 
-    if (!this.container) return
     if (this.container === getCommonContainer()) {
-      this.container.removeChild(this.element)
+      this.container.removeChild(this.element);
     } else {
-      this.container.parentElement.removeChild(this.container)
+      this.container.parentElement.removeChild(this.container);
     }
-  }
-
-  setShow(show) {
-    const { onVisibleChange, mouseEnterDelay, mouseLeaveDelay, trigger } = this.props
-    const delay = show ? mouseEnterDelay : mouseLeaveDelay
-    this.delayTimeout = setTimeout(
-      () => {
-        if (onVisibleChange) onVisibleChange(show)
-        this.setState({ show })
-        if (show && this.props.onOpen) this.props.onOpen()
-        if (!show && this.props.onClose) this.props.onClose()
-      },
-      trigger === 'hover' ? delay : 0
-    )
-  }
-
-  getPositionStr() {
-    let { position } = this.props
-    const { priorityDirection } = this.props
-    if (position) return position
-
-    const rect = this.parentElement.getBoundingClientRect()
-    const horizontalPoint = rect.left + rect.width / 2
-    const verticalPoint = rect.top + rect.height / 2
-    const windowHeight = docSize.height
-    const windowWidth = docSize.width
+  };
+
+  _proto.setShow = function setShow(show) {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        onVisibleChange = _this$props2.onVisibleChange,
+        mouseEnterDelay = _this$props2.mouseEnterDelay,
+        mouseLeaveDelay = _this$props2.mouseLeaveDelay,
+        trigger = _this$props2.trigger;
+    var delay = show ? mouseEnterDelay : mouseLeaveDelay;
+    this.delayTimeout = setTimeout(function () {
+      if (onVisibleChange) onVisibleChange(show);
+
+      _this2.setState({
+        show: show
+      });
+
+      if (show && _this2.props.onOpen) _this2.props.onOpen();
+      if (!show && _this2.props.onClose) _this2.props.onClose();
+    }, trigger === 'hover' ? delay : 0);
+  };
+
+  _proto.getPositionStr = function getPositionStr() {
+    var position = this.props.position;
+    var priorityDirection = this.props.priorityDirection;
+    if (position) return position;
+    var rect = this.parentElement.getBoundingClientRect();
+    var horizontalPoint = rect.left + rect.width / 2;
+    var verticalPoint = rect.top + rect.height / 2;
+    var windowHeight = docSize.height;
+    var windowWidth = docSize.width;
 
     if (priorityDirection === 'horizontal') {
-      if (horizontalPoint > windowWidth / 2) position = 'left'
-      else position = 'right'
+      if (horizontalPoint > windowWidth / 2) position = 'left';else position = 'right';
 
       if (verticalPoint > windowHeight * 0.6) {
-        position += '-bottom'
+        position += '-bottom';
       } else if (verticalPoint < windowHeight * 0.4) {
-        position += '-top'
+        position += '-top';
       }
     } else {
-      if (verticalPoint > windowHeight / 2) position = 'top'
-      else position = 'bottom'
+      if (verticalPoint > windowHeight / 2) position = 'top';else position = 'bottom';
 
       if (horizontalPoint > windowWidth * 0.6) {
-        position += '-right'
+        position += '-right';
       } else if (horizontalPoint < windowWidth * 0.4) {
-        position += '-left'
+        position += '-left';
       }
     }
-    return getCurrentPosition(position)
-  }
 
-  getContainer() {
-    const { getPopupContainer } = this.props
-    let container
-    if (getPopupContainer) container = getPopupContainer()
-    if (container && isDOMElement(container)) {
-      const child = document.createElement('div')
-      child.setAttribute('style', ' position: absolute; top: 0px; left: 0px; width: 100% ')
-      return container.appendChild(child)
-    }
-    return getCommonContainer()
-  }
+    return getCurrentPosition(position);
+  };
 
-  updatePosition(position) {
-    const pos = getPosition(position, this.parentElement, this.container)
-    // eslint-disable-next-line
-    Object.keys(pos).forEach(attr => {
-      this.element.style[attr] = pos[attr]
-    })
-  }
+  _proto.getContainer = function getContainer() {
+    var getPopupContainer = this.props.getPopupContainer;
+    var container;
+    if (getPopupContainer) container = getPopupContainer();
 
-  bindEvents() {
-    const { trigger, clickToCancelDelay, mouseEnterDelay } = this.props
-    if (trigger === 'hover') {
-      this.parentElement.addEventListener('mouseenter', this.handleShow)
-      this.parentElement.addEventListener('mouseleave', this.handleHide)
-      this.element.addEventListener('mouseenter', this.handleShow)
-      this.element.addEventListener('mouseleave', this.handleHide)
-      this.parentElement.removeEventListener('click', this.handleShow)
-      if (clickToCancelDelay && mouseEnterDelay > 0) {
-        this.parentElement.addEventListener('click', this.handleCancel)
-      }
-    } else {
-      this.parentElement.addEventListener('click', this.handleShow)
-      this.parentElement.removeEventListener('click', this.handleCancel)
-      this.parentElement.removeEventListener('mouseenter', this.handleShow)
-      this.parentElement.removeEventListener('mouseleave', this.handleHide)
-      this.element.removeEventListener('mouseenter', this.handleShow)
-      this.element.removeEventListener('mouseleave', this.handleHide)
+    if (container && isDOMElement(container)) {
+      var child = document.createElement('div');
+      child.setAttribute('style', ' position: absolute; top: 0px; left: 0px; width: 100% ');
+      return container.appendChild(child);
     }
-  }
 
-  placeholderRef(el) {
-    this.placeholder = el
-  }
+    return getCommonContainer();
+  };
 
-  clickAway(e) {
-    if (this.parentElement.contains(e.target)) return
-    if (this.element.contains(e.target)) return
-    if (getParent(e.target, `.${popoverClass('_')}`)) return
-    this.handleHide(0)
-  }
+  _proto.updatePosition = function updatePosition(position) {
+    var _this3 = this;
 
-  bindScrollDismiss(show) {
-    const { scrollDismiss } = this.props
-    if (!scrollDismiss) return
-    let target = document
-    if (typeof scrollDismiss === 'function') target = scrollDismiss()
-    const method = show ? target.addEventListener : target.removeEventListener
-    method.call(target, 'scroll', this.handleHide)
-  }
+    var pos = getPosition(position, this.parentElement, this.container); // eslint-disable-next-line
 
-  bindChain(id) {
-    this.chain.push(id)
-  }
+    Object.keys(pos).forEach(function (attr) {
+      _this3.element.style[attr] = pos[attr];
+    });
+  };
 
-  handleShow() {
-    if (this.delayTimeout) clearTimeout(this.delayTimeout)
-    if (this.state.show) return
-    this.bindScrollDismiss(true)
-    document.addEventListener('mousedown', this.clickAway)
-    this.setShow(true)
-  }
+  _proto.bindEvents = function bindEvents() {
+    var _this$props3 = this.props,
+        trigger = _this$props3.trigger,
+        clickToCancelDelay = _this$props3.clickToCancelDelay,
+        mouseEnterDelay = _this$props3.mouseEnterDelay;
 
-  isChildren(el) {
-    for (let i = 0; i < this.chain.length; i++) if (getParent(el, `.${this.chain[i]}`)) return true
-    return false
-  }
-
-  handleCancel() {
-    if (this.delayTimeout) clearTimeout(this.delayTimeout)
-  }
+    if (trigger === 'hover') {
+      this.parentElement.addEventListener('mouseenter', this.handleShow);
+      this.parentElement.addEventListener('mouseleave', this.handleHide);
+      this.element.addEventListener('mouseenter', this.handleShow);
+      this.element.addEventListener('mouseleave', this.handleHide);
+      this.parentElement.removeEventListener('click', this.handleShow);
 
-  handleHide(e) {
-    if (e && this.isChildren(e.relatedTarget)) return
-    if (this.delayTimeout) clearTimeout(this.delayTimeout)
-    document.removeEventListener('mousedown', this.clickAway)
-    this.bindScrollDismiss(false)
-    this.setShow(false)
-  }
+      if (clickToCancelDelay && mouseEnterDelay > 0) {
+        this.parentElement.addEventListener('click', this.handleCancel);
+      }
+    } else {
+      this.parentElement.addEventListener('click', this.handleShow);
+      this.parentElement.removeEventListener('click', this.handleCancel);
+      this.parentElement.removeEventListener('mouseenter', this.handleShow);
+      this.parentElement.removeEventListener('mouseleave', this.handleHide);
+      this.element.removeEventListener('mouseenter', this.handleShow);
+      this.element.removeEventListener('mouseleave', this.handleHide);
+    }
+  };
+
+  _proto.placeholderRef = function placeholderRef(el) {
+    this.placeholder = el;
+  };
+
+  _proto.clickAway = function clickAway(e) {
+    if (this.parentElement.contains(e.target)) return;
+    if (this.element.contains(e.target)) return;
+    if (getParent(e.target, "." + popoverClass('_'))) return;
+    this.handleHide(0);
+  };
+
+  _proto.bindScrollDismiss = function bindScrollDismiss(show) {
+    var scrollDismiss = this.props.scrollDismiss;
+    if (!scrollDismiss) return;
+    var target = document;
+    if (typeof scrollDismiss === 'function') target = scrollDismiss();
+    var method = show ? target.addEventListener : target.removeEventListener;
+    method.call(target, 'scroll', this.handleHide);
+  };
+
+  _proto.bindChain = function bindChain(id) {
+    this.chain.push(id);
+  };
+
+  _proto.handleShow = function handleShow() {
+    if (this.delayTimeout) clearTimeout(this.delayTimeout);
+    if (this.state.show) return;
+    this.bindScrollDismiss(true);
+    document.addEventListener('mousedown', this.clickAway);
+    this.setShow(true);
+  };
+
+  _proto.isChildren = function isChildren(el) {
+    for (var i = 0; i < this.chain.length; i++) {
+      if (getParent(el, "." + this.chain[i])) return true;
+    }
 
-  render() {
-    const { background, border, children, type, visible, showArrow } = this.props
-    const show = typeof visible === 'boolean' ? visible : this.state.show
-    if ((!this.isRendered && !show) || !this.parentElement || !children) {
-      return <noscript ref={this.placeholderRef} />
+    return false;
+  };
+
+  _proto.handleCancel = function handleCancel() {
+    if (this.delayTimeout) clearTimeout(this.delayTimeout);
+  };
+
+  _proto.handleHide = function handleHide(e) {
+    if (e && this.isChildren(e.relatedTarget)) return;
+    if (this.delayTimeout) clearTimeout(this.delayTimeout);
+    document.removeEventListener('mousedown', this.clickAway);
+    this.bindScrollDismiss(false);
+    this.setShow(false);
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        background = _this$props4.background,
+        border = _this$props4.border,
+        children = _this$props4.children,
+        type = _this$props4.type,
+        visible = _this$props4.visible,
+        showArrow = _this$props4.showArrow;
+    var show = typeof visible === 'boolean' ? visible : this.state.show;
+
+    if (!this.isRendered && !show || !this.parentElement || !children) {
+      return React.createElement("noscript", {
+        ref: this.placeholderRef
+      });
     }
 
-    this.isRendered = true
-    const colorStyle = { background, borderColor: border }
-    const innerStyle = Object.assign({}, this.props.style, { background })
-    const position = this.getPositionStr()
-    // eslint-disable-next-line
-    const style = this.element.style
+    this.isRendered = true;
+    var colorStyle = {
+      background: background,
+      borderColor: border
+    };
+    var innerStyle = Object.assign({}, this.props.style, {
+      background: background
+    });
+    var position = this.getPositionStr(); // eslint-disable-next-line
+
+    var style = this.element.style;
+
     if (show) {
       // 先隐藏再设置样式这样可以减少回流
-      style.display = 'none'
-      this.updatePosition(position)
-      if (background) style.background = background
-      if (border) style.borderColor = border
-      style.display = 'block'
+      style.display = 'none';
+      this.updatePosition(position);
+      if (background) style.background = background;
+      if (border) style.borderColor = border;
+      style.display = 'block';
     } else {
-      style.display = 'none'
+      style.display = 'none';
     }
-    this.element.className = classnames(popoverClass('_', position, type), this.props.className, this.id)
-    let childrened = isFunc(children) ? children(this.handleHide) : children
-    if (typeof childrened === 'string') childrened = <span className={popoverClass('text')}>{childrened}</span>
-    return ReactDOM.createPortal(
-      [
-        showArrow && <div key="arrow" className={popoverClass('arrow')} style={colorStyle} />,
-        <div key="content" onClick={emptyEvent} className={popoverClass('content')} style={innerStyle}>
-          <Provider value={this.bindChain}>
-            <AbsoluteProvider value={false}>{childrened}</AbsoluteProvider>
-          </Provider>
-        </div>,
-      ],
-      this.element
-    )
-  }
-}
+
+    this.element.className = classnames(popoverClass('_', position, type), this.props.className, this.id);
+    var childrened = isFunc(children) ? children(this.handleHide) : children;
+    if (typeof childrened === 'string') childrened = React.createElement("span", {
+      className: popoverClass('text')
+    }, childrened);
+    return ReactDOM.createPortal([showArrow && React.createElement("div", {
+      key: "arrow",
+      className: popoverClass('arrow'),
+      style: colorStyle
+    }), React.createElement("div", {
+      key: "content",
+      onClick: emptyEvent,
+      className: popoverClass('content'),
+      style: innerStyle
+    }, React.createElement(Provider, {
+      value: this.bindChain
+    }, React.createElement(AbsoluteProvider, {
+      value: false
+    }, childrened)))], this.element);
+  };
+
+  return Panel;
+}(Component);
 
 Panel.propTypes = {
   background: PropTypes.string,
@@ -290,16 +345,14 @@ Panel.propTypes = {
   showArrow: PropTypes.bool,
   bindChain: PropTypes.func,
   zIndex: PropTypes.number,
-  clickToCancelDelay: PropTypes.bool,
-}
-
+  clickToCancelDelay: PropTypes.bool
+};
 Panel.defaultProps = {
   background: '',
   trigger: 'hover',
   mouseEnterDelay: 0,
   mouseLeaveDelay: 0,
   priorityDirection: 'vertical',
-  showArrow: true,
-}
-
-export default consumer(Panel)
+  showArrow: true
+};
+export default consumer(Panel);

package/es/Popover/context.js

@@ -1,13 +1,16 @@
-import React from 'react'
-import createReactContext from '../context'
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import createReactContext from '../context';
+var context = createReactContext();
+var Consumer = context.Consumer; // eslint-disable-next-line
 
-const context = createReactContext()
-
-const { Consumer } = context
-
-// eslint-disable-next-line
-export const Provider = context.Provider
-
-export const consumer = Origin => props => (
-  <Consumer>{bindChain => <Origin {...props} bindChain={bindChain} />}</Consumer>
-)
+export var Provider = context.Provider;
+export var consumer = function consumer(Origin) {
+  return function (props) {
+    return React.createElement(Consumer, null, function (bindChain) {
+      return React.createElement(Origin, _extends({}, props, {
+        bindChain: bindChain
+      }));
+    });
+  };
+};