diginet-core-ui 1.3.88 → 1.3.89

package/components/popup/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -60,7 +59,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const [openState, setOpenState] = useState(open);
   const [custom, setCustom] = useState(null);
   const PopupContainer = css`
@@ -100,7 +98,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const PopupFrame = css`
                 display: flex;
                 position: relative;
-                color: ${theme.colors.default};
+                color: ${theme.colors.text.main};
                 background-color: white;
                 width: ${width};
                 height: max-content;
@@ -158,19 +156,16 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 height: 24px;
                 top: 16px;
                 right: 16px;
-                color: ${theme.colors.secondary};
+                color: ${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;
@@ -179,23 +174,18 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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", {
@@ -226,7 +216,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setCustom(newContent);
     setOpenState(true);
   };
-
   const onClosePopup = (action = false) => {
     if (onClose && action) {
       onClose();
@@ -237,29 +226,24 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, 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);
   }, []);
@@ -281,11 +265,9 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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';
@@ -293,24 +275,21 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           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
+      }, 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);
       };
@@ -382,79 +361,54 @@ Popup.defaultProps = {
 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
 };

package/components/popup/proposals_popup.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -40,7 +39,6 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const PopupContainer = css`
                 display: flex;
                 position: fixed;
@@ -87,32 +85,27 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 height: 24px;
                 top: 16px;
                 right: 24px;
-                color: ${theme.colors.secondary};
+                color: ${theme.colors.system.rest};
                 cursor: pointer;
                 &:hover {
                     color: '#404456' !important;
                 }
             `;
-
   const onClosePopup = () => {
     if (onClose) onClose();
   };
-
   const onProposals = () => {
     // eslint-disable-next-line no-undef
     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':
@@ -120,45 +113,41 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           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
+        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
-
+      }
 
+      // Position's transform
       if (transformOrigin) {
         if (transformOrigin === 'center') {
           transformOrigin = {
@@ -166,65 +155,54 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             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
-
+        }
 
+        // 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');
 
-      ref.current.classList.add('open'); // Allow press ESC to close popup
-
+      // 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);
         }
@@ -303,57 +281,40 @@ ProposalsPopup.defaultProps = {
 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
 };

package/components/popup/v2/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, Icon, Typography } from "../..";
@@ -65,15 +64,12 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showMoreDescription, setShowMoreDescription] = useState(false);
   const [descriptionLines, setDescriptionLines] = useState(0);
   const showPopup = useDelayUnmount(openState, 200);
-
   const _PopupRootCSS = PopupRootCSS(width, top, type, description, subtitle, showMoreDescription, descriptionLines);
-
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
       onClosePopup('isClose');
     }
   };
-
   const onShowPopup = (options, cb) => {
     if (options && typeof options === 'object' && Object.keys(options).length) {
       const newProps = {
@@ -106,10 +102,8 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       setCustom(false);
     }
-
     setOpenState(true);
   };
-
   const onClosePopup = mode => {
     if (onClose) {
       setOpenState(false);
@@ -120,11 +114,9 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   const onRefChange = useCallback(node => {
     if (node) {
       setDescriptionLines(Math.round((node === null || node === void 0 ? void 0 : node.offsetHeight) / 18)); //18 is line-height of Typography p2
-
       setShowMoreDescription(false);
     }
   }, []);
@@ -147,7 +139,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         action: statusAction.current
       });
     }
-
     return () => {
       document.removeEventListener('keydown', pressESCHandler);
     };
@@ -159,15 +150,12 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       close: onClosePopup,
       ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     currentRef.show = onShowPopup;
     currentRef.close = onClosePopup;
     return currentRef;
   });
-
   const PopupHeaderView = (title, type) => {
     return jsx("div", {
       className: 'DGN-UI-Popup-Header'
@@ -183,7 +171,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: () => onClosePopup('isClose')
     }));
   };
-
   const PopupBodyView = (icon, type, subtitle, description) => {
     return jsx("div", {
       className: 'DGN-UI-Popup-Body'
@@ -210,7 +197,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: () => setShowMoreDescription(!showMoreDescription)
     }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')))));
   };
-
   const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
     return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
       className: 'DGN-UI-Popup-Action'
@@ -234,7 +220,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...cancelProps
     }) : null) : null;
   };
-
   return showPopup && /*#__PURE__*/createPortal(jsx("div", {
     css: _PopupRootCSS,
     ref: ref,
@@ -245,7 +230,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, custom ? custom : jsx(Fragment, null, PopupHeaderView(title, type), PopupBodyView(icon, type, subtitle, description), PopupActionView(onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText)))), document.body);
 }));
-
 const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescription, descriptionLines) => css`
     ${flexRow};
     ${positionFixed};
@@ -359,7 +343,6 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         }
     }
 `;
-
 Popup.defaultProps = {
   className: '',
   icon: true,
@@ -373,68 +356,51 @@ Popup.defaultProps = {
 Popup.propTypes = {
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
-
   /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the cancel `Button`. */
   cancelProps: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the confirm `Button`. */
   confirmProps: PropTypes.object,
-
   /** Details content of the component. */
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) display before content. */
   icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Label of cancel button. */
   noText: PropTypes.string,
-
   /** Callback fired when click on cancel button. */
   onCancel: PropTypes.func,
-
   /** Callback fired when click on confirm button. */
   onConfirm: PropTypes.func,
-
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Main content of the component. */
   subtitle: PropTypes.node,
-
   /** Title of the component. */
   title: PropTypes.node,
-
   /** Top position of the component. */
   top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Type of the component. */
   type: PropTypes.oneOf(['info', 'success', 'warning', 'danger', 'yesno']),
-
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Label of confirm button. */
   yesText: PropTypes.string,
-
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * show(options, callback): Show popup
-   *  * @param {options} - object
-   *      * {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}
-   *  * @param {callback} - func
-   *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
-   * * close(): Close popup
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * show(options, callback): Show popup
+   *  * @param {options} - object
+   *      * {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}
+   *  * @param {callback} - func
+   *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
+   * * close(): Close popup
    */
   reference: ref
 };