funda-ui 1.1.159 → 1.1.165

package/MultiFuncSelect/index.js

@@ -876,7 +876,7 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
 // EXTERNAL MODULE: ./src/utils/tree.js
 var tree = __webpack_require__(602);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
 function src_toConsumableArray(arr) { return src_arrayWithoutHoles(arr) || src_iterableToArray(arr) || src_unsupportedIterableToArray(arr) || src_nonIterableSpread(); }
 function src_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function src_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -922,6 +922,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     placeholder = props.placeholder,
     id = props.id,
     options = props.options,
+    cleanTrigger = props.cleanTrigger,
     lockBodyScroll = props.lockBodyScroll,
     hierarchical = props.hierarchical,
     indentation = props.indentation,
@@ -1005,10 +1006,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     _useState16 = _slicedToArray(_useState15, 2),
     incomingData = _useState16[0],
     setIncomingData = _useState16[1];
-
-  // Multiple selection
   var selectedSign = false;
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
+  var MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
   var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
@@ -1022,6 +1022,10 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }).includes(val.toString());
   };
 
+  // clean trigger
+  var CLEAN_TRIGGER_VALID = typeof cleanTrigger === 'undefined' ? false : cleanTrigger ? cleanTrigger.valid : false;
+  var CLEAN_TRIGGER_LABEL = cleanTrigger ? cleanTrigger.cleanValueLabel : 'Clean';
+
   //performance
   var handleChangeFetchSafe = utils_useDebounce(function (val) {
     var _orginalData = [];
@@ -1603,6 +1607,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         });
       }
     });
+
+    // select all button
     var _btnSelectAll = listContentRef.current.querySelector('.mf-select-multi__control-option-item--select-all > span');
     if (_btnSelectAll !== null && typeof _btnSelectAll.dataset.ev === 'undefined') {
       _btnSelectAll.dataset.ev = 'true';
@@ -1610,6 +1616,15 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         handleSelectAll(e);
       });
     }
+
+    // clean button
+    var _btnClean = listContentRef.current.querySelector('.mf-select-multi__control-option-item--clean > span');
+    if (_btnClean !== null && typeof _btnClean.dataset.ev === 'undefined') {
+      _btnClean.dataset.ev = 'true';
+      _btnClean.addEventListener('pointerdown', function (e) {
+        handleCleanValue(e);
+      });
+    }
   }
   function popwinFilterItems(val) {
     if (listContentRef.current === null) return;
@@ -1968,31 +1983,6 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }
   function handleSelectAll(event) {
     event.preventDefault();
-    var onChangeSelectAll = function onChangeSelectAll(labelsArr, valuesArr) {
-      if (typeof onChange === 'function') {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, {
-          labels: labelsArr.map(function (v) {
-            return v.toString();
-          }),
-          values: valuesArr.map(function (v) {
-            return v.toString();
-          }),
-          labelsOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(labelsArr.map(function (v) {
-            return v.toString();
-          })) : labelsArr.map(function (v) {
-            return v.toString();
-          }).join(','),
-          valuesOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(valuesArr.map(function (v) {
-            return v.toString();
-          })) : valuesArr.map(function (v) {
-            return v.toString();
-          }).join(',')
-        });
-
-        //
-        selectInputRef.current.blur();
-      }
-    };
     var updateOptionCheckboxes = function updateOptionCheckboxes(type) {
       var _labels = [];
       var _values = [];
@@ -2041,6 +2031,23 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }
     selectedSign = !selectedSign;
   }
+  function handleCleanValue(event) {
+    event.preventDefault();
+
+    // It is valid when a single selection
+    var emptyValue = {
+      label: '',
+      value: '',
+      queryString: ''
+    };
+    handleSelect(null, JSON.stringify(emptyValue), [], []);
+    if (typeof onChange === 'function') {
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, emptyValue);
+    }
+
+    // update temporary value
+    setControlTempValue('');
+  }
   function handleMultiControlItemRemove(event) {
     event.preventDefault();
     var valueToRemove = String(event.currentTarget.dataset.item);
@@ -2582,9 +2589,19 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     tabIndex: -1,
     className: "btn btn-secondary",
     dangerouslySetInnerHTML: {
-      __html: "".concat((multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.selectAllLabel) || 'Select all options')
+      __html: "".concat(MULTI_SEL_LABEL)
+    }
+  }))) : null, !MULTI_SEL_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, CLEAN_TRIGGER_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    tabIndex: -1,
+    className: "list-group-item list-group-item-action border-start-0 border-end-0 text-secondary bg-light mf-select-multi__control-option-item--clean",
+    role: "tab"
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    tabIndex: -1,
+    className: "btn btn-secondary",
+    dangerouslySetInnerHTML: {
+      __html: "".concat(CLEAN_TRIGGER_LABEL)
     }
