@cashub/ui 0.18.1 → 0.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/select/Select.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _reactI18next = require("react-i18next");
+
 var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -75,6 +77,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Select = function Select(_ref) {
   var options = _ref.options,
+      _ref$enableSelectAll = _ref.enableSelectAll,
+      enableSelectAll = _ref$enableSelectAll === void 0 ? false : _ref$enableSelectAll,
       selected = _ref.selected,
       onSelect = _ref.onSelect,
       onDeselect = _ref.onDeselect,
@@ -94,70 +98,91 @@ var Select = function Select(_ref) {
       onBlur = _ref.onBlur,
       onSearch = _ref.onSearch;
 
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
   var _useState = (0, _react.useState)((0, _lodash.default)('select-')),
       _useState2 = _slicedToArray(_useState, 1),
       id = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      display = _useState4[0],
-      setDisplay = _useState4[1];
+  var _useState3 = (0, _react.useState)((0, _lodash.default)('allOptons-')),
+      _useState4 = _slicedToArray(_useState3, 1),
+      allOptionId = _useState4[0];
 
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      comboboxElement = _useState6[0],
-      setComboboxElement = _useState6[1];
+      display = _useState6[0],
+      setDisplay = _useState6[1];
 
   var _useState7 = (0, _react.useState)(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      listBoxElement = _useState8[0],
-      setListBoxElement = _useState8[1];
+      comboboxElement = _useState8[0],
+      setComboboxElement = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listBoxElement = _useState10[0],
+      setListBoxElement = _useState10[1];
 
   var optionsElementRef = (0, _react.useRef)(null);
   var searchBoxElement = (0, _react.useRef)(null);
 
-  var _useState9 = (0, _react.useState)(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      listBoxWidth = _useState10[0],
-      setListBoxWidth = _useState10[1];
-
-  var _useState11 = (0, _react.useState)([]),
+  var _useState11 = (0, _react.useState)(0),
       _useState12 = _slicedToArray(_useState11, 2),
-      optionList = _useState12[0],
-      setOptionList = _useState12[1];
+      listBoxWidth = _useState12[0],
+      setListBoxWidth = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(null),
+  var _useState13 = (0, _react.useState)([]),
       _useState14 = _slicedToArray(_useState13, 2),
-      focusedOption = _useState14[0],
-      setFocusedOption = _useState14[1];
+      optionList = _useState14[0],
+      setOptionList = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)(null),
       _useState16 = _slicedToArray(_useState15, 2),
-      isFocusCombobox = _useState16[0],
-      setIsFocusCombobox = _useState16[1];
+      focusedOption = _useState16[0],
+      setFocusedOption = _useState16[1];
 
-  var _useState17 = (0, _react.useState)([]),
+  var _useState17 = (0, _react.useState)(false),
       _useState18 = _slicedToArray(_useState17, 2),
-      selectedOptions = _useState18[0],
-      setSelectedOptions = _useState18[1];
+      isFocusCombobox = _useState18[0],
+      setIsFocusCombobox = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(options),
+  var _useState19 = (0, _react.useState)([]),
       _useState20 = _slicedToArray(_useState19, 2),
-      filteredOptions = _useState20[0],
-      setFilteredOptions = _useState20[1];
+      selectedOptions = _useState20[0],
+      setSelectedOptions = _useState20[1];
 
-  var _useState21 = (0, _react.useState)(''),
+  var _useState21 = (0, _react.useState)(options),
       _useState22 = _slicedToArray(_useState21, 2),
-      search = _useState22[0],
-      setSearch = _useState22[1];
+      filteredOptions = _useState22[0],
+      setFilteredOptions = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(''),
+      _useState24 = _slicedToArray(_useState23, 2),
+      search = _useState24[0],
+      setSearch = _useState24[1];
 
   var _useCustomPopper = (0, _hooks.useCustomPopper)(comboboxElement, listBoxElement),
       styles = _useCustomPopper.styles,
       attributes = _useCustomPopper.attributes,
       state = _useCustomPopper.state,
-      update = _useCustomPopper.update; // parse all value to string
-  // for subsequently determine whether it is a selected item
+      update = _useCustomPopper.update;
+
+  var newOptions = (0, _react.useMemo)(function () {
+    if (!options) return;
 
+    var newOptions = _toConsumableArray(options);
+
+    if (options.length > 0 && multiple && enableSelectAll) {
+      newOptions.unshift({
+        id: allOptionId,
+        text: t('all')
+      });
+    }
+
+    return newOptions;
+  }, [options, multiple, enableSelectAll, allOptionId]); // parse all value to string
+  // for subsequently determine whether it is a selected item
 
   var parsedSelected = (0, _react.useMemo)(function () {
     if (selected || selected === 0) {
@@ -173,7 +198,18 @@ var Select = function Select(_ref) {
     }
 
     return '';
-  }, [selected]); // set focused option
+  }, [selected]);
+  var selectedAllOptions = (0, _react.useMemo)(function () {
+    if (multiple && enableSelectAll && parsedSelected.length + 1 === newOptions.length) {
+      var _selectedAllOptions = _toConsumableArray(parsedSelected);
+
+      _selectedAllOptions.unshift(allOptionId);
+
+      return _selectedAllOptions;
+    }
+
+    return parsedSelected;
+  }, [multiple, enableSelectAll, newOptions.length, parsedSelected, allOptionId]); // set focused option
 
   var handleFocusItem = (0, _react.useCallback)(function (element) {
     if (!optionsElementRef.current) return;
@@ -236,21 +272,83 @@ var Select = function Select(_ref) {
   }, [listBoxElement]);
   var handleOnSelect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
-    if (disabled === true) return;
-    onSelect(value);
+    if (disabled === true) return; // 選取選項
+    // 點選 all 全選
+
+    if (multiple) {
+      if (value.toString() === allOptionId && selectedAllOptions.length < newOptions.length) {
+        for (var index = 1; index < newOptions.length; index += 1) {
+          onSelect(newOptions[index].id);
+        }
+      }
+
+      if (value.toString() !== allOptionId && !selectedAllOptions.includes(value.toString())) {
+        // 選取一個選項，變成全選
+        if (selectedAllOptions.length + 2 === newOptions.length) {
+          onSelect(value);
+        } else {
+          // 選取特定選項
+          onSelect(value);
+        }
+      } // 刪除選項
+      // 點選 all 刪除全選
+
+
+      if (value.toString() === allOptionId && selectedAllOptions.length === newOptions.length) {
+        for (var _index = 0; _index < newOptions.length; _index += 1) {
+          onDeselect(newOptions[_index].id);
+        }
+      }
+
+      if (value.toString() !== allOptionId && selectedAllOptions.includes(value.toString())) {
+        // 原本是 all 全選後來刪除其中一個選項
+        if (selectedAllOptions.length === newOptions.length) {
+          onDeselect(value);
+        } else {
+          // 刪除特定選項
+          onDeselect(value);
+        }
+      }
+
+      setDisplay(true);
+    } else {
+      onSelect(value);
+      setDisplay(false);
+    }
+
     comboboxElement.focus();
     setSearch('');
-    setDisplay(false);
-  }, [disabled, onSelect, comboboxElement]);
+  }, [disabled, onSelect, comboboxElement, selectedAllOptions, onDeselect, newOptions, allOptionId, multiple]);
   var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
     if (disabled === true) return;
