diginet-core-ui 1.3.88 → 1.3.89

package/components/transfer/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { Fragment, memo, useState, useMemo, useRef, forwardRef } from 'react';
 import { string, number, bool, oneOfType, array, object, func } from 'prop-types';
@@ -24,21 +23,20 @@ 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;
@@ -68,7 +66,7 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 position: relative;
                 min-height: 40px;
                 &:hover {
-                    background-color: ${theme.colors.hover};
+                    background-color: ${theme.colors.fill.hover};
                 }
             `;
   const TransferItemContent = css`
@@ -131,7 +129,6 @@ 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;
@@ -140,62 +137,54 @@ 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);
@@ -208,10 +197,8 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         input.checked = e.value;
       });
     }
-
     updateSelectedItemQuantity(side);
   };
-
   const renderItemDefault = (item, index) => {
     return jsx("div", {
       css: TransferItem,
@@ -229,44 +216,34 @@ 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);
@@ -274,36 +251,29 @@ 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);
@@ -312,25 +282,20 @@ 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);
@@ -339,12 +304,10 @@ 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, {
@@ -393,7 +356,7 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: HeaderTitle
   }, jsx(Typography, null, capitalize(getGlobal('choices'))), jsx(Typography, {
     type: 'p2',
-    color: theme.colors.border,
+    color: theme.colors.text.sub,
     ref: chosenTextLeftRef
   }, "0/", choicesList.length, " ", getGlobal('selected')))), [determinateLeft, selectAllLeft]);
   const RightSelectAll = useMemo(() => jsx("div", {
@@ -409,7 +372,7 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: HeaderTitle
   }, jsx(Typography, null, capitalize(getGlobal('chosen'))), jsx(Typography, {
     type: 'p2',
-    color: theme.colors.border,
+    color: theme.colors.text.sub,
     ref: chosenTextRightRef
   }, "0/", chosenList.length, " ", getGlobal('selected')))), [determinateRight, selectAllRight]);
   const LeftTransferList = useMemo(() => jsx("div", {
@@ -449,31 +412,23 @@ 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
 };