diginet-core-ui 1.3.24

package/components/tooltip/portal.js

@@ -0,0 +1,13 @@
+import { createPortal } from 'react-dom';
+import { usePortal } from '../../utils';
+
+const Portal = props => {
+  const {
+    children,
+    id
+  } = props;
+  const parent = usePortal(id);
+  return /*#__PURE__*/createPortal(children, parent);
+};
+
+export default Portal;

package/components/transfer/index.js

@@ -0,0 +1,489 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { Fragment, memo, useState, useMemo, useRef, forwardRef } from 'react';
+import { string, number, bool, oneOfType, array, object, func } from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Paper from '../paper';
+import { ButtonIcon, Checkbox, Typography } from '../';
+import { getGlobal } from '../../global';
+import { capitalize } from '../../utils';
+const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  choicesList,
+  chosenList,
+  selectAll,
+  iconExpr,
+  displayExpr,
+  valueExpr,
+  width,
+  height,
+  paperProps,
+  renderItem,
+  onChange,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = 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 TransferRoot = css`
+        display: flex;
+        position: relative;
+    `;
+  const TransferBox = css`
+        display: block;
+        position: relative;
+        margin: 8px 0;
+        &.select-all {
+            max-height: calc(100% - 72px);
+            overflow-y: auto;
+            &::-webkit-scrollbar {
+                width: 8px;
+                background-color: #FFF !important;
+                border-radius: 4px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 4px;
+                mix-blend-mode: normal;
+                background-color: ${theme.colors.bgDisabled} !important;
+                background-clip: content-box;
+            }
+        }
+    `;
+  const TransferItem = css`
+        display: flex;
+        position: relative;
+        min-height: 40px;
+        &:hover {
+            background-color: ${theme.colors.hover};
+        }
+    `;
+  const TransferItemContent = css`
+        display: flex;
+        position: relative;
+        margin: 0 16px;
+        width: 100%;
+        align-items: center;
+        box-sizing: border-box;
+    `;
+  const TransferItemHeader = css`
+        display: flex;
+        position: sticky;
+        top: 0;
+        background-color: inherit;
+        width: 100%;
+        height: 56px;
+        padding: 8px 16px;
+        align-items: center;
+        box-sizing: border-box;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+        z-index: 2;
+    `;
+  const HeaderCheckbox = css`
+        display: inline-flex;
+        position: relative;
+        width: 40px;
+        height: 40px;
+        align-items: center;
+    `;
+  const HeaderTitle = css`
+        display: block;
+        position: relative;
+    `;
+  const ItemCheckbox = css`
+        display: block;
+        position: relative;
+        margin-right: 19px;
+    `;
+  const ItemContent = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+    `;
+  const ItemImage = css`
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        object-fit: cover;
+    `;
+  const DashboardRoot = css`
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 5px;
+        margin-right: 5px;
+        button {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    `;
+
+  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: TransferItem,
+      key: index
+    }, jsx("div", {
+      css: TransferItemContent
+    }, jsx("div", {
+      css: ItemCheckbox
+    }, jsx(Checkbox, {
+      onChange: e => checkValue(e)
+    })), jsx("div", {
+      css: ItemContent
+    }, !renderItem && iconExpr && item[iconExpr] && jsx("img", {
+      src: item[iconExpr],
+      css: ItemImage
+    }), 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: DashboardRoot
+  }, !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]);
+  const LeftSelectAll = useMemo(() => jsx("div", {
+    css: TransferItemHeader
+  }, jsx("div", {
+    css: HeaderCheckbox
+  }, jsx(Checkbox, {
+    onChange: e => selectAllItem(e, 'left'),
+    determinate: determinateLeft,
+    inputRef: selectAllLeftRef,
+    disabled: !selectAllLeft
+  })), jsx("div", {
+    css: HeaderTitle
+  }, jsx(Typography, null, capitalize(getGlobal('choices'))), jsx(Typography, {
+    type: 'p2',
+    color: theme.colors.border,
+    ref: chosenTextLeftRef
+  }, "0/", choicesList.length, " ", getGlobal('selected')))), [determinateLeft, selectAllLeft]);
+  const RightSelectAll = useMemo(() => jsx("div", {
+    css: TransferItemHeader
+  }, jsx("div", {
+    css: HeaderCheckbox
+  }, jsx(Checkbox, {
+    onChange: e => selectAllItem(e, 'right'),
+    determinate: determinateRight,
+    inputRef: selectAllRightRef,
+    disabled: !selectAllRight
+  })), jsx("div", {
+    css: HeaderTitle
+  }, jsx(Typography, null, capitalize(getGlobal('chosen'))), jsx(Typography, {
+    type: 'p2',
+    color: theme.colors.border,
+    ref: chosenTextRightRef
+  }, "0/", chosenList.length, " ", getGlobal('selected')))), [determinateRight, selectAllRight]);
+  const LeftTransferList = useMemo(() => jsx("div", {
+    css: TransferBox,
+    className: selectAll ? 'select-all' : '',
+    ref: leftPaperRef,
+    "data-side": 'left'
+  }, choicesList.map((item, index) => renderItemDefault(item, index))), [choicesList]);
+  const RightTransferList = useMemo(() => jsx("div", {
+    css: TransferBox,
+    className: selectAll ? 'select-all' : '',
+    ref: rightPaperRef,
+    "data-side": 'right'
+  }, chosenList.map((item, index) => renderItemDefault(item, index))), [chosenList]);
+  const TransferView = useMemo(() => jsx("div", _extends({
+    css: TransferRoot
+  }, props), jsx(Paper, _extends({
+    width: width
+  }, paperProps, {
+    scrollAble: !selectAll
+  }), jsx(Fragment, null, selectAll && LeftSelectAll, LeftTransferList)), Dashboard, jsx(Paper, _extends({
+    height: height
+  }, paperProps, {
+    scrollAble: !selectAll
+  }), jsx(Fragment, null, selectAll && RightSelectAll, RightTransferList))), [choicesList, chosenList, disabledAllLeft, disabledLeft, disabledRight, disabledAllRight, determinateLeft, determinateRight, selectAllLeft, selectAllRight]);
+  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]),
+
+  /** the field name used for the returned result */
+  valueExpr: string,
+
+  /** 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,
+
+  /** the function for transfer item between two list */
+  onChange: func
+};
+export default Transfer;