shineout 1.12.2 → 1.12.3

package/esm/Popover/Panel.js

@@ -0,0 +1,373 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import ReactDOM from 'react-dom';
+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 { consumer, Provider } from './context';
+import { getUidStr } from '../utils/uid';
+import getCommonContainer from '../utils/dom/popContainer';
+
+var emptyEvent = function emptyEvent(e) {
+  return e.stopPropagation();
+};
+
+var DefaultProps = {
+  background: '',
+  trigger: 'hover',
+  mouseEnterDelay: 0,
+  mouseLeaveDelay: 0,
+  priorityDirection: 'vertical',
+  showArrow: true
+};
+
+var Panel =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Panel, _Component);
+
+  function Panel(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isRendered", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "chain", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "parentElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholder", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "container", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "delayTimeout", void 0);
+
+    _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.createContainer = _this.createContainer.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.element = document.createElement('div');
+    return _this;
+  }
+
+  var _proto = Panel.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _Component.prototype.componentDidMount.call(this);
+
+    var bindChain = this.props.bindChain;
+    if (bindChain) bindChain(this.id);
+    this.parentElement = this.placeholder.parentElement;
+    this.bindEvents();
+
+    if (this.props.visible) {
+      this.createContainer();
+      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();
+    }
+
+    if (this.props.zIndex !== prevProps.zIndex && this.element) {
+      this.element.style.zIndex = String(this.props.zIndex);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _Component.prototype.componentWillUnmount.call(this);
+
+    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 === getCommonContainer()) {
+      if (this.element && this.element.parentNode) {
+        this.element.parentNode.removeChild(this.element);
+      }
+    } else if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  };
+
+  _proto.setShow = function setShow(show) {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        onVisibleChange = _this$props.onVisibleChange,
+        mouseEnterDelay = _this$props.mouseEnterDelay,
+        mouseLeaveDelay = _this$props.mouseLeaveDelay,
+        trigger = _this$props.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();
+
+      if (show) {
+        _this2.bindScrollDismiss(true);
+
+        document.addEventListener('mousedown', _this2.clickAway);
+      } else {
+        _this2.bindScrollDismiss(false);
+
+        document.removeEventListener('mousedown', _this2.clickAway);
+      }
+    }, 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;
+    var tempPriorityDirection = priorityDirection;
+
+    if (priorityDirection === 'auto') {
+      var maxX = Math.max(rect.left, windowWidth - rect.left - rect.width);
+      var maxY = Math.max(rect.top, windowHeight - rect.top - rect.height);
+      tempPriorityDirection = maxX > maxY ? 'horizontal' : 'vertical';
+    }
+
+    if (tempPriorityDirection === 'horizontal') {
+      if (horizontalPoint > windowWidth / 2) position = 'left';else position = 'right';
+
+      if (verticalPoint > windowHeight * 0.6) {
+        position += '-bottom';
+      } else if (verticalPoint < windowHeight * 0.4) {
+        position += '-top';
+      }
+    } else {
+      if (verticalPoint > windowHeight / 2) position = 'top';else position = 'bottom';
+
+      if (horizontalPoint > windowWidth * 0.6) {
+        position += '-right';
+      } else if (horizontalPoint < windowWidth * 0.4) {
+        position += '-left';
+      }
+    }
+
+    return position;
+  };
+
+  _proto.getContainer = function getContainer() {
+    var getPopupContainer = this.props.getPopupContainer;
+    var container;
+    if (getPopupContainer) container = getPopupContainer();
+
+    if (container && isDOMElement(container)) {
+      var child = document.createElement('div');
+      child.setAttribute('style', ' position: absolute; top: 0px; left: 0px; width: 100% ');
+      return container.appendChild(child);
+    }
+
+    return getCommonContainer();
+  };
+
+  _proto.createContainer = function createContainer() {
+    var zIndex = this.props.zIndex;
+
+    if (!this.container) {
+      this.container = this.getContainer();
+      this.element.style.zIndex = String(zIndex);
+      this.container.appendChild(this.element);
+    }
+  };
+
+  _proto.updatePosition = function updatePosition(position) {
+    var _this3 = this;
+
+    var pos = getPosition(position, this.parentElement, this.container); // eslint-disable-next-line
+
+    Object.keys(pos).forEach(function (attr) {
+      _this3.element.style[attr] = String(pos[attr]);
+    });
+  };
+
+  _proto.bindEvents = function bindEvents() {
+    var _this$props2 = this.props,
+        trigger = _this$props2.trigger,
+        clickToCancelDelay = _this$props2.clickToCancelDelay,
+        _this$props2$mouseEnt = _this$props2.mouseEnterDelay,
+        mouseEnterDelay = _this$props2$mouseEnt === void 0 ? DefaultProps.mouseEnterDelay : _this$props2$mouseEnt;
+
+    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);
+    }
+  };
+
+  _proto.placeholderRef = function placeholderRef(el) {
+    this.placeholder = el;
+  };
+
+  _proto.clickAway = function clickAway(e) {
+    var target = e.target;
+    if (this.parentElement.contains(target)) return;
+    if (this.element.contains(target)) return;
+    if (getParent(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() || document;
+    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() {
+    this.createContainer();
+    if (this.delayTimeout) clearTimeout(this.delayTimeout);
+    if (this.state.show) return;
+    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;
+    }
+
+    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);
+    this.setShow(false);
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        background = _this$props3.background,
+        border = _this$props3.border,
+        children = _this$props3.children,
+        type = _this$props3.type,
+        visible = _this$props3.visible,
+        showArrow = _this$props3.showArrow,
+        useTextStyle = _this$props3.useTextStyle;
+    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;
+    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';
+    } else {
+      style.display = 'none';
+    }
+
+    this.element.className = classnames(popoverClass('_', position, type), this.props.className, this.id);
+    var childrened = isFunc(children) ? children(this.handleHide) : children;
+    if (typeof childrened === 'string' || useTextStyle) 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);
+
+_defineProperty(Panel, "defaultProps", DefaultProps);
+
+export default consumer(Panel);

