diginet-core-ui 1.4.39 → 1.4.40

package/src/components/popup/index.js

@@ -0,0 +1,464 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import { Button, ButtonIcon, Typography } from 'components';
+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: <Info viewBox />,
+    success: <ApprovalFilled viewBox />,
+    warning: <Warning viewBox />,
+    danger: <Failed viewBox />,
+};
+
+const Popup = memo(
+    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 = (
+                    <div css={PopupContent}>
+                        <div css={PopupInfo}>
+                            {icon ? <span className={'popup-icon'}>{icons[icon]}</span> : null}
+                            <span className={'popup-title'}>
+                                <Typography>{message}</Typography>
+                            </span>
+                        </div>
+                        {/(yes.*?no)|(confirm)/i.test(type) && (
+                            <div css={PopupYesNo}>
+                                <Button
+                                    viewType={'filled'}
+                                    color={'info'}
+                                    style={{ minWidth: 104 }}
+                                    {...confirmProps}
+                                    onClick={confirmHandler}
+                                >
+                                    {/confirm/i.test(type) ? confirmText : yesText}
+                                </Button>
+                                <Button
+                                    viewType={'outlined'}
+                                    style={{ minWidth: 104, marginLeft: 24 }}
+                                    {...cancelProps}
+                                    onClick={cancelHandler}
+                                >
+                                    {/confirm/i.test(type) ? cancelText : noText}
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                );
+
+                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 &&
+                    createPortal(
+                        <div css={PopupContainer} className={'DGN-UI-Portal'} ref={ref} style={style}>
+                            <div css={PopupFrame} {...props} style={popupStyle} className={'DGN-UI-Popup ' + className}>
+                                {custom ? (
+                                    custom
+                                ) : /^custom$/i.test(type) ? (
+                                    children
+                                ) : (
+                                    <div css={PopupContent} className={'DGN-UI-Popup-Content'}>
+                                        <div css={PopupInfo}>
+                                            {icon ? <span className={'popup-icon'}>{icons[icon]}</span> : null}
+                                            <span className={'popup-title'}>
+                                                <Typography>{title}</Typography>
+                                            </span>
+                                        </div>
+                                        {/(yes.*?no)|(confirm)/i.test(type) && (
+                                            <div css={PopupYesNo}>
+                                                <Button
+                                                    viewType={'filled'}
+                                                    color={'info'}
+                                                    style={{ minWidth: 104 }}
+                                                    {...confirmProps}
+                                                    onClick={onConfirmHandler}
+                                                >
+                                                    {/confirm/i.test(type) ? confirmText : yesText}
+                                                </Button>
+                                                <Button
+                                                    viewType={'outlined'}
+                                                    style={{ minWidth: 104, marginLeft: 24 }}
+                                                    {...cancelProps}
+                                                    onClick={onCancelHandler}
+                                                >
+                                                    {/confirm/i.test(type) ? cancelText : noText}
+                                                </Button>
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                                {(clearAble || /info/i.test(type)) && (
+                                    <div css={PopupClearIcon} style={clearIconStyle}>
+                                        <ButtonIcon
+                                            viewType={'ghost'}
+                                            name={'close'}
+                                            onClick={e => onClosePopup(custom === false ? false : e)}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>,
+                        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;