@bigbinary/neeto-tags-frontend 1.3.1 → 1.5.0

package/dist/index.cjs.js

@@ -124,14 +124,76 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$1 = ".neeto-chat__metadata-card__spinner{scale:.6}";
+n(css$1,{});
+
+var Title = function Title(_ref) {
+  var _ref$titleProps = _ref.titleProps,
+    titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
+    title = _ref.title,
+    isUpdating = _ref.isUpdating,
+    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible,
+    showAddTagsOnTitle = _ref.showAddTagsOnTitle;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var tagsTitle = title || t("neetoTags.common.tag", constants.PLURAL);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didStartUpdate = _useState2[0],
+    setDidStartUpdate = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCheckIconVisible = _useState4[0],
+    setIsCheckIconVisible = _useState4[1];
+  React.useEffect(function () {
+    if (!isUpdating) return;
+    setDidStartUpdate(true);
+  }, [isUpdating]);
+  React.useEffect(function () {
+    if (isUpdating || !didStartUpdate) return;
+    setIsCheckIconVisible(true);
+    setDidStartUpdate(false);
+    setTimeout(function () {
+      setIsCheckIconVisible(false);
+    }, 5000);
+  }, [didStartUpdate, isUpdating]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-2 flex w-full items-center justify-between gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
+    className: "neeto-ui-text-gray-700",
+    style: "h5",
+    weight: "bold"
+  }, titleProps), tagsTitle), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "inline-flex h-6 items-center"
+  }, isUpdating && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
+    className: "neeto-chat__metadata-card__spinner"
+  }), !isUpdating && isCheckIconVisible && /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
+    className: "neeto-ui-text-success-500",
+    size: 20
+  }))), showAddTagsOnTitle && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    icon: neetoIcons.Settings,
+    size: "15",
+    style: "icon",
+    onClick: function onClick() {
+      return setIsTagsDropdownVisible(function (addTag) {
+        return ramda.not(addTag);
+      });
+    }
+  }));
+};
+
 /**
  * A component that helps to manage tags.
  * Renders selected tags, has dropdown to list down available tags
  * and allows user to remove tags from the list.
  */
 var Tags$2 = function Tags(_ref) {
-  var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
     allTags = _ref.allTags,
     selectedTags = _ref.selectedTags,
     onTagSelect = _ref.onTagSelect,
@@ -141,13 +203,24 @@ var Tags$2 = function Tags(_ref) {
     selectProps = _ref.selectProps,
     buttonProps = _ref.buttonProps,
     _ref$showSuccessToast = _ref.showSuccessToastr,
-    showSuccessToastr = _ref$showSuccessToast === void 0 ? false : _ref$showSuccessToast;
+    showSuccessToastr = _ref$showSuccessToast === void 0 ? false : _ref$showSuccessToast,
+    titleProps = _ref.titleProps,
+    _ref$containerProps = _ref.containerProps,
+    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
+    _ref$isUpdating = _ref.isUpdating,
+    isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
+    _ref$showAddTagsOnTit = _ref.showAddTagsOnTitle,
+    showAddTagsOnTitle = _ref$showAddTagsOnTit === void 0 ? true : _ref$showAddTagsOnTit,
+    _ref$showTitleBar = _ref.showTitleBar,
+    showTitleBar = _ref$showTitleBar === void 0 ? true : _ref$showTitleBar,
+    _ref$bodyProps = _ref.bodyProps,
+    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    addTag = _useState2[0],
-    setAddTag = _useState2[1];
+    isTagsDropdownVisible = _useState2[0],
+    setIsTagsDropdownVisible = _useState2[1];
   var tags = React.useMemo(function () {
     if (!allTags) return [];
     if (!selectedTags) return allTags;
@@ -158,7 +231,7 @@ var Tags$2 = function Tags(_ref) {
     });
   }, [allTags, selectedTags]);
   var handleAddExistingTag = function handleAddExistingTag(event) {
-    setAddTag(false);
+    setIsTagsDropdownVisible(false);
     onTagSelect(event);
     // @ts-ignore
     showSuccessToastr && neetoui.Toastr.success("", {
@@ -174,17 +247,22 @@ var Tags$2 = function Tags(_ref) {
       className: "w-20"
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-tags-wrapper"
-  }, label && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-500 neeto-ui-mb-4",
-    style: "h6",
-    weight: "bold"
-  }, label), pure.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-mb-2 neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start break-all"
+  var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
+  var isTagsBodyVisible = pure.isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible;
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start"
+  }, containerProps), showTitleBar && /*#__PURE__*/React__default["default"].createElement(Title, {
+    isUpdating: isUpdating,
+    setIsTagsDropdownVisible: setIsTagsDropdownVisible,
+    showAddTagsOnTitle: showAddTagsOnTitle,
+    title: title,
+    titleProps: titleProps
+  }), isTagsBodyVisible && /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
+  }, bodyProps), pure.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
   }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag, index) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
-      className: "neeto-ui-mb-2 neeto-ui-mr-2",
       key: "".concat(index, "-").concat(tag.label),
       label: tag.label,
       style: "primary",
@@ -192,8 +270,10 @@ var Tags$2 = function Tags(_ref) {
         return handleDeleteTag(tag);
       }
     }, tagProps));
-  })), addTag ? /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+  })), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    autoFocus: true,
     isCreateable: true,
+    className: "neeto-ui-mt-4",
     maxLength: 50,
     options: tags,
     placeholder: t("neetoTags.placeholder.selectOrCreateTag"),
@@ -201,18 +281,18 @@ var Tags$2 = function Tags(_ref) {
       return handleAddExistingTag(event);
     },
     onCreateOption: function onCreateOption(event) {
-      setAddTag(false);
+      setIsTagsDropdownVisible(false);
       onTagCreate(event);
     }
-  }, selectProps)) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+  }, selectProps)), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
     icon: neetoIcons.Plus,
     label: t("neetoTags.button.addTag", constants.SINGULAR),
     size: "small",
     style: "link",
     onClick: function onClick() {
-      return setAddTag(true);
+      return setIsTagsDropdownVisible(true);
     }
-  }, buttonProps)));
+  }, buttonProps))));
 };
 
 function _typeof(obj) {
@@ -1716,8 +1796,6 @@ var Tags = function Tags(_ref) {
 };
 var Tags$1 = withReactQuery(Tags);
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
 var css = ".neeto-tags-border{border-width:thin}.ntm-empty-state{height:100%;margin:auto;width:100%}.ntm-empty-state,.ntm-empty-state__image{align-items:center;display:flex;justify-content:center}.ntm-empty-state__image{margin-left:0 auto 4rem auto}.ntm-empty-state__title{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem;text-align:center}.ntm-empty-state__description{margin-bottom:1.5rem;text-align:center}.ntm-empty-state__action-block{display:flex;justify-content:center}.neeto-tags-table__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - var(--neeto-molecules-sub-header-height) - var(--neeto-molecules-sub-header-bottom-margin));padding:0 24px;width:100%}.neeto-tags-table__column{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.neeto-tags-merge__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height));margin:0 auto;max-width:1200px;padding:0 24px 24px;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container{display:flex;flex-direction:row;height:100%;justify-content:space-between;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list{width:48%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list .neeto-tags-merge__items{height:calc(100vh - var(--neeto-molecules-main-header-height) - 120px);overflow-y:auto;padding-top:16px}";
 n(css,{});