diginet-core-ui 1.3.24

package/components/popup/proposals_popup.js

@@ -0,0 +1,364 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import { Button } from '../';
+import Icon, { Close, Approval } from '../../icons';
+import TextInput from '../form-control/text-input';
+const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  clearAble,
+  pressESCToClose,
+  readOnly,
+  disabled,
+  style,
+  popupStyle,
+  anchor,
+  anchorOrigin,
+  transformOrigin,
+  refs,
+  onClose,
+  onConfirm,
+  onCancel,
+  value,
+  defaultValue,
+  type,
+  viewType,
+  error,
+  label,
+  buttonText,
+  placeholder,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const PopupContainer = css`
+        display: flex;
+        position: fixed;
+        width: 80%;
+        max-width: 480px;
+        z-index: 1000;
+        transform: scale(0);
+        transition: transform 0.2s linear;
+        &.open {
+            transform: scale(1);
+        }
+    `;
+  const PopupFrame = css`
+        display: block;
+        align-items: baseline;
+        position: relative;
+        background: #FFFFFF;
+        width: 100%;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+        padding: 24px 16px;
+    `;
+  const PopupContent = css`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0 24px;
+        box-sizing: border-box;
+    `;
+  const PopupInput = css`
+        display: block;
+        width: 100%;
+    `;
+  const PopupAction = css`
+        display: block;
+        margin-left: auto;
+    `;
+  const PopupClearIcon = css`
+        display: block;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        top: 16px;
+        right: 24px;
+        color: ${theme.colors.secondary};
+        cursor: pointer;
+        &:hover {
+            color: '#404456' !important;
+        }
+    `;
+
+  const onClosePopup = () => {
+    if (onClose) onClose();
+  };
+
+  const onProposals = () => {
+    const input = PopupInputRef.current.querySelector('input');
+
+    if (/^cancel$/i.test(type)) {
+      if (onCancel) onCancel(input);
+    } else if (onConfirm) onConfirm(input);
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape') {
+      onClosePopup();
+    }
+
+    ;
+  };
+
+  const calPosition = (position, originBounding) => {
+    switch (position) {
+      case 'bottom':
+      case 'right':
+        {
+          return [originBounding.height, originBounding.width];
+        }
+
+      case 'center':
+        {
+          return [originBounding.height / 2, originBounding.width / 2];
+        }
+
+      default:
+        return [0, 0];
+    }
+  };
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (open && ref.current) {
+      let top = 0,
+          left = 0,
+          vertical = 0,
+          horizontal = 0; // Position's anchor
+
+      if (anchorOrigin && anchor) {
+        if (anchor.current) {
+          anchor = anchor.current;
+        }
+
+        if (anchorOrigin === 'center') {
+          anchorOrigin = {
+            vertical: 'center',
+            horizontal: 'center'
+          };
+        }
+
+        const anchorBounding = anchor.getBoundingClientRect();
+        vertical = anchorBounding.y + calPosition(anchorOrigin.vertical, anchorBounding)[0];
+        horizontal = anchorBounding.x + calPosition(anchorOrigin.horizontal, anchorBounding)[1];
+      } // Position's transform
+
+
+      if (transformOrigin) {
+        if (transformOrigin === 'center') {
+          transformOrigin = {
+            vertical: 'center',
+            horizontal: 'center'
+          };
+        }
+
+        const offsetHeight = ref.current.offsetHeight;
+        const offsetWidth = ref.current.offsetWidth;
+
+        switch (transformOrigin.vertical) {
+          case 'center':
+            top = vertical - offsetHeight / 2;
+            break;
+
+          case 'bottom':
+            top = vertical - offsetHeight;
+            break;
+
+          default:
+            top = vertical;
+        }
+
+        switch (transformOrigin.horizontal) {
+          case 'center':
+            left = horizontal - offsetWidth / 2;
+            break;
+
+          case 'right':
+            left = horizontal - offsetWidth;
+            break;
+
+          default:
+            left = horizontal;
+        } // Reset position if the element overflow window screen size
+
+
+        if (top < 0) {
+          top = 0;
+        } else if (top + offsetHeight > window.innerHeight) {
+          top = window.innerHeight - offsetHeight;
+        }
+
+        if (left < 0) {
+          left = 0;
+        } else if (left + offsetWidth > window.innerWidth) {
+          left = window.innerWidth - offsetWidth;
+        }
+
+        ref.current.style.top = top + 'px';
+        ref.current.style.left = left + 'px';
+        ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
+      }
+
+      ref.current.classList.add('open'); // Allow press ESC to close popup
+
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+    }
+
+    return () => {
+      if (open && ref.current) {
+        ref.current.classList.remove('open');
+
+        if (pressESCToClose) {
+          document.removeEventListener('keydown', pressESCHandler);
+        }
+      }
+    };
+  }, [open]);
+  const popupInput = useMemo(() => jsx("div", {
+    css: PopupInput
+  }, jsx(TextInput, {
+    error: error,
+    viewType: viewType,
+    label: label,
+    value: value,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    style: {
+      marginLeft: 0,
+      marginRight: 0,
+      marginTop: 0
+    }
+  })), [label, placeholder, value, error, disabled]);
+  const popupAction = useMemo(() => {
+    const IconName = /cancel/i.test(type) ? Close : Approval;
+    const text = buttonText || (/cancel/i.test(type) ? 'Từ chối' : 'Duyệt');
+    return jsx("div", {
+      css: PopupAction
+    }, jsx(Button, {
+      viewType: 'outlined',
+      style: {
+        border: 'none',
+        padding: 0,
+        minWidth: 'auto',
+        backgroundColor: 'transparent'
+      },
+      color: /cancel/i.test(type) ? 'danger' : 'success',
+      onClick: onProposals,
+      disabled: disabled,
+      startIcon: jsx(IconName, {
+        color: 'currentColor',
+        viewBox: true,
+        bgFill: 'none',
+        outline: true
+      })
+    }, text));
+  }, [type, buttonText, disabled]);
+  const popupClearIcon = useMemo(() => clearAble && jsx("div", {
+    css: PopupClearIcon
+  }, jsx(Icon, {
+    name: 'Close',
+    width: "12",
+    height: "12",
+    onClick: onClosePopup,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  })), [clearAble]);
+  return jsx("div", {
+    css: PopupContainer,
+    ref: ref,
+    style: style
+  }, jsx("div", _extends({
+    css: PopupFrame
+  }, props, {
+    style: popupStyle
+  }), jsx("div", {
+    css: PopupContent
+  }, popupInput, popupAction), popupClearIcon));
+}));
+ProposalsPopup.defaultProps = {
+  type: 'confirm',
+  viewType: 'underlined',
+  clearAble: true,
+  open: false,
+  pressESCToClose: true,
+  anchorOrigin: {},
+  transformOrigin: {}
+};
+ProposalsPopup.propTypes = {
+  /** type of Popup, corresponding to the button */
+  type: PropTypes.oneOf(['confirm', 'cancel']),
+
+  /** type of TextInput */
+  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
+  /** placeholder to display in TextInput */
+  placeholder: PropTypes.string,
+
+  /** label to display on TextInput */
+  label: PropTypes.string,
+
+  /** the content to display in button */
+  buttonText: PropTypes.string,
+
+  /** value to display in TextInput */
+  value: PropTypes.string,
+
+  /** display clear icon if true */
+  clearAble: PropTypes.bool,
+
+  /** show Popup if true */
+  open: PropTypes.bool,
+
+  /** allow close Popup when press ESC */
+  pressESCToClose: PropTypes.bool,
+
+  /** style inline for Popup container */
+  style: PropTypes.object,
+
+  /** style inline for Popup */
+  popupStyle: PropTypes.object,
+
+  /** positions are displayed under this object */
+  anchor: PropTypes.object,
+
+  /** The root is displayed according to the position of the anchor */
+  anchorOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  // {vertical: 'top', horizontal: 'left'}
+
+  /** Popup's native display */
+  transformOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  // {vertical: 'bottom', horizontal: 'right'}
+
+  /** the function to get ref of Popup */
+  refs: PropTypes.func,
+
+  /** the function run when close Popup */
+  onClose: PropTypes.func,
+
+  /** the function run when click confirm button */
+  onConfirm: PropTypes.func,
+
+  /** the function run when click cancel button */
+  onCancel: PropTypes.func
+};
+export default ProposalsPopup;

