diginet-core-ui 1.3.24

package/components/popup/danger_popup.js

@@ -0,0 +1,215 @@
+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 } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Popup from './';
+import { Button } from '../';
+import { renderHTML } from '../../utils';
+import { Warning } from '../../icons';
+import theme from '../../theme/settings';
+
+const DangerPopup = ({
+  open,
+  warningText,
+  warningIconColor,
+  warningDescription,
+  confirmText,
+  cancelText,
+  timing,
+  buttonTimingColor,
+  onConfirm,
+  onCancel,
+  popupStyle,
+  ...props
+}) => {
+  const popupActionRef = useRef(null);
+  const popupStyles = {
+    backgroundColor: '#FFDCD8',
+    color: "#E7000F",
+    width: 486,
+    height: 'max-content',
+    ...popupStyle
+  };
+  const PopupContent = css`
+        display: block;
+        position: relative;
+        color: inherit;
+        margin: 24px 58px;
+        width: 100%;
+    `;
+  const PopupInfo = css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: inherit;
+        .popup-icon {
+            width: 48px;
+            height: 44px;
+            margin-right: 13px;
+        }
+        .popup-title {
+            font-family: ${theme.typography.fontFamily};
+            font-style: normal;
+            font-weight: bold;
+            font-size: 20px;
+            line-height: 22px;
+            color: inherit;
+        }
+    `;
+  const PopupWarning = css`
+        font-family: ${theme.typography.fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        text-align: center;
+        color: inherit;
+    `;
+  const PopupAction = css`
+        margin-top: 15px;
+        display: flex;
+        justify-content: space-between;
+        button {
+            min-width: 176px;
+            font-size: 14px;
+            font-family: ${theme.typography.fontFamily};
+            &.button-confirm {
+                &.popup-timing {
+                    color: ${buttonTimingColor};
+                    background-color: white;
+                    border: 1px solid ${buttonTimingColor};
+                    box-shadow: none;
+                }
+            }
+        }
+    `;
+
+  const onConfirmHandler = () => {
+    if (onConfirm) onConfirm();
+  };
+
+  const onCancelHandler = () => {
+    if (onCancel) onCancel();
+  };
+
+  useEffect(() => {
+    let timer = null;
+
+    if (open) {
+      setTimeout(() => {
+        if (popupActionRef.current) {
+          const button = popupActionRef.current.querySelector('button.button-confirm');
+          if (!button) return;
+          const childNode = button.querySelector('.button-text');
+          let time = timing;
+          button.classList.add('popup-timing');
+          button.disabled = true;
+          childNode.textContent += ` (${time}s)`;
+          timer = setInterval(() => {
+            if (time === 0) {
+              button.classList.remove('popup-timing');
+              button.disabled = false;
+              childNode.textContent = confirmText;
+              clearInterval(timer);
+              return;
+            }
+
+            time--;
+            childNode.textContent = `${confirmText} (${time}s)`;
+          }, 1000);
+        }
+      }, 0);
+    }
+
+    return () => {
+      if (open && popupActionRef.current) {
+        const button = popupActionRef.current.querySelector('button.button-confirm');
+        if (!button) return;
+        const childNode = button.querySelector('.button-text');
+        setTimeout(() => {
+          button.classList.remove('popup-timing');
+          button.disabled = false;
+          childNode.textContent = confirmText;
+        }, 300);
+      }
+
+      if (timer) clearInterval(timer);
+    };
+  }, [open]);
+  return jsx(Popup, _extends({
+    popupStyle: popupStyles,
+    type: 'custom',
+    open: open
+  }, props), jsx("div", {
+    css: PopupContent
+  }, jsx("div", {
+    css: PopupInfo
+  }, jsx("span", {
+    className: 'popup-icon'
+  }, jsx(Warning, {
+    width: 40,
+    height: 40,
+    color: warningIconColor,
+    viewBox: true
+  })), jsx("span", {
+    className: 'popup-title'
+  }, warningText)), jsx("div", {
+    css: PopupWarning
+  }, renderHTML(warningDescription)), jsx("div", {
+    css: PopupAction,
+    ref: popupActionRef
+  }, jsx(Button, {
+    viewType: 'outlined',
+    color: 'danger',
+    className: 'button-confirm',
+    onClick: onConfirmHandler
+  }, confirmText), jsx(Button, {
+    viewType: 'outlined',
+    color: 'primary',
+    onClick: onCancelHandler
+  }, cancelText))));
+};
+
+DangerPopup.defaultProps = {
+  warningText: 'CẢNH BÁO NGUY HIỂM',
+  warningIconColor: '#E7000F',
+  warningDescription: `Hành động này sẽ xóa tất cả các công việc bên trong dự án và không thể khôi phục.<br/>
+    Bạn có chắn chắn muốn xóa dự án này không?`,
+  confirmText: 'XÁC NHẬN XOÁ',
+  cancelText: 'HUỶ THAO TÁC',
+  timing: 10,
+  buttonTimingColor: 'rgba(231, 0, 15, 0.5)'
+};
+DangerPopup.propTypes = {
+  /** the title of Popup */
+  warningText: PropTypes.string,
+
+  /** the title of Popup */
+  warningIconColor: PropTypes.string,
+
+  /** the content to description for warning title */
+  warningDescription: PropTypes.string,
+
+  /** the content to display in confirm button */
+  confirmText: PropTypes.string,
+
+  /** the content to display in cancel button */
+  cancelText: PropTypes.string,
+
+  /** the color of button when timing */
+  buttonTimingColor: PropTypes.string,
+
+  /** the period to prevent click confirm button */
+  timing: PropTypes.number,
+
+  /** the function run when click confirm button */
+  onConfirm: PropTypes.func,
+
+  /** the function run when click cancel button */
+  onCancel: PropTypes.func
+};
+export default /*#__PURE__*/memo(DangerPopup);

package/components/popup/index.js

@@ -0,0 +1,469 @@
+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 React, { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import { Button, Typography } from '../';
+import Icon, { Info, Archive, Warning, Failed } from '../../icons';
+import theme from '../../theme/settings';
+import { getGlobal } from '../../global';
+export const icons = {
+  info: jsx(Info, {
+    viewBox: true
+  }),
+  success: jsx(Archive, {
+    viewBox: true
+  }),
+  warning: jsx(Warning, {
+    viewBox: true
+  }),
+  danger: jsx(Failed, {
+    viewBox: true
+  })
+};
+const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  type,
+  icon,
+  title,
+  className,
+  clearAble,
+  fullScreen,
+  pressESCToClose,
+  autoFocusOKButton,
+  style,
+  popupStyle,
+  clearIconStyle,
+  confirmProps,
+  cancelProps,
+  refs,
+  getPopup,
+  onClose,
+  onConfirm,
+  onCancel,
+  children,
+  width,
+  top,
+  confirmText,
+  cancelText,
+  yesText,
+  noText,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const [openState, setOpenState] = useState(open);
+  const [custom, setCustom] = useState(null);
+  const PopupContainer = css`
+        position: fixed;
+        display: none;
+        width: 100%;
+        height: 100vh;
+        background-color: ${!fullScreen ? 'transparent' : 'rgba(21, 26, 48, 0.5)'};
+        top: 0;
+        left: 0;
+        justify-content: center;
+        padding-top: ${isNaN(top) ? top : top + 'px'};
+        pointer-events: ${!fullScreen ? 'none' : 'auto'};
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 9001;
+    `;
+  const fadeInDown = keyframes`
+        from {
+            opacity: 0;
+            transform: translateY(-30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    `;
+  const fadeOutUp = keyframes`
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+            transform: translateY(-30px);
+        }
+    `;
+  const PopupFrame = css`
+        display: flex;
+        position: relative;
+        color: ${theme.colors.default};
+        background-color: white;
+        width: ${width};
+        height: max-content;
+        min-width: 150px;
+        max-width: 480px;
+        min-height: 68px;
+        border-radius: 4px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        box-sizing: border-box;
+        pointer-events: auto;
+        animation: ${fadeOutUp} 0.2s ease;
+        animation-fill-mode: forwards;
+        &.animate_fadeInDown {
+            animation: ${fadeInDown} 0.2s ease;
+        }
+    `;
+  const PopupContent = css`
+        display: block;
+        position: relative;
+        color: inherit;
+        width: 100%;
+        margin: 24px 48px;
+    `;
+  const PopupInfo = css`
+        /* width: max-content; */
+        display: flex;
+        color: inherit;
+        justify-content: center;
+        .popup-icon {
+            display: inline-flex;
+            margin-top: 2px;
+            width: auto;
+            height: auto
+        }
+        .popup-title {
+            /* width: 100%; */
+            display: inline-flex;
+            margin-left: 8px;
+            margin-right: 8px;
+            color: inherit;
+            text-align: center;
+            align-items: center;
+            font-family: ${theme.typography.fontFamily};
+            font-size: 16px;
+        }
+    `;
+  const PopupYesNo = css`
+        display: flex;
+        justify-content: center;
+        margin-top: 21px;
+    `;
+  const PopupClearIcon = css`
+        display: block;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        top: 16px;
+        right: 16px;
+        color: ${theme.colors.secondary};
+        cursor: pointer;
+    `;
+
+  const onShowPopup = (message, options = {}, cb, autoClose = true) => {
+    if (!message && (!options || JSON.stringify(options) === '{}') && !cb) {
+      setCustom(false);
+      setOpenState(true);
+      return;
+    }
+
+    message = message || title;
+
+    if (Object.keys(options).length) {
+      type = options.type || type;
+      icon = options.icon || icon;
+      confirmText = options.confirmText || confirmText;
+      cancelText = options.cancelText || cancelText;
+      yesText = options.yesText || yesText;
+      noText = options.noText || noText;
+    }
+
+    const confirmHandler = () => {
+      if (cb && typeof cb === 'function') cb(true);else onConfirmHandler();
+
+      if (autoClose) {
+        onClosePopup();
+      }
+    };
+
+    const cancelHandler = () => {
+      if (cb && typeof cb === 'function') cb(false);else onCancelHandler();
+
+      if (autoClose) {
+        onClosePopup();
+      }
+    };
+
+    const newContent = jsx("div", {
+      css: PopupContent
+    }, jsx("div", {
+      css: PopupInfo
+    }, icon ? jsx("span", {
+      className: 'popup-icon'
+    }, icons[icon]) : null, jsx("span", {
+      className: 'popup-title'
+    }, jsx(Typography, null, message))), /(yes.*?no)|(confirm)/i.test(type) && jsx("div", {
+      css: PopupYesNo
+    }, jsx(Button, _extends({
+      viewType: 'filled',
+      color: 'info',
+      style: {
+        minWidth: 104
+      }
+    }, confirmProps, {
+      onClick: confirmHandler
+    }), /confirm/i.test(type) ? confirmText : yesText), jsx(Button, _extends({
+      viewType: 'outlined',
+      style: {
+        minWidth: 104,
+        marginLeft: 24
+      }
+    }, cancelProps, {
+      onClick: cancelHandler
+    }), /confirm/i.test(type) ? cancelText : noText)));
+    setCustom(newContent);
+    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('animate_fadeInDown');
+
+        if (fullScreen) {
+          document.body.style.overflow = null;
+        }
+      }
+    }
+
+    ;
+  };
+
+  const onConfirmHandler = () => {
+    if (onConfirm) onConfirm();else setOpenState(false);
+  };
+
+  const onCancelHandler = () => {
+    if (onCancel) onCancel();else setOpenState(false);
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape') {
+      onClosePopup(custom === null);
+      document.removeEventListener('keydown', pressESCHandler);
+    }
+
+    ;
+  };
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (getPopup && typeof getPopup === 'function') getPopup({
+      show: onShowPopup,
+      close: onClosePopup
+    });
+  }, [getPopup]);
+  useEffect(() => {
+    if (open) {
+      setOpenState(open);
+    } else {
+      onClosePopup();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (openState) {
+      ref.current.style.display = 'flex';
+      const titleEl = ref.current.querySelector('.popup-title');
+      const iconEl = ref.current.querySelector('.popup-icon');
+
+      if (iconEl && titleEl) {
+        titleEl.style.marginRight = '32px';
+        const height = titleEl.offsetHeight;
+
+        if (height && height > 39) {
+          iconEl.style.height = '40px';
+          iconEl.style.width = '40px';
+          iconEl.firstChild.style.height = '40px';
+          iconEl.firstChild.style.width = '40px';
+        }
+      }
+
+      setTimeout(() => {
+        ref.current.style.opacity = 1;
+        ref.current.firstChild.classList.add('animate_fadeInDown');
+      }, 0); // Allow press ESC to close popup
+
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+
+      if (autoFocusOKButton && type !== 'info' && ref.current.querySelector('button')) {
+        ref.current.querySelector('button').focus();
+      }
+
+      if (fullScreen) {
+        document.body.style.overflow = 'hidden';
+      }
+
+      return () => {
+        setCustom(null);
+      };
+    }
+  }, [openState]);
+  const Popup = useMemo(() => openState && /*#__PURE__*/createPortal(jsx("div", {
+    css: PopupContainer,
+    className: 'DGN-UI-Portal',
+    ref: ref,
+    style: style
+  }, jsx("div", _extends({
+    css: PopupFrame
+  }, props, {
+    style: popupStyle,
+    className: 'DGN-UI-Popup ' + className
+  }), custom ? custom : /^custom$/i.test(type) ? children : jsx("div", {
+    css: PopupContent,
+    className: 'DGN-UI-Popup-Content'
+  }, jsx("div", {
+    css: PopupInfo
+  }, icon ? jsx("span", {
+    className: 'popup-icon'
+  }, icons[icon]) : null, jsx("span", {
+    className: 'popup-title'
+  }, jsx(Typography, null, title))), /(yes.*?no)|(confirm)/i.test(type) && jsx("div", {
+    css: PopupYesNo
+  }, jsx(Button, _extends({
+    viewType: 'filled',
+    color: 'info',
+    style: {
+      minWidth: 104
+    }
+  }, confirmProps, {
+    onClick: onConfirmHandler
+  }), /confirm/i.test(type) ? confirmText : yesText), jsx(Button, _extends({
+    viewType: 'outlined',
+    style: {
+      minWidth: 104,
+      marginLeft: 24
+    }
+  }, cancelProps, {
+    onClick: onCancelHandler
+  }), /confirm/i.test(type) ? cancelText : noText))), (clearAble || /info/i.test(type)) && jsx("div", {
+    css: PopupClearIcon,
+    style: clearIconStyle
+  }, jsx(Icon, {
+    name: 'close',
+    width: "12",
+    height: "12",
+    color: "currentColor",
+    onClick: e => onClosePopup(custom === false ? false : e),
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  })))), document.body), [openState, custom, title, icon, type, onClose, onConfirm, onCancel]);
+  return Popup;
+}));
+Popup.defaultProps = {
+  type: 'info',
+  width: '450px',
+  title: '',
+  className: '',
+  yesText: getGlobal('yes'),
+  noText: getGlobal('no'),
+  confirmText: getGlobal('ok'),
+  cancelText: getGlobal('cancel'),
+  clearAble: true,
+  open: false,
+  pressESCToClose: false,
+  autoFocusOKButton: true,
+  fullScreen: false,
+  top: 50
+};
+Popup.propTypes = {
+  /** type of Popup, corresponding to the content inside */
+  type: PropTypes.oneOf(['info', 'yes-no', 'confirm', 'custom']),
+
+  /** the icon to display before content */
+  icon: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
+
+  /** the main content to display */
+  title: PropTypes.node,
+
+  /** class of Popup component */
+  className: PropTypes.string,
+
+  /** the text to display in agree button */
+  yesText: PropTypes.string,
+
+  /** the text to display in deny button */
+  noText: PropTypes.string,
+
+  /** the text to display in confirm button */
+  confirmText: PropTypes.string,
+
+  /** the text to display in cancel button */
+  cancelText: PropTypes.string,
+
+  /** the width of Popup */
+  width: 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,
+
+  /** auto focus in OK button */
+  autoFocusOKButton: PropTypes.bool,
+
+  /** style inline for Popup container */
+  style: PropTypes.object,
+
+  /** style inline for Popup */
+  popupStyle: PropTypes.object,
+
+  /** style inline for clear icon */
+  clearIconStyle: PropTypes.object,
+
+  /** the props of confirm button */
+  confirmProps: PropTypes.object,
+
+  /** the props of cancel button */
+  cancelProps: PropTypes.object,
+
+  /** the function to get ref of Popup */
+  refs: PropTypes.func,
+
+  /** the function to get events of Popup (show/close) */
+  getPopup: 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,
+
+  /** set top position for Popup */
+  top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** show a dark background under the popup if true */
+  fullScreen: PropTypes.bool,
+
+  /** the full content will display in Popup if set */
+  children: PropTypes.any
+};
+export default Popup;