shineout 1.12.2 → 1.12.3

package/esm/Message/Container.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { MessageProps } from './Props';
+declare type Message = {
+    id: string;
+    type: 'success' | 'info' | 'warning' | 'danger';
+    content: React.ReactNode;
+    dismiss: boolean;
+    h: number;
+    title: string;
+    top: number;
+    className: string;
+    position: string;
+    hideClose: boolean;
+    onClose: () => void;
+};
+interface MessageState {
+    messages: Message[];
+}
+declare class Container extends PureComponent<MessageProps, MessageState> {
+    handleClassName: (position: string | undefined, closeMsg: boolean) => string;
+    handleStyle: (closeMsg: boolean, h: number, position?: string) => React.CSSProperties | null;
+    static displayName: string;
+    constructor(props: MessageProps);
+    addMessage(msg: {
+        duration: number;
+    }): any;
+    removeMessage(id: string): void;
+    closeMessageForAnimation(id: string, duration?: number, msgHeight?: number): void;
+    closeEvent(id: string, duration: number): any;
+    render(): JSX.Element[][];
+}
+export default Container;

package/esm/Message/Container.js

@@ -0,0 +1,186 @@
+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 immer from 'immer';
+import { PureComponent } from '../component';
+import Alert from '../Alert';
+import { messageClass } from './styles';
+import { getUidStr } from '../utils/uid';
+
+var Container =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Container, _PureComponent);
+
+  function Container(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClassName", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleStyle", void 0);
+
+    _this.state = {
+      messages: []
+    };
+    _this.removeMessage = _this.removeMessage.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+
+    _this.handleClassName = function (position, closeMsg) {
+      if (position === void 0) {
+        position = 'top';
+      }
+
+      return messageClass('item', "item-" + (closeMsg ? 'dismissed' : 'show') + "-" + position);
+    };
+
+    _this.handleStyle = function (closeMsg, h, position) {
+      if (!closeMsg || h == null) {
+        return null;
+      }
+
+      var styles = {}; // if bottom, switch left or right
+
+      switch (position) {
+        case 'bottom-right':
+        case 'bottom-left':
+          break;
+
+        default:
+          styles = {
+            zIndex: -1,
+            opacity: 0,
+            marginTop: -h
+          };
+          break;
+      }
+
+      return styles;
+    };
+
+    return _this;
+  }
+
+  var _proto = Container.prototype;
+
+  _proto.addMessage = function addMessage(msg) {
+    var _this2 = this;
+
+    var id = getUidStr();
+    this.setState(immer(function (state) {
+      state.messages.push(Object.assign({
+        id: id
+      }, msg));
+    }));
+
+    if (msg.duration > 0) {
+      setTimeout(function () {
+        _this2.setState(immer(function (state) {
+          state.messages.forEach(function (m) {
+            if (m.id === id) {
+              m.dismiss = true;
+            }
+          });
+        }));
+      }, msg.duration * 1000);
+    }
+
+    return this.closeMessageForAnimation.bind(this, id, 200, 200);
+  };
+
+  _proto.removeMessage = function removeMessage(id) {
+    var callback;
+    var messages = this.state.messages.filter(function (m) {
+      if (m.id !== id) return true;
+
+      if (m.onClose) {
+        callback = m.onClose;
+      }
+
+      return false;
+    });
+
+    if (messages.length === 0) {
+      this.props.onDestory();
+    } else {
+      this.setState({
+        messages: messages
+      });
+    }
+
+    if (callback) callback();
+  };
+
+  _proto.closeMessageForAnimation = function closeMessageForAnimation(id, duration, msgHeight) {
+    var _this3 = this;
+
+    if (!duration) {
+      this.removeMessage(id);
+      return;
+    } // duration animation duration time
+
+
+    this.setState(immer(function (state) {
+      state.messages.forEach(function (m) {
+        if (m.id === id) {
+          m.dismiss = true;
+          m.h = (msgHeight || 0) + 20; // messageHeight + messageMargin
+        }
+      });
+    }));
+    setTimeout(function () {
+      _this3.removeMessage(id);
+    }, duration);
+  };
+
+  _proto.closeEvent = function closeEvent(id, duration) {
+    if (duration === 0) {
+      return this.removeMessage.bind(this, id);
+    }
+
+    return undefined;
+  };
+
+  _proto.render = function render() {
+    var _this4 = this;
+
+    var messages = this.state.messages;
+    return [messages.map(function (_ref) {
+      var id = _ref.id,
+          type = _ref.type,
+          content = _ref.content,
+          dismiss = _ref.dismiss,
+          h = _ref.h,
+          title = _ref.title,
+          top = _ref.top,
+          className = _ref.className,
+          position = _ref.position,
+          hideClose = _ref.hideClose;
+      return React.createElement("div", {
+        key: id,
+        className: _this4.handleClassName(position, dismiss) + " " + className,
+        style: _this4.handleStyle(dismiss, h, position)
+      }, React.createElement(Alert, {
+        outAnimation: true,
+        className: messageClass('msg'),
+        dismiss: dismiss,
+        hideClose: hideClose,
+        onClose: _this4.closeMessageForAnimation.bind(_this4, id),
+        icon: true,
+        iconSize: title ? 20 : 14,
+        style: {
+          top: top
+        },
+        type: type
+      }, title && React.createElement("h3", null, title), content));
+    })];
+  };
+
+  return Container;
+}(PureComponent);
+
+_defineProperty(Container, "displayName", void 0);
+
+Container.displayName = 'ShineoutMessage';
+export default Container;

