diginet-core-ui 1.4.39 → 1.4.40

package/src/components/paging/page-selector.js

@@ -0,0 +1,437 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { bgColor, borderTop, boxBorder, displayFlex, flexRow, itemsCenter, parseWidthHeight } from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, useElementSize } from 'utils';
+
+const getLastPage = (totalItems, itemsPerPage) => {
+    let _lastPage = 0;
+
+    if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
+        _lastPage = Math.ceil(totalItems / itemsPerPage);
+        return _lastPage;
+    }
+
+    return _lastPage + 1;
+};
+
+const PagingSelector = memo(
+    forwardRef(
+        (
+            {
+                action = {},
+                className,
+                currentPage,
+                hideEllipsis,
+                hideWithPage,
+                id,
+                itemsPerPage,
+                onChangePage,
+                onChangePerPage,
+                onChangingPage,
+                onChangingPerPage,
+                style,
+                totalItems,
+            },
+            reference
+        ) => {
+            const delayOnInput = getGlobal('delayOnInput');
+
+            const ref = useRef(null);
+            const timer = useRef(null);
+            const currentPageRef = useRef(currentPage);
+
+            const [totalItemsState, setTotalItemsState] = useState(totalItems);
+            const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || 10);
+            const [currentPageState, setCurrentPageState] = useState(currentPage);
+            const [disablePrevState, setDisablePrevState] = useState(true);
+            const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
+
+            const [refSize, { width: componentWidth }] = useElementSize();
+
+            const theme = useTheme();
+
+            const _PageSelectorCSS = PageSelectorCSS(theme);
+
+            const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+
+            const _onChangePage = async ({ page, e, changeBy }) => {
+                let disablePrev = false;
+                let disableNext = false;
+
+                // If last page = 1. Disable all
+                if (lastPage === 1) {
+                    disablePrev = true;
+                    disableNext = true;
+                }
+
+                // If current page = last page. Disable Next and Last
+                if (page + 1 >= lastPage) {
+                    disableNext = true;
+                }
+
+                // If current page = 0. Disable Previous and First
+                if (page === 0) {
+                    disablePrev = true;
+                }
+
+                setDisablePrevState(disablePrev);
+                setDisableNextState(disableNext);
+                if (page === currentPageState) return;
+
+                if (onChangingPage) {
+                    const event = {
+                        ...e,
+                        cancel: false,
+                        prevPage: currentPageState,
+                        newPage: page,
+                        changeBy: changeBy,
+                    };
+                    await onChangingPage(event);
+                    if (event.cancel) {
+                        if (e?.reset) e.reset();
+                        currentPageRef.current = currentPageState;
+                        setCurrentPageState(currentPageState);
+                        return;
+                    }
+                }
+
+                currentPageRef.current = page;
+                setCurrentPageState(page);
+                if (onChangePage) onChangePage(page);
+            };
+
+            const _onChangePerPage = async per => {
+                if (per === itemsPerPageState) return;
+                const lastPage = getLastPage(totalItemsState, per);
+
+                per = parseInt(per, 10);
+
+                let disableNext = false;
+
+                // If last page = 1. Disable all
+                if (lastPage === 1) {
+                    disableNext = true;
+                }
+
+                if (onChangingPerPage) {
+                    const event = { cancel: false, prevPerPage: itemsPerPageState, newPerPage: per };
+                    await onChangingPerPage(event);
+                    if (event.cancel) {
+                        return;
+                    }
+                }
+
+                setItemsPerPageState(per);
+                // currentPageRef.current = 0;
+                // setCurrentPageState(0);
+                _onChangePage({ page: 0 });
+                setDisablePrevState(true);
+                setDisableNextState(disableNext);
+                if (onChangePerPage) onChangePerPage(per);
+            };
+
+            useEffect(() => {
+                setTotalItemsState(totalItems);
+            }, [totalItems]);
+
+            useEffect(() => {
+                _onChangePerPage(itemsPerPage);
+            }, [itemsPerPage]);
+
+            useEffect(() => {
+                _onChangePage({ page: currentPage, changeBy: 'currentPage' });
+            }, [currentPage]);
+
+            useEffect(() => {
+                _onChangePage({
+                    page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+                    changeBy: 'totalItems',
+                });
+            }, [totalItemsState]);
+
+            useEffect(() => {
+                _onChangePage({
+                    page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+                    changeBy: 'itemsPerPage',
+                });
+            }, [itemsPerPageState]);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                currentRef.element = ref.current;
+                const _instance = {
+                    onChangePage: page => _onChangePage({ page: page, changeBy: 'ref' }),
+                    onChangePerPage: per => _onChangePerPage(per),
+                    setTotalItems: items => setTotalItemsState(items),
+                    ...action,
+                }; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                currentRef.onChangePage = page => _onChangePage({ page: page, changeBy: 'ref' });
+                currentRef.onChangePerPage = per => _onChangePerPage(per);
+                currentRef.setTotalItems = items => setTotalItemsState(items);
+                return currentRef;
+            });
+
+            const renderButton = (key, page, isSelected, customDisplay) => {
+                if (page >= lastPage || page < 0) return;
+                return (
+                    <ButtonIcon
+                        key={key}
+                        css={theme.typography.paragraph2}
+                        circular
+                        viewType={isSelected ? 'filled' : 'text'}
+                        size={'small'}
+                        color={'primary'}
+                        style={{ fontWeight: 'normal' }}
+                        onClick={e => page !== currentPageState && _onChangePage({ page: page, e: e })}
+                    >
+                        {customDisplay || page + 1}
+                    </ButtonIcon>
+                );
+            };
+
+            const checkShowSelector = () => {
+                switch (hideWithPage) {
+                    case 'empty':
+                        return totalItemsState !== 0;
+                    case 'single':
+                        return totalItemsState / itemsPerPageState > 1;
+                    case 'none':
+                    default:
+                        return true;
+                }
+            };
+
+            return useMemo(() => {
+                const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
+                const pageArr = [...Array(count).keys()];
+                const halfArrLength = Math.floor(count / 2);
+                const quarterArrLength = Math.floor(count / 2.5);
+                const showEllipsis = !hideEllipsis && count !== lastPage && count >= 5;
+                const showSelector = checkShowSelector();
+
+                return (
+                    showSelector && (
+                        <div
+                            css={_PageSelectorCSS}
+                            ref={node => {
+                                ref.current = node;
+                                refSize(node);
+                            }}
+                            id={id}
+                            style={style}
+                            className={classNames('DGN-UI-PagingSelector', className)}
+                        >
+                            <ButtonIcon
+                                circular
+                                viewType={'text'}
+                                size={'small'}
+                                name={'ArrowLeft'}
+                                disabled={disablePrevState}
+                                onClick={e => {
+                                    currentPageRef.current =
+                                        currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
+                                    if (timer.current) {
+                                        clearTimeout(timer.current);
+                                    }
+                                    timer.current = setTimeout(() => {
+                                        _onChangePage({ page: currentPageRef.current, e: e });
+                                    }, delayOnInput);
+                                }}
+                            />
+                            {pageArr.map((_, idx) => {
+                                if (currentPageState < halfArrLength) {
+                                    // các trang đầu
+                                    if (showEllipsis) {
+                                        if (idx === count - 1 && lastPage - 1 >= 10) {
+                                            return renderButton(idx, lastPage - 1);
+                                        } else {
+                                            return renderButton(
+                                                idx,
+                                                idx,
+                                                idx === currentPageState,
+                                                idx === count - 2 && '...'
+                                            );
+                                        }
+                                    } else return renderButton(idx, idx, idx === currentPageState);
+                                } else if (currentPageState >= lastPage - halfArrLength) {
+                                    // các trang cuối
+                                    if (showEllipsis) {
+                                        if (idx === 0) {
+                                            return renderButton(idx, idx);
+                                        } else {
+                                            return renderButton(
+                                                idx,
+                                                lastPage - count + idx,
+                                                lastPage - count + idx === currentPageState,
+                                                idx === 1 && '...'
+                                            );
+                                        }
+                                    } else {
+                                        return renderButton(
+                                            idx,
+                                            lastPage - count + idx,
+                                            lastPage - count + idx === currentPageState
+                                        );
+                                    }
+                                } else {
+                                    // các trang giữa
+                                    if (idx < quarterArrLength) {
+                                        if (showEllipsis) {
+                                            if (idx === 0) {
+                                                return renderButton(idx, idx);
+                                            } else {
+                                                return renderButton(
+                                                    idx,
+                                                    currentPageState - quarterArrLength + idx,
+                                                    false,
+                                                    idx === 1 && '...'
+                                                );
+                                            }
+                                        } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+                                    } else if (idx === quarterArrLength) {
+                                        return renderButton(idx, currentPageState, true);
+                                    } else {
+                                        if (showEllipsis) {
+                                            if (idx === count - 1) {
+                                                return renderButton(idx, lastPage - 1);
+                                            } else {
+                                                return renderButton(
+                                                    idx,
+                                                    currentPageState - quarterArrLength + idx,
+                                                    false,
+                                                    idx === count - 2 && '...'
+                                                );
+                                            }
+                                        } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+                                    }
+                                }
+                            })}
+                            <ButtonIcon
+                                circular
+                                viewType={'text'}
+                                size={'small'}
+                                name={'ArrowRight'}
+                                disabled={disableNextState}
+                                onClick={e => {
+                                    currentPageRef.current =
+                                        currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
+                                    if (timer.current) {
+                                        clearTimeout(timer.current);
+                                    }
+                                    timer.current = setTimeout(() => {
+                                        _onChangePage({ page: currentPageRef.current, e: e });
+                                    }, delayOnInput);
+                                }}
+                            />
+                        </div>
+                    )
+                );
+            }, [
+                className,
+                hideEllipsis,
+                hideWithPage,
+                id,
+                style,
+                componentWidth,
+                currentPageState,
+                disableNextState,
+                disablePrevState,
+                itemsPerPageState,
+                theme,
+                totalItemsState,
+            ]);
+        }
+    )
+);
+
+const PageSelectorCSS = ({ colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${boxBorder};
+    ${parseWidthHeight('100%', 40)};
+    padding: ${spacing([1])};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    ${borderTop(1, getProp(colors, 'line/system'))};
+`;
+
+PagingSelector.defaultProps = {
+    className: '',
+    currentPage: 0,
+    hideEllipsis: false,
+    hideWithPage: 'none',
+    style: {},
+    totalItems: 0,
+};
+
+PagingSelector.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Specifies the current page. */
+    currentPage: PropTypes.number,
+    /** If `true`, hide ellipsis. */
+    hideEllipsis: PropTypes.bool,
+    /** Hidden mode for page selector. */
+    hideWithPage: PropTypes.oneOf(['none', 'empty', 'single']),
+    /** The quantity of items per page. */
+    itemsPerPage: PropTypes.number,
+    /** Callback fired when page number changed. */
+    onChangePage: PropTypes.func,
+    /** Callback fired when quantity on per page changed. */
+    onChangePerPage: PropTypes.func,
+    /**
+     * Callback fired when page number is changing.
+     *
+     * * prevPage: Page before changed
+     * * newPage: Page after changed
+     * * cancel(value): Function cancel change page
+     *  * @param {value} - bool
+     */
+    onChangingPage: PropTypes.func,
+    /**
+     * Callback fired when quantity on item per page is changing.
+     *
+     * * prevPerPage: Items per page before changed
+     * * newPerPage: Items per page after changed
+     * * cancel(value): Function cancel change items per page
+     *  * @param {value} - bool
+     */
+    onChangingPerPage: PropTypes.func,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Total items. */
+    totalItems: PropTypes.number,
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * onChangePage(page): Change page number
+     *  * @param {page} - number
+     * * onChangePerPage(per): Change quantity on per page
+     *  * @param {per} - number
+     * * setTotalItems(items): Set total items
+     *  * @param {items} - number
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+};
+
+export { PagingSelector };
+export default OptionWrapper(PagingSelector);

package/src/components/paper/index.js

@@ -0,0 +1,128 @@
+/** @jsxRuntime classic */
+import { css } from '@emotion/core';
+import { bool, func, node, number, oneOfType, string } from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    border,
+    borderRadius,
+    parseMaxHeight,
+    parseWidth,
+    parseWidthHeight,
+    shadowSmall,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, renderHTML } from 'utils';
+
+const Paper = memo(
+    forwardRef(({ width, height, mapping, bg, className, square, scrollAble, children, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+
+        const PaperRoot = css`
+            ${parseWidthHeight(width, height)};
+            ${border(1, getProp(theme.colors, 'line/normal'))};
+            ${borderRadius(4)};
+            ${bgColor(getProp(theme.colors, bg, bg))};
+            ${shadowSmall};
+            &.square {
+                ${borderRadius(0)};
+            }
+            &.scroll-able {
+                ${parseMaxHeight(height)};
+                overflow-y: auto;
+                &::-webkit-scrollbar {
+                    ${parseWidth(8)};
+                    ${bgColor(getProp(theme.colors, 'system/standard'))};
+                    ${borderRadius(4)};
+                }
+                &::-webkit-scrollbar-thumb {
+                    ${borderRadius(4)};
+                    mix-blend-mode: normal;
+                    ${bgColor(getProp(theme.colors, 'fill/disabled'))};
+                    background-clip: content-box;
+                }
+            }
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        useEffect(() => {
+            if (square) {
+                ref.current.classList.add('square');
+            }
+            return () => {
+                if (square && ref.current) {
+                    ref.current.classList.remove('square');
+                }
+            };
+        }, [square]);
+
+        useEffect(() => {
+            if (scrollAble && !ref.current.classList.contains('scroll-able')) {
+                ref.current.classList.add('scroll-able');
+            }
+            return () => {
+                if (scrollAble && ref.current) {
+                    ref.current.classList.remove('scroll-able');
+                }
+            };
+        }, [scrollAble]);
+
+        const PaperView = useMemo(
+            () =>
+                renderHTML(children, mapping, {
+                    ref,
+                    css: PaperRoot,
+                    className: classNames(className, scrollAble && 'scroll-able'),
+                    ...props,
+                }),
+            [children, theme]
+        );
+
+        return PaperView;
+    })
+);
+
+Paper.defaultProps = {
+    width: 240,
+    height: 240,
+    mapping: 'div',
+    bg: 'system/standard',
+    className: '',
+    square: false,
+    scrollAble: false,
+};
+
+Paper.propTypes = {
+    /** the width of Paper */
+    width: oneOfType([string, number]),
+    /** the height of Paper */
+    height: oneOfType([string, number]),
+    /** html tag to render */
+    mapping: string,
+    /** background color of Paper */
+    bg: string,
+    /** className of Paper component */
+    className: string,
+    /** rounded Paper if false */
+    square: bool,
+    /** Allow to roll if the height exceeds the limit */
+    scrollAble: bool,
+    /** the function to get ref of Paper */
+    refs: func,
+    /** content to display in Paper */
+    children: node,
+};
+
+export default Paper;

