diginet-core-ui 1.4.39 → 1.4.40

package/components/transfer/index.js

@@ -1,434 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Checkbox, Paper, Typography } from "./..";
-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 = /*#__PURE__*/memo(/*#__PURE__*/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 jsx("div", {
-      css: TransferItemCSS,
-      key: index
-    }, jsx("div", {
-      css: TransferItemContentCSS
-    }, jsx("div", {
-      css: ItemCheckboxCSS
-    }, jsx(Checkbox, {
-      onChange: e => checkValue(e)
-    })), jsx("div", {
-      css: ItemContentCSS
-    }, !renderItem && iconExpr && item[iconExpr] && jsx("img", {
-      src: item[iconExpr],
-      css: ItemImageCSS
-    }), jsx(Typography, null, renderItem ? renderItem(item, index) : renderContent(item)))));
-  };
-  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(() => jsx("div", {
-    css: DashboardCSS
-  }, !selectAll && jsx(ButtonIcon, {
-    size: 'tiny',
-    style: {
-      width: '40px'
-    },
-    name: 'ArrowDoubleLeft',
-    onClick: () => transferAll('left'),
-    disabled: disabledAllLeft
-  }), jsx(ButtonIcon, {
-    size: 'tiny',
-    style: {
-      width: '40px'
-    },
-    name: 'ArrowLeft',
-    onClick: () => transferItem('left'),
-    disabled: disabledLeft
-  }), jsx(ButtonIcon, {
-    size: 'tiny',
-    style: {
-      width: '40px'
-    },
-    name: 'ArrowRight',
-    onClick: () => transferItem('right'),
-    disabled: disabledRight
-  }), !selectAll && jsx(ButtonIcon, {
-    size: 'tiny',
-    style: {
-      width: '40px'
-    },
-    name: 'ArrowDoubleRight',
-    onClick: () => transferAll('right'),
-    disabled: disabledAllRight
-  })), [choicesList, chosenList, disabledAllLeft, disabledLeft, disabledRight, disabledAllRight, theme]);
-  const LeftSelectAll = useMemo(() => jsx("div", {
-    css: TransferItemHeaderCSS
-  }, jsx("div", {
-    css: HeaderCheckboxCSS
-  }, jsx(Checkbox, {
-    onChange: e => selectAllItem(e, 'left'),
-    determinate: determinateLeft,
-    inputRef: selectAllLeftRef,
-    disabled: !selectAllLeft
-  })), jsx("div", {
-    css: HeaderTitleCSS
-  }, jsx(Typography, null, capitalize(getGlobal('choices'))), jsx(Typography, {
-    type: 'p2',
-    color: 'text/sub',
-    ref: chosenTextLeftRef
-  }, "0/", choicesList.length, " ", getGlobal('selected')))), [determinateLeft, selectAllLeft, theme]);
-  const RightSelectAll = useMemo(() => jsx("div", {
-    css: TransferItemHeaderCSS
-  }, jsx("div", {
-    css: HeaderCheckboxCSS
-  }, jsx(Checkbox, {
-    onChange: e => selectAllItem(e, 'right'),
-    determinate: determinateRight,
-    inputRef: selectAllRightRef,
-    disabled: !selectAllRight
-  })), jsx("div", {
-    css: HeaderTitleCSS
-  }, jsx(Typography, null, capitalize(getGlobal('chosen'))), jsx(Typography, {
-    type: 'p2',
-    color: 'text/sub',
-    ref: chosenTextRightRef
-  }, "0/", chosenList.length, " ", getGlobal('selected')))), [determinateRight, selectAllRight, theme]);
-  const LeftTransferList = useMemo(() => jsx("div", {
-    css: TransferBoxCSS,
-    className: classNames(selectAll && 'select-all'),
-    ref: leftPaperRef,
-    "data-side": 'left'
-  }, choicesList.map((item, index) => renderItemDefault(item, index))), [choicesList, theme]);
-  const RightTransferList = useMemo(() => jsx("div", {
-    css: TransferBoxCSS,
-    className: classNames(selectAll && 'select-all'),
-    ref: rightPaperRef,
-    "data-side": 'right'
-  }, chosenList.map((item, index) => renderItemDefault(item, index))), [chosenList, theme]);
-  const TransferView = useMemo(() => jsx("div", {
-    css: TransferCSS,
-    ...props
-  }, jsx(Paper, {
-    width: width,
-    ...paperProps,
-    scrollAble: !selectAll
-  }, jsx(Fragment, null, selectAll && LeftSelectAll, LeftTransferList)), Dashboard, jsx(Paper, {
-    height: height,
-    ...paperProps,
-    scrollAble: !selectAll
-  }, jsx(Fragment, null, selectAll && RightSelectAll, RightTransferList))), [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;