@cashub/ui 0.18.0 → 0.18.2

package/datetimePicker/DatePickerV2.js

@@ -165,8 +165,10 @@ var DatePickerV2 = function DatePickerV2(_ref) {
     }
   }, [accordionCurrentDisplayType]);
   var handleConfirm = (0, _react.useCallback)(function () {
-    if (!confirmDate) return;
-    onConfirm(confirmDate);
+    if (confirmDate) {
+      onConfirm(confirmDate);
+    }
+
     setDisplayPicker(false);
     setAccordionCurrentDisplayType(null);
   }, [confirmDate, onConfirm]);
@@ -350,10 +352,13 @@ var DatePickerV2 = function DatePickerV2(_ref) {
     });
   }, [selectedDate, handleChangeDate, isSelectedDay, handleDisabled]);
   (0, _react.useEffect)(function () {
-    if (!selected) return;
-    var formattedDate = (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date');
-    setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
-    setConfirmDate(formattedDate);
+    if (selected) {
+      var formattedDate = (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date');
+      setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
+      setConfirmDate(formattedDate);
+    } else {
+      setConfirmDate('');
+    }
   }, [selected]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
     value: context,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "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,
@@ -93,71 +97,93 @@ var Select = function Select(_ref) {
       fillReverse = _ref.fillReverse,
       onBlur = _ref.onBlur,
       onSearch = _ref.onSearch;
+  console.log('selected', selected);
+
+  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 +199,16 @@ var Select = function Select(_ref) {
     }
 
     return '';
-  }, [selected]); // set focused option
+  }, [selected]);
+  var selectedAllOptions = (0, _react.useMemo)(function () {
+    var selectedAllOptions = _toConsumableArray(parsedSelected);
+
+    if (multiple && enableSelectAll && parsedSelected.length + 1 === newOptions.length) {
+      selectedAllOptions.unshift(allOptionId);
+    }
+
+    return selectedAllOptions;
+  }, [multiple, enableSelectAll, newOptions.length, parsedSelected, allOptionId]); // set focused option
 
   var handleFocusItem = (0, _react.useCallback)(function (element) {
     if (!optionsElementRef.current) return;
@@ -236,21 +271,73 @@ 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 (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);
+      }
+    }
+
     comboboxElement.focus();
     setSearch('');
-    setDisplay(false);
-  }, [disabled, onSelect, comboboxElement]);
+    setDisplay(true);
+  }, [disabled, onSelect, comboboxElement, selectedAllOptions, onDeselect, newOptions, allOptionId]);
   var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
     if (disabled === true) return;
-    onDeselect(value);
-  }, [disabled, onDeselect]); // list all selected option
+
+    if (value.toString() === allOptionId) {
+      for (var index = 0; index < optionList.length; index += 1) {
+        onDeselect(optionList[index].id);
+      }
+    } else {
+      onDeselect(value);
+    }
+  }, [disabled, onDeselect, optionList, allOptionId]); // 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 +355,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 +519,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 +541,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 +591,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 +606,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 +616,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 +636,7 @@ var Select = function Select(_ref) {
       }
     });
     setFilteredOptions(tmpFilteredOptions);
-  }, [search, options]);
+  }, [search, newOptions]);
   (0, _react.useEffect)(function () {
     if (display) {
       setupFocus();