diginet-core-ui 1.3.87 → 1.3.88

package/components/transfer/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { Fragment, memo, useState, useMemo, useRef, forwardRef } from 'react';
 import { string, number, bool, oneOfType, array, object, func } from 'prop-types';
@@ -23,20 +24,21 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const leftPaperRef = useRef(null),
-    rightPaperRef = useRef(null),
-    selectAllLeftRef = useRef(null),
-    selectAllRightRef = useRef(null),
-    chosenTextLeftRef = useRef(null),
-    chosenTextRightRef = 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);
+        [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;
@@ -129,6 +131,7 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     margin-bottom: 5px;
                 }
             `;
+
   const updateSelectedItemQuantity = (side, newTotal) => {
     const sideRef = side === 'right' ? chosenTextRightRef : chosenTextLeftRef;
     const sidePaperRef = side === 'right' ? rightPaperRef : leftPaperRef;
@@ -137,54 +140,62 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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');
+    } // 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
+          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
+          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
+          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
+          selectAllRightRef.current.checked = !isNotChecked; // Update selected item quantity
+
           updateSelectedItemQuantity(side);
         }
       }
     }
   };
+
   const selectAllItem = (e, side) => {
     if (side === 'right') {
       setDisabledLeft(false);
@@ -197,8 +208,10 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         input.checked = e.value;
       });
     }
+
     updateSelectedItemQuantity(side);
   };
+
   const renderItemDefault = (item, index) => {
     return jsx("div", {
       css: TransferItem,
@@ -216,34 +229,44 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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);
@@ -251,29 +274,36 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } 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);
@@ -282,20 +312,25 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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);
@@ -304,10 +339,12 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         updateSelectedItemQuantity('right', remainLength);
       } else {
         setDisabledAllLeft(!remainLength); // is empty
+
         setDisabledAllRight(false);
       }
     }
   };
+
   const Dashboard = useMemo(() => jsx("div", {
     css: DashboardRoot
   }, !selectAll && jsx(ButtonIcon, {
@@ -412,23 +449,31 @@ Transfer.defaultProps = {
 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
+
+  /** 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
 };