diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,637 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import {
+    forwardRef,
+    memo,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    bgColor,
+    borderTop,
+    boxBorder,
+    cursorPointer,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    justifyCenter,
+    noPadding,
+    parseHeight,
+    parseMinHeight,
+    parseMinWidth,
+    parseMinWidthHeight,
+    parseWidthHeight,
+    textCenter,
+    textColor,
+    textLeft,
+    whiteSpaceNoWrap,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } 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 PagingInfo = memo(
+    forwardRef(
+        (
+            {
+                action = {},
+                bgColor: bgColorProp,
+                className,
+                currentPage,
+                hideWithPage,
+                id,
+                itemsPerPage,
+                listPerPage,
+                onChangePage,
+                onChangePerPage,
+                onChangingPage,
+                onChangingPerPage,
+                style,
+                totalItems,
+                typeShort,
+            },
+            reference
+        ) => {
+            if (!reference) reference = useRef(null);
+
+            const delayOnInput = getGlobal('delayOnInput');
+
+            const ref = useRef(null);
+            const timer = useRef(null);
+            const currentPageRef = useRef(currentPage);
+            const numberRef = useRef(null);
+            const totalRef = useRef(null);
+
+            const [totalItemsState, setTotalItemsState] = useState(totalItems);
+            const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
+            const [currentPageState, setCurrentPageState] = useState(currentPage);
+            const [listPerPageState, setListPerPageState] = useState(listPerPage);
+            const [disablePrevState, setDisablePrevState] = useState(true);
+            const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
+            const [inputPageValue, setInputPageValue] = useState(currentPage);
+
+            const theme = useTheme();
+
+            const bgColor = getProp(theme.colors, bgColorProp, bgColorProp);
+
+            const _PagingInfoCSS = PagingInfoCSS(bgColor, typeShort, theme);
+            const _ViewNumberInput = ViewNumberInput(theme);
+
+            const _onChangePage = async ({ page, e, changeBy }) => {
+                const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+
+                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);
+                        setInputPageValue(currentPageState);
+                        return;
+                    }
+                }
+
+                currentPageRef.current = page;
+                setCurrentPageState(page);
+                setInputPageValue(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);
+                _onChangePage({ page: 0 });
+                setDisablePrevState(true);
+                setDisableNextState(disableNext);
+                if (onChangePerPage) onChangePerPage(per);
+            };
+
+            const onTypePaging = e => {
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                }
+                const value = e?.value ?? e;
+                const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+                const page =
+                    !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
+                currentPage = page - 1;
+                timer.current = setTimeout(() => {
+                    _onChangePage({ page: page - 1, e: e });
+                }, delayOnInput);
+            };
+
+            const checkKeyPress = e => {
+                if (/,/.test(e.key)) {
+                    e.preventDefault();
+                }
+            };
+
+            useEffect(() => {
+                setTotalItemsState(totalItems);
+            }, [totalItems]);
+
+            useEffect(() => {
+                _onChangePerPage(itemsPerPage);
+            }, [itemsPerPage]);
+
+            useEffect(() => {
+                _onChangePage({ page: currentPage, changeBy: 'currentPage' });
+            }, [currentPage]);
+
+            useEffect(() => {
+                setListPerPageState(listPerPage);
+            }, [listPerPage]);
+
+            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 updateSize = () => {
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                }
+                timer.current = setTimeout(() => {
+                    let conti = true;
+                    [...(ref.current?.children || [])].reverse().forEach(item => {
+                        if (item?.style) {
+                            item.style.display = 'flex';
+                            if (!conti) {
+                                item.style.opacity = 1;
+                                return;
+                            }
+                        }
+                        conti = hiddenEle(item);
+                    });
+                }, 300);
+            };
+
+            useLayoutEffect(() => {
+                window.addEventListener('resize', updateSize);
+                updateSize();
+                return () => window.removeEventListener('resize', updateSize);
+            }, []);
+
+            const hiddenEle = child => {
+                setTimeout(() => {
+                    const infoChild = child?.getBoundingClientRect();
+                    const infoParent = ref.current?.getBoundingClientRect();
+                    if (!infoChild || !infoParent) return;
+
+                    // getBoundingClientRect includes margin => phải trừ đi margin
+                    const style = window.getComputedStyle(child) || child.currentStyle;
+                    const margin = parseInt(style?.marginLeft || 0) + parseInt(style?.marginRight || 0);
+
+                    if (infoChild.right - margin >= infoParent.right) {
+                        child.style.opacity = 0;
+                        child.style.setProperty('display', 'none', 'important');
+                    } else {
+                        child.style.opacity = 1;
+                    }
+                    return infoChild.right >= infoParent.right;
+                });
+            };
+
+            const setWithNumber = useCallback(
+                (totalRefs = totalRef, numberRefs = numberRef) => {
+                    if (!totalRefs) totalRefs = totalRef.current;
+                    if (!numberRefs) numberRefs = numberRef.current;
+
+                    if (!totalRefs || !numberRefs) return;
+                    const infoText = totalRefs?.getBoundingClientRect();
+                    if (infoText && numberRefs) {
+                        numberRefs.style.width = `${infoText.width * 2 + 6}px`;
+                        numberRefs.style.minWidth = `${infoText.width * 2 + 6}px`;
+                    }
+                },
+                [totalRef, numberRef]
+            );
+
+            const checkShowPaging = () => {
+                switch (hideWithPage) {
+                    case 'empty':
+                        return totalItemsState !== 0;
+                    case 'single':
+                        return totalItemsState / itemsPerPageState > 1;
+                    case 'none':
+                    default:
+                        return true;
+                }
+            };
+
+            return useMemo(() => {
+                const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+                let listPerPageData = !listPerPageState.includes(itemsPerPageState)
+                    ? [{ name: itemsPerPageState, id: itemsPerPageState }]
+                    : [];
+                listPerPageState.map(item => (listPerPageData = [...listPerPageData, { name: item, id: item }]));
+                listPerPageData = [...new Map(listPerPageData.map(v => [JSON.stringify(v), v])).values()];
+                listPerPageData.sort((a, b) => a.id - b.id);
+                const showPaging = checkShowPaging();
+
+                return showPaging ? (
+                    <div
+                        ref={ref}
+                        css={_PagingInfoCSS}
+                        id={id}
+                        style={style}
+                        className={classNames('DGN-UI-PagingInfo', className)}
+                    >
+                        <ButtonIcon
+                            circular
+                            viewType={'ghost'}
+                            size={'small'}
+                            name={'ArrowDoubleLeft'}
+                            disabled={disablePrevState}
+                            onClick={e => {
+                                setInputPageValue(0);
+                                currentPageRef.current = 0;
+                                if (timer.current) {
+                                    clearTimeout(timer.current);
+                                }
+                                timer.current = setTimeout(() => {
+                                    _onChangePage({ page: 0, e: e });
+                                }, delayOnInput);
+                            }}
+                        />
+                        <ButtonIcon
+                            circular
+                            viewType={'ghost'}
+                            size={'small'}
+                            name={'ArrowLeft'}
+                            disabled={disablePrevState}
+                            onClick={e => {
+                                setInputPageValue(inputPageValue - 1);
+                                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);
+                            }}
+                        />
+                        <div
+                            css={_ViewNumberInput}
+                            ref={refs => {
+                                numberRef.current = refs;
+                                setWithNumber(null, refs);
+                            }}
+                        >
+                            <NumberInput
+                                disabledNegative
+                                className={'inputPage'}
+                                value={inputPageValue ? String(inputPageValue + 1) : '1'}
+                                min={1}
+                                autoWidth
+                                inputStyle={{ minWidth: 10 }}
+                                width={'auto'}
+                                placeholder={''}
+                                max={lastPage}
+                                onKeyDown={checkKeyPress}
+                                onChange={onTypePaging}
+                                maxDigit={lastPage.toString()?.length}
+                            />
+                            /
+                            <Typography
+                                ref={refs => {
+                                    totalRef.current = refs;
+                                    setWithNumber(refs, null);
+                                }}
+                                css={whiteSpaceNoWrap}
+                                type={'p2'}
+                            >
+                                {lastPage}
+                            </Typography>
+                        </div>
+                        <ButtonIcon
+                            circular
+                            viewType={'ghost'}
+                            size={'small'}
+                            name={'ArrowRight'}
+                            disabled={disableNextState}
+                            onClick={e => {
+                                setInputPageValue(inputPageValue + 1);
+                                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);
+                            }}
+                        />
+                        <ButtonIcon
+                            circular
+                            viewType={'ghost'}
+                            size={'small'}
+                            name={'ArrowDoubleRight'}
+                            disabled={disableNextState}
+                            onClick={e => {
+                                setInputPageValue(lastPage - 1);
+                                currentPageRef.current = lastPage - 1;
+                                if (timer.current) {
+                                    clearTimeout(timer.current);
+                                }
+                                timer.current = setTimeout(() => {
+                                    _onChangePage({ page: lastPage - 1, e: e });
+                                }, delayOnInput);
+                            }}
+                        />
+                        <Typography type={'p2'} ref={hiddenEle} className="txt-line-number">
+                            {typeShort ? (
+                                <Divider direction={'vertical'} height={24} color={'line/category'} />
+                            ) : (
+                                getGlobal('lineNumber')
+                            )}
+                            <Dropdown
+                                allowSearch={false}
+                                viewType={'underlined'}
+                                dataSource={listPerPageData}
+                                value={itemsPerPageState}
+                                onChange={e => _onChangePerPage(e?.value)}
+                                inputStyle={{ width: `${Math.max(...listPerPageState).toString().length}ch` }}
+                                inputProps={{ readOnly: true }}
+                                dropdownItemStyle={{ color: getProp(theme.colors, 'system/active') }}
+                            />
+                        </Typography>
+                        <Typography type={'p2'} ref={hiddenEle} className={'total-items'}>
+                            {typeShort ? (
+                                <Divider direction={'vertical'} height={24} color={'line/category'} />
+                            ) : (
+                                getGlobal('total') + ':'
+                            )}
+                            {totalItemsState}
+                        </Typography>
+                    </div>
+                ) : null;
+            }, [
+                bgColorProp,
+                className,
+                hideWithPage,
+                style,
+                typeShort,
+                currentPageState,
+                disableNextState,
+                disablePrevState,
+                inputPageValue,
+                itemsPerPageState,
+                listPerPageState,
+                theme,
+                totalItemsState,
+            ]);
+        }
+    )
+);
+
+const ViewNumberInput = ({ spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${justifyCenter};
+    margin: ${spacing([0, 1])};
+    transition: all 0.1s;
+`;
+
+const PagingInfoCSS = (bgCl, typeShort, { colors, spacing, typography }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${typography.paragraph2};
+    ${boxBorder};
+    ${parseHeight(40)};
+    ${borderTop(1, 'line/system')};
+    padding: ${spacing([1, 0])};
+    ${bgColor(bgCl)};
+    ${textColor(getProp(colors, 'text/main'))};
+    .inputPage {
+        ${textCenter};
+        margin: ${spacing([0, 0.5])};
+        .DGN-UI-InputBase {
+            ${noPadding};
+            input {
+                ${typography.paragraph2};
+                ${textCenter};
+                ${textColor(getProp(colors, 'system/active'))};
+                ${textLeft};
+            }
+        }
+    }
+    .txt-line-number {
+        ${displayFlex};
+        ${whiteSpaceNoWrap};
+        ${itemsCenter};
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    .DGN-UI-Divider {
+        margin: ${spacing([0, 2])};
+    }
+    .DGN-UI-Dropdown {
+        margin-left: ${spacing([typeShort ? 0 : 2])};
+        margin-bottom: 0px;
+        ${parseMinWidth(52)};
+        .DGN-UI-Dropdown-Form {
+            ${parseMinHeight(24)};
+            padding: ${spacing([0])};
+            input,
+            span {
+                ${typography.paragraph2};
+                ${noPadding};
+                ${cursorPointer};
+            }
+            .DGN-UI-Dropdown-Icon {
+                margin-left: ${spacing([1.5])};
+                div,
+                span,
+                svg {
+                    ${parseWidthHeight(20)};
+                    ${parseMinWidthHeight(20)};
+                }
+            }
+        }
+    }
+    .total-items {
+        ${displayFlex};
+        ${flexRow};
+        ${whiteSpaceNoWrap};
+        ${itemsCenter};
+        margin-left: ${spacing([typeShort ? 0 : 4])};
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+`;
+
+PagingInfo.defaultProps = {
+    bgColor: 'system/standard',
+    className: '',
+    currentPage: 0,
+    hideWithPage: 'none',
+    listPerPage: [10, 15, 20, 30, 50],
+    style: {},
+    totalItems: 0,
+    typeShort: false,
+};
+
+PagingInfo.propTypes = {
+    /** Background color for component. */
+    bgColor: PropTypes.string,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Specifies the current page. */
+    currentPage: PropTypes.number,
+    /** Hidden mode for page selector. */
+    hideWithPage: PropTypes.oneOf(['none', 'empty', 'single']),
+    /** The quantity of items per page. */
+    itemsPerPage: PropTypes.number,
+    /** The list to choose the number of elements to display per page. */
+    listPerPage: PropTypes.array,
+    /** 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,
+    /** Compact type for mobile. */
+    typeShort: PropTypes.bool,
+    /**
+     * 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 { PagingInfo };
+export default OptionWrapper(PagingInfo);