package/components/popup/v2/danger-popup.js

@@ -0,0 +1,17 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { memo, forwardRef } from 'react';
+import PopupV2 from '.';
+const DangerPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ ...props
+}, ref) => {
+  return jsx(PopupV2, _extends({
+    ref: ref
+  }, props, {
+    type: 'danger'
+  }));
+}));
+export default DangerPopup;

package/components/popup/v2/index.js

@@ -0,0 +1,460 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import { bool, oneOf, oneOfType, string, func, object, number, node, shape, instanceOf, elementType } from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Button, Typography } from '../../';
+import { Close, Info, Archive, Warning, Failed } from '../../../icons';
+import { getGlobal } from '../../../global';
+import { lighten } from '../../../styles/color-helper';
+import { useTheme } from '../../../theme';
+import { capitalize, renderIcon } from '../../../utils';
+import { animations } from '../../../styles/animation';
+const {
+  colors
+} = useTheme();
+export const icons = {
+  yesno: jsx(Info, {
+    viewBox: true,
+    width: 40,
+    height: 40
+  }),
+  info: jsx(Info, {
+    viewBox: true,
+    width: 40,
+    height: 40
+  }),
+  success: jsx(Archive, {
+    viewBox: true,
+    width: 40,
+    height: 40
+  }),
+  warning: jsx(Warning, {
+    viewBox: true,
+    width: 40,
+    height: 40
+  }),
+  danger: jsx(Failed, {
+    viewBox: true,
+    width: 40,
+    height: 40
+  })
+};
+const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  type,
+  icon,
+  title,
+  subtitle,
+  description,
+  fullScreen,
+  pressESCToClose,
+  className,
+  style,
+  onClose,
+  onConfirm,
+  onCancel,
+  confirmProps,
+  cancelProps,
+  width,
+  top,
+  yesText,
+  noText,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const [openState, setOpenState] = useState(open);
+  const [custom, setCustom] = useState(null);
+  const [showMoreDescription, setShowMoreDescription] = useState(false);
+  const fadeInDown = animations.fadeInDown;
+  const fadeOutUp = animations.fadeOutUp;
+  const PopupRoot = css`
+        display: flex;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        justify-content: center;
+        inset: 0;
+        background-color: rgba(21, 26, 48, 0.5);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 9002;
+        word-break: break-word;
+        .DGN-UI-Popup {
+            display: flex;
+            flex-direction: column;
+            width: ${isNaN(width) ? width : width + 'px'};
+            height: fit-content;
+            max-width: 80%;
+            max-height: 80%;
+            margin: ${isNaN(top) ? top : top + 'px'} auto auto;
+            background-color: ${colors.white};
+            border-radius: 4px;
+            box-sizing: border-box;
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            animation: ${fadeOutUp} 0.2s ease;
+            animation-fill-mode: forwards;
+            &.DGN-Show {
+                animation-name: ${fadeInDown};
+            }
+            .DGN-UI-Popup-Header {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                min-height: 40px;
+                padding: 0 16px;
+                border-radius: 4px 4px 0px 0px;
+                .DGN-UI-Popup-Header-Title {
+                    display: flex;
+                    width: calc(100% - 24px);
+                    white-space: nowrap;
+                    overflow-x: hidden;
+                    text-overflow: ellipsis;
+                    font-weight: bold;
+                }
+                .DGN-UI-Popup-Header-Icon {
+                    display: block;
+                    width: 24px;
+                    height: 24px;
+                    cursor: pointer;
+                    transition: filter 0.1s linear;
+                    &:hover {
+                        filter: brightness(0.85);
+                    }
+                }
+                color: ${colors[type === 'yesno' ? 'info' : type]};
+                background-color: ${lighten(colors[type === 'yesno' ? 'info' : type], 0.85)};
+            }
+            .DGN-UI-Popup-Body {
+                display: flex;
+                position: relative;
+                flex-direction: row;
+                flex: 1 1 auto;
+                padding: 16px;
+                overflow: auto;
+                &::-webkit-scrollbar {
+                    width: 24px;
+                    background-color: #fff !important;
+                    border-radius: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 24px;
+                    border: 8px solid transparent;
+                    mix-blend-mode: normal;
+                    background-color: ${colors.scrollbar} !important;
+                    background-clip: content-box;
+                }
+                &::-webkit-scrollbar-thumb:hover {
+                    border-radius: 24px;
+                    border: 8px solid transparent;
+                    mix-blend-mode: normal;
+                    background-color: ${colors.scrollbarHover} !important;
+                    background-clip: content-box;
+                }
+                .DGN-UI-Popup-Body-Icon {
+                    display: block;
+                    width: 40px;
+                    margin-right: 16px;
+                    border-radius: 50%;
+                }
+                .DGN-UI-Popup-Body-Description {
+                    display: flex;
+                    position: relative;
+                    min-height: 40px;
+                    height: max-content;
+                    align-items: center;
+                    .DGN-UI-Popup-Body-Subtitle {
+                        margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? '8px' : '0px'};
+                    }
+                    .DGN-UI-Popup-Body-Detail {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle ? 1 : 3};
+                        -webkit-box-orient: vertical;
+                    }
+                    .DGN-More-Action {
+                        display: block;
+                        width: fit-content;
+                        margin-top: 16px;
+                        margin-bottom: ${type === 'yesno' ? '0px' : '8px'};
+                        text-decoration: underline;
+                        color: ${colors.info};
+                        cursor: pointer;
+                    }
+                }
+            }
+            .DGN-UI-Popup-Action {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+                padding: 8px 16px 16px 16px;
+                .DGN-UI-Button {
+                    margin: 0;
+                    min-width: 80px;
+                    &.filled {
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+    `;
+
+  const getTitle = (tit, typ = type) => {
+    if (tit !== null && tit !== undefined) {
+      return tit;
+    }
+
+    const map = {
+      danger: 'error',
+      info: 'notify',
+      success: 'confirm',
+      warning: 'warning'
+    };
+    return getGlobal(map[typ] || 'notify');
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape') {
+      onClosePopup(custom === null);
+      document.removeEventListener('keydown', pressESCHandler);
+    }
+
+    ;
+  };
+
+  const onShowPopup = (options, cb) => {
+    if (options && typeof options === 'object' && Object.keys(object).length) {
+      const newProps = {
+        type: options.type !== undefined ? options.type : type,
+        title: options.title !== undefined ? options.title : title,
+        icon: options.icon !== undefined ? options.icon : icon,
+        description: options.description !== undefined ? options.description : description,
+        yesText: options.yesText !== undefined ? options.yesText : yesText,
+        noText: options.noText !== undefined ? options.noText : noText,
+        confirmProps: options.confirmProps !== undefined ? options.confirmProps : confirmProps,
+        cancelProps: options.cancelProps !== undefined ? options.cancelProps : cancelProps,
+        onCancel: cb ? () => cb(false) : options.onCancel !== undefined ? options.onCancel : onCancel,
+        onConfirm: cb ? () => cb(true) : options.onConfirm !== undefined ? options.onConfirm : onConfirm
+      };
+      const popup = jsx(Fragment, null, jsx("div", {
+        className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(newProps.type)
+      }, jsx(Typography, {
+        className: 'DGN-UI-Popup-Header-Title',
+        color: 'inherit'
+      }, getTitle(newProps.title, newProps.type)), jsx("div", {
+        className: 'DGN-UI-Popup-Header-Icon',
+        onClick: () => onClosePopup()
+      }, jsx(Close, {
+        viewBox: true,
+        color: 'currentColor'
+      }))), jsx("div", {
+        className: 'DGN-UI-Popup-Body'
+      }, newProps.icon !== false && jsx("div", {
+        className: 'DGN-UI-Popup-Body-Icon'
+      }, newProps.icon === true ? icons[newProps.type] : renderIcon(newProps.icon, 'name', {
+        viewBox: true,
+        width: 40,
+        height: 40,
+        color: newProps.type
+      })), jsx("div", {
+        className: 'DGN-UI-Popup-Body-Description'
+      }, jsx(Typography, {
+        type: 'p2'
+      }, newProps.description))), (newProps.onConfirm || newProps.onCancel || newProps.type === 'yesno') && jsx("div", {
+        className: 'DGN-UI-Popup-Action'
+      }, (newProps.onConfirm || newProps.type === 'yesno') && jsx(Button, _extends({
+        viewType: 'filled',
+        label: newProps.yesText || getGlobal('ok').toUpperCase(),
+        color: newProps.type,
+        onClick: newProps.onConfirm
+      }, newProps.confirmProps)), (newProps.onCancel || newProps.type === 'yesno') && jsx(Button, _extends({
+        viewType: 'outlined',
+        label: newProps.noText || getGlobal('cancel').toUpperCase(),
+        color: newProps.type,
+        onClick: newProps.onCancel
+      }, newProps.cancelProps))));
+      setCustom(popup);
+    } else {
+      setCustom(false);
+    }
+
+    setOpenState(true);
+  };
+
+  const onClosePopup = (action = false) => {
+    if (onClose && action) {
+      onClose();
+    } else {
+      if (ref.current) {
+        setTimeout(() => {
+          setOpenState(false);
+        }, 300);
+        ref.current.style.opacity = null;
+        ref.current.firstChild.classList.remove('DGN-Show');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      setOpenState(open);
+    } else {
+      onClosePopup();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (openState) {
+      ref.current.style.opacity = 1;
+      ref.current.firstChild.classList.add('DGN-Show');
+
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+    } else {
+      setCustom(null);
+    }
+  }, [openState]);
+  useImperativeHandle(reference, () => {
+    const abc = ref.current || {};
+    abc.show = onShowPopup;
+    abc.close = onClosePopup;
+    return abc;
+  });
+  return openState && /*#__PURE__*/createPortal(jsx("div", {
+    css: PopupRoot,
+    ref: ref,
+    style: style,
+    className: ('DGN-UI-Portal DGN-UI-Popup-Portal ' + className).trimRight()
+  }, jsx("div", _extends({
+    className: 'DGN-UI-Popup'
+  }, props), custom ? custom : jsx(Fragment, null, jsx("div", {
+    className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(type)
+  }, jsx(Typography, {
+    className: 'DGN-UI-Popup-Header-Title',
+    color: 'inherit'
+  }, getTitle(title)), jsx("div", {
+    className: 'DGN-UI-Popup-Header-Icon',
+    onClick: e => onClosePopup(custom === false ? false : e)
+  }, jsx(Close, {
+    viewBox: true,
+    color: 'currentColor'
+  }))), jsx("div", {
+    className: 'DGN-UI-Popup-Body'
+  }, icon !== false && jsx("div", {
+    className: 'DGN-UI-Popup-Body-Icon'
+  }, icon === true ? icons[type] : renderIcon(icon, 'name', {
+    viewBox: true,
+    width: 40,
+    height: 40,
+    color: type
+  })), jsx("div", {
+    className: 'DGN-UI-Popup-Body-Description'
+  }, jsx(Typography, {
+    type: 'p2'
+  }, subtitle && jsx(Typography, {
+    className: 'DGN-UI-Popup-Body-Subtitle',
+    fullWidth: true
+  }, subtitle), jsx(Typography, {
+    type: 'p2',
+    className: 'DGN-UI-Popup-Body-Detail'
+  }, description), description && typeof description === 'string' && (description === null || description === void 0 ? void 0 : description.length) > 62 && jsx("span", {
+    className: 'DGN-More-Action',
+    onClick: () => setShowMoreDescription(!showMoreDescription)
+  }, getGlobal(showMoreDescription ? 'showLess' : 'showMore'))))), (onConfirm || onCancel || type === 'yesno') && jsx("div", {
+    className: 'DGN-UI-Popup-Action'
+  }, (onConfirm || type === 'yesno') && jsx(Button, _extends({
+    viewType: 'filled',
+    label: yesText || getGlobal('ok').toUpperCase(),
+    color: type === 'yesno' ? 'info' : type,
+    onClick: () => {
+      onConfirm && onConfirm();
+      onClose();
+    }
+  }, confirmProps)), (onCancel || type === 'yesno') && jsx(Button, _extends({
+    viewType: 'outlined',
+    label: noText || getGlobal('cancel').toUpperCase(),
+    color: type === 'yesno' ? 'info' : type,
+    onClick: () => {
+      onCancel && onCancel();
+      onClose();
+    }
+  }, cancelProps)))))), document.body);
+}));
+Popup.defaultProps = {
+  open: false,
+  pressESCToClose: false,
+  icon: true,
+  width: 480,
+  top: 50,
+  type: 'info',
+  className: ''
+};
+Popup.propTypes = {
+  /** show Popup if true */
+  open: bool,
+
+  /** allow close Popup when press ESC */
+  pressESCToClose: bool,
+
+  /** the icon to display before content */
+  icon: oneOfType([bool, string]),
+
+  /** width of Popup */
+  width: oneOfType([number, string]),
+
+  /** set top position for Popup */
+  top: oneOfType([number, string]),
+
+  /** the content show on header */
+  title: node,
+
+  /** the main content show in body */
+  subtitle: node,
+
+  /** details content show in body */
+  description: string,
+
+  /** class of Popup */
+  className: string,
+
+  /** type of Popup, corresponding to the color of header, button */
+  type: oneOf(['info', 'success', 'warning', 'danger', 'yesno']),
+
+  /** label of confirm button */
+  yesText: string,
+
+  /** label of cancel button */
+  noText: string,
+
+  /** the props of confirm button */
+  confirmProps: object,
+
+  /** the props of cancel button */
+  cancelProps: object,
+
+  /** the function will run when click on confirm button */
+  onConfirm: func,
+
+  /** the function will run when click on cancel button */
+  onCancel: func,
+
+  /**
+   * named ref: get ref of Popup component, insist:<br />
+   * * element<br />
+   * * show: the method to show Popup (ref.current.show(options, callback))<br />
+   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
+   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
+   * * close: the method to close Popup<br />
+   */
+  reference: oneOfType([func, shape({
+    current: instanceOf(elementType)
+  })])
+};
+export default Popup;