diginet-core-ui 1.3.34 → 1.3.35

package/components/popup/index.js

@@ -60,20 +60,20 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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;
-    `;
+                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;
@@ -94,69 +94,69 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   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;
-        }
-    `;
+                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;
-    `;
+                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};
-        }
-    `;
+                /* 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;
-    `;
+                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;
-    `;
+                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) {
@@ -239,8 +239,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
-
-    ;
   };
 
   const onConfirmHandler = () => {
@@ -256,8 +254,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClosePopup(custom === null);
       document.removeEventListener('keydown', pressESCHandler);
     }
-
-    ;
   };
 
   useEffect(() => {

package/components/popup/proposals_popup.js

@@ -38,57 +38,57 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   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);
-        }
-    `;
+                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;
-    `;
+                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;
-    `;
+                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%;
-    `;
+                display: block;
+                width: 100%;
+            `;
   const PopupAction = css`
-        display: block;
-        margin-left: auto;
-    `;
+                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;
-        }
-    `;
+                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();
@@ -106,8 +106,6 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (event.key === 'Escape') {
       onClosePopup();
     }
-
-    ;
   };
 
   const calPosition = (position, originBounding) => {

package/components/popup/v2/index.js

@@ -91,121 +91,121 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showMoreDescription, setShowMoreDescription] = useState(false);
   const [descriptionLines, setDescriptionLines] = useState(0);
   const PopupRoot = css`
-        ${flexRow}
-        ${positionFixed}
+                ${flexRow}
+                ${positionFixed}
         ${justifyCenter}
         width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        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 {
-            ${flexCol}
-            ${borderRadius4px}
+                height: 100%;
+                top: 0;
+                left: 0;
+                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 {
+                    ${flexCol}
+                    ${borderRadius4px}
             ${borderBox}
             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: ${white};
-            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 {
-                ${flexRow}
-                ${alignCenter}
+                    height: fit-content;
+                    max-width: 80%;
+                    max-height: 80%;
+                    margin: ${isNaN(top) ? top : top + 'px'} auto auto;
+                    background-color: ${white};
+                    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 {
+                        ${flexRow}
+                        ${alignCenter}
                 min-height: 40px;
-                padding: 0 8px 0 16px;
-                border-radius: 4px 4px 0px 0px;
-                .DGN-UI-Popup-Header-Title {
-                    ${flexRow}
-                    ${ellipsis}
+                        padding: 0 8px 0 16px;
+                        border-radius: 4px 4px 0px 0px;
+                        .DGN-UI-Popup-Header-Title {
+                            ${flexRow}
+                            ${ellipsis}
                     width: calc(100% - 24px);
-                }
-                color: ${colorMap.get(type)};
-                background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
-            }
-            .DGN-UI-Popup-Body {
-                ${flexRow}
-                ${positionRelative}
+                        }
+                        color: ${colorMap.get(type)};
+                        background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
+                    }
+                    .DGN-UI-Popup-Body {
+                        ${flexRow}
+                        ${positionRelative}
                 flex: 1 1 auto;
-                padding: 16px;
-                overflow: auto;
-                &::-webkit-scrollbar {
-                    ${borderRadius4px}
-                    width: 24px;
-                    background-color: #fff !important;
-                }
-                &::-webkit-scrollbar-thumb {
-                    ${border(8, 'transparent')}
-                    border-radius: 24px;
-                    mix-blend-mode: normal;
-                    background-color: ${scrollbar} !important;
-                    background-clip: content-box;
-                }
-                &::-webkit-scrollbar-thumb:hover {
-                    ${border(8, 'transparent')}
-                    border-radius: 24px;
-                    mix-blend-mode: normal;
-                    background-color: ${hover} !important;
-                    background-clip: content-box;
-                }
-                .DGN-UI-Popup-Body-Icon {
-                    ${displayBlock}
-                    width: 40px;
-                    margin-right: 16px;
-                    border-radius: 50%;
-                }
-                .DGN-UI-Popup-Body-Description {
-                    ${flexRow}
-                    ${positionRelative}
+                        padding: 16px;
+                        overflow: auto;
+                        &::-webkit-scrollbar {
+                            ${borderRadius4px}
+                            width: 24px;
+                            background-color: #fff !important;
+                        }
+                        &::-webkit-scrollbar-thumb {
+                            ${border(8, 'transparent')}
+                            border-radius: 24px;
+                            mix-blend-mode: normal;
+                            background-color: ${scrollbar} !important;
+                            background-clip: content-box;
+                        }
+                        &::-webkit-scrollbar-thumb:hover {
+                            ${border(8, 'transparent')}
+                            border-radius: 24px;
+                            mix-blend-mode: normal;
+                            background-color: ${hover} !important;
+                            background-clip: content-box;
+                        }
+                        .DGN-UI-Popup-Body-Icon {
+                            ${displayBlock}
+                            width: 40px;
+                            margin-right: 16px;
+                            border-radius: 50%;
+                        }
+                        .DGN-UI-Popup-Body-Description {
+                            ${flexRow}
+                            ${positionRelative}
                     ${alignCenter}
                     min-height: 40px;
-                    height: max-content;
-                    .DGN-UI-Popup-Body-Subtitle {
-                        margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? '8px' : '0px'};
-                    }
-                    .DGN-UI-Popup-Body-Detail {
-                        ${overflowHidden}
-                        text-overflow: ellipsis;
-                        display: -webkit-box;
-                        -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
-                        -webkit-box-orient: vertical;
-                    }
-                    .DGN-More-Action {
-                        ${displayBlock}
-                        ${cursorPointer}
+                            height: max-content;
+                            .DGN-UI-Popup-Body-Subtitle {
+                                margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? '8px' : '0px'};
+                            }
+                            .DGN-UI-Popup-Body-Detail {
+                                ${overflowHidden}
+                                text-overflow: ellipsis;
+                                display: -webkit-box;
+                                -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
+                                -webkit-box-orient: vertical;
+                            }
+                            .DGN-More-Action {
+                                ${displayBlock}
+                                ${cursorPointer}
                         width: fit-content;
-                        margin-top: 16px;
-                        margin-bottom: ${type === 'yesno' ? '0px' : '8px'};
-                        text-decoration: underline;
-                        color: ${info};
+                                margin-top: 16px;
+                                margin-bottom: ${type === 'yesno' ? '0px' : '8px'};
+                                text-decoration: underline;
+                                color: ${info};
+                            }
+                        }
                     }
-                }
-            }
-            .DGN-UI-Popup-Action {
-                ${flexRow}
-                ${justifyEnd}
+                    .DGN-UI-Popup-Action {
+                        ${flexRow}
+                        ${justifyEnd}
                 padding: 8px 16px 16px 16px;
-                .DGN-UI-Button {
-                    margin: 0;
-                    min-width: 80px;
-                    &.filled {
-                        margin-right: 8px;
+                        .DGN-UI-Button {
+                            margin: 0;
+                            min-width: 80px;
+                            &.filled {
+                                margin-right: 8px;
+                            }
+                        }
                     }
                 }
-            }
-        }
-    `;
+            `;
 
   const getTitle = (tit, typ = type) => {
     if (tit !== null && tit !== undefined) {
@@ -226,8 +226,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClosePopup(custom === null);
       document.removeEventListener('keydown', pressESCHandler);
     }
-
-    ;
   };
 
   const onShowPopup = (options, cb) => {
@@ -463,13 +461,13 @@ Popup.propTypes = {
   /** 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 />
+  /**
+   * 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)