diginet-core-ui 1.4.39 → 1.4.40

package/src/components/accordion/summary.js

@@ -0,0 +1,380 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import {
+    bgColor,
+    bgTransparent,
+    borderRadius4px,
+    boxBorder,
+    breakWord,
+    cursorPointer,
+    displayFlex,
+    displayInlineBlock,
+    displayInlineFlex,
+    flexRow,
+    flexRowReverse,
+    inset,
+    itemsCenter,
+    justifyBetween,
+    justifyCenter,
+    justifyEnd,
+    parseMaxWidthHeight,
+    parseMinHeight,
+    parseMinWidthHeight,
+    parseWidth,
+    parseWidthHeight,
+    pointerEventsInitial,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    textColor,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+import AccordionContext from './context';
+
+const AccordionSummary = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors, spacing } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'AccordionSummary' });
+        const {
+            action = {},
+            background: backgroundProp,
+            children,
+            className,
+            collapseIcon,
+            expandIcon: expandIconProp,
+            expandIconAt,
+            expandIconProps,
+            id,
+            onClick,
+            style,
+            title,
+        } = props;
+
+        const {
+            expanded,
+            expandState,
+            disabled,
+            onClickAccordion,
+            onExpand,
+            onCollapse,
+            setExpandState,
+            handleTransition,
+            fullHeight,
+        } = useContext(AccordionContext);
+
+        const expandIcon = expandIconProp === true ? 'ArrowRight' : expandIconProp;
+
+        const ref = useRef(null);
+        const expandIconRef = useRef(null);
+        const timer = useRef(null);
+
+        const background = getProp(colors, backgroundProp, backgroundProp);
+
+        const _SummaryRootCSS = SummaryRootCSS(background, theme);
+
+        const _onClick = e => {
+            if (disabled) return;
+            const target = e.target;
+            if (onClickAccordion) {
+                onClickAccordion();
+                return;
+            }
+            if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
+                onClick(e);
+                return;
+            }
+            if (expandState) {
+                if (expanded === undefined) setExpandState(false);
+                !!onCollapse && onCollapse(ref.current);
+            } else if (!expandState) {
+                if (expanded === undefined) setExpandState(true);
+                !!onExpand && onExpand(ref.current);
+            }
+        };
+
+        const showHideDetailHandler = type => {
+            if (!ref.current) return;
+            const detailEl = ref.current.nextElementSibling;
+            if (detailEl) {
+                const summaryHeight = ref.current.clientHeight;
+                if (type === 'show') {
+                    const height = Math.max(detailEl.scrollHeight, fullHeight - summaryHeight);
+                    handleTransition(timer, detailEl, height, `calc(100% - ${summaryHeight}px)`);
+                } else {
+                    if (detailEl.style.height) {
+                        const height = detailEl.scrollHeight;
+                        handleTransition(timer, detailEl, height);
+                    }
+                }
+            }
+        };
+
+        useEffect(() => {
+            if (expandState) {
+                showHideDetailHandler('show');
+            } else {
+                showHideDetailHandler('hide');
+            }
+        }, [expandState]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return (
+            <div
+                id={id}
+                css={_SummaryRootCSS}
+                ref={ref}
+                tabIndex="-1"
+                onClick={_onClick}
+                style={style}
+                className={classNames(
+                    'DGN-UI-Accordion-Summary',
+                    disabled && 'disabled',
+                    expandIcon && expandIconAt,
+                    expandState && 'expanding',
+                    className
+                )}
+            >
+                <div className={'DGN-UI-Accordion-Summary-Content'}>
+                    <Typography
+                        type={'h3'}
+                        lineClamp={2}
+                        color={disabled ? 'system/disabled' : 'system/active'}
+                        style={{ marginRight: children && title ? spacing([4]) : 0 }}
+                    >
+                        {title || ''}
+                    </Typography>
+                    {children}
+                </div>
+                {!!expandIcon && (
+                    <div className={'Accordion-Icon-Root'}>
+                        <div
+                            {...expandIconProps}
+                            ref={expandIconRef}
+                            className={classNames(
+                                'Accordion-Icon',
+                                !collapseIcon && 'rotate-able',
+                                expandIconProps?.className
+                            )}
+                        >
+                            {typeof expandIcon === 'string' ? (
+                                <ButtonIcon viewType={'ghost'} name={expandIcon} className={'Accordion-Expand-Icon'} />
+                            ) : (
+                                <span className={'Accordion-Expand-Icon effect'}>{expandIcon}</span>
+                            )}
+                            {!!collapseIcon &&
+                                (typeof collapseIcon === 'string' ? (
+                                    <ButtonIcon
+                                        viewType={'ghost'}
+                                        name={collapseIcon}
+                                        className={'Accordion-Collapse-Icon'}
+                                    />
+                                ) : (
+                                    <span className={'Accordion-Collapse-Icon effect'}>{collapseIcon}</span>
+                                ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    })
+);
+
+const SummaryRootCSS = (background, { colors, spacing, typography }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${itemsCenter};
+    ${cursorPointer};
+    ${boxBorder};
+    ${borderRadius4px};
+    ${parseWidth('100%')};
+    ${parseMinHeight(56)};
+    padding: ${spacing([4, 6])};
+    ${bgColor(background)};
+    .Accordion-Expand-Icon,
+    .Accordion-Collapse-Icon {
+        ${cursorPointer};
+        color: ${getProp(colors, 'system/active')} !important;
+        &:active,
+        &:focus,
+        &:hover {
+            ${bgColor('transparent')};
+            ${textColor(getProp(colors, 'system/active'))};
+        }
+    }
+    .Accordion-Icon-Root {
+        ${displayFlex};
+        ${flexRow};
+        .Accordion-Icon.rotate-able {
+            ${boxBorder};
+            ${parseWidthHeight(24)};
+            &:not(.TreeView) {
+                transform: rotateZ(0deg);
+                transform-origin: center;
+            }
+            &.TreeView {
+                transform-origin: center;
+            }
+        }
+    }
+    &.start {
+        ${flexRowReverse};
+        ${justifyEnd};
+        .Accordion-Icon.rotate-able {
+            margin-right: ${spacing([2])};
+            &.TreeView {
+                transform: rotateZ(-90deg);
+            }
+        }
+    }
+    &.end {
+        .Accordion-Icon.rotate-able {
+            margin-left: ${spacing([2])};
+            &.TreeView {
+                transform: rotateZ(90deg);
+            }
+        }
+    }
+    &.expanding {
+        border-radius: 4px 4px 0px 0px;
+        .Accordion-Icon.rotate-able {
+            &:not(.TreeView) {
+                transform: rotateZ(90deg);
+            }
+            &.TreeView {
+                transform: rotateZ(0deg);
+            }
+        }
+        .Accordion-Icon:not(.rotate-able) {
+            .Accordion-Expand-Icon {
+                transform: scale(0);
+            }
+            .Accordion-Collapse-Icon {
+                transform: scale(1);
+            }
+        }
+    }
+    &:not(.disabled) {
+        transition: background-color 300ms ease;
+        &:hover {
+            ${bgColor(getProp(colors, 'fill/hover'))};
+        }
+        &:focus {
+            ${bgColor(getProp(colors, 'fill/focus'))};
+        }
+        &:active {
+            ${bgColor(getProp(colors, 'fill/pressed'))};
+        }
+    }
+    &.disabled {
+        ${pointerEventsNone};
+        ${bgColor(getProp(colors, 'fill/disabled'))};
+        .DGN-UI-Accordion-Summary-Content,
+        .Accordion-Expand-Icon {
+            color: ${getProp(colors, 'system/disabled')} !important;
+        }
+    }
+    &.treeview-disabled {
+        ${pointerEventsNone};
+        &:hover {
+            ${bgTransparent};
+        }
+        .TreeView-Item {
+            ${textColor(getProp(colors, 'system/disabled'))};
+        }
+        .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
+            ${cursorPointer};
+            ${pointerEventsInitial};
+        }
+    }
+    .DGN-UI-Accordion-Summary-Content {
+        ${typography.heading3};
+        ${flexRow};
+        ${positionRelative};
+        ${breakWord};
+        ${userSelectNone};
+        ${boxBorder}
+        ${itemsCenter};
+        ${textColor(getProp(colors, 'system/active'))};
+        ${parseWidth('100%')};
+        ${parseMinHeight(24)};
+    }
+    .Accordion-Icon {
+        ${displayInlineBlock};
+        ${positionRelative};
+        ${cursorPointer};
+        ${parseWidthHeight(24)};
+        transition: transform 200ms linear;
+        .Accordion-Expand-Icon {
+            transform: scale(1);
+            transition: transform 200ms linear;
+            &.effect {
+                ${positionRelative};
+            }
+        }
+        .Accordion-Collapse-Icon {
+            ${positionAbsolute};
+            ${inset(0)};
+            transform: scale(0);
+            transition: transform 200ms linear;
+        }
+        .effect {
+            ${displayInlineFlex};
+            ${justifyCenter};
+            ${itemsCenter};
+            ${cursorPointer};
+            ${parseMinWidthHeight(24)};
+            ${parseMaxWidthHeight(34)};
+        }
+    }
+`;
+
+//Check defaultProps at src/theme/setting.js
+
+AccordionSummary.propTypes = {
+    /** Background color for the label summary. */
+    background: PropTypes.string,
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** Icon to display for the collapse action. If `false`, the collapse icon is hidden. */
+    collapseIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
+    /** Icon to display for the expand action. If `false`, the expand icon is hidden. */
+    expandIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
+    /** Position to render the icon. */
+    expandIconAt: PropTypes.oneOf(['start', 'end']),
+    /** Additional props for the icon. */
+    expandIconProps: PropTypes.any,
+    /** Callback function fired when the component is clicked. */
+    onClick: PropTypes.func,
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+    /** The title of the component. */
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};
+
+export default AccordionSummary;

package/src/components/alert/index.js

@@ -0,0 +1,312 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Icon, LinearProgress } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { animations } from 'styles/animation';
+import {
+    bgColor,
+    border,
+    borderRadius4px,
+    boxBorder,
+    breakWord,
+    displayBlock,
+    flexRow,
+    itemsCenter,
+    justifyStart,
+    positionRelative,
+    textColor,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, hexToRGBA, useDelayUnmount } from 'utils';
+
+const iconMap = new Map([
+    ['info', 'Info'],
+    ['success', 'ApprovalFilled'],
+    ['warning', 'Warning'],
+    ['danger', 'CancelFilled'],
+]);
+
+const maxWidthMap = new Map([
+    ['tiny', 320],
+    ['small', 400],
+    ['medium', 480],
+]);
+
+const primaryTypoMap = new Map([
+    ['tiny', 'typography.heading5'],
+    ['small', 'typography.heading4'],
+    ['medium', 'typography.heading3'],
+]);
+
+const iconSizeMap = new Map([
+    ['tiny', 16],
+    ['small', 20],
+    ['medium', 24],
+]);
+
+const linearProgressSizeMap = new Map([
+    ['tiny', 2],
+    ['small', 3],
+    ['medium', 4],
+]);
+
+const transitionTime = 300;
+
+const Alert = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Alert' });
+        const {
+            action = {},
+            autoDisappear,
+            children,
+            className,
+            clearAble,
+            color,
+            duration,
+            onClose,
+            progressing,
+            secondary,
+            size,
+            text,
+            type: typeProp,
+        } = props;
+
+        const type = typeProp || color;
+        const ref = useRef(null);
+        const clearIconRef = useRef(null);
+
+        const [percentState, setPercentState] = useState(100);
+        const [isClose, setIsClose] = useState(false);
+        const showAlert = useDelayUnmount(!isClose, transitionTime);
+
+        const mainColor = getProp(colors, type, type);
+        const opacityColor = hexToRGBA(getProp(colors, mainColor, mainColor), 0.15);
+        const iconName = iconMap.get(type);
+        const iconSize = iconSizeMap.get(size);
+
+        const _AlertContainerCSS = AlertContainerCSS(size, theme);
+        const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor, theme);
+        const _AlertIconCSS = AlertIconCSS(theme);
+        const _AlertTextCSS = AlertTextCSS(clearAble, theme);
+        const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size, theme);
+        const _AlertSecondaryCSS = AlertSecondaryCSS(size, theme);
+        const _linearProgressCSS = linearProgressCSS(size, theme);
+
+        const _onClose = () => {
+            setIsClose(true);
+            onClose?.();
+        };
+
+        useEffect(() => {
+            setTimeout(() => {
+                setPercentState(0);
+            }, 100);
+        }, []);
+
+        useEffect(() => {
+            if (ref.current && isClose) ref.current.style.opacity = 0;
+        }, [isClose]);
+
+        useEffect(() => {
+            setTimeout(() => {
+                if (autoDisappear) _onClose();
+            }, duration);
+        }, [autoDisappear]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const AlertView = useMemo(() => {
+            let node = children;
+            if (!node) {
+                node = <Icon name={iconName} width={iconSize} height={iconSize} color={'currentColor'} viewBox />;
+            }
+            return (
+                <div css={_AlertInfoCSS} className={classNames('DGN-UI-Alert', className)}>
+                    <span css={_AlertIconCSS} className={'DGN-UI-Alert-Icon'}>
+                        {node}
+                    </span>
+                    <span css={_AlertTextCSS} className={'DGN-UI-Alert-Content'}>
+                        <span css={_AlertPrimaryCSS} className={'DGN-UI-Alert-Content-Primary'}>
+                            {children ? typeof children === 'string' ? children : <children /> : text}
+                        </span>
+                        {secondary && (
+                            <span css={_AlertSecondaryCSS} className={'DGN-UI-Alert-Content-Secondary'}>
+                                {secondary}
+                            </span>
+                        )}
+                    </span>
+                    <span
+                        css={AlertClearIconCSS}
+                        onClick={_onClose}
+                        ref={clearIconRef}
+                        className={'DGN-UI-Alert-Clear'}
+                    >
+                        {clearAble ? (
+                            <ButtonIcon circular viewType={'text'} size={size} color={type} name={'Close'} />
+                        ) : null}
+                    </span>
+                </div>
+            );
+        }, [
+            children,
+            className,
+            clearAble,
+            color,
+            onClose,
+            secondary,
+            size,
+            text,
+            typeProp,
+            isClose,
+            mainColor,
+            opacityColor,
+            theme,
+        ]);
+
+        const LinearView = useMemo(() => {
+            return progressing ? (
+                <span css={_linearProgressCSS} className={'DGN-UI-Progress'}>
+                    <LinearProgress
+                        determinate
+                        background={'transparent'}
+                        color={mainColor}
+                        percent={percentState}
+                        duration={duration / 1000}
+                        height={linearProgressSizeMap.get(size)}
+                        style={{ boxShadow: 'none' }}
+                    />
+                </span>
+            ) : null;
+        }, [duration, size, progressing, percentState, theme]);
+
+        return showAlert ? (
+            <div css={_AlertContainerCSS} className={'DGN-UI-Container-Alert'} ref={ref}>
+                {AlertView}
+                {LinearView}
+            </div>
+        ) : null;
+    })
+);
+const fadeIn = animations.fadeIn;
+
+const AlertContainerCSS = (size, { zIndex }) => css`
+    ${positionRelative};
+    ${displayBlock};
+    max-width: ${maxWidthMap.get(size)}px;
+    transition: opacity ${transitionTime}ms ease;
+    margin-bottom: 1rem;
+    pointer-events: auto;
+    z-index: ${zIndex(1)};
+    animation: ${fadeIn} ${transitionTime}ms ease;
+`;
+
+const AlertInfoCSS = (mainColor, opacityColor, { colors, spacing }) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${boxBorder};
+    ${borderRadius4px};
+    ${breakWord};
+    ${border(1, mainColor)};
+    ${textColor(mainColor)};
+    background-image: linear-gradient(${opacityColor}, ${opacityColor});
+    ${bgColor(getProp(colors, 'system/standard'))};
+    width: 100%;
+    min-width: 320px;
+    padding: ${spacing([0, 1, 0, 4])};
+    opacity: 1;
+`;
+
+const AlertIconCSS = ({ spacing }) => css`
+    display: inherit;
+    margin-right: ${spacing([2.5])};
+    padding: ${spacing([2, 0])};
+`;
+
+const AlertTextCSS = (clearAble, { spacing }) => css`
+    ${displayBlock};
+    margin-right: ${spacing([clearAble ? 2.5 : 0])};
+    padding: ${spacing([2, 0])};
+    align-self: center;
+`;
+
+const AlertPrimaryCSS = (secondary, size, theme) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${itemsCenter};
+    ${justifyStart};
+    ${userSelectNone};
+    ${secondary ? getProp(theme, primaryTypoMap.get(size)) : getProp(theme, 'typography.paragraph1')};
+`;
+
+const AlertSecondaryCSS = (size, { typography }) => css`
+    ${displayBlock};
+    ${userSelectNone};
+    ${size === 'tiny' ? typography.paragraph3 : typography.paragraph2};
+`;
+
+const AlertClearIconCSS = css`
+    margin-left: auto;
+`;
+
+const linearProgressCSS = (size, { spacing }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
+    padding: ${spacing([0, 1.25])};
+`;
+
+// Alert.defaultProps = {
+//     autoDisappear: false,
+//     className: '',
+//     clearAble: true,
+//     color: 'semantic/info',
+//     duration: 2000,
+//     progressing: false,
+//     size: 'medium',
+// };
+
+Alert.propTypes = {
+    /** Automatically remove the Alert component after the timer ends (milliseconds). */
+    autoDisappear: PropTypes.bool,
+    /** The element to display in alert like text props (priority). */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** If `true`, show clear icon to close alert. */
+    clearAble: PropTypes.bool,
+    /** The amount of time the alert is displayed. The unit is the milliseconds. */
+    duration: PropTypes.number,
+    /** Callback fired when the component closed. */
+    onClose: PropTypes.func,
+    /** If `true`, show linear progress in duration time.*/
+    progressing: PropTypes.bool,
+    /** The secondary text to show in alert (under primary). */
+    secondary: PropTypes.string,
+    /** The size of the component. */
+    size: PropTypes.oneOf(['tiny', 'small', 'medium']),
+    /** The text to show in alert. */
+    text: PropTypes.string,
+    /** Type of the component. */
+    type: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
+};
+
+export default Alert;