diginet-core-ui 1.4.39 → 1.4.40

package/src/components/popup/v2/index.js

@@ -0,0 +1,556 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Icon, Typography } from 'components';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { animations } from 'styles/animation';
+import { hexToRGBA } from 'styles/color-helper';
+import {
+    bgColor,
+    border,
+    borderRadius,
+    borderRadius50,
+    boxBorder,
+    breakWord,
+    cursorPointer,
+    displayBlock,
+    displayFlex,
+    flexCol,
+    flexRow,
+    inset,
+    itemsCenter,
+    justifyCenter,
+    justifyEnd,
+    overflowAuto,
+    overflowHidden,
+    parseHeight,
+    parseMaxWidthHeight,
+    parseMinHeight,
+    parseMinWidth,
+    parseWidth,
+    parseWidthHeight,
+    positionFixed,
+    positionRelative,
+    shadowSmall,
+    textColor,
+    textEllipsis,
+    textUnderline,
+    truncate,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, useDelayUnmount } from 'utils';
+
+const colorMap = new Map([
+    ['yesno', 'semantic/info'],
+    ['success', 'semantic/success'],
+    ['warning', 'semantic/warning'],
+    ['danger', 'semantic/danger'],
+    ['info', 'semantic/info'],
+]);
+const titleMap = new Map([
+    ['yesno', 'notify'],
+    ['success', 'confirm'],
+    ['warning', 'warning'],
+    ['danger', 'error'],
+    ['info', 'notify'],
+]);
+const iconMap = new Map([
+    ['yesno', 'Info'],
+    ['success', 'ApprovalFilled'],
+    ['warning', 'Warning'],
+    ['danger', 'Failed'],
+    ['info', 'Info'],
+]);
+const fadeInDown = animations.fadeInDown;
+const fadeOutUp = animations.fadeOutUp;
+
+const Popup = memo(
+    forwardRef(
+        (
+            {
+                action = {},
+                cancelProps,
+                className,
+                confirmProps,
+                description,
+                icon,
+                noText,
+                onCancel,
+                onClose,
+                onConfirm,
+                open,
+                pressESCToClose,
+                style,
+                subtitle,
+                title,
+                top,
+                type,
+                width,
+                yesText,
+                ...props
+            },
+            reference
+        ) => {
+            if (!reference) reference = useRef(null);
+
+            const ref = useRef(null);
+            const statusAction = useRef('');
+
+            const [openState, setOpenState] = useState(open);
+            const [custom, setCustom] = useState(null);
+            const [showMoreDescription, setShowMoreDescription] = useState(false);
+            const [descriptionLines, setDescriptionLines] = useState(0);
+
+            const showPopup = useDelayUnmount(openState, 200);
+
+            const theme = useTheme();
+
+            const _PopupRootCSS = PopupRootCSS(
+                width,
+                top,
+                type,
+                description,
+                subtitle,
+                showMoreDescription,
+                descriptionLines,
+                theme
+            );
+
+            const pressESCHandler = event => {
+                if (event.key === 'Escape') {
+                    onClosePopup('isClose');
+                }
+            };
+
+            const onShowPopup = (options, cb) => {
+                if (options && typeof options === 'object' && Object.keys(options).length) {
+                    const newProps = {
+                        type: options.type !== undefined ? options.type : type,
+                        title: options.title !== undefined ? options.title : title,
+                        icon: options.icon !== undefined ? options.icon : icon,
+                        description: options.description !== undefined ? options.description : description,
+                        yesText: options.yesText !== undefined ? options.yesText : yesText,
+                        noText: options.noText !== undefined ? options.noText : noText,
+                        confirmProps: options.confirmProps !== undefined ? options.confirmProps : confirmProps,
+                        cancelProps: options.cancelProps !== undefined ? options.cancelProps : cancelProps,
+                        onCancel: cb ? () => cb(false) : options.onCancel !== undefined ? options.onCancel : onCancel,
+                        onConfirm: cb
+                            ? () => cb(true)
+                            : options.onConfirm !== undefined
+                            ? options.onConfirm
+                            : onConfirm,
+                    };
+                    const popup = (
+                        <Fragment>
+                            {PopupHeaderView(newProps.title, newProps.type)}
+                            <div className={'DGN-UI-Popup-Body'}>
+                                {newProps.icon !== false ? (
+                                    <div className={'DGN-UI-Popup-Body-Icon'}>
+                                        <Icon
+                                            name={newProps.icon === true ? iconMap.get(newProps.type) : newProps.icon}
+                                            width={40}
+                                            height={40}
+                                            color={colorMap.get(newProps.type)}
+                                        />
+                                    </div>
+                                ) : null}
+                                <div className={'DGN-UI-Popup-Body-Description'}>
+                                    <Typography type={'p2'}>{newProps.description}</Typography>
+                                </div>
+                            </div>
+                            {PopupActionView(
+                                newProps.onConfirm,
+                                newProps.confirmProps,
+                                newProps.onCancel,
+                                newProps.cancelProps,
+                                newProps.type,
+                                newProps.yesText,
+                                newProps.noText
+                            )}
+                        </Fragment>
+                    );
+                    setCustom(popup);
+                } else {
+                    setCustom(false);
+                }
+                setOpenState(true);
+            };
+
+            const onClosePopup = mode => {
+                if (onClose) {
+                    setOpenState(false);
+                    statusAction.current = mode;
+                } else {
+                    if (ref.current) {
+                        setOpenState(false);
+                    }
+                }
+            };
+
+            const onRefChange = useCallback(node => {
+                if (node) {
+                    setDescriptionLines(Math.round(node?.offsetHeight / 18)); //18 is line-height of Typography p2
+                    setShowMoreDescription(false);
+                }
+            }, []);
+
+            useEffect(() => {
+                if (open) {
+                    setOpenState(open);
+                    setShowMoreDescription(true);
+                } else if (openState) {
+                    onClosePopup('isClose');
+                }
+            }, [open]);
+
+            useEffect(() => {
+                if (openState) {
+                    if (pressESCToClose) {
+                        document.addEventListener('keydown', pressESCHandler);
+                    }
+                } else {
+                    setCustom(null);
+                    if (onClose) onClose({ action: statusAction.current });
+                }
+                return () => {
+                    document.removeEventListener('keydown', pressESCHandler);
+                };
+            }, [openState]);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                const _instance = {
+                    show: onShowPopup,
+                    close: onClosePopup,
+                    ...action,
+                }; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                currentRef.show = onShowPopup;
+                currentRef.close = onClosePopup;
+                return currentRef;
+            });
+
+            const PopupHeaderView = (title, type) => {
+                return (
+                    <div className={'DGN-UI-Popup-Header'}>
+                        <Typography className={'DGN-UI-Popup-Header-Title'} type={'h3'} color={'inherit'}>
+                            {title ?? getGlobal(titleMap.get(type))}
+                        </Typography>
+                        <ButtonIcon
+                            circular
+                            viewType={'text'}
+                            color={type === 'yesno' ? 'info' : type}
+                            name={'Close'}
+                            onClick={() => onClosePopup('isClose')}
+                        />
+                    </div>
+                );
+            };
+
+            const PopupBodyView = (icon, type, subtitle, description) => {
+                return (
+                    <div className={'DGN-UI-Popup-Body'}>
+                        {icon !== false ? (
+                            <div className={'DGN-UI-Popup-Body-Icon'}>
+                                <Icon
+                                    name={icon === true ? iconMap.get(type) : icon}
+                                    width={40}
+                                    height={40}
+                                    color={colorMap.get(type)}
+                                />
+                            </div>
+                        ) : null}
+                        <div className={'DGN-UI-Popup-Body-Description'}>
+                            <Typography type={'p2'}>
+                                {subtitle ? (
+                                    <Typography className={'DGN-UI-Popup-Body-Subtitle'} fullWidth>
+                                        {subtitle}
+                                    </Typography>
+                                ) : null}
+                                <Typography ref={onRefChange} type={'p2'} className={'DGN-UI-Popup-Body-Detail'}>
+                                    {description}
+                                </Typography>
+                                {(subtitle && descriptionLines > 1) || descriptionLines > 3 ? (
+                                    <span
+                                        className={'DGN-More-Action'}
+                                        onClick={() => setShowMoreDescription(!showMoreDescription)}
+                                    >
+                                        {getGlobal(showMoreDescription ? 'showLess' : 'showMore')}
+                                    </span>
+                                ) : null}
+                            </Typography>
+                        </div>
+                    </div>
+                );
+            };
+
+            const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
+                return onConfirm || onCancel || type === 'yesno' ? (
+                    <div className={'DGN-UI-Popup-Action'}>
+                        {onConfirm || type === 'yesno' ? (
+                            <Button
+                                viewType={'filled'}
+                                label={yesText || getGlobal('ok').toUpperCase()}
+                                color={type === 'yesno' ? 'info' : type}
+                                onClick={() => {
+                                    onClosePopup('isConfirm');
+                                    onConfirm && onConfirm();
+                                }}
+                                {...confirmProps}
+                            />
+                        ) : null}
+                        {onCancel || type === 'yesno' ? (
+                            <Button
+                                viewType={'outlined'}
+                                label={noText || getGlobal('cancel').toUpperCase()}
+                                color={type === 'yesno' ? 'info' : type}
+                                onClick={() => {
+                                    onClosePopup('isCancel');
+                                    onCancel && onCancel();
+                                }}
+                                {...cancelProps}
+                            />
+                        ) : null}
+                    </div>
+                ) : null;
+            };
+
+            return (
+                showPopup &&
+                createPortal(
+                    <div
+                        css={_PopupRootCSS}
+                        ref={ref}
+                        style={style}
+                        className={classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)}
+                    >
+                        <div className={classNames('DGN-UI-Popup', openState ? 'DGN-Show' : 'DGN-Hide')} {...props}>
+                            {custom ? (
+                                custom
+                            ) : (
+                                <Fragment>
+                                    {PopupHeaderView(title, type)}
+                                    {PopupBodyView(icon, type, subtitle, description)}
+                                    {PopupActionView(
+                                        onConfirm,
+                                        confirmProps,
+                                        onCancel,
+                                        cancelProps,
+                                        type,
+                                        yesText,
+                                        noText
+                                    )}
+                                </Fragment>
+                            )}
+                        </div>
+                    </div>,
+                    document.body
+                )
+            );
+        }
+    )
+);
+
+const PopupRootCSS = (
+    width,
+    top,
+    type,
+    description,
+    subtitle,
+    showMoreDescription,
+    descriptionLines,
+    { colors, spacing }
+) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionFixed};
+    ${justifyCenter};
+    ${breakWord};
+    ${parseWidthHeight('100%')};
+    ${inset(0)};
+    ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.5))};
+    ${z(2)};
+    .DGN-UI-Popup {
+        ${displayFlex};
+        ${flexCol};
+        ${boxBorder};
+        ${borderRadius(4)};
+        ${parseWidthHeight(width, 'fit-content')};
+        ${parseMaxWidthHeight('80%')};
+        ${bgColor(getProp(colors, 'system/standard'))};
+        margin: ${isNaN(top) ? top : top + 'px'} auto auto;
+        ${shadowSmall};
+        &.DGN-Show {
+            animation: ${fadeInDown} 0.2s ease;
+        }
+        &.DGN-Hide {
+            animation: ${fadeOutUp} 0.3s ease;
+            animation-fill-mode: forwards;
+        }
+        .DGN-UI-Popup-Header {
+            ${displayFlex};
+            ${flexRow};
+            ${itemsCenter};
+            ${parseMinHeight(40)};
+            padding: ${spacing([0, 2, 0, 4])};
+            ${borderRadius('4px 4px 0px 0px')};
+            .DGN-UI-Popup-Header-Title {
+                ${displayFlex};
+                ${flexRow};
+                ${truncate};
+                ${parseWidth('calc(100% - 24px)')};
+            }
+            ${textColor(getProp(colors, colorMap.get(type)))};
+            ${bgColor(hexToRGBA(getProp(colors, colorMap.get(type)), 0.15))};
+        }
+        .DGN-UI-Popup-Body {
+            ${displayFlex};
+            ${flexRow};
+            ${positionRelative};
+            ${overflowAuto};
+            padding: ${spacing([4])};
+            flex: 1 1 auto;
+            &::-webkit-scrollbar {
+                ${borderRadius(4)};
+                ${parseWidth(24)};
+                ${bgColor(getProp(colors, 'system/standard'))};
+            }
+            &::-webkit-scrollbar-thumb {
+                ${border(8, 'transparent')};
+                ${borderRadius(24)};
+                mix-blend-mode: normal;
+                ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
+                background-clip: content-box;
+            }
+            &::-webkit-scrollbar-thumb:hover {
+                ${border(8, 'transparent')};
+                ${borderRadius(24)};
+                mix-blend-mode: normal;
+                ${bgColor(getProp(colors, 'fill/hover'))};
+                background-clip: content-box;
+            }
+            .DGN-UI-Popup-Body-Icon {
+                ${displayBlock};
+                ${borderRadius50};
+                ${parseWidth(40)};
+                margin-right: ${spacing([4])};
+            }
+            .DGN-UI-Popup-Body-Description {
+                ${displayFlex};
+                ${flexRow};
+                ${positionRelative};
+                ${itemsCenter};
+                ${parseMinHeight(40)};
+                ${parseHeight('max-content')};
+                .DGN-UI-Popup-Body-Subtitle {
+                    margin-bottom: ${spacing([description?.length > 0 ? 2 : 0])};
+                }
+                .DGN-UI-Popup-Body-Detail {
+                    ${overflowHidden};
+                    ${textEllipsis};
+                    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};
+                    ${parseWidth('fit-content')};
+                    margin-top: ${spacing([4])};
+                    margin-bottom: ${spacing([type === 'yesno' ? 0 : 2])};
+                    ${textUnderline};
+                    ${textColor(getProp(colors, 'semantic/info'))};
+                }
+            }
+        }
+        .DGN-UI-Popup-Action {
+            ${displayFlex};
+            ${flexRow};
+            ${justifyEnd};
+            padding: ${spacing([2, 4, 4, 4])};
+            .DGN-UI-Button {
+                ${parseMinWidth(80)};
+                margin: ${spacing([0])};
+                &.filled {
+                    margin-right: ${spacing([2])};
+                }
+            }
+        }
+    }
+`;
+
+Popup.defaultProps = {
+    className: '',
+    description: '',
+    icon: true,
+    open: false,
+    pressESCToClose: false,
+    style: {},
+    top: 56,
+    type: 'info',
+    width: 480,
+};
+
+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
+     */
+};
+
+export default Popup;

package/src/components/popup/v2/index.stories.js

@@ -0,0 +1,113 @@
+import { Button, Popup } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useRef, useState } from 'react';
+
+export default {
+    title: 'Components/Popup',
+    component: Popup,
+};
+
+const subtitle = 'Lỗi kỹ thuật 400';
+const description =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum lacus at ligula vulputate iaculis. Sed in nisl id est fermentum tempus. Nunc quis suscipit lacus. Suspendisse non est at metus commodo ultricies. In a diam tristique turpis tincidunt commodo. Proin vitae pulvinar mauris, vel maximus sem. Sed luctus viverra lorem at dapibus. Aliquam hendrerit pharetra justo. Proin sit amet mauris interdum, ultrices felis at, sagittis arcu. Curabitur interdum, sem id facilisis interdum, mauris magna blandit nisl, nec sollicitudin ipsum massa dapibus eros. Donec vitae imperdiet arcu. Sed ut euismod libero, sed malesuada nibh.';
+
+const Template1 = args => {
+    const [open, setOpen] = useState(args.open);
+    const onShowPopup = () => {
+        setOpen(true);
+    };
+    return (
+        <>
+            <ImportComp components={'Popup'} />
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button viewType={'outlined'} color={'primary'} label={'Show popup'} onClick={onShowPopup} />
+                <br />
+            </div>
+            <Popup {...args} open={open} onClose={() => setOpen(false)} />
+        </>
+    );
+};
+
+const Template2 = () => {
+    const ref = useRef(null);
+    const onShowPopupByRef = () => {
+        ref.current.instance.show(
+            {
+                onConfirm: () => null,
+                onCancel: () => null,
+                type: 'info',
+                subtitle: subtitle,
+                description: description,
+            },
+            () => {
+                ref.current.close();
+            }
+        );
+    };
+    return (
+        <>
+            <ImportComp components={'Popup'} />
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button viewType={'outlined'} color={'primary'} label={'Show by function'} onClick={onShowPopupByRef} />
+            </div>
+            <Popup ref={ref} />
+        </>
+    );
+};
+
+export const Basic = Template1.bind({});
+Basic.args = {
+    type: 'danger',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};
+
+export const Function = Template2.bind({});
+Function.parameters = { controls: { include: ['reference'] } };
+
+export const Info = Template1.bind({});
+Info.args = {
+    type: 'info',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};
+
+export const YesNo = Template1.bind({});
+YesNo.args = {
+    type: 'yesno',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};
+
+export const Warning = Template1.bind({});
+Warning.args = {
+    type: 'warning',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};
+
+export const Danger = Template1.bind({});
+Danger.args = {
+    type: 'danger',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};
+
+export const Success = Template1.bind({});
+Success.args = {
+    type: 'success',
+    subtitle: subtitle,
+    description: description,
+    onConfirm: null,
+    onCancel: null,
+};