@7shifts/sous-chef 2.12.1 → 2.12.2

package/dist/forms/AsyncSelectField/AsyncSelectField.d.ts

@@ -1,8 +1,10 @@
 import type { Props as SelectProps } from '../SelectField/SelectField';
 import { AsyncSelectOptions } from './types';
 declare type Props<T> = {
-    /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. */
+    /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. If it brings all the options on the first load, it won't call the `loadOptions` to perform the search. */
     loadOptions: (inputValue: string) => Promise<AsyncSelectOptions<T>>;
+    /** It fires `loadOptions` again if this key value changes. Used when it depends on other fields to load its options */
+    key?: string | number;
 } & Omit<SelectProps<T>, 'options'>;
 /**
  * Component to make possible choose from async options. It looks exactly as the [SelectField](./?path=/docs/forms-selectfield--default) but, this one handle asynchronous options.

package/dist/index.js

@@ -5293,14 +5293,55 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
       hasMoreOptionsFirstLoad = _useState2[0],
       setHasMoreOptionsFirstLoad = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      hasFirstLoadPerformed = _useState3[0],
+      setHasFirstLoadPerformed = _useState3[1];
+
+  var _useState4 = React.useState(null),
+      localOptions = _useState4[0],
+      setLocalOptions = _useState4[1];
+
+  var ref = React.useRef(null);
+
+  var handleInternalSearch = function handleInternalSearch(inputValue, callback) {
+    if (!localOptions) {
+      return;
+    }
+
+    var filteredOptions = localOptions.filter(function (option) {
+      return option.label.toLowerCase().includes(inputValue.toLocaleLowerCase());
+    });
+    callback(filteredOptions);
+  };
+
   var handleLoadOptions = function handleLoadOptions(inputValue, callback) {
     if (hasMoreOptions) {
       setHasMoreOptions(false);
     }
 
-    return loadOptions(inputValue).then(function (_ref2) {
+    if (localOptions) {
+      handleInternalSearch(inputValue, callback);
+      return;
+    }
+
+    loadOptions(inputValue).then(function (_ref2) {
+      var _ref$current;
+
       var hasMore = _ref2.hasMore,
           options = _ref2.options;
+
+      if (ref.current && inputValue !== (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current['state']['inputValue'])) {
+        return;
+      }
+
+      if (!hasFirstLoadPerformed) {
+        setHasFirstLoadPerformed(true);
+
+        if (!hasMore) {
+          setLocalOptions(options);
+        }
+      }
+
       setHasMoreOptions(hasMore);
 
       if (hasMoreOptionsFirstLoad === undefined) {
@@ -5308,7 +5349,6 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
       }
 
       callback(options);
-      return options;
     });
   };
 
@@ -5332,9 +5372,9 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
     cacheOptions: false,
     defaultOptions: true,
     loadOptions: lodashEs.debounce(handleLoadOptions, 500, {
-      leading: true,
-      trailing: false
-    })
+      leading: true
+    }),
+    ref: ref
   }))));
 };