package/esm/Message/Props.d.ts

@@ -0,0 +1,55 @@
+export declare type MessageType = 'default' | 'success' | 'info' | 'warning' | 'danger';
+export declare type PositionType = 'top' | 'middle' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface MessageOptions {
+    /**
+     * extend className
+     *
+     * 类名
+     *
+     * default: -
+     */
+    className?: string;
+    /**
+     * The callback function when the message is closed.
+     *
+     * 关闭后回调事件
+     *
+     * default: -
+     */
+    onClose?: () => void;
+    /**
+     * The position where the message display
+     *
+     * 消息显示的位置
+     *
+     * default: top
+     */
+    position?: 'top' | 'middle' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * title
+     *
+     * 标题文字
+     *
+     * default: -
+     */
+    title?: string;
+    /**
+     * show close button
+     *
+     * 是否隐藏关闭按钮
+     *
+     * default: false
+     */
+    hideClose?: boolean;
+    /**
+     * Distance from the top
+     *
+     * 距离顶部的距离
+     *
+     * default: -
+     */
+    top?: string;
+}
+export interface MessageProps {
+    onDestory: () => void;
+}

package/esm/Message/Props.js

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

package/esm/Message/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { MessageOptions, PositionType } from './Props';
+declare const _default: {
+    show: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    success: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    info: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    warn: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    warning: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    danger: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    error: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<void>;
+    close: (key?: PositionType | undefined) => void;
+    setOptions: (options: MessageOptions) => void;
+};
+export default _default;

package/esm/Message/index.js

@@ -0,0 +1,54 @@
+import { destroy, getComponent } from './messager';
+var defaultOptions = {};
+
+var create = function create(type) {
+  return function (content, duration, options) {
+    var mo = Object.assign({}, defaultOptions, options);
+    duration = [duration, defaultOptions.duration, 3].find(function (d) {
+      return typeof d === 'number';
+    });
+    var onClose = mo.onClose,
+        _mo$position = mo.position,
+        position = _mo$position === void 0 ? 'top' : _mo$position,
+        title = mo.title,
+        _mo$className = mo.className,
+        className = _mo$className === void 0 ? '' : _mo$className,
+        _mo$top = mo.top,
+        top = _mo$top === void 0 ? 'auto' : _mo$top,
+        hideClose = mo.hideClose;
+    return getComponent(position).then(function (messager) {
+      return messager.addMessage({
+        content: content,
+        duration: duration,
+        type: type,
+        onClose: onClose,
+        title: title,
+        className: className,
+        top: top,
+        position: position,
+        hideClose: hideClose
+      });
+    });
+  };
+};
+
+export default {
+  show: create('default'),
+  success: create('success'),
+  info: create('info'),
+  warn: create('warning'),
+  warning: create('warning'),
+  danger: create('danger'),
+  error: create('danger'),
+  close: function close(key) {
+    if (key) destroy(key);else {
+      ;
+      ['top', 'middle', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function (k) {
+        destroy(k);
+      });
+    }
+  },
+  setOptions: function setOptions(options) {
+    defaultOptions = options;
+  }
+};

package/esm/Message/interface.d.ts

@@ -0,0 +1 @@
+export { MessageOptions as Options } from './Props';

package/esm/Message/interface.js

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

package/esm/Message/messager.d.ts

@@ -0,0 +1,5 @@
+import { PositionType } from './Props';
+export declare function destroy(type: PositionType): void;
+export declare function getComponent(type: PositionType): Promise<{
+    addMessage: (message: any) => void;
+}>;

package/esm/Message/messager.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { messageClass } from './styles';
+import Container from './Container';
+var elements = {};
+var components = {};
+
+function getElement(type) {
+  var div = document.createElement('div');
+  div.className = messageClass('_', type);
+  document.body.appendChild(div);
+  elements[type] = div;
+  return div;
+}
+
+export function destroy(type) {
+  if (elements[type]) {
+    ReactDOM.unmountComponentAtNode(elements[type]);
+    var el = elements[type];
+    if (el && el.parentNode) el.parentNode.removeChild(el);
+    delete elements[type];
+  }
+
+  if (components[type]) {
+    delete components[type];
+  }
+}
+export function getComponent(type) {
+  return new Promise(function (resolve) {
+    var component = components[type];
+
+    if (component) {
+      resolve(component);
+    } else {
+      ReactDOM.render(React.createElement(Container, {
+        ref: function ref(comp) {
+          components[type] = comp;
+          resolve(comp);
+        },
+        onDestory: destroy.bind(null, type)
+      }), getElement(type));
+    }
+  });
+}

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

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

