intelicoreact 1.4.40 → 1.4.42

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

@@ -25,119 +25,186 @@ 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 TagListToDropdown = _ref => {
+const TagList = _ref => {
+  var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
+
   let {
-    options,
-    value = [],
-    dropdownProps = {},
-    listProps = {},
-    onChange,
-    useDropdownCompactMode
+    disabled,
+    className,
+    onTagClick,
+    removeItem = null,
+    items = [],
+    withToggle = true,
+    disableShowMore = false,
+    shownItemsCount = "auto",
+    testId = "test-taglist",
+    refProp,
+    renderOrder,
+    onEditClick,
+    onToggleRenderAll
   } = _ref;
-  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 wrapperRef = (0, _react.useRef)(null);
+  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 wrapperWidth = (_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : (_wrapperRef$current$g2 = _wrapperRef$current.getBoundingClientRect()) === null || _wrapperRef$current$g2 === void 0 ? void 0 : _wrapperRef$current$g2.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : -1;
+
+  const setRenderAllInterceptor = v => {
+    setRenderAll(v);
+    onToggleRenderAll === null || onToggleRenderAll === void 0 ? void 0 : onToggleRenderAll(v);
   };
 
-  (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);
+  const getStaticTagsCount = () => {
+    var _window$getComputedSt;
+
+    if (typeof shownItemsCount === "number") return shownItemsCount;
+    const computedWidth = wrapperWidth || parseInt((_window$getComputedSt = window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.width);
+    const delta = typeof onEditClick === "function" ? 60 : 32;
+    if (isNaN(computedWidth)) return -1;
+    const result = tagList.map(_ref2 => {
+      let {
+        itemRef
+      } = _ref2;
+      return itemRef;
+    }).reduce((result, itemRef) => {
+      const itemStyle = window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current);
+      const itemWidth = [parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.width, 10), parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginLeft, 10), parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginRight, 10)].reduce((result, item) => {
+        if (!isNaN(item)) result += item;
+        return result;
+      }, 0);
+
+      if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < wrapperWidth - delta) {
+        result = {
+          count: result.count + 1,
+          width: result.width + itemWidth,
+          items: [...result.items, {
+            w: itemWidth,
+            r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
+          }]
+        };
       }
-    }, props, {
-      isDefaultOpened: isEditMode
-    }));
+
+      return result;
+    }, {
+      count: 0,
+      width: 0,
+      items: []
+    });
+    return result === null || result === void 0 ? void 0 : result.count;
   };
 
-  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 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 renderCompactMode = () => {
-    return renderTagsDropdown({
-      withActions: false,
-      withSearchInputInList: true,
-      customTriggerRef: tagListRef,
-      recalculateListContainerStylesTrigger: isRenderAllTags,
-      onDropdownListClose: onConfirmChangesClick,
-      renderCustomTrigger: _ref4 => {
+  const renderTags = () => {
+    const tagsRenderOrder = renderOrder !== null && renderOrder !== void 0 ? renderOrder : tagList.map(_ref3 => {
+      let {
+        value,
+        id
+      } = _ref3;
+      return value !== null && value !== void 0 ? value : id;
+    });
+    return tagsRenderOrder.map((v, i) => {
+      var _item$id, _item$id2;
+
+      const item = tagList.find(_ref4 => {
         let {
-          isOpen,
-          setIsOpen,
-          inputRef
+          value,
+          id
         } = _ref4;
-        return renderTagsList({
-          onToggleRenderAll: v => setTimeout(() => setIsRenderAllTags(v), 1),
-          onEditClick: () => {
-            setIsOpen(!isEditMode);
-            if (isEditMode) onConfirmChangesClick();else setIsEditMode(true);
-          }
-        });
-      }
+        return (value !== null && value !== void 0 ? value : id) === v;
+      });
+      if (!item) return null;
+      const isHidden = renderItemsCount !== -1 && staticTagsCount !== -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))
     });
   };
 
-  return useDropdownCompactMode ? renderCompactMode() : isEditMode ? renderTagsDropdown({
-    withActions: true
-  }) : renderTagsList();
+  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 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 && wrapperWidth !== -1 && staticTagsCount === -1) {
+      let computedWidth = wrapperWidth;
+
+      if (computedWidth === 0) {
+        var _window$getComputedSt2;
+
+        computedWidth = parseInt((_window$getComputedSt2 = window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) === null || _window$getComputedSt2 === void 0 ? void 0 : _window$getComputedSt2.width);
+      }
+
+      if (!isNaN(computedWidth)) {
+        setStaticTagsCount(getStaticTagsCount());
+      }
+    }
+  }, [tagList, wrapperWidth, wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]); //
+
+  (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
+    }),
+    style: {
+      visibility: staticTagsCount === -1 ? "hidden" : "visible",
+      zIndex: staticTagsCount === -1 ? "-1" : "auto"
+    },
+    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
+  })));
 };
 
 var _default = TagList;

package/package.json

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