package/src/components/paper/index.stories.js

@@ -0,0 +1,37 @@
+import { Avatar, Paper } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+
+export default {
+    title: 'Components/Paper',
+    components: Paper,
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'Paper'} />
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'darkgray' }}>
+            <Paper {...args}>
+                <Avatar src={'https://i.pinimg.com/564x/e6/57/55/e65755e73d8085e30aedfa21fde07f1b.jpg'} />
+            </Paper>
+        </div>
+    </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+    square: false,
+    width: '240px',
+    height: '240px',
+    mapping: 'div',
+    style: { display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' },
+};
+
+export const Square = Template.bind({});
+Square.args = {
+    square: true,
+    width: '240px',
+    height: '240px',
+    mapping: 'div',
+    style: { display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' },
+};

package/src/components/popover/body.js

@@ -0,0 +1,98 @@
+/** @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, useImperativeHandle, useRef } from 'react';
+import {
+    bgColor,
+    border,
+    borderRadius,
+    displayFlex,
+    flexCol,
+    order,
+    overflowAuto,
+    parseWidth,
+    positionRelative,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const PopoverBody = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'PopoverBody' });
+        const { action = {}, children, className, id, style } = props;
+
+        const ref = useRef(null);
+
+        const _PopoverBodyCSS = PopoverBodyCSS(theme);
+
+        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
+                css={_PopoverBodyCSS}
+                ref={ref}
+                id={id}
+                style={style}
+                className={classNames('DGN-UI-Popover-Body', className)}
+            >
+                {children}
+            </div>
+        );
+    })
+);
+
+const PopoverBodyCSS = ({ colors, spacing }) => css`
+    ${displayFlex};
+    ${flexCol};
+    ${positionRelative};
+    ${overflowAuto};
+    padding: ${spacing([4])};
+    ${order(2)};
+    &::-webkit-scrollbar {
+        ${parseWidth(24)};
+    }
+    &::-webkit-scrollbar-thumb {
+        ${borderRadius(10)};
+        mix-blend-mode: normal;
+        ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
+        background-clip: content-box;
+        ${border(8, 'transparent')};
+        :hover {
+            ${bgColor(getProp(colors, 'fill/scrollbar_hover'))};
+        }
+    }
+`;
+
+// PopoverBody.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
+PopoverBody.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+
+export { PopoverBody };
+export default OptionWrapper(PopoverBody);