@bigbinary/neeto-tags-frontend 1.6.0 → 1.6.2

package/dist/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
@@ -14,6 +14,7 @@ var i18next = require('i18next');
 var classNames = require('classnames');
 var Metadata = require('@bigbinary/neeto-molecules/Metadata');
 var reactRouterDom = require('react-router-dom');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
 var Container$1 = require('@bigbinary/neeto-molecules/Container');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
@@ -48,6 +49,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Metadata__default = /*#__PURE__*/_interopDefaultLegacy(Metadata);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container$1);
@@ -248,13 +250,37 @@ var TagsList = function TagsList(_ref) {
   }));
 };
 
-var TagsSelector = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    defaultMenuIsOpen = _ref.defaultMenuIsOpen,
+var TagsSelector = function TagsSelector(_ref) {
+  var defaultMenuIsOpen = _ref.defaultMenuIsOpen,
     tags = _ref.tags,
     onChange = _ref.onChange,
     onCreateOption = _ref.onCreateOption,
     selectProps = _ref.selectProps;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var isMenuOpen = React.useRef(defaultMenuIsOpen);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleMenuOpen = function handleMenuOpen() {
+    var _selectProps$onMenuOp;
+    isMenuOpen.current = true;
+    (_selectProps$onMenuOp = selectProps.onMenuOpen) === null || _selectProps$onMenuOp === void 0 || _selectProps$onMenuOp.call(selectProps);
+  };
+  var handleMenuClose = function handleMenuClose() {
+    var _selectProps$onMenuCl;
+    isMenuOpen.current = false;
+    (_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 || _selectProps$onMenuCl.call(selectProps);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    var _selectProps$onKeyDow;
+    if (!inputValue) return;
+    if (event.key === "Enter" && isMenuOpen.current) {
+      event.stopPropagation();
+    }
+    (_selectProps$onKeyDow = selectProps.onKeyDown) === null || _selectProps$onKeyDow === void 0 || _selectProps$onKeyDow.call(selectProps, event);
+  };
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
     defaultMenuIsOpen: defaultMenuIsOpen,
     onChange: onChange,
@@ -264,8 +290,13 @@ var TagsSelector = reactUtils.withT(function (_ref) {
     maxLength: 50,
     options: tags,
     placeholder: t("neetoTags.placeholder.selectOrCreateTag")
-  }, selectProps));
-});
+  }, selectProps, {
+    onInputChange: setInputValue,
+    onKeyDown: handleKeyDown,
+    onMenuClose: handleMenuClose,
+    onMenuOpen: handleMenuOpen
+  }));
+};
 
 /**
  * A component that helps to manage tags.
@@ -281,7 +312,8 @@ var Tags$2 = function Tags(_ref) {
     onTagCreate = _ref.onTagCreate,
     onTagDelete = _ref.onTagDelete,
     tagProps = _ref.tagProps,
-    selectProps = _ref.selectProps,
+    _ref$selectProps = _ref.selectProps,
+    selectProps = _ref$selectProps === void 0 ? {} : _ref$selectProps,
     buttonProps = _ref.buttonProps,
     _ref$showSuccessToast = _ref.showSuccessToastr,
     showSuccessToastr = _ref$showSuccessToast === void 0 ? false : _ref$showSuccessToast,
@@ -308,7 +340,7 @@ var Tags$2 = function Tags(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isTagsDropdownVisible = _useState2[0],
     setIsTagsDropdownVisible = _useState2[1];
-  reactUtils.useHotKeys(KEYBOARD_SHORTCUTS.addTag.sequence, function (event) {
+  useHotkeys__default["default"](KEYBOARD_SHORTCUTS.addTag.sequence, function (event) {
     event.preventDefault();
     setIsTagsDropdownVisible(true);
   });
@@ -321,9 +353,9 @@ var Tags$2 = function Tags(_ref) {
       return !selectedTagValues.includes(value);
     });
   }, [allTags, selectedTags]);
-  var handleAddExistingTag = function handleAddExistingTag(event) {
+  var handleAddExistingTag = function handleAddExistingTag(tag) {
     setIsTagsDropdownVisible(false);
-    onTagSelect(event);
+    onTagSelect(tag);
     // @ts-ignore
     showSuccessToastr && neetoui.Toastr.success("", {
       icon: "👍",
@@ -361,12 +393,10 @@ var Tags$2 = function Tags(_ref) {
   var tagsSelectorProps = {
     defaultMenuIsOpen: showAddTagsOnTitle,
     tags: tags,
-    onChange: function onChange(event) {
-      return handleAddExistingTag(event);
-    },
-    onCreateOption: function onCreateOption(event) {
+    onChange: handleAddExistingTag,
+    onCreateOption: function onCreateOption(tagName) {
       setIsTagsDropdownVisible(false);
-      onTagCreate(event);
+      onTagCreate(tagName);
     },
     selectProps: selectProps
   };