diginet-core-ui 1.4.39 → 1.4.40

package/src/components/transfer/index.js

@@ -0,0 +1,555 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Checkbox, Paper, Typography } from 'components';
+import { getGlobal } from 'global';
+import { array, bool, func, number, object, oneOfType, string } from 'prop-types';
+import { Fragment, forwardRef, memo, useMemo, useRef, useState } from 'react';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    displayBlock,
+    displayFlex,
+    displayInlineFlex,
+    flexCol,
+    itemsCenter,
+    justifyCenter,
+    objectCover,
+    parseMinHeight,
+    parseWidth,
+    parseWidthHeight,
+    positionRelative,
+    positionSticky,
+    shadowSmall,
+    top,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { capitalize, classNames, getProp } from 'utils';
+
+const Transfer = memo(
+    forwardRef(
+        (
+            {
+                choicesList,
+                chosenList,
+                selectAll,
+                iconExpr,
+                displayExpr,
+                width,
+                height,
+                paperProps,
+                renderItem,
+                ...props
+            },
+            reference
+        ) => {
+            if (!reference) reference = useRef(null);
+
+            const leftPaperRef = useRef(null),
+                rightPaperRef = useRef(null),
+                selectAllLeftRef = useRef(null),
+                selectAllRightRef = useRef(null),
+                chosenTextLeftRef = useRef(null),
+                chosenTextRightRef = useRef(null);
+
+            const [disabledAllLeft, setDisabledAllLeft] = useState(!chosenList.length),
+                [disabledAllRight, setDisabledAllRight] = useState(!choicesList.length),
+                [disabledLeft, setDisabledLeft] = useState(true),
+                [disabledRight, setDisabledRight] = useState(true),
+                [selectAllLeft, setSelectAllLeft] = useState(!!choicesList.length),
+                [selectAllRight, setSelectAllRight] = useState(!!chosenList.length),
+                [determinateLeft, setDeterminateLeft] = useState(true),
+                [determinateRight, setDeterminateRight] = useState(true);
+
+            const theme = useTheme();
+            const { spacing } = theme;
+
+            const TransferCSS = css`
+                ${displayFlex};
+                ${positionRelative};
+            `;
+
+            const TransferBoxCSS = css`
+                ${displayBlock};
+                ${positionRelative};
+                margin: ${spacing([2, 0])};
+                &.select-all {
+                    max-height: calc(100% - 72px);
+                    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, 'system/disabled'))};
+                        background-clip: content-box;
+                    }
+                }
+            `;
+
+            const TransferItemCSS = css`
+                ${displayFlex};
+                ${positionRelative};
+                ${parseMinHeight(40)};
+                &:hover {
+                    ${bgColor(getProp(theme.colors, 'fill/hover'))};
+                }
+            `;
+
+            const TransferItemContentCSS = css`
+                ${displayFlex}
+                ${positionRelative};
+                margin: ${spacing([0, 4])};
+                ${parseWidth('100%')};
+                ${itemsCenter};
+                ${boxBorder};
+            `;
+
+            const TransferItemHeaderCSS = css`
+                ${displayFlex};
+                ${positionSticky};
+                ${top(0)};
+                ${bgColor('inherit')};
+                ${parseWidthHeight('100%', 56)};
+                padding: ${spacing([2, 4])};
+                ${itemsCenter};
+                ${boxBorder};
+                ${shadowSmall};
+                ${z(2)};
+            `;
+
+            const HeaderCheckboxCSS = css`
+                ${displayInlineFlex};
+                ${positionRelative};
+                ${parseWidthHeight(40)};
+                ${itemsCenter};
+            `;
+
+            const HeaderTitleCSS = css`
+                ${displayBlock};
+                ${positionRelative};
+            `;
+
+            const ItemCheckboxCSS = css`
+                ${displayBlock};
+                ${positionRelative};
+                margin-right: ${spacing([4.75])};
+            `;
+
+            const ItemContentCSS = css`
+                ${displayFlex};
+                ${positionRelative};
+                ${itemsCenter};
+            `;
+
+            const ItemImageCSS = css`
+                ${parseWidthHeight(24)};
+                margin-right: ${spacing([2])};
+                ${objectCover};
+            `;
+
+            const DashboardCSS = css`
+                ${displayFlex};
+                ${flexCol};
+                ${positionRelative};
+                ${justifyCenter}
+                margin-left: ${spacing([1.25])};
+                margin-right: ${spacing([1.25])};
+                button {
+                    margin-top: ${spacing([1.25])};
+                    margin-bottom: ${spacing([1.25])};
+                }
+            `;
+
+            const updateSelectedItemQuantity = (side, newTotal) => {
+                const sideRef = side === 'right' ? chosenTextRightRef : chosenTextLeftRef;
+                const sidePaperRef = side === 'right' ? rightPaperRef : leftPaperRef;
+                const text = sideRef.current.textContent;
+                const [, total] = text.match(/\d+/g);
+                const number = Array.from(sidePaperRef.current.querySelectorAll('input')).reduce(
+                    (prev, input) => prev + (input.checked ? 1 : 0),
+                    0
+                );
+                sideRef.current.textContent = `${number}/${typeof newTotal === 'number' ? newTotal : total} ${getGlobal(
+                    'selected'
+                )}`;
+            };
+
+            const checkValue = e => {
+                let side = '';
+                let parent = e.target;
+                while (!side && parent) {
+                    side = parent.getAttribute('data-side');
+                    parent = parent.parentNode;
+                }
+                // e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('data-side');
+                if (side === 'left') {
+                    if (e.value) {
+                        setDisabledRight(false);
+                        if (selectAll) {
+                            setDeterminateLeft(
+                                Array.from(leftPaperRef.current.querySelectorAll('input')).every(input => input.checked)
+                            );
+                            selectAllLeftRef.current.checked = true;
+                            // Update selected item quantity
+                            updateSelectedItemQuantity(side);
+                        }
+                    } else {
+                        const isNotChecked = !Array.from(leftPaperRef.current.childNodes).some(
+                            node => node.querySelector('input').checked
+                        );
+                        setDisabledRight(isNotChecked);
+                        if (selectAll) {
+                            setDeterminateLeft(false);
+                            selectAllLeftRef.current.checked = !isNotChecked;
+                            // Update selected item quantity
+                            updateSelectedItemQuantity(side);
+                        }
+                    }
+                } else {
+                    if (e.value) {
+                        setDisabledLeft(false);
+                        if (selectAll) {
+                            setDeterminateRight(
+                                Array.from(rightPaperRef.current.querySelectorAll('input')).every(
+                                    input => input.checked
+                                )
+                            );
+                            selectAllRightRef.current.checked = true;
+                            // Update selected item quantity
+                            updateSelectedItemQuantity(side);
+                        }
+                    } else {
+                        const isNotChecked = !Array.from(rightPaperRef.current.childNodes).some(
+                            node => node.querySelector('input').checked
+                        );
+                        setDisabledLeft(isNotChecked);
+                        if (selectAll) {
+                            setDeterminateRight(false);
+                            selectAllRightRef.current.checked = !isNotChecked;
+                            // Update selected item quantity
+                            updateSelectedItemQuantity(side);
+                        }
+                    }
+                }
+            };
+
+            const selectAllItem = (e, side) => {
+                if (side === 'right') {
+                    setDisabledLeft(false);
+                    rightPaperRef.current.querySelectorAll('input').forEach(input => {
+                        input.checked = e.value;
+                    });
+                } else {
+                    setDisabledRight(false);
+                    leftPaperRef.current.querySelectorAll('input').forEach(input => {
+                        input.checked = e.value;
+                    });
+                }
+                updateSelectedItemQuantity(side);
+            };
+
+            const renderItemDefault = (item, index) => {
+                return (
+                    <div css={TransferItemCSS} key={index}>
+                        <div css={TransferItemContentCSS}>
+                            <div css={ItemCheckboxCSS}>
+                                <Checkbox onChange={e => checkValue(e)} />
+                            </div>
+                            <div css={ItemContentCSS}>
+                                {!renderItem && iconExpr && item[iconExpr] && (
+                                    <img src={item[iconExpr]} css={ItemImageCSS} />
+                                )}
+                                <Typography>{renderItem ? renderItem(item, index) : renderContent(item)}</Typography>
+                            </div>
+                        </div>
+                    </div>
+                );
+            };
+
+            const renderContent = item => {
+                if (typeof item === 'object') {
+                    if (displayExpr && Array.isArray(displayExpr)) {
+                        displayExpr = displayExpr.join(' - ');
+                    }
+                    const keyArr = displayExpr && displayExpr.match(/\{\w+\}/g);
+                    if (keyArr) {
+                        const pattern = keyArr.join('|').replace(/([\\{\\}])/g, '\\$1');
+                        const separatorArr = displayExpr.split(new RegExp(pattern));
+                        let str = '';
+                        let i = 0;
+                        for (i; i < keyArr.length; i++) {
+                            str += separatorArr[i] + (item[keyArr[i].replace(/\W/g, '')] || keyArr[i]);
+                        }
+                        return str + separatorArr[i];
+                    }
+                    return item[displayExpr];
+                }
+                return item;
+            };
+
+            const transferAll = direction => {
+                if (direction === 'right') {
+                    const childNodes = Array.from(leftPaperRef.current.childNodes);
+                    const length = childNodes.length;
+                    for (let i = 0; i < length; i++) {
+                        childNodes[i].querySelector('input').checked = false;
+                        rightPaperRef.current.appendChild(childNodes[i]);
+                    }
+                    leftPaperRef.current.innerHTML = null;
+                    setDisabledAllLeft(false);
+                    setDisabledAllRight(true);
+                    setDisabledRight(true);
+                } else {
+                    const childNodes = Array.from(rightPaperRef.current.childNodes);
+                    const length = childNodes.length;
+                    for (let i = 0; i < length; i++) {
+                        childNodes[i].querySelector('input').checked = false;
+                        leftPaperRef.current.appendChild(childNodes[i]);
+                    }
+                    rightPaperRef.current.innerHTML = null;
+                    setDisabledAllLeft(true);
+                    setDisabledAllRight(false);
+                    setDisabledLeft(true);
+                }
+            };
+
+            const transferItem = direction => {
+                if (direction === 'right') {
+                    const childNodes = Array.from(leftPaperRef.current.childNodes);
+                    const length = childNodes.length;
+
+                    for (let i = 0; i < length; i++) {
+                        const node = childNodes[i];
+                        if (node.querySelector('input').checked) {
+                            node.querySelector('input').checked = false;
+                            rightPaperRef.current.appendChild(node);
+                        }
+                    }
+                    setDisabledRight(true);
+                    const remainLength = Array.from(leftPaperRef.current.childNodes).length;
+                    if (selectAll) {
+                        selectAllLeftRef.current.checked = false;
+                        setSelectAllLeft(!!remainLength);
+                        setSelectAllRight(true);
+                        updateSelectedItemQuantity('right', Array.from(rightPaperRef.current.childNodes).length);
+                        updateSelectedItemQuantity('left', remainLength);
+                    } else {
+                        setDisabledAllRight(!remainLength); // is empty
+                        setDisabledAllLeft(false);
+                    }
+                } else {
+                    const childNodes = Array.from(rightPaperRef.current.childNodes);
+                    const length = childNodes.length;
+
+                    for (let i = 0; i < length; i++) {
+                        const node = childNodes[i];
+                        if (node.querySelector('input').checked) {
+                            node.querySelector('input').checked = false;
+                            leftPaperRef.current.appendChild(node);
+                        }
+                    }
+                    setDisabledLeft(true);
+                    const remainLength = Array.from(rightPaperRef.current.childNodes).length;
+                    if (selectAll) {
+                        selectAllRightRef.current.checked = false;
+                        setSelectAllRight(!!remainLength);
+                        setSelectAllLeft(true);
+                        updateSelectedItemQuantity('left', Array.from(leftPaperRef.current.childNodes).length);
+                        updateSelectedItemQuantity('right', remainLength);
+                    } else {
+                        setDisabledAllLeft(!remainLength); // is empty
+                        setDisabledAllRight(false);
+                    }
+                }
+            };
+
+            const Dashboard = useMemo(
+                () => (
+                    <div css={DashboardCSS}>
+                        {!selectAll && (
+                            <ButtonIcon
+                                size={'tiny'}
+                                style={{ width: '40px' }}
+                                name={'ArrowDoubleLeft'}
+                                onClick={() => transferAll('left')}
+                                disabled={disabledAllLeft}
+                            />
+                        )}
+                        <ButtonIcon
+                            size={'tiny'}
+                            style={{ width: '40px' }}
+                            name={'ArrowLeft'}
+                            onClick={() => transferItem('left')}
+                            disabled={disabledLeft}
+                        />
+                        <ButtonIcon
+                            size={'tiny'}
+                            style={{ width: '40px' }}
+                            name={'ArrowRight'}
+                            onClick={() => transferItem('right')}
+                            disabled={disabledRight}
+                        />
+                        {!selectAll && (
+                            <ButtonIcon
+                                size={'tiny'}
+                                style={{ width: '40px' }}
+                                name={'ArrowDoubleRight'}
+                                onClick={() => transferAll('right')}
+                                disabled={disabledAllRight}
+                            />
+                        )}
+                    </div>
+                ),
+                [choicesList, chosenList, disabledAllLeft, disabledLeft, disabledRight, disabledAllRight, theme]
+            );
+
+            const LeftSelectAll = useMemo(
+                () => (
+                    <div css={TransferItemHeaderCSS}>
+                        <div css={HeaderCheckboxCSS}>
+                            <Checkbox
+                                onChange={e => selectAllItem(e, 'left')}
+                                determinate={determinateLeft}
+                                inputRef={selectAllLeftRef}
+                                disabled={!selectAllLeft}
+                            />
+                        </div>
+                        <div css={HeaderTitleCSS}>
+                            <Typography>{capitalize(getGlobal('choices'))}</Typography>
+                            <Typography type={'p2'} color={'text/sub'} ref={chosenTextLeftRef}>
+                                0/{choicesList.length} {getGlobal('selected')}
+                            </Typography>
+                        </div>
+                    </div>
+                ),
+                [determinateLeft, selectAllLeft, theme]
+            );
+
+            const RightSelectAll = useMemo(
+                () => (
+                    <div css={TransferItemHeaderCSS}>
+                        <div css={HeaderCheckboxCSS}>
+                            <Checkbox
+                                onChange={e => selectAllItem(e, 'right')}
+                                determinate={determinateRight}
+                                inputRef={selectAllRightRef}
+                                disabled={!selectAllRight}
+                            />
+                        </div>
+                        <div css={HeaderTitleCSS}>
+                            <Typography>{capitalize(getGlobal('chosen'))}</Typography>
+                            <Typography type={'p2'} color={'text/sub'} ref={chosenTextRightRef}>
+                                0/{chosenList.length} {getGlobal('selected')}
+                            </Typography>
+                        </div>
+                    </div>
+                ),
+                [determinateRight, selectAllRight, theme]
+            );
+
+            const LeftTransferList = useMemo(
+                () => (
+                    <div
+                        css={TransferBoxCSS}
+                        className={classNames(selectAll && 'select-all')}
+                        ref={leftPaperRef}
+                        data-side={'left'}
+                    >
+                        {choicesList.map((item, index) => renderItemDefault(item, index))}
+                    </div>
+                ),
+                [choicesList, theme]
+            );
+
+            const RightTransferList = useMemo(
+                () => (
+                    <div
+                        css={TransferBoxCSS}
+                        className={classNames(selectAll && 'select-all')}
+                        ref={rightPaperRef}
+                        data-side={'right'}
+                    >
+                        {chosenList.map((item, index) => renderItemDefault(item, index))}
+                    </div>
+                ),
+                [chosenList, theme]
+            );
+
+            const TransferView = useMemo(
+                () => (
+                    <div css={TransferCSS} {...props}>
+                        <Paper width={width} {...paperProps} scrollAble={!selectAll}>
+                            <Fragment>
+                                {selectAll && LeftSelectAll}
+                                {LeftTransferList}
+                            </Fragment>
+                        </Paper>
+                        {Dashboard}
+                        <Paper height={height} {...paperProps} scrollAble={!selectAll}>
+                            <Fragment>
+                                {selectAll && RightSelectAll}
+                                {RightTransferList}
+                            </Fragment>
+                        </Paper>
+                    </div>
+                ),
+                [
+                    choicesList,
+                    chosenList,
+                    disabledAllLeft,
+                    disabledLeft,
+                    disabledRight,
+                    disabledAllRight,
+                    determinateLeft,
+                    determinateRight,
+                    selectAllLeft,
+                    selectAllRight,
+                    theme,
+                ]
+            );
+
+            return TransferView;
+        }
+    )
+);
+
+Transfer.defaultProps = {
+    width: 240,
+    height: 240,
+    selectAll: false,
+    choicesList: [],
+    chosenList: [],
+    paperProps: {},
+};
+
+Transfer.propTypes = {
+    /** the width of Transfer */
+    width: oneOfType([string, number]),
+    /** the height of Transfer */
+    height: oneOfType([string, number]),
+    /** field name used for icon display */
+    iconExpr: string,
+    /** field name used for text display<br/>
+     * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+     * Note: don't use 'id - name', return undefined
+     */
+    displayExpr: oneOfType([string, array]),
+    /** display header to select all choices if true */
+    selectAll: bool,
+    /** Choices list */
+    choicesList: array,
+    /** Chosen list */
+    chosenList: array,
+    /** props for Paper component */
+    paperProps: object,
+    /** the function to render content in transfer item */
+    renderItem: func,
+};
+
+export default Transfer;

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

