shineout 1.12.2 → 1.12.3

package/esm/Modal/Modal.js

@@ -0,0 +1,122 @@
+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 _objectSpread from "@babel/runtime/helpers/objectSpread";
+import { Component } from 'react';
+import { defaultProps } from '../utils/proptypes';
+import shallowEqual from '../utils/shallowEqual';
+import { getUidStr } from '../utils/uid';
+import { open, close, destroy } from './events';
+
+var DefaultValue = _objectSpread({}, defaultProps, {
+  usePortal: true,
+  visible: false,
+  esc: true
+});
+
+var Modal =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Modal, _Component);
+
+  function Modal(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "visible", void 0);
+
+    _this.id = getUidStr();
+    _this.visible = props.visible;
+    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Modal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.visible && !this.props.usePortal) {
+      open(this.getOption(), false);
+    }
+  };
+
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (shallowEqual(this.props, nextProps)) return false;
+    if (nextProps.visible) return true;
+    close(_objectSpread({}, this.props, {
+      id: this.id
+    }), this.handleUpdate);
+    return !shallowEqual(this.props, nextProps) && nextProps.visible;
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    if (this.props.visible && !this.props.usePortal) {
+      open(this.getOption(), false);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var usePortal = this.props.usePortal;
+    close({
+      id: this.id
+    });
+    destroy(this.id, !usePortal);
+  };
+
+  _proto.getOption = function getOption() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        usePortal = _this$props.usePortal,
+        visible = _this$props.visible,
+        props = _objectWithoutPropertiesLoose(_this$props, ["children", "usePortal", "visible"]);
+
+    return _objectSpread({}, props, {
+      content: children,
+      id: this.id,
+      from: 'modal' // overwrite props from
+
+    });
+  };
+
+  _proto.handleUpdate = function handleUpdate() {
+    var destroyProps = this.props.destroy;
+    if (destroyProps) this.forceUpdate();
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        usePortal = _this$props2.usePortal,
+        visible = _this$props2.visible;
+    var option = this.getOption();
+    if (visible && usePortal) return open(option, true);
+    return null;
+  };
+
+  return Modal;
+}(Component);
+
+_defineProperty(Modal, "defaultProps", DefaultValue);
+
+_defineProperty(Modal, "displayName", void 0);
+
+_defineProperty(Modal, "info", void 0);
+
+_defineProperty(Modal, "warn", void 0);
+
+_defineProperty(Modal, "error", void 0);
+
+_defineProperty(Modal, "confirm", void 0);
+
+_defineProperty(Modal, "show", void 0);
+
+_defineProperty(Modal, "success", void 0);
+
+_defineProperty(Modal, "closeAll", void 0);
+
+_defineProperty(Modal, "Submit", void 0);
+
+Modal.displayName = 'ShineoutModal';
+export default Modal;

package/esm/Modal/Panel.d.ts