package/esm/Message/styles/index.js

@@ -0,0 +1,6 @@
+import '../../styles/normalize.less'; // rely Alert
+
+import '../../Alert/styles/alert.less';
+import messageLess from './message.less';
+import genaration from '../../utils/classname';
+export var messageClass = genaration(messageLess, 'message');

package/esm/Message/styles/message.less

@@ -0,0 +1,148 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@message-prefix: ~'@{so-prefix}-message';
+@alert-prefix: ~'@{so-prefix}-alert';
+@message-animation-duration: 0.2s;
+
+.@{message-prefix} {
+  position: fixed;
+  z-index: @zindex-popover;
+  left: 50%;
+  max-width: 50%;
+  @media (max-width: @screen-desktop) {
+    max-width: none;
+  }
+
+  @keyframes-left-in: ~'@{message-prefix}-left-in';
+  @keyframes-right-in: ~'@{message-prefix}-right-in';
+
+  @keyframes @keyframes-left-in {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes @keyframes-right-in {
+    0% {
+      transform: translateX(100%);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  &-top {
+    top: 20px;
+    transform: translateX(-50%);
+  }
+
+  &-middle {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-item {
+    display: flex;
+    transition: all @message-animation-duration;
+    z-index: 1;
+  }
+
+  &-item-show-top,
+  &-item-show-middle {
+    animation-name: MoveUpShow;
+    animation-duration: @message-animation-duration;
+  }
+
+  &-item-dismissed-bottom-right {
+    opacity: 0;
+    z-index: -1;
+    transform: translateX(100%);
+  }
+
+  &-item-dismissed-bottom-left {
+    opacity: 0;
+    z-index: -1;
+    transform: translateX(-100%);
+  }
+
+  &-msg {
+    display: inline-flex;
+    margin: 0 auto 20px;
+    border-color: @message-border-color;
+    background: @alert-default-bg;
+    box-shadow: @message-box-shadow;
+    color: @message-text-color;
+    font-weight: @message-font-weight;
+    .@{alert-prefix}-icon {
+      margin-top: @message-icon-margin-top;
+    }
+  }
+
+  &-top-right,
+  &-top-bottom {
+    right: 20px;
+    left: auto;
+
+    .@{message-prefix}-msg {
+      min-width: 340px;
+      padding: 20px;
+      animation: @keyframes-right-in @message-animation-duration ease-out;
+    }
+  }
+
+  &-top-right,
+  &-top-left {
+    top: 20px;
+  }
+
+  &-bottom-right,
+  &-bottom-left {
+    top: auto;
+    bottom: 0px;
+  }
+
+  &-top-right,
+  &-bottom-right {
+    right: 20px;
+    left: auto;
+
+    .@{message-prefix}-msg {
+      min-width: 340px;
+      padding: 20px;
+      animation: @keyframes-right-in @message-animation-duration ease-out;
+    }
+  }
+
+  &-top-left,
+  &-bottom-left {
+    left: 20px;
+
+    .@{message-prefix}-msg {
+      min-width: 340px;
+      padding: 20px;
+      animation: @keyframes-left-in @message-animation-duration ease-out;
+    }
+  }
+
+  .@{alert-prefix}-close svg path {
+    fill: @message-close-color;
+  }
+
+  @keyframes MoveUpShow {
+    0% {
+      transform: translateY(-25px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+}

package/esm/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import { Component } from 'react';
+import Card from '../Card';
+import { ModalProps, Options, ModalFunctionOptions } from './Props';
+declare class Modal extends Component<ModalProps> {
+    static defaultProps: {
+        usePortal: boolean;
+        visible: boolean;
+        esc: boolean;
+        className: string;
+        size: import("../@types/common").RegularAttributes.Size;
+        style: import("react").CSSProperties;
+        type: string;
+    };
+    id: string;
+    visible?: boolean;
+    static displayName: string;
+    static info: (option: ModalFunctionOptions) => () => void;
+    static warn: (option: ModalFunctionOptions) => () => void;
+    static error: (option: ModalFunctionOptions) => () => void;
+    static confirm: (option: ModalFunctionOptions) => () => void;
+    static show: (option: ModalFunctionOptions) => () => void;
+    static success: (option: ModalFunctionOptions) => () => void;
+    static closeAll: () => void;
+    static Submit: typeof Card.Submit;
+    constructor(props: ModalProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: any): any;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    getOption(): Options;
+    handleUpdate(): void;
+    render(): import("react").ReactPortal | null;
+}
+export default Modal;