diginet-core-ui 1.4.39 → 1.4.40

package/components/popup/danger_popup.js

@@ -1,189 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Button, Icon } from "./..";
-import PropTypes from 'prop-types';
-import { memo, useEffect, useRef } from 'react';
-import { bgColor, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { getProp, renderHTML } from "../../utils";
-import Popup from "./";
-const DangerPopup = ({
-  open,
-  warningText,
-  warningIconColor,
-  warningDescription,
-  confirmText,
-  cancelText,
-  timing,
-  buttonTimingColor,
-  onConfirm,
-  onCancel,
-  popupStyle,
-  ...props
-}) => {
-  const popupActionRef = useRef(null);
-  const theme = useTheme();
-  const popupStyles = {
-    backgroundColor: getProp(theme.colors, 'danger1'),
-    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 {
-            ${theme.typography.heading1};
-            color: inherit;
-        }
-    `;
-  const PopupWarning = css`
-        ${theme.typography.paragraph1};
-        text-align: center;
-        color: inherit;
-    `;
-  const PopupAction = css`
-        margin-top: 15px;
-        display: flex;
-        justify-content: space-between;
-        button {
-            min-width: 176px;
-            ${theme.typography.paragraph1};
-            &.button-confirm {
-                &.popup-timing {
-                    ${textColor(getProp(theme.colors, buttonTimingColor, buttonTimingColor))};
-                    ${bgColor(getProp(theme.colors, 'system/standard'))};
-                    border: 1px solid ${getProp(theme.colors, buttonTimingColor, 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, {
-    popupStyle: popupStyles,
-    type: 'custom',
-    open: open,
-    ...props
-  }, jsx("div", {
-    css: PopupContent
-  }, jsx("div", {
-    css: PopupInfo
-  }, jsx("span", {
-    className: 'popup-icon'
-  }, jsx(Icon, {
-    name: 'Warning',
-    width: 40,
-    height: 40,
-    color: warningIconColor
-  })), 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

@@ -1,414 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
-import { Button, ButtonIcon, Typography } from "./..";
-import { getGlobal } from "../../global";
-import { ApprovalFilled, Failed, Info, Warning } from "../../icons";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { bgColor, shadowLarge, textColor, z } from "../../styles/general";
-import { typography } from "../../styles/typography";
-import { useTheme } from "../../theme";
-import { getProp, hexToRGBA } from "../../utils";
-export const icons = {
-  info: jsx(Info, {
-    viewBox: true
-  }),
-  success: jsx(ApprovalFilled, {
-    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 theme = useTheme();
-  const PopupContainer = css`
-                position: fixed;
-                display: none;
-                width: 100%;
-                height: 100vh;
-                ${bgColor(!fullScreen ? 'transparent' : hexToRGBA(getProp(theme.colors, 'system/on-standard'), 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(1)};
-            `;
-  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;
-                ${textColor(getProp(theme.colors, 'text/main'))};
-                ${bgColor(getProp(theme.colors, 'system/standard'))};
-                width: ${width};
-                height: max-content;
-                min-width: 150px;
-                max-width: 480px;
-                min-height: 68px;
-                border-radius: 4px;
-                ${shadowLarge};
-                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;
-                    ${typography.paragraph1};
-                }
-            `;
-  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;
-                ${textColor(getProp(theme.colors, 'system/rest'))};
-                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, {
-      viewType: 'filled',
-      color: 'info',
-      style: {
-        minWidth: 104
-      },
-      ...confirmProps,
-      onClick: confirmHandler
-    }, /confirm/i.test(type) ? confirmText : yesText), jsx(Button, {
-      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", {
-    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, {
-    viewType: 'filled',
-    color: 'info',
-    style: {
-      minWidth: 104
-    },
-    ...confirmProps,
-    onClick: onConfirmHandler
-  }, /confirm/i.test(type) ? confirmText : yesText), jsx(Button, {
-    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(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'close',
-    onClick: e => onClosePopup(custom === false ? false : e)
-  })))), document.body), [openState, custom, theme, 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;