-  }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
+  }))) : null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,
     type: "button",
     className: "list-group-item list-group-item-action no-match border-0 mf-select-multi__control-option-item--nomatch hide",

package/MultipleCheckboxes/index.js

@@ -702,12 +702,12 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
   var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : [];
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
-    regTagData = _useState2[0],
-    setRegTagData = _useState2[1];
+    valData = _useState2[0],
+    setValData = _useState2[1];
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    regTagSelected = _useState4[0],
-    setRegTagSelected = _useState4[1];
+    valSelected = _useState4[0],
+    setValSelected = _useState4[1];
   var _inline = typeof inline === 'undefined' ? true : inline;
 
   // Determine whether it is in JSON format
@@ -733,15 +733,15 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
   function initDefaultValue(defaultValue) {
     // change the value to trigger component rendering
     if (typeof defaultValue === 'undefined' || defaultValue === '') {
-      setRegTagSelected([]);
+      setValSelected([]);
     } else {
       var _val = VALUE_BY_BRACKETS ? (0,_utils_extract__WEBPACK_IMPORTED_MODULE_2__.extractContentsOfBrackets)(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
       if (Array.isArray(_val)) {
-        setRegTagSelected(_val.filter(function (v) {
+        setValSelected(_val.filter(function (v) {
           return v !== '';
         }));
       } else {
-        setRegTagSelected([]);
+        setValSelected([]);
       }
     }
   }
@@ -752,7 +752,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
 
     // Initialize options
     //--------------
-    setRegTagData(optionsRes);
+    setValData(optionsRes);
   }, [value, options]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: wrapperClassName || wrapperClassName === '' ? "multiple-checkboxes__wrapper ".concat(wrapperClassName) : "multiple-checkboxes__wrapper mb-3 position-relative",
@@ -766,7 +766,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
   })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "multiple-checkboxes__control-wrapper",
     style: style
-  }, regTagData ? regTagData.map(function (item, i) {
+  }, valData ? valData.map(function (item, i) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       key: 'checkbox' + i,
       className: "multiple-checkboxes__control ".concat(_inline ? 'd-inline-block' : '', " pe-3"),
@@ -780,18 +780,18 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
       value: item.value,
       disabled: disabled || null,
       onChange: function onChange(e, val) {
-        setRegTagSelected(function (prevState) {
+        setValSelected(function (prevState) {
           var newData = JSON.parse(JSON.stringify(prevState));
           var index = newData.findIndex(function (item) {
             return item == e.target.value;
           });
           if (index !== -1) newData.splice(index, 1);
           var _res = val ? Array.from(new Set([e.target.value].concat(_toConsumableArray(newData)))) : newData;
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(e, _res, VALUE_BY_BRACKETS ? (0,_utils_convert__WEBPACK_IMPORTED_MODULE_3__.convertArrToValByBrackets)(_res) : _res.join(','));
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target, _res, VALUE_BY_BRACKETS ? (0,_utils_convert__WEBPACK_IMPORTED_MODULE_3__.convertArrToValByBrackets)(_res) : _res.join(','));
           return _res;
         });
       },
-      checked: regTagSelected.includes(item.value)
+      checked: valSelected.includes(item.value)
     }));
   }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
     ref: inputRef,
@@ -799,7 +799,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,_utils_convert__WEBPACK_IMPORTED_MODULE_3__.convertArrToValByBrackets)(regTagSelected) : regTagSelected.join(','),
+    value: VALUE_BY_BRACKETS ? (0,_utils_convert__WEBPACK_IMPORTED_MODULE_3__.convertArrToValByBrackets)(valSelected) : valSelected.join(','),
     required: required || null
   }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"

package/MultipleSelect/index.css