@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react';
+import { ModalPanelProps } from './Props';
+export default class Panel extends PureComponent<ModalPanelProps> {
+    static defaultProps: {
+        top: string;
+        maskCloseAble: boolean;
+        width: number;
+        events: {};
+        drawer: boolean;
+        className: string;
+        size: import("../@types/common").RegularAttributes.Size;
+        style: React.CSSProperties;
+        type: string;
+    };
+    static displayName: string;
+    panel: HTMLDivElement | null;
+    handleMaskDown: () => void;
+    handleMaskUp: () => void;
+    maskDownTarget: EventTarget | null;
+    maskUpTarget: EventTarget | null;
+    constructor(props: ModalPanelProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    getShow(): boolean;
+    getStyle(): {
+        position: string;
+    } & {
+        display: string;
+        width: string | number | undefined;
+        height: string | number | undefined;
+        top: string | number | undefined;
+        position: string;
+    } & React.CSSProperties;
+    savePanel: (node: HTMLDivElement) => void;
+    animate(): void;
+    updateOrigin(): void;
+    handleMaskClick(type: 'maskDownTarget' | 'maskUpTarget', e: Event): void;
+    handleClose(e: any): void;
+    renderIcon(): JSX.Element | null;
+    renderTitle(justRenderClassComponent?: boolean): JSX.Element | null;
+    renderContent(): JSX.Element;
+    render(): JSX.Element;
+}

package/esm/Modal/Panel.js

@@ -0,0 +1,293 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import Icons from '../icons';
+import Card from '../Card';
+import { defaultProps } from '../utils/proptypes';
+import { modalClass } from './styles';
+import { Provider } from '../Scroll/context';
+import { Provider as ZProvider } from './context';
+
+var DefaultValue = _objectSpread({}, defaultProps, {
+  top: '10vh',
+  maskCloseAble: true,
+  width: 500,
+  events: {},
+  drawer: false
+});
+
+function setTransformOrigin(node, value) {
+  var style = node.style;
+  style.transformOrigin = value;
+}
+
+var mousePosition = null;
+
+var getClickPosition = function getClickPosition(e) {
+  mousePosition = {
+    x: e.clientX,
+    y: e.clientY
+  };
+  setTimeout(function () {
+    mousePosition = null;
+  }, 100);
+};
+
+document.addEventListener('click', getClickPosition, true);
+
+var Panel =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Panel, _PureComponent);
+
+  function Panel(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "panel", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMaskDown", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMaskUp", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "maskDownTarget", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "maskUpTarget", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "savePanel", function (node) {
+      _this.panel = node;
+    });
+
+    _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMaskDown = _this.handleMaskClick.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'maskDownTarget');
+    _this.handleMaskUp = _this.handleMaskClick.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'maskUpTarget');
+    return _this;
+  }
+
+  var _proto = Panel.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var container = this.props.container;
+    this.updateOrigin();
+    this.animate();
+    var _this$props = this.props,
+        autoFocusButton = _this$props.autoFocusButton,
+        id = _this$props.id;
+    if (!autoFocusButton) return;
+    var el = container.querySelector("#" + id + "-" + autoFocusButton);
+    if (!el) return;
+    el.focus();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    if (this.getShow()) return;
+    this.updateOrigin();
+    this.animate();
+  };
+
+  _proto.getShow = function getShow() {
+    var container = this.props.container;
+    if (container.classList.contains(modalClass('show'))) return true;
+    return false;
+  };
+
+  _proto.getStyle = function getStyle() {
+    var _this$props2 = this.props,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        top = _this$props2.top,
+        position = _this$props2.position,
+        style = _this$props2.style,
+        fullScreen = _this$props2.fullScreen,
+        drawer = _this$props2.drawer;
+    var w = fullScreen ? '100vw' : width;
+    var h = fullScreen ? '100vh' : height;
+    return Object.assign({
+      position: 'absolute'
+    }, position ? {
+      width: drawer && ['left', 'right'].includes(position) ? w : undefined,
+      height: drawer && ['top', 'bottom'].includes(position) ? h : undefined
+    } : {
+      display: 'inline-flex',
+      width: w,
+      height: h,
+      top: fullScreen ? 0 : top,
+      position: 'relative'
+    }, style || {});
+  };
+
+  _proto.animate = function animate() {
+    var _this$props3 = this.props,
+        container = _this$props3.container,
+        position = _this$props3.position;
+    setTimeout(function () {
+      container.classList.add(modalClass('show'));
+      if (!position) container.classList.add(modalClass('start'));
+    });
+  };
+
+  _proto.updateOrigin = function updateOrigin() {
+    var _this$props4 = this.props,
+        position = _this$props4.position,
+        zoom = _this$props4.zoom;
+    if (position || !zoom) return;
+    var node = this.panel;
+    setTransformOrigin(node, '');
+
+    if (node) {
+      if (mousePosition) {
+        var _node$getBoundingClie = node.getBoundingClientRect(),
+            left = _node$getBoundingClie.left,
+            top = _node$getBoundingClie.top;
+
+        var ol = mousePosition.x - left;
+        var ot = mousePosition.y - top;
+        setTransformOrigin(node, ol + "px " + ot + "px");
+      } else {
+        setTransformOrigin(node, '');
+      }
+    }
+  } // eslint-disable-next-line
+  // lockWheel(event) {
+  //   event.preventDefault()
+  // }
+  ;
+
+  _proto.handleMaskClick = function handleMaskClick(type, e) {
+    this[type] = e.target;
+  };
+
+  _proto.handleClose = function handleClose(e) {
+    e.stopPropagation();
+    var _this$props5 = this.props,
+        maskCloseAble = _this$props5.maskCloseAble,
+        onClose = _this$props5.onClose;
+    var target = e.target;
+    if (!maskCloseAble) return;
+    if (this.maskDownTarget !== this.maskUpTarget) return;
+    if (target.matches("." + modalClass('mask')) && onClose) onClose();
+  };
+
+  _proto.renderIcon = function renderIcon() {
+    var type = this.props.type;
+    if (type === 'default') return null;
+    var iconType = type.charAt(0).toUpperCase() + type.slice(1);
+    return Icons[iconType];
+  };
+
+  _proto.renderTitle = function renderTitle(justRenderClassComponent) {
+    if (justRenderClassComponent === void 0) {
+      justRenderClassComponent = false;
+    }
+
+    var _this$props6 = this.props,
+        from = _this$props6.from,
+        title = _this$props6.title;
+    if (!title) return null; // method component
+
+    if (from === 'method') {
+      // if just render class Component, return null
+      if (justRenderClassComponent) return null; // for  method function
+
+      return React.createElement("div", {
+        className: modalClass('title', 'method-title')
+      }, title);
+    } // base Component
+
+
+    var icon = this.renderIcon();
+    return React.createElement(Card.Header, {
+      className: modalClass('title', icon && 'with-icon')
+    }, icon && React.createElement("div", {
+      className: modalClass('icon')
+    }, icon), title);
+  };
+
+  _proto.renderContent = function renderContent() {
+    var _this$props7 = this.props,
+        children = _this$props7.children,
+        noPadding = _this$props7.noPadding,
+        padding = _this$props7.padding,
+        position = _this$props7.position,
+        bodyStyle = _this$props7.bodyStyle,
+        _this$props7$from = _this$props7.from,
+        from = _this$props7$from === void 0 ? null : _this$props7$from;
+    var style = {
+      padding: noPadding === true ? 0 : padding
+    };
+    if (position) style.overflow = 'auto';
+    if (bodyStyle) style = Object.assign(style, bodyStyle);
+    if (!from || from !== 'method') return React.createElement(Card.Body, {
+      style: style
+    }, children);
+    var icon = this.renderIcon();
+    return React.createElement(Card.Body, {
+      className: modalClass('body'),
+      style: style
+    }, icon && React.createElement("div", {
+      className: modalClass('icon')
+    }, icon), this.renderTitle(), React.createElement("div", null, children));
+  };
+
+  _proto.render = function render() {
+    var _this$props8 = this.props,
+        footer = _this$props8.footer,
+        type = _this$props8.type,
+        onClose = _this$props8.onClose,
+        maskCloseAble = _this$props8.maskCloseAble,
+        position = _this$props8.position,
+        moveable = _this$props8.moveable,
+        zoom = _this$props8.zoom,
+        resizable = _this$props8.resizable,
+        hideClose = _this$props8.hideClose,
+        from = _this$props8.from,
+        top = _this$props8.top,
+        events = _this$props8.events,
+        fullScreen = _this$props8.fullScreen;
+    var className = classnames(modalClass('panel', type, position, zoom && !moveable && 'zoom'), this.props.className);
+    var showClose = typeof hideClose === 'boolean' ? !hideClose : maskCloseAble || maskCloseAble === null;
+    var maskStyle = {
+      paddingBottom: fullScreen ? 0 : top
+    };
+    return React.createElement(ZProvider, {
+      value: true
+    }, React.createElement(Provider, {
+      value: {
+        element: undefined
+      }
+    }, React.createElement("div", _extends({}, events, {
+      style: maskStyle,
+      className: modalClass('mask'),
+      onMouseDown: this.handleMaskDown,
+      onMouseUp: this.handleMaskUp,
+      onClick: this.handleClose
+    }), React.createElement(Card, {
+      forwardedRef: this.savePanel,
+      moveable: moveable,
+      resizable: resizable,
+      shadow: true,
+      className: className,
+      style: this.getStyle()
+    }, showClose && React.createElement("a", {
+      className: modalClass('close'),
+      onClick: onClose
+    }, Icons.Close), this.renderTitle(true), this.renderContent(), footer && React.createElement(Card.Footer, {
+      className: modalClass('footer', from),
+      align: "right"
+    }, footer)))));
+  };
+
+  return Panel;
+}(PureComponent);
+
+_defineProperty(Panel, "defaultProps", DefaultValue);
+
+_defineProperty(Panel, "displayName", void 0);
+
+export { Panel as default };
+Panel.displayName = 'ShineoutModalPanel';