From a88f953f657e72b6bc523c9e762743cee7febe77 Mon Sep 17 00:00:00 2001
From: Daniel Lobo <daniel@webip.com.br>
Date: Thu, 1 Dec 2022 16:31:37 -0300
Subject: [PATCH] select: getOptions async and isOptionEqualToValue

---
 src/components/Control/Control.js |  7 +++++--
 src/components/Select/Select.js   | 32 ++++++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/Control/Control.js b/src/components/Control/Control.js
index 5b2fae86..c35392b3 100644
--- a/src/components/Control/Control.js
+++ b/src/components/Control/Control.js
@@ -22,6 +22,7 @@ const Control = ({
   triggerRecalculation,
   updateNodeConnections,
   getOptions,
+  isOptionEqualToValue,
   setValue,
   defaultValue,
   isMonoControl
@@ -56,8 +57,9 @@ const Control = ({
           <Select
             {...commonProps}
             options={
-              getOptions ? getOptions(inputData, executionContext) : options
+              getOptions ? getOptions(inputData, executionContext, nodeId) : options
             }
+            isOptionEqualToValue={isOptionEqualToValue}
             placeholder={placeholder}
           />
         );
@@ -75,8 +77,9 @@ const Control = ({
             allowMultiple
             {...commonProps}
             options={
-              getOptions ? getOptions(inputData, executionContext) : options
+              getOptions ? getOptions(inputData, executionContext, nodeId) : options
             }
+            isOptionEqualToValue={isOptionEqualToValue}
             placeholder={placeholder}
             label={label}
           />
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index a556ac0f..aad8fca9 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -6,8 +6,11 @@ import styles from "./Select.css";
 
 const MAX_LABEL_LENGTH = 50;
 
+const isOptionEqualToValueDefault = (option, value) => option === value
+
 const Select = ({
   options = [],
+  isOptionEqualToValue,
   placeholder = "[Select an option]",
   onChange,
   data,
@@ -19,6 +22,15 @@ const Select = ({
     y: 0
   });
   const wrapper = React.useRef();
+  const [ theOptions, setTheOptions ] = React.useState([])
+
+  React.useEffect(() => {
+    if (options.then) {
+      options.then(setTheOptions)
+    } else {
+      setTheOptions(options)
+    }
+  }, [ options ])
 
   const closeDrawer = () => {
     setDrawerOpen(false);
@@ -47,14 +59,17 @@ const Select = ({
     onChange([...data.slice(0, optionIndex), ...data.slice(optionIndex + 1)]);
   };
 
-  const getFilteredOptions = () => (
+  const getFilteredOptions = React.useCallback(() => (
     allowMultiple ?
-    options.filter(opt => !data.includes(opt.value))
-    : options
-  )
+    theOptions.filter(opt => !data.includes(opt.value))
+    : theOptions
+  ), [ theOptions, data ])
 
   const selectedOption = React.useMemo(() => {
-    const option = options.find(o => o.value === data);
+    const option = theOptions.find(o => isOptionEqualToValue
+                                    ? isOptionEqualToValue(o.value, data)
+                                    : isOptionEqualToValueDefault(o.value, data)
+                                  );
     if (option) {
       return {
         ...option,
@@ -64,7 +79,7 @@ const Select = ({
             : option.label
       };
     }
-  }, [options, data]);
+  }, [theOptions, data]);
 
   return (
     <React.Fragment>
@@ -73,7 +88,10 @@ const Select = ({
           <div className={styles.chipsWrapper}>
             {data.map((val, i) => {
               const optLabel =
-                (options.find(opt => opt.value === val) || {}).label || "";
+                (theOptions.find(opt => isOptionEqualToValue
+                                  ? isOptionEqualToValue(opt.value, val)
+                                  : isOptionEqualToValueDefault(opt.value, val)
+                                ) || {}).label || "";
               return (
                 <OptionChip
                   onRequestDelete={() => handleOptionDeleted(i)}