@@ -0,0 +1,172 @@
+/* ======================================================
+    <!-- Multiple Select -->
+/* ====================================================== */
+.m-select__wrapper {
+  --m-select-scrollbar-color: rgba(0, 0, 0, 0.2);
+  --m-select-scrollbar-track: rgba(0, 0, 0, 0);
+  --m-select-scrollbar-w: 3px;
+  min-width: 350px;
+  min-height: 315px;
+  width: 100%;
+  height: 100%;
+  border: solid 1px #dee2e6;
+  border-radius: 0.35rem;
+  position: relative;
+  background: #fff;
+  /*-------- List --------*/
+}
+.m-select__wrapper .m-select-diving-line {
+  width: 1px;
+  background-color: #dee2e6;
+  left: 50%;
+  top: 0;
+  position: absolute;
+  height: 100%;
+  z-index: 1;
+}
+.m-select__wrapper .m-select-inner {
+  display: flex;
+  font-size: 0.8em;
+  height: 100%;
+}
+.m-select__wrapper .m-select-inner ul,
+.m-select__wrapper .m-select-inner li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.m-select__wrapper .m-select-inner div.m-select__selected__container,
+.m-select__wrapper .m-select-inner div.m-select__available__container {
+  position: relative;
+  flex: 1;
+}
+.m-select__wrapper .m-select-inner ul.m-select__selected,
+.m-select__wrapper .m-select-inner ul.m-select__available {
+  position: relative;
+  overflow: auto;
+  overflow-x: hidden;
+  background: #fff;
+  border: none;
+  position: relative;
+  width: 100%;
+}
+.m-select__wrapper .m-select-inner ul {
+  user-select: none;
+}
+.m-select__wrapper .m-select-inner li {
+  cursor: default;
+  position: relative;
+  font-size: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  background: #f6f6f6;
+  border-bottom: 1px solid rgb(255, 255, 255);
+}
+.m-select__wrapper .m-select-inner li.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+.m-select__wrapper .m-select-inner li.hide {
+  display: none;
+}
+.m-select__wrapper .m-select-inner li:hover {
+  opacity: 0.8;
+}
+.m-select__wrapper .m-select-inner li.selected {
+  background: #0b5ed7;
+  color: #fff;
+}
+.m-select__wrapper .m-select-inner li.selected > i svg path {
+  fill: #fff;
+}
+.m-select__wrapper .m-select-inner li:last-child {
+  border-bottom: none;
+}
+.m-select__wrapper .m-select-inner li > span {
+  padding: 0.35rem 0.75rem;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.m-select__wrapper .m-select-inner li > i {
+  display: inline-block;
+  padding: 0.35rem 0.75rem;
+  cursor: pointer;
+}
+.m-select__wrapper .m-select-inner li a {
+  color: #999;
+  text-decoration: none;
+  padding: 0;
+  display: block;
+  cursor: pointer;
+}
+.m-select__wrapper .m-select-inner li a.m-select__item-action {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+}
+.m-select__wrapper .m-select-inner div.m-select__selected__container .m-select__header {
+  border-radius: 0 0.35rem 0 0;
+}
+.m-select__wrapper .m-select-inner div.m-select__available__container .m-select__header {
+  border-radius: 0.35rem 0 0 0;
+}
+.m-select__wrapper .m-select-inner .m-select__header {
+  border: none;
+  font-size: 0.75rem;
+  margin-bottom: 1px;
+  background: #dee2e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 1.625rem;
+}
+.m-select__wrapper .m-select-inner .m-select__btn--add-all {
+  padding: 0.2rem;
+}
+.m-select__wrapper .m-select-inner .m-select__btn--remove-all {
+  padding: 0.2rem;
+}
+.m-select__wrapper .m-select-inner .m-select__count {
+  padding: 0.2rem;
+}
+.m-select__wrapper .m-select-inner .m-select__title {
+  padding: 0.2rem;
+  font-weight: bold;
+}
+.m-select__wrapper .m-select-inner input.m-select__search {
+  height: 14px;
+  padding: 0.1rem 0.5rem;
+  opacity: 0.5;
+  margin: 4px;
+  width: 100px;
+  border-radius: 25px;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+.m-select__wrapper .m-select__options-contentlist {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: calc(315px - 1.75rem);
+}
+.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar {
+  width: var(--m-select-scrollbar-w);
+}
+.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-thumb {
+  background: var(--m-select-scrollbar-color);
+}
+.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-track {
+  background: var(--m-select-scrollbar-track);
+}
+.m-select__wrapper .m-select__options-contentlist.dragging {
+  cursor: grab;
+}
+.m-select__wrapper .m-select__options-contentlist--hide {
+  overflow: hidden;
+  height: auto;
+}

package/MultipleSelect/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+interface OptionConfig {
+    [propName: string]: string | number | boolean;
+}
+declare type MultipleSelectProps = {
+    wrapperClassName?: string;
+    availableHeaderTitle?: string;
+    selectedHeaderTitle?: string;
+    selectedHeaderNote?: string;
+    removeAllBtnLabel?: string | React.ReactNode;
+    addAllBtnLabel?: string | React.ReactNode;
+    iconAdd?: React.ReactNode | string;
+    iconRemove?: React.ReactNode | string;
+    hierarchical?: boolean;
+    indentation?: string;
+    doubleIndent?: boolean;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    options?: OptionConfig[] | string;
+    disabled?: any;
+    required?: any;
+    /** Whether to use square brackets to save result and initialize default value */
+    extractValueByBrackets?: boolean;
+    /** Incoming data, you can set the third parameter of `onFetch` */
+    data?: any;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    [key: `data-${string}`]: string | undefined;
+    fetchFuncAsync?: any;
+    fetchFuncMethod?: string;
+    fetchFuncMethodParams?: any[];
+    fetchCallback?: (data: any) => void;
+    onFetch?: (data: any) => void;
+    onChange?: (e: any, data: any, dataStr: any) => void;
+};
+declare const MultipleSelect: React.ForwardRefExoticComponent<MultipleSelectProps & React.RefAttributes<unknown>>;
+export default MultipleSelect;