-    onDeselect(value);
-  }, [disabled, onDeselect]); // list all selected option
+
+    if (multiple) {
+      if (value.toString() === allOptionId) {
+        for (var index = 0; index < optionList.length; index += 1) {
+          onDeselect(optionList[index].id);
+        }
+      } else {
+        onDeselect(value);
+      }
+    } else {
+      onDeselect(value);
+    }
+  }, [disabled, onDeselect, optionList, allOptionId, multiple]); // list all selected option
 
   var selectedItem = (0, _react.useMemo)(function () {
     if (selectedOptions.length > 0) {
       if (multiple) {
+        if (selectedOptions[0].id === allOptionId) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
+            content: selectedOptions[0].text,
+            onClick: function onClick(event) {
+              return handleOnDeselect(event, selectedOptions[0].id);
+            },
+            disabled: disabled
+          }, selectedOptions[0].id);
+        }
+
         return selectedOptions.map(function (value) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
             content: value.text,
@@ -268,7 +366,7 @@ var Select = function Select(_ref) {
     }
 
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled]);
+  }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled, allOptionId]);
   var optionItem = (0, _react.useMemo)(function () {
     if (optionList.length <= 0) return null;
     return optionList.map(function (option) {
@@ -432,21 +530,21 @@ var Select = function Select(_ref) {
 
 
   (0, _react.useEffect)(function () {
-    if (!options) return;
+    if (!newOptions) return;
     var tmpSelectedOptions = [];
-    options.forEach(function (option) {
+    newOptions.forEach(function (option) {
       if (option.child && option.child.length > 0) {
         option.child.forEach(function (option) {
-          if (multiple && parsedSelected.includes(option.id.toString())) {
+          if (multiple && selectedAllOptions.includes(option.id.toString())) {
             tmpSelectedOptions.push(option);
-          } else if (parsedSelected === option.id.toString()) {
+          } else if (selectedAllOptions === option.id.toString()) {
             tmpSelectedOptions.push(option);
           }
         });
       } else {
-        if (multiple && parsedSelected.includes(option.id.toString())) {
+        if (multiple && selectedAllOptions.includes(option.id.toString())) {
           tmpSelectedOptions.push(option);
-        } else if (parsedSelected === option.id.toString()) {
+        } else if (selectedAllOptions === option.id.toString()) {
           tmpSelectedOptions.push(option);
         }
       }
@@ -454,7 +552,7 @@ var Select = function Select(_ref) {
       return false;
     });
     setSelectedOptions(tmpSelectedOptions);
-  }, [options, parsedSelected, multiple]);
+  }, [newOptions, selectedAllOptions, multiple]);
   (0, _react.useEffect)(function () {
     if (update) {
       setTimeout(function () {
@@ -504,9 +602,9 @@ var Select = function Select(_ref) {
           child: option.child.map(function (option) {
             var selected = false;
 
-            if (multiple && parsedSelected.includes(option.id.toString())) {
+            if (multiple && selectedAllOptions.includes(option.id.toString())) {
               selected = true;
-            } else if (parsedSelected === option.id.toString()) {
+            } else if (selectedAllOptions === option.id.toString()) {
               selected = true;
             }
 
@@ -519,9 +617,9 @@ var Select = function Select(_ref) {
 
       var selected = false;
 
-      if (multiple && parsedSelected.includes(option.id.toString())) {
+      if (multiple && selectedAllOptions.includes(option.id.toString())) {
         selected = true;
-      } else if (parsedSelected === option.id.toString()) {
+      } else if (selectedAllOptions === option.id.toString()) {
         selected = true;
       }
 
@@ -529,11 +627,11 @@ var Select = function Select(_ref) {
         selected: selected
       });
     }));
-  }, [filteredOptions, multiple, parsedSelected]); // filter options on search keyword changed
+  }, [filteredOptions, multiple, selectedAllOptions]); // filter options on search keyword changed
 
   (0, _react.useEffect)(function () {
     var tmpFilteredOptions = [];
-    options.forEach(function (option) {
+    newOptions.forEach(function (option) {
       if (option.child && option.child.length > 0) {
         var tmpFilteredChildOptions = option.child.filter(function (option) {
           return option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1;
@@ -549,7 +647,7 @@ var Select = function Select(_ref) {
       }
     });
     setFilteredOptions(tmpFilteredOptions);
-  }, [search, options]);
+  }, [search, newOptions]);
   (0, _react.useEffect)(function () {
     if (display) {
       setupFocus();