diginet-core-ui 1.3.87 → 1.3.88

package/components/popup/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -59,6 +60,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const [openState, setOpenState] = useState(open);
   const [custom, setCustom] = useState(null);
   const PopupContainer = css`
@@ -159,13 +161,16 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 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;
@@ -174,18 +179,23 @@ 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", {
@@ -216,6 +226,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setCustom(newContent);
     setOpenState(true);
   };
+
   const onClosePopup = (action = false) => {
     if (onClose && action) {
       onClose();
@@ -226,24 +237,29 @@ 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);
   }, []);
@@ -265,9 +281,11 @@ 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';
@@ -275,21 +293,24 @@ 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);
+      }, 0); // Allow press ESC to close popup
 
-      // 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);
       };
@@ -361,54 +382,79 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -39,6 +40,7 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const PopupContainer = css`
                 display: flex;
                 position: fixed;
@@ -91,21 +93,26 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     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':
@@ -113,41 +120,45 @@ 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;
+          left = 0,
+          vertical = 0,
+          horizontal = 0; // Position's anchor
 
-      // 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 = {
@@ -155,54 +166,65 @@ 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');
 
-      // Allow press ESC to close popup
+      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);
         }
@@ -281,40 +303,57 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, Icon, Typography } from "../..";
@@ -64,12 +65,15 @@ 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 = {
@@ -102,8 +106,10 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       setCustom(false);
     }
+
     setOpenState(true);
   };
+
   const onClosePopup = mode => {
     if (onClose) {
       setOpenState(false);
@@ -114,9 +120,11 @@ 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);
     }
   }, []);
@@ -139,6 +147,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         action: statusAction.current
       });
     }
+
     return () => {
       document.removeEventListener('keydown', pressESCHandler);
     };
@@ -150,12 +159,15 @@ 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'
@@ -171,6 +183,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: () => onClosePopup('isClose')
     }));
   };
+
   const PopupBodyView = (icon, type, subtitle, description) => {
     return jsx("div", {
       className: 'DGN-UI-Popup-Body'
@@ -197,6 +210,7 @@ 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'
@@ -220,6 +234,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...cancelProps
     }) : null) : null;
   };
+
   return showPopup && /*#__PURE__*/createPortal(jsx("div", {
     css: _PopupRootCSS,
     ref: ref,
@@ -230,6 +245,7 @@ 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};
@@ -343,6 +359,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         }
     }
 `;
+
 Popup.defaultProps = {
   className: '',
   icon: true,
@@ -356,51 +373,68 @@ 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
 };