@bigbinary/neeto-tags-frontend 0.0.31 → 0.0.33

package/dist/index.js

@@ -16,13 +16,14 @@ import React, { createContext, useContext, createElement, isValidElement, cloneE
 import _classCallCheck$1 from '@babel/runtime/helpers/classCallCheck';
 import _createClass$1 from '@babel/runtime/helpers/createClass';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _extends from '@babel/runtime/helpers/extends';
+import { Plus, MenuHorizontal } from '@bigbinary/neeto-icons';
+import { Typography, Tag, Select, Button, Dropdown, Toastr, Pane, PageLoader, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
 import { useHistory, Switch, Route } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Tag, Dropdown, Toastr, Pane, Typography, Button, PageLoader, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
 import * as yup from 'yup';
-import { MenuHorizontal } from '@bigbinary/neeto-icons';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import _extends$1 from '@babel/runtime/helpers/esm/extends';
 import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Container, Header, SubHeader, Scrollable, MenuBar } from '@bigbinary/neetoui/layouts';
@@ -3483,6 +3484,81 @@ instance.use(initReactI18next).init({
   }
 });
 
+/**
+ * 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,
+      allTags = _ref.allTags,
+      selectedTags = _ref.selectedTags,
+      onTagSelect = _ref.onTagSelect,
+      onTagCreate = _ref.onTagCreate,
+      onTagDelete = _ref.onTagDelete,
+      tagProps = _ref.tagProps,
+      selectProps = _ref.selectProps,
+      buttonProps = _ref.buttonProps;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      addTag = _useState2[0],
+      setAddTag = _useState2[1];
+
+  var tags = useMemo(function () {
+    if (!allTags) return [];
+    if (!selectedTags) return allTags;
+    var selectedTagValues = selectedTags.map(function (_ref2) {
+      var value = _ref2.value;
+      return value;
+    });
+    return allTags.filter(function (_ref3) {
+      var value = _ref3.value;
+      return !selectedTagValues.includes(value);
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-tags-wrapper"
+  }, label && /*#__PURE__*/React.createElement(Typography, {
+    style: "h6",
+    weight: "bold",
+    className: "neeto-ui-text-gray-500 neeto-ui-mb-4"
+  }, label), !!selectedTags.length && /*#__PURE__*/React.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"
+  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag, index) {
+    return /*#__PURE__*/React.createElement(Tag, _extends({
+      key: "".concat(index, "-").concat(tag.label),
+      label: tag.label,
+      style: "primary",
+      onClose: function onClose() {
+        return onTagDelete(tag);
+      },
+      className: "neeto-ui-mb-2 neeto-ui-mr-2"
+    }, tagProps));
+  })), addTag ? /*#__PURE__*/React.createElement(Select, _extends({
+    isCreateable: true,
+    placeholder: "Select or Create tag",
+    options: tags,
+    onChange: function onChange(e) {
+      setAddTag(false);
+      onTagSelect(e);
+    },
+    onCreateOption: function onCreateOption(e) {
+      setAddTag(false);
+      onTagCreate(e);
+    }
+  }, selectProps)) : /*#__PURE__*/React.createElement(Button, _extends({
+    size: "small",
+    style: "link",
+    label: "New Tag",
+    icon: Plus,
+    onClick: function onClick() {
+      return setAddTag(true);
+    }
+  }, buttonProps)));
+};
+
 var DEFAULT_PAGE_INDEX = 1;
 var DEFAULT_PAGE_SIZE = 10;
 var COMMON_COLUMNS = [{
@@ -3649,40 +3725,40 @@ function parseQueryArgs(arg1, arg2, arg3) {
   }
 
   if (typeof arg2 === 'function') {
-    return _extends({}, arg3, {
+    return _extends$1({}, arg3, {
       queryKey: arg1,
       queryFn: arg2
     });
   }
 
-  return _extends({}, arg2, {
+  return _extends$1({}, arg2, {
     queryKey: arg1
   });
 }
 function parseMutationArgs(arg1, arg2, arg3) {
   if (isQueryKey(arg1)) {
     if (typeof arg2 === 'function') {
-      return _extends({}, arg3, {
+      return _extends$1({}, arg3, {
         mutationKey: arg1,
         mutationFn: arg2
       });
     }
 
-    return _extends({}, arg2, {
+    return _extends$1({}, arg2, {
       mutationKey: arg1
     });
   }
 
   if (typeof arg1 === 'function') {
-    return _extends({}, arg2, {
+    return _extends$1({}, arg2, {
       mutationFn: arg1
     });
   }
 
-  return _extends({}, arg1);
+  return _extends$1({}, arg1);
 }
 function parseFilterArgs(arg1, arg2, arg3) {
-  return isQueryKey(arg1) ? [_extends({}, arg2, {
+  return isQueryKey(arg1) ? [_extends$1({}, arg2, {
     queryKey: arg1
   }), arg3] : [arg1 || {}, arg2];
 }
@@ -4414,7 +4490,7 @@ var Query = /*#__PURE__*/function () {
   _proto.setOptions = function setOptions(options) {
     var _this$options$cacheTi;
 
-    this.options = _extends({}, this.defaultOptions, options);
+    this.options = _extends$1({}, this.defaultOptions, options);
     this.meta = options == null ? void 0 : options.meta; // Default to 5 minutes if not cache time is set
 
     this.cacheTime = Math.max(this.cacheTime || 0, (_this$options$cacheTi = this.options.cacheTime) != null ? _this$options$cacheTi : 5 * 60 * 1000);
@@ -4814,22 +4890,22 @@ var Query = /*#__PURE__*/function () {
 
     switch (action.type) {
       case 'failed':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           fetchFailureCount: state.fetchFailureCount + 1
         });
 
       case 'pause':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           isPaused: true
         });
 
       case 'continue':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           isPaused: false
         });
 
       case 'fetch':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           fetchFailureCount: 0,
           fetchMeta: (_action$meta = action.meta) != null ? _action$meta : null,
           isFetching: true,
@@ -4840,7 +4916,7 @@ var Query = /*#__PURE__*/function () {
         });
 
       case 'success':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           data: action.data,
           dataUpdateCount: state.dataUpdateCount + 1,
           dataUpdatedAt: (_action$dataUpdatedAt = action.dataUpdatedAt) != null ? _action$dataUpdatedAt : Date.now(),
@@ -4856,10 +4932,10 @@ var Query = /*#__PURE__*/function () {
         var error = action.error;
 
         if (isCancelledError(error) && error.revert && this.revertState) {
-          return _extends({}, this.revertState);
+          return _extends$1({}, this.revertState);
         }
 
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           error: error,
           errorUpdateCount: state.errorUpdateCount + 1,
           errorUpdatedAt: Date.now(),
@@ -4870,12 +4946,12 @@ var Query = /*#__PURE__*/function () {
         });
 
       case 'invalidate':
-        return _extends({}, state, {
+        return _extends$1({}, state, {
           isInvalidated: true
         });
 
       case 'setState':
-        return _extends({}, state, action.state);
+        return _extends$1({}, state, action.state);
 
       default:
         return state;
@@ -5031,7 +5107,7 @@ var QueryCache = /*#__PURE__*/function (_Subscribable) {
 // CLASS
 var Mutation = /*#__PURE__*/function () {
   function Mutation(config) {
-    this.options = _extends({}, config.defaultOptions, config.options);
+    this.options = _extends$1({}, config.defaultOptions, config.options);
     this.mutationId = config.mutationId;
     this.mutationCache = config.mutationCache;
     this.observers = [];
@@ -5206,22 +5282,22 @@ function getDefaultState() {
 function reducer(state, action) {
   switch (action.type) {
     case 'failed':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         failureCount: state.failureCount + 1
       });
 
     case 'pause':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         isPaused: true
       });
 
     case 'continue':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         isPaused: false
       });
 
     case 'loading':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         context: action.context,
         data: undefined,
         error: null,
@@ -5231,7 +5307,7 @@ function reducer(state, action) {
       });
 
     case 'success':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         data: action.data,
         error: null,
         status: 'success',
@@ -5239,7 +5315,7 @@ function reducer(state, action) {
       });
 
     case 'error':
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         data: undefined,
         error: action.error,
         failureCount: state.failureCount + 1,
@@ -5248,7 +5324,7 @@ function reducer(state, action) {
       });
 
     case 'setState':
-      return _extends({}, state, action.state);
+      return _extends$1({}, state, action.state);
 
     default:
       return state;
@@ -5542,7 +5618,7 @@ var QueryClient = /*#__PURE__*/function () {
   };
 
   _proto.isMutating = function isMutating(filters) {
-    return this.mutationCache.findAll(_extends({}, filters, {
+    return this.mutationCache.findAll(_extends$1({}, filters, {
       fetching: true
     })).length;
   };
@@ -5606,7 +5682,7 @@ var QueryClient = /*#__PURE__*/function () {
 
     var queryCache = this.queryCache;
 
-    var refetchFilters = _extends({}, filters, {
+    var refetchFilters = _extends$1({}, filters, {
       active: true
     });
 
@@ -5648,7 +5724,7 @@ var QueryClient = /*#__PURE__*/function () {
         filters = _parseFilterArgs5[0],
         options = _parseFilterArgs5[1];
 
-    var refetchFilters = _extends({}, filters, {
+    var refetchFilters = _extends$1({}, filters, {
       // if filters.refetchActive is not provided and filters.active is explicitly false,
       // e.g. invalidateQueries({ active: false }), we don't want to refetch active queries
       active: (_ref3 = (_filters$refetchActiv = filters.refetchActive) != null ? _filters$refetchActiv : filters.active) != null ? _ref3 : true,
@@ -5673,7 +5749,7 @@ var QueryClient = /*#__PURE__*/function () {
 
     var promises = notifyManager.batch(function () {
       return _this6.queryCache.findAll(filters).map(function (query) {
-        return query.fetch(undefined, _extends({}, options, {
+        return query.fetch(undefined, _extends$1({}, options, {
           meta: {
             refetchPage: filters == null ? void 0 : filters.refetchPage
           }
@@ -5801,7 +5877,7 @@ var QueryClient = /*#__PURE__*/function () {
       return options;
     }
 
-    var defaultedOptions = _extends({}, this.defaultOptions.queries, this.getQueryDefaults(options == null ? void 0 : options.queryKey), options, {
+    var defaultedOptions = _extends$1({}, this.defaultOptions.queries, this.getQueryDefaults(options == null ? void 0 : options.queryKey), options, {
       _defaulted: true
     });
 
@@ -5821,7 +5897,7 @@ var QueryClient = /*#__PURE__*/function () {
       return options;
     }
 
-    return _extends({}, this.defaultOptions.mutations, this.getMutationDefaults(options == null ? void 0 : options.mutationKey), options, {
+    return _extends$1({}, this.defaultOptions.mutations, this.getMutationDefaults(options == null ? void 0 : options.mutationKey), options, {
       _defaulted: true
     });
   };
@@ -5993,7 +6069,7 @@ var QueryObserver = /*#__PURE__*/function (_Subscribable) {
   };
 
   _proto.refetch = function refetch(options) {
-    return this.fetch(_extends({}, options, {
+    return this.fetch(_extends$1({}, options, {
       meta: {
         refetchPage: options == null ? void 0 : options.refetchPage
       }
@@ -6277,7 +6353,7 @@ var QueryObserver = /*#__PURE__*/function (_Subscribable) {
       defaultNotifyOptions.listeners = true;
     }
 
-    this.notify(_extends({}, defaultNotifyOptions, notifyOptions));
+    this.notify(_extends$1({}, defaultNotifyOptions, notifyOptions));
   };
 
   _proto.updateQuery = function updateQuery() {
@@ -6445,7 +6521,7 @@ var MutationObserver = /*#__PURE__*/function (_Subscribable) {
       this.currentMutation.removeObserver(this);
     }
 
-    this.currentMutation = this.client.getMutationCache().build(this.client, _extends({}, this.options, {
+    this.currentMutation = this.client.getMutationCache().build(this.client, _extends$1({}, this.options, {
       variables: typeof variables !== 'undefined' ? variables : this.options.variables
     }));
     this.currentMutation.addObserver(this);
@@ -6455,7 +6531,7 @@ var MutationObserver = /*#__PURE__*/function (_Subscribable) {
   _proto.updateResult = function updateResult() {
     var state = this.currentMutation ? this.currentMutation.state : getDefaultState();
 
-    var result = _extends({}, state, {
+    var result = _extends$1({}, state, {
       isLoading: state.status === 'loading',
       isSuccess: state.status === 'success',
       isError: state.status === 'error',
@@ -6622,7 +6698,7 @@ function useMutation(arg1, arg2, arg3) {
     throw currentResult.error;
   }
 
-  return _extends({}, currentResult, {
+  return _extends$1({}, currentResult, {
     mutate: mutate,
     mutateAsync: currentResult.mutate
   });
@@ -7743,5 +7819,5 @@ var App = function App(_ref) {
   });
 };
 
-export { App as NeetoTags, refetchTags };
+export { App as NeetoTags, Tags$2 as TagsComponent, refetchTags };
 //# sourceMappingURL=index.js.map