intelicoreact 1.4.38 → 1.4.40

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -737,7 +737,9 @@ const TagsDropdown = _ref => {
           setIsOpen(true);
         }
       }
-    }, attributesOfNativeInput)))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
+    }, attributesOfNativeInput, withCreateLogic ? {
+      symbolsLimit: 50
+    } : {})))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__header-row"))
     }, headerContent)) : null, withSearchInputInList && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__input-list-wrapper"))

package/dist/Atomic/UI/TagList/TagList.js

@@ -25,190 +25,119 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const TagList = _ref => {
+const TagListToDropdown = _ref => {
   let {
-    disabled,
-    className,
-    onTagClick,
-    removeItem = null,
-    items = [],
-    withToggle = true,
-    disableShowMore = false,
-    shownItemsCount = "auto",
-    testId = "test-taglist",
-    refProp,
-    renderOrder,
-    onEditClick,
-    onToggleRenderAll
+    options,
+    value = [],
+    dropdownProps = {},
+    listProps = {},
+    onChange,
+    useDropdownCompactMode
   } = _ref;
-  const wrapperRef = (0, _react.useRef)(null);
-  const [wrapperWidth, setWrapperWidth] = (0, _react.useState)(-1);
-  const [tagList, setTagList] = (0, _react.useState)([]);
-  const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
-  const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
-  const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
-
-  const setRenderAllInterceptor = v => {
-    setRenderAll(v);
-    onToggleRenderAll === null || onToggleRenderAll === void 0 ? void 0 : onToggleRenderAll(v);
-  };
-
-  const [lastCheckTime, setLastCheckTime] = (0, _react.useState)(-1);
-
-  const isTagsRefSet = () => {
-    if (!tagList.length) return false;
-    return tagList.map(_ref2 => {
-      let {
-        itemRef
-      } = _ref2;
-      return itemRef;
-    }).reduce((result, itemRef) => {
-      if (!(itemRef !== null && itemRef !== void 0 && itemRef.current)) return false;
-      return result;
-    }, true);
+  const preparedValue = value.map(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value;
+  });
+  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
+  const [isRenderAllTags, setIsRenderAllTags] = (0, _react.useState)(false);
+  const [newValue, setNewValue] = (0, _react.useState)(preparedValue);
+  const [isValueChanged, setIsValueChanged] = (0, _react.useState)(false);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const tagListRef = (0, _react.useRef)(null);
+
+  const onConfirmChangesClick = () => {
+    if (isValueChanged) {
+      var _Promise;
+
+      setIsLoading(true);
+      setIsValueChanged(false);
+      (_Promise = new Promise(r => {
+        const onChangeResult = onChange(options.filter(_ref3 => {
+          let {
+            value
+          } = _ref3;
+          return newValue.includes(value);
+        }));
+
+        if (onChangeResult instanceof Promise) {
+          onChangeResult.then(data => r(data));
+        } else {
+          r();
+        }
+      })) === null || _Promise === void 0 ? void 0 : _Promise.finally(() => {
+        setIsEditMode(false);
+        setIsLoading(false);
+      });
+    } else {
+      setIsEditMode(false);
+    }
   };
 
-  const getStaticTagsCount = () => {
-    if (typeof shownItemsCount === "number") return shownItemsCount;
-    const result = tagList.map(_ref3 => {
-      let {
-        itemRef
-      } = _ref3;
-      return itemRef;
-    }).reduce((result, itemRef) => {
-      // const itemWidth = itemRef.current.getBoundingClientRect();
-      const itemWidth = parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue("width"), 10) + parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue("margin-left"), 10) + parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue("margin-right"), 10);
-
-      if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < wrapperWidth) {
-        result = {
-          count: result.count + 1,
-          width: result.width + itemWidth,
-          items: [...result.items, {
-            w: itemWidth,
-            r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
-          }]
-        };
+  (0, _react.useEffect)(() => {
+    setNewValue(preparedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditMode]);
+
+  const renderTagsDropdown = props => {
+    return /*#__PURE__*/_react.default.createElement(TagsDropdown, (0, _extends2.default)({}, dropdownProps, {
+      disabled: isLoading,
+      options: options,
+      chosenOptions: newValue,
+      renderOptionsAsTags: true,
+      withCreateLogic: true,
+      isUseLocalOptionsStore: false,
+      onOptionEdit: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionEdit,
+      onOptionDelete: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionDelete,
+      onOptionCreate: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionCreate,
+      onActionConfirmClick: onConfirmChangesClick,
+      onActionCancelClick: () => setIsEditMode(v => !v),
+      onChange: data => {
+        setNewValue(data);
+        setIsValueChanged(true);
       }
-
-      return result;
-    }, {
-      count: 0,
-      width: 0,
-      items: []
-    });
-    return result === null || result === void 0 ? void 0 : result.count;
+    }, props, {
+      isDefaultOpened: isEditMode
+    }));
   };
 
-  const cancelDefault = function (e) {
-    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
-    cb(e);
+  const renderTagsList = props => {
+    return /*#__PURE__*/_react.default.createElement(TagList, (0, _extends2.default)({
+      disabled: isLoading,
+      refProp: tagListRef
+    }, listProps, {
+      items: value,
+      onEditClick: () => setIsEditMode(v => !v)
+    }, props));
   };
 
-  const renderTags = () => {
-    const tagsRenderOrder = renderOrder !== null && renderOrder !== void 0 ? renderOrder : tagList.map(_ref4 => {
-      let {
-        value,
-        id
-      } = _ref4;
-      return value !== null && value !== void 0 ? value : id;
-    });
-    return tagsRenderOrder.map((v, i) => {
-      var _item$id, _item$id2;
-
-      const item = tagList.find(_ref5 => {
+  const renderCompactMode = () => {
+    return renderTagsDropdown({
+      withActions: false,
+      withSearchInputInList: true,
+      customTriggerRef: tagListRef,
+      recalculateListContainerStylesTrigger: isRenderAllTags,
+      onDropdownListClose: onConfirmChangesClick,
+      renderCustomTrigger: _ref4 => {
         let {
-          value,
-          id
-        } = _ref5;
-        return (value !== null && value !== void 0 ? value : id) === v;
-      });
-      if (!item) return null;
-      const isHidden = renderItemsCount !== -1 ? i >= renderItemsCount : false;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "tag-list_wrapper_item ".concat(isHidden ? "tag-list_wrapper_item--hidden" : ""),
-        key: "tag-list-item-".concat((_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.value),
-        ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
-      }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
-        testId: "test-taglist-item-".concat((_item$id2 = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id2 !== void 0 ? _item$id2 : item === null || item === void 0 ? void 0 : item.value)
-      }, item, {
-        onClick: onTagClick,
-        removeItem: removeItem
-      })));
-    });
-  };
-
-  const renderMoreTags = () => {
-    if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList !== null && tagList !== void 0 && tagList.length) || disableShowMore) return null;
-    const restItems = tagList.length - renderItemsCount;
-    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: "+".concat(restItems),
-      className: "tag-list_wrapper_render-more",
-      onClick: disableShowMore ? () => {} : e => cancelDefault(e, () => setRenderAllInterceptor(true))
+          isOpen,
+          setIsOpen,
+          inputRef
+        } = _ref4;
+        return renderTagsList({
+          onToggleRenderAll: v => setTimeout(() => setIsRenderAllTags(v), 1),
+          onEditClick: () => {
+            setIsOpen(!isEditMode);
+            if (isEditMode) onConfirmChangesClick();else setIsEditMode(true);
+          }
+        });
+      }
     });
   };
 