package/esm/Popover/Props.d.ts

@@ -0,0 +1,237 @@
+import { ComponentType, ReactNode } from 'react';
+import { StandardProps } from '../@types/common';
+import { ButtonType } from '../Button/Props';
+import { AlertProps } from '../Alert/Props';
+export interface PopoverContextValue {
+    (id: string): void;
+}
+export interface PopoverProviderProps {
+    bindChain: PopoverContextValue;
+}
+export declare type GetPopoverConsumerProps<P> = Omit<P, keyof PopoverProviderProps>;
+export declare type PopoverPosition = 'top-left' | 'top' | 'top-right' | 'left-top' | 'left' | 'left-bottom' | 'right-top' | 'right' | 'right-bottom' | 'bottom-left' | 'bottom' | 'bottom-right' | 'cover';
+export declare type PopType = 'success' | 'info' | 'warning' | 'danger';
+export declare type PriorityDirection = 'vertical' | 'horizontal' | 'auto';
+export interface PanelProps extends StandardProps, PopoverProviderProps {
+    /**
+     * Pop-up background-color(with arrows)
+     *
+     * 弹出层背景色（含箭头）
+     *
+     * default: '#fff'
+     */
+    background?: string;
+    /**
+     * The color of pop-up border(with arrows)
+     *
+     * 弹出层边框颜色（含箭头）
+     *
+     * default: '#dee2e6'
+     */
+    border?: string;
+    /**
+     * Pop-up content.
+     *
+     * 弹出显示内容，如果内容为函数，则参数是主动关闭操作
+     *
+     * default: required
+     */
+    children?: ReactNode | ((close: ((e?: MouseEvent) => void)) => ReactNode);
+    /**
+     * Callback event when close.
+     *
+     * Popover 关闭时回调事件
+     *
+     * default: -
+     */
+    onClose?: () => void;
+    /**
+     * Callback event when open.
+     *
+     * Popover 弹出回调事件
+     *
+     * default: -
+     */
+    onOpen?: () => void;
+    /**
+     * The position of pop-up layer
+     *
+     * 弹出层位置
+     *
+     * default: 'top'
+     */
+    position?: PopoverPosition;
+    /**
+     * type of show
+     *
+     * 触发方式
+     *
+     * default: 'hover'
+     */
+    trigger?: 'click' | 'hover';
+    /**
+     * type of popover
+     *
+     * 类型
+     *
+     * default: none
+     */
+    type?: PopType;
+    /**
+     * is visible (controlled)
+     *
+     * 是否显示(受控)
+     *
+     * default: -
+     */
+    visible?: boolean;
+    /**
+     * the event of visible change
+     *
+     * 显示隐藏改变时事件
+     *
+     * default: -
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * default visible
+     *
+     * 默认是否显示
+     *
+     * default: -
+     */
+    defaultVisible?: boolean;
+    /**
+     * the show delay of mouseenter(ms)
+     *
+     * 移入显示延迟(毫秒)
+     *
+     * default: 0
+     */
+    mouseEnterDelay?: number;
+    /**
+     * the hidden delay of mouseleave (ms)
+     *
+     * 移除隐藏延迟(毫秒)
+     *
+     * default: 0
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * Popup location priority, default is left and right priority, only valid when position is not set, Options: ['vertical', 'horizontal']
+     *
+     * 弹出位置优先级, 默认为左右优先, 只在未设置 position 时生效, 可选值['vertical', 'horizontal', 'auto']
+     *
+     * default: 'vertical'
+     */
+    priorityDirection?: PriorityDirection;
+    /**
+     * Custom Popover container, override the default behavior which is rendering under the body, () => DOMElement
+     *
+     * 自定义Popover容器，覆盖默认渲染在body下的行为, () => DOMElement
+     *
+     * default: none
+     */
+    getPopupContainer?: () => HTMLElement | null;
+    /**
+     * scroll to dismiss, return el to order scroller
+     *
+     * 滚动来关闭气泡框，如果需要指定滚动元素，则通过函数返回
+     *
+     * default: false
+     */
+    scrollDismiss?: boolean | (() => HTMLElement | null);
+    /**
+     * show arrow
+     *
+     * 是否显示箭头
+     *
+     * default: true
+     */
+    showArrow?: boolean;
+    /**
+     * z-index of popover
+     *
+     * Popover 层级
+     *
+     * default: 1060
+     */
+    zIndex?: number;
+    /**
+     * Cancel the popup after clicking the element in mouseEnterDelay
+     *
+     * mouseEnterDelay 内点击元素后取消弹出
+     *
+     * default: false
+     */
+    clickToCancelDelay?: boolean;
+    /**
+     * using inner styles
+     *
+     * 使用内置文本样式
+     *
+     * default: -
+     */
+    useTextStyle?: boolean;
+}
+export interface PopoverConfirmProps extends Omit<PopoverProps, 'children' | 'type'> {
+    /**
+     * button text
+     *
+     * 按钮文字
+     *
+     * default: { ok: 'Ok', cancel: 'Cancel' }
+     */
+    text?: {
+        ok?: string;
+        cancel?: string;
+    };
+    /**
+     * ok button click callback, will close tooltip while returned promise resolve
+     *
+     * 点击确定按钮时触发事件，返回 Promise 时，会在 Promise resolve 后关闭 Tooltip
+     *
+     * default: none
+     */
+    onOk?: () => void | Promise<any>;
+    /**
+     * cancel button click callback, will close tooltip while returned promise resolve
+     *
+     * 点击取消按钮时触发事件，返回 Promise 时，会在 Promise resolve 后关闭 Tooltip
+     *
+     * default: none
+     */
+    onCancel?: () => void | Promise<any>;
+    /**
+     * ok button's type, same with button type
+     *
+     * 确认按钮的类型，与按钮类型相同
+     *
+     * default: danger
+     */
+    okType?: ButtonType;
+    /**
+     * ok button's type, same with button type
+     *
+     * 确认按钮的类型，与按钮类型相同
+     *
+     * default: danger
+     */
+    icon?: AlertProps['icon'];
+    children: ReactNode;
+    /**
+     * same with Alert type
+     *
+     * 类型同 Alert type 属性
+     *
+     * default: confirmwarning
+     */
+    type?: AlertProps['type'];
+}
+export declare type PopoverProps = GetPopoverConsumerProps<PanelProps>;
+export interface PopoverContentProps extends Omit<PopoverProps, 'useTextStyle'> {
+}
+export declare type PopoverType = ComponentType<PopoverProps> & {
+    Confirm: ComponentType<PopoverConfirmProps>;
+    Content: ComponentType<PopoverContentProps>;
+};

package/esm/Popover/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/Popover/context.d.ts

@@ -0,0 +1,4 @@
+import React, { ComponentType } from 'react';
+import { GetPopoverConsumerProps, PopoverContextValue } from './Props';
+export declare const Provider: React.Provider<PopoverContextValue | undefined>;
+export declare const consumer: <P extends {}>(Origin: React.ComponentType<P>) => (props: GetPopoverConsumerProps<P>) => JSX.Element;

package/esm/Popover/context.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import createReactContext from '../context';
+var context = createReactContext(undefined);
+var Consumer = context.Consumer; // eslint-disable-next-line
+
+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
+      }));
+    });
+  };
+};

package/esm/Popover/index.d.ts

@@ -0,0 +1,3 @@
+import { PopoverType } from './Props';
+declare const _default: PopoverType;
+export default _default;

package/esm/Popover/index.js

@@ -0,0 +1,10 @@
+import _Popover from './Panel';
+import Confirm from './Confirm';
+import Content from './Content';
+var Popover = _Popover;
+Popover.displayName = 'ShineoutPopover';
+Popover.Confirm = Confirm;
+Popover.Confirm.displayName = 'ShineoutPopoverConfirm';
+Popover.Content = Content;
+Popover.Content.displayName = 'ShineoutPopoverContent';
+export default Popover;

package/esm/Popover/interface.d.ts

@@ -0,0 +1 @@
+export { PopoverProps as Props, PopoverConfirmProps as ConfirmProps, PopoverContentProps as ContentProps, } from './Props';

package/esm/Popover/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Popover/styles/index.d.ts

@@ -0,0 +1 @@
+export const popoverClass: (...args: any) => string;

package/esm/Popover/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import popoverLess from './popover.less';
+import genaration from '../../utils/classname';
+export var popoverClass = genaration(popoverLess, 'popover');