diginet-core-ui 1.4.39 → 1.4.40

package/src/components/modal/modal.js

@@ -0,0 +1,330 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { animations } from 'styles/animation';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    cursorMove,
+    displayFlex,
+    flexCol,
+    flexRow,
+    inset,
+    justifyCenter,
+    left,
+    parseMaxWidthHeight,
+    parseMinWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionFixed,
+    positionRelative,
+    shadowLarge,
+    top,
+} from 'styles/general';
+import { makeStyles, useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, hexToRGBA, useDelayUnmount } from 'utils';
+import ModalContext from './context';
+
+const fadeInDown = animations.fadeInDown;
+const fadeOutUp = animations.fadeOutUp;
+
+const Modal = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { breakpoints, zIndex: zIndexTheme } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Modal' });
+        const {
+            action = {},
+            alignment,
+            autoFocus,
+            children,
+            className,
+            dragAnyWhere,
+            id,
+            moveable,
+            moveOutScreen,
+            onClose,
+            open,
+            pressESCToClose,
+            size,
+            style,
+            width,
+            zIndex = zIndexTheme(),
+        } = props;
+
+        const ref = useRef(null);
+
+        // const overflow = useRef(null);
+        const modalBoxRef = useRef(null);
+
+        const [openState, setOpenState] = useState(open);
+        const showModal = useDelayUnmount(openState, 200);
+
+        const useStyles = makeStyles({
+            noScroll: {
+                key: props => `DGN-Modal-${props}`,
+                overflow: 'hidden',
+                paddingRight: `${
+                    Math.abs(window.innerWidth - document.documentElement.clientWidth) + // scrollbar width
+                    parseInt(getComputedStyle(document.body).getPropertyValue('padding-right')) // body padding-right
+                }px`,
+            },
+        });
+
+        const _size = breakpoints.values[size];
+        const _ModalCSS = ModalCSS(zIndex);
+        const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, theme);
+        const _ModalBoxCSS = ModalBoxCSS(width, moveable, dragAnyWhere, _size, theme);
+
+        const onShowModal = () => {
+            setOpenState(true);
+        };
+
+        const onCloseModal = () => {
+            onClose && onClose();
+            setOpenState(false);
+        };
+
+        const pressESCHandler = event => {
+            if (event.key === 'Escape') {
+                const modals = document.querySelectorAll('.DGN-UI-Portal');
+                if (
+                    modals?.length > 1 &&
+                    Array.from(modals)[modals.length - 1] &&
+                    !Array.from(modals)[modals.length - 1].contains(ref.current)
+                ) {
+                    return;
+                }
+                onCloseModal();
+            }
+        };
+
+        const dragMouseDown = e => {
+            let pos1 = 0,
+                pos2 = 0,
+                pos3 = 0,
+                pos4 = 0;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            const maxTop = window.innerHeight - modalBoxRef.current.offsetHeight;
+            const maxLeft = window.innerWidth - modalBoxRef.current.offsetWidth;
+            if (modalBoxRef.current.style.display !== 'block') {
+                const top = modalBoxRef.current.offsetTop;
+                const left = modalBoxRef.current.offsetLeft;
+                modalBoxRef.current.style.display = 'block';
+                modalBoxRef.current.style.position = 'absolute';
+                modalBoxRef.current.style.margin = '0px';
+                modalBoxRef.current.style.top = top + 'px';
+                modalBoxRef.current.style.left = left + 'px';
+            }
+            document.onmouseup = () => {
+                /* stop moving when mouse button is released:*/
+                document.onmouseup = null;
+                document.onmousemove = null;
+            };
+            // call a function whenever the cursor moves:
+            document.onmousemove = el => {
+                pos1 = pos3 - el.clientX;
+                pos2 = pos4 - el.clientY;
+                pos3 = el.clientX;
+                pos4 = el.clientY;
+                let newTop = modalBoxRef.current.offsetTop - pos2;
+                let newLeft = modalBoxRef.current.offsetLeft - pos1;
+                if (!moveOutScreen) {
+                    if (newTop > maxTop) {
+                        newTop = maxTop;
+                    } else if (newTop < 0) {
+                        newTop = 0;
+                    }
+                    if (newLeft > maxLeft) {
+                        newLeft = maxLeft;
+                    } else if (newLeft < 0) {
+                        newLeft = 0;
+                    }
+                }
+                // set the element's new position:
+                modalBoxRef.current.style.top = newTop + 'px';
+                modalBoxRef.current.style.left = newLeft + 'px';
+            };
+        };
+
+        useEffect(() => {
+            setOpenState(open);
+        }, [open]);
+
+        useEffect(() => {
+            if (openState && ref.current) {
+                if (autoFocus) {
+                    if (!ref.current.contains(document.activeElement)) {
+                        ref.current.tabIndex = -1;
+                        ref.current.focus();
+                    }
+                }
+                const timestamp = Date.now();
+                const classes = useStyles(timestamp);
+                const noScrollClass = classes.noScroll.split(' ');
+                document.body.classList.add(...noScrollClass);
+                // overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
+                // document.body.style.overflow = 'hidden';
+                // Allow press ESC to close popup
+                if (pressESCToClose) {
+                    document.addEventListener('keydown', pressESCHandler);
+                }
+                return () => {
+                    document.body.classList.remove(...noScrollClass);
+                    // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+                    if (pressESCToClose) {
+                        document.removeEventListener('keydown', pressESCHandler);
+                    }
+                };
+            }
+        }, [openState]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        if (showModal) {
+            const node = (
+                <div className={'DGN-UI-Portal DGN-UI-Modal'} css={_ModalCSS}>
+                    <div id={id} css={_ModalContainerCSS} className={'DGN-UI-Modal-Container'} ref={ref}>
+                        <div
+                            css={_ModalBoxCSS}
+                            ref={modalBoxRef}
+                            onMouseDown={moveable && dragAnyWhere ? dragMouseDown : null}
+                            className={classNames(
+                                'DGN-UI-Modal-Box',
+                                openState ? 'DGN-UI-Modal-Show' : 'DGN-UI-Modal-Hide',
+                                className
+                            )}
+                            style={style}
+                        >
+                            <ModalContext.Provider
+                                value={{
+                                    show: onShowModal,
+                                    close: onCloseModal,
+                                    onMoveModal: moveable && !dragAnyWhere ? dragMouseDown : null,
+                                }}
+                            >
+                                {children}
+                            </ModalContext.Provider>
+                        </div>
+                    </div>
+                </div>
+            );
+            return createPortal(node, document.body);
+        }
+        return null;
+    })
+);
+
+const ModalCSS = zIndex => css`
+    ${positionFixed};
+    z-index: ${zIndex};
+    ${inset(0)};
+`;
+
+const ModalContainerCSS = (zIndex, alignment, { colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionAbsolute}
+    ${justifyCenter};
+    ${parseWidthHeight('100%')};
+    padding-top: ${spacing(alignment === 'top' ? [3] : [0])};
+    ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.5))};
+    ${top(0)};
+    ${left(0)};
+    z-index: ${zIndex};
+    align-items: ${alignment === 'top' ? 'inherit' : 'center'};
+`;
+
+const ModalBoxCSS = (width, moveable, dragAnyWhere, size, { colors, typography }) => css`
+    ${typography.paragraph1};
+    ${displayFlex};
+    ${flexCol};
+    ${positionRelative};
+    ${borderRadius(4)};
+    ${boxBorder};
+    ${parseWidthHeight(size || width, 'max-content')};
+    ${parseMaxWidthHeight('90%', 'calc(100% - 12px)')};
+    ${parseMinWidth(150)};
+    ${moveable && dragAnyWhere && cursorMove};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    ${shadowLarge};
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    animation: ${fadeInDown} 0.2s ease;
+    animation-fill-mode: forwards;
+    &.DGN-UI-Modal-Show {
+        animation: ${fadeInDown} 0.2s ease;
+    }
+    &.DGN-UI-Modal-Hide {
+        animation: ${fadeOutUp} 0.3s ease;
+        animation-fill-mode: forwards;
+    }
+`;
+
+// Modal.defaultProps = {
+//     alignment: 'top',
+//     autoFocus: true,
+//     className: '',
+//     dragAnyWhere: false,
+//     moveable: false,
+//     moveOutScreen: false,
+//     open: false,
+//     pressESCToClose: true,
+//     style: {},
+//     width: '80%',
+//     zIndex: zIndexCORE(),
+// };
+
+Modal.propTypes = {
+    /** The component alignment. */
+    alignment: PropTypes.oneOf(['top', 'center']),
+    /** If `true`, focus when component is shown. */
+    autoFocus: PropTypes.bool,
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** If `true`, allow drag the component at any position. */
+    dragAnyWhere: PropTypes.bool,
+    /** If `true`, allow move the component by drag and move. */
+    moveable: PropTypes.bool,
+    /** If `true`, allows drag the component out of the screen. */
+    moveOutScreen: PropTypes.bool,
+    /** Callback fired when the component requests to be closed. */
+    onClose: PropTypes.func,
+    /** If `true`, the component is shown. */
+    open: PropTypes.bool,
+    /** If `true`, hitting escape will close component. */
+    pressESCToClose: PropTypes.bool,
+    /** The size of components according to breakpoints. */
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** The z-index of component. */
+    zIndex: PropTypes.number,
+};
+
+export { Modal };
+export default OptionWrapper(Modal);

package/src/components/others/date/index.stories.js

@@ -0,0 +1,217 @@
+import { Checkbox, Dropdown, TextInput, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useEffect, useState } from 'react';
+import { date as moment } from 'utils';
+
+export default {
+    title: 'UTILS/Date ',
+};
+
+const dataSource = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
+
+export const Format = () => {
+    const [result, setResult] = useState('');
+    const [date, setDate] = useState(moment(new Date()).format('MM/DD/YYYY HH:mm:ss'));
+    const [inputFormat, setInputFormat] = useState('MM/DD/YYYY');
+    const [formatOutput, setFormatOutput] = useState('DD/MM/YYYY HH:mm:ss');
+    const [UTC, setUTC] = useState(false);
+    useEffect(() => {
+        setResult(moment(date, inputFormat).format(formatOutput, UTC));
+    }, [date, inputFormat, formatOutput, UTC]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date Time'} defaultValue={date} onChange={e => setDate(e.target.value)} />
+            <TextInput
+                label={'Input format'}
+                defaultValue={inputFormat}
+                onChange={e => setInputFormat(e.target.value)}
+            />
+            <TextInput
+                label={'Output format'}
+                defaultValue={formatOutput}
+                onChange={e => setFormatOutput(e.target.value)}
+                placeholder={'L LL LLL LLLL DD/MM/YYYY HH:mm:ss'}
+            />
+            <Checkbox label={'UTC'} defaultValue={UTC} onChange={e => setUTC(e.value)} />
+            <Typography
+                type={'p1'}
+                center
+                color={'info'}
+            >{`Usage: date('${date}', '${inputFormat}').format('${formatOutput}', ${UTC})`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {result}
+            </Typography>
+        </>
+    );
+};
+
+export const Diff = () => {
+    const currentDate = new Date();
+    const [result, setResult] = useState('');
+    const [date1, setDate1] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    currentDate.setMonth(currentDate.getMonth() - 1);
+    const [date2, setDate2] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    const [unit, setUnit] = useState('days');
+    useEffect(() => {
+        setResult(moment(date1).diff(date2, unit));
+    }, [date1, date2, unit]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date 1'} defaultValue={date1} onChange={e => setDate1(e.target.value)} />
+            <TextInput label={'Date 2'} defaultValue={date2} onChange={e => setDate2(e.target.value)} />
+            <Dropdown label={'Unit'} defaultValue={unit} onChange={e => setUnit(e.value)} dataSource={dataSource} />
+            <Typography
+                type={'p1'}
+                center
+                color={'info'}
+            >{`Usage: date('${date1}').diff('${date2}', '${unit}')`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {result + ' ' + unit}
+            </Typography>
+        </>
+    );
+};
+
+export const Calculate = () => {
+    const currentDate = new Date();
+    const [result, setResult] = useState('');
+    const [date, setDate] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    const [value, setValue] = useState(1);
+    const [operator, setOperator] = useState('add');
+    const [unit, setUnit] = useState('days');
+    useEffect(() => {
+        setResult(moment(date)[operator](value, unit));
+    }, [date, value, unit, operator]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date'} defaultValue={date} onChange={e => setDate(e.target.value)} />
+            <TextInput label={'Value'} defaultValue={value} onChange={e => setValue(e.target.value)} type={'number'} />
+            <Dropdown
+                label={'Operator'}
+                defaultValue={operator}
+                onChange={e => setOperator(e.value)}
+                dataSource={['add', 'subtract']}
+            />
+            <Dropdown label={'Unit'} defaultValue={unit} onChange={e => setUnit(e.value)} dataSource={dataSource} />
+            <Typography
+                type={'p1'}
+                center
+                color={'info'}
+            >{`Usage: date('${date}').${operator}(${value}, '${unit}')`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {result && result.format('LLLL')}
+            </Typography>
+        </>
+    );
+};
+
+export const Relative = () => {
+    const currentDate = new Date();
+    const [result, setResult] = useState('');
+    const [date1, setDate1] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    currentDate.setMonth(currentDate.getMonth() - 1);
+    const [date2, setDate2] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    const [unit, setUnit] = useState('day');
+    useEffect(() => {
+        setResult(moment(date1).relative(date2, unit));
+    }, [date1, date2, unit]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date 1'} defaultValue={date1} onChange={e => setDate1(e.target.value)} />
+            <TextInput label={'Date 2'} defaultValue={date2} onChange={e => setDate2(e.target.value)} />
+            <Dropdown
+                label={'Unit'}
+                defaultValue={unit}
+                onChange={e => setUnit(e.value)}
+                dataSource={dataSource
+                    .map(data => data.replace(/.$/, ''))
+                    .filter((_data, index) => index !== dataSource.length - 1)}
+            />
+            <Typography
+                type={'p1'}
+                center
+                color={'info'}
+            >{`Usage: date('${date1}').relative('${date2}', '${unit}')`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {result}
+            </Typography>
+        </>
+    );
+};
+
+export const TimeOf = () => {
+    const currentDate = new Date();
+    const [result, setResult] = useState('');
+    const [date, setDate] = useState(currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString('vi'));
+    const [operator, setOperator] = useState('startOf');
+    const [unit, setUnit] = useState('month');
+    useEffect(() => {
+        setResult(moment(date)[operator](unit));
+    }, [date, unit, operator]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date'} defaultValue={date} onChange={e => setDate(e.target.value)} />
+            <Dropdown
+                label={'Operator'}
+                defaultValue={operator}
+                onChange={e => setOperator(e.value)}
+                dataSource={['startOf', 'endOf']}
+            />
+            <Dropdown
+                label={'Unit'}
+                defaultValue={unit}
+                onChange={e => setUnit(e.value)}
+                dataSource={dataSource
+                    .map(data => data.replace(/.$/, ''))
+                    .filter((_data, index) => index !== dataSource.length - 1)}
+            />
+            <Typography type={'p1'} center color={'info'}>{`Usage: date('${date}').${operator}('${unit}')`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {result && result.format('LLLL')}
+            </Typography>
+        </>
+    );
+};
+
+export const Valid = () => {
+    const [result, setResult] = useState(true);
+    const [date, setDate] = useState(moment(new Date()).format('L'));
+    const [format, setFormat] = useState('DD/MM/YYYY');
+    useEffect(() => {
+        setResult(moment(date, format).isValid());
+    }, [date, format]);
+    return (
+        <>
+            <ImportComp components={'date'} from={'utils'} />
+            <TextInput label={'Date'} defaultValue={date} onChange={e => setDate(e.target.value)} />
+            <TextInput label={'Input Format'} defaultValue={format} onChange={e => setFormat(e.target.value)} />
+            <Typography type={'p1'} center color={'info'}>{`Usage: date('${date}', '${format}').isValid()`}</Typography>
+            <Typography type={'h1'} center>
+                Result
+            </Typography>
+            <Typography type={'h2'} center color={'success'}>
+                {String(result)}
+            </Typography>
+        </>
+    );
+};

package/src/components/others/extra/index.js

@@ -0,0 +1,129 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    bgColor,
+    cursorPointer,
+    displayFlex,
+    fill,
+    itemsCenter,
+    justifyCenter,
+    parseWidthHeight,
+    textColor,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const icons = {
+    expand: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clip-rule="evenodd" d="M11.9999 12.0001C11.7729 12.0001 11.5449 11.9231 11.3599 11.7681L5.35989 6.76807C4.93589 6.41407 4.87889 5.78407 5.23189 5.36007C5.58589 4.93507 6.21489 4.87907 6.63989 5.23207L12.0109 9.70707L17.3729 5.39307C17.8029 5.04707 18.4339 5.11507 18.7789 5.54507C19.1259 5.97507 19.0569 6.60407 18.6269 6.95107L12.6269 11.7791C12.4439 11.9261 12.2219 12.0001 11.9999 12.0001ZM12.011 16.7076L17.373 12.3926C17.803 12.0476 18.434 12.1156 18.779 12.5446C19.125 12.9756 19.057 13.6046 18.627 13.9516L12.627 18.7796C12.444 18.9266 12.222 18.9996 12 18.9996C11.772 18.9996 11.545 18.9226 11.36 18.7676L5.35999 13.7676C4.93499 13.4146 4.87799 12.7846 5.23199 12.3596C5.58499 11.9356 6.21499 11.8776 6.63999 12.2316L12.011 16.7076Z" fill="currentColor"/>
+    </svg>`,
+    collapse: `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clip-rule="evenodd" d="M7.00011 6.99993C7.22711 6.99993 7.45511 7.07693 7.64011 7.23193L13.6401 12.2319C14.0641 12.5859 14.1211 13.2159 13.7681 13.6399C13.4141 14.0649 12.7851 14.1209 12.3601 13.7679L6.98911 9.29293L1.62711 13.6069C1.19711 13.9529 0.566109 13.8849 0.221108 13.4549C-0.125891 13.0249 -0.0568903 12.3959 0.373109 12.0489L6.37311 7.22093C6.55611 7.07393 6.77811 6.99993 7.00011 6.99993ZM6.98901 2.29243L1.62701 6.60743C1.19701 6.95243 0.56601 6.88443 0.22101 6.45543C-0.12499 6.02443 -0.0569899 5.39543 0.37301 5.04843L6.37301 0.220434C6.55601 0.0734332 6.77801 0.000434244 7.00001 0.000434264C7.22801 0.000434283 7.45501 0.077434 7.64001 0.232434L13.64 5.23243C14.065 5.58543 14.122 6.21543 13.768 6.64043C13.415 7.06443 12.785 7.12243 12.36 6.76843L6.98901 2.29243Z" fill="currentColor"/>
+    </svg>`,
+};
+
+const Extra = ({ type, displayText, style, onClick, ...props }) => {
+    const extraRef = useRef(null);
+    const textRef = useRef(null);
+    const iconRef = useRef(null);
+
+    const [typeState, setTypeState] = useState(type);
+
+    const theme = useTheme();
+
+    /* Start styled */
+    const ExtraIconCSS = css`
+        ${displayFlex};
+        ${itemsCenter};
+    `;
+
+    const ExtraTextCSS = css`
+        margin-left: 9px;
+        ${theme.typography.heading4};
+        ${textColor(getProp(theme.colors, 'text/sub'))};
+    `;
+
+    const ExtraCSS = css`
+        ${parseWidthHeight('100%', 40)};
+        ${bgColor(getProp(theme.colors, 'fill/background'))};
+        ${displayFlex};
+        ${justifyCenter};
+        ${itemsCenter};
+        ${textColor(getProp(theme.colors, 'text/sub'))};
+        ${cursorPointer};
+        &:hover {
+            ${bgColor(getProp(theme.colors, 'fill/hover'))};
+            .css-${ExtraIconCSS.name} {
+                ${textColor(getProp(theme.colors, 'system/active'))};
+                path: {
+                    ${fill(getProp(theme.colors, 'system/active'))}
+                }
+            }
+            .css-${ExtraTextCSS.name} {
+                ${textColor(getProp(theme.colors, 'system/active'))};
+            }
+        }
+    `;
+    /* End styled */
+
+    /* Start handler */
+    const handleClick = () => {
+        if (typeState === 'expand') {
+            iconRef.current.innerHTML = icons.collapse;
+            textRef.current.innerHTML = displayText || 'Thu gọn';
+            setTypeState('collapse');
+        } else {
+            iconRef.current.innerHTML = icons.expand;
+            textRef.current.innerHTML = displayText || 'Xem thêm';
+            setTypeState('expand');
+        }
+        if (onClick) onClick({ type: typeState === 'expand' ? 'collapse' : 'expand' });
+    };
+
+    useEffect(() => {
+        iconRef.current.innerHTML = type === 'expand' ? icons.expand : icons.collapse;
+        setTypeState(type);
+    }, [type]);
+
+    useEffect(() => {
+        textRef.current.innerHTML = displayText || (type === 'expand' ? 'Xem thêm' : 'Thu gọn');
+    }, [displayText, type]);
+    /* End handler */
+
+    /* Start component */
+    const iconComp = useMemo(() => <div ref={iconRef} css={ExtraIconCSS}></div>, [theme]);
+
+    const textComp = useMemo(
+        () => (
+            <div ref={textRef} css={ExtraTextCSS}>
+                {displayText}
+            </div>
+        ),
+        [theme]
+    );
+    /* End component */
+
+    return (
+        <div {...props} ref={extraRef} css={ExtraCSS} onClick={handleClick} style={style}>
+            {iconComp}
+            {textComp}
+        </div>
+    );
+};
+
+Extra.defaultProps = {
+    type: 'expand',
+};
+
+Extra.proptypes = {
+    type: PropTypes.string,
+    displayText: PropTypes.string,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
+};
+
+export default memo(Extra);