-  const renderHideTags = () => {
-    if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: "...",
-      className: "tag-list_wrapper_hide-more",
-      onClick: e => cancelDefault(e, () => setRenderAllInterceptor(false))
-    });
-  }; // Set TagList Wrapper Width
-
-
-  (0, _react.useLayoutEffect)(() => {
-    const wrapperNewWidth = parseInt(window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current).getPropertyValue("width"), 10) - 48;
-
-    if (wrapperRef.current && wrapperNewWidth !== wrapperWidth) {
-      setWrapperWidth(wrapperNewWidth);
-    }
-  }, [document]); // Set TagList Items
-
-  (0, _react.useEffect)(() => {
-    setStaticTagsCount(-1);
-    setRenderItemsCount(-1);
-    setRenderAllInterceptor(false);
-    setTagList(items.map(item => ({ ...item,
-      itemRef: /*#__PURE__*/(0, _react.createRef)()
-    })));
-  }, [items]); // Count Row Tags
-
-  (0, _react.useLayoutEffect)(() => {
-    if (withToggle) {
-      if (!isTagsRefSet() && lastCheckTime === -1) {
-        setLastCheckTime(Date.now());
-        return;
-      }
-
-      setStaticTagsCount(getStaticTagsCount());
-    }
-  }, [tagList, wrapperWidth, lastCheckTime]); //
-
-  (0, _react.useLayoutEffect)(() => {
-    setRenderItemsCount(staticTagsCount);
-  }, [staticTagsCount]); // Toggle Show/Hide More Tags
-
-  (0, _react.useEffect)(() => {
-    setRenderItemsCount(renderAll ? tagList === null || tagList === void 0 ? void 0 : tagList.length : staticTagsCount);
-  }, [renderAll]);
-  (0, _react.useEffect)(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && refProp) refProp.current = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
-  }, [wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("tag-list_wrapper", "".concat(renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length) ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"), className, {
-      "tag-list_wrapper--disabled": disabled
-    }),
-    ref: wrapperRef
-  }, renderTags(), renderMoreTags(), renderHideTags(), typeof onEditClick === "function" && /*#__PURE__*/_react.default.createElement("div", {
-    className: "tag-list__edit-trigger"
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Edit3, {
-    onClick: onEditClick
-  })));
+  return useDropdownCompactMode ? renderCompactMode() : isEditMode ? renderTagsDropdown({
+    withActions: true
+  }) : renderTagsList();
 };
 
 var _default = TagList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.4.38",
+  "version": "1.4.40",
   "description": "",
   "main": "dist/index.js",
   "files": [