@@ -0,0 +1,53 @@
+import { Transfer } from 'components';
+import React from 'react';
+
+export default {
+    title: 'Components/Transfer',
+    component: Transfer,
+    argTypes: {},
+};
+
+const choicesList = [
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-1747b8cea18-logo-hr.png', name: 'HR' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-1747b8c3de9-logo-bi.png', name: 'BI' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/10/file-174f77726f9-group-21.png', name: 'PM' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/10/file-174f776ab1c-group-16.png', name: 'HRM' },
+];
+const chosenList = [
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-1747b8a7536-logo-erp.png', name: 'ERP' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-1747b8b4a4b-logo-crm.png', name: 'CRM' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-17476f4a115-logo-ui.png', name: 'CORE' },
+    { icon: 'https://core.diginet.com.vn/uploads/2020/09/file-1747b88796b-logo-cdn.png', name: 'CDN' },
+];
+
+const TransferTemplate = args => (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Transfer {...args} />
+    </div>
+);
+
+export const SelectAll = TransferTemplate.bind({});
+SelectAll.args = {
+    width: 240,
+    height: 240,
+    selectAll: true,
+    choicesList,
+    chosenList,
+    iconExpr: 'icon',
+    displayExpr: 'name',
+    valueExpr: 'id',
+    style: { marginTop: '10px', marginBottom: '10px' },
+};
+
+export const ButtonAll = TransferTemplate.bind({});
+ButtonAll.args = {
+    width: 240,
+    height: 240,
+    selectAll: false,
+    choicesList,
+    chosenList,
+    iconExpr: 'icon',
+    displayExpr: 'name',
+    valueExpr: 'id',
+    style: { marginTop: '10px', marginBottom: '10px' },
+};