enhance Search widget to accept an object as default value (#1092)

Author: anserwaseem

.changeset/thirty-kings-prove.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+enhance Search widget to accept an object as default value

apps/kitchen-sink/src/ensemble/screens/layouts.yaml

@@ -20,7 +20,7 @@ View:
   header:
     title:
       Header:
-  
+
   menu:
     Drawer:
       id: testDrawer
@@ -36,25 +36,25 @@ View:
                 label: Navigate Home
                 onTap:
                   executeCode: |
-                    testDrawer.setCollapsed(true);
+                    testDrawer.setIsCollapsed(true);
                     ensemble.navigateScreen("Home");
             - Button:
                 label: Navigate to Widgets
                 onTap:
                   executeCode: |
-                    testDrawer.setCollapsed(true);
+                    testDrawer.setIsCollapsed(true);
                     ensemble.navigateScreen("Widgets");
             - Button:
                 label: Navigate to Layouts
                 onTap:
                   executeCode: |
-                    testDrawer.setCollapsed(true);
+                    testDrawer.setIsCollapsed(true);
                     ensemble.navigateScreen("Layouts");
             - Button:
                 label: Close Drawer
                 onTap:
                   executeCode: |
-                    testDrawer.setCollapsed(true);
+                    testDrawer.setIsCollapsed(true);
 
   body:
     Column:
@@ -151,18 +151,18 @@ View:
                   label: 2
               - Button:
                   label: FittedColumn
-        
+
         - Markdown:
             text: |
               ## Drawer
 
-              Click the button below to open the drawer in the current view. You can place any widgets you would like in the drawer. The drawer can be opened and closed dynamically using the `setCollapsed` method.
+              Click the button below to open the drawer in the current view. You can place any widgets you would like in the drawer. The drawer can be opened and closed dynamically using the `setIsCollapsed` method.
 
         - Button:
             label: open drawer
             onTap:
               executeCode: |
-                testDrawer.setCollapsed(false);
+                testDrawer.setIsCollapsed(false);
 
         - Text:
             styles:

apps/kitchen-sink/src/ensemble/screens/menu.yaml

@@ -114,4 +114,4 @@ ViewGroup:
               name: ArrowBack
               onTap:
                 executeCode: |
-                  sidebar.setCollapsed(!sidebar.isCollapsed)
+                  sidebar.setIsCollapsed(!sidebar.isCollapsed)

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -1295,6 +1295,60 @@ View:
                   onRefresh:
                     executeCode: |
                       console.log('refreshed')
+        - Row:
+            children:
+              - Search:
+                  id: searchDefaultObject
+                  value: # assuming this data is coming from server
+                    id: 105
+                    firstName: Emma
+                    lastName: Wilson
+                  styles:
+                    width: 320px
+                    height: 40px
+                    borderRadius: 12
+                    borderWidth: 2
+                    borderStyle: solid
+                    borderColor: "#B8BED6"
+                  placeholder: Search
+                  item-template:
+                    data: |-
+                      ${findUsers.body.users.map(user => ({id: user.id, firstName: user.firstName, lastName: user.lastName}))}
+                    name: user
+                    template:
+                      SearchText:
+                        inputs:
+                          user: ${user}
+                  selectedLabel:
+                    SearchText:
+                      inputs:
+                        user: ${value.user}
+                  searchKey: id
+                  onSearch:
+                    invokeAPI:
+                      name: findUsers
+                      inputs:
+                        search: ${search}
+                  onSelect:
+                    executeCode: |
+                      console.log(value)
+                  onClear:
+                    executeCode: |
+                      console.log("Search cleared")
+              - Text:
+                  text: ${JSON.stringify(searchDefaultObject.value)}
+              - Text:
+                  text: ${JSON.stringify(findUsers.body.users.map((user) => user.id))}
+
+SearchText:
+  inputs:
+    - user
+  body:
+    Text:
+      text: ${user.firstName} ${user.lastName}
+      styles:
+        color: red
+
 API:
   getDummyProducts:
     method: GET

packages/runtime/src/widgets/Search.tsx

@@ -26,7 +26,7 @@ import { Icon } from "./Icon";
 const widgetName = "Search";
 
 export type SearchProps = {
-  value?: string;
+  value?: string | { [key: string]: unknown };
   placeholder?: string;
   searchKey?: string;
   selectedLabel?: { [key: string]: unknown };
@@ -58,6 +58,7 @@ export const Search: React.FC<SearchProps> = ({
 }) => {
   const [searchValue, setSearchValue] = useState<string | null>(null);
   const [value, setValue] = useState<unknown>();
+  const [selectedObject, setSelectedObject] = useState<unknown>(null);
 
   const { namedData } = useTemplateData({
     data: itemTemplate?.data,
@@ -143,8 +144,14 @@ export const Search: React.FC<SearchProps> = ({
           (option) => extractValue(option) === selectedValue,
         );
 
+        const fullSelectedObject = get(selectedOption, [
+          itemTemplate.name,
+        ]) as unknown;
+        // store full object separately only for selectedLabel rendering
+        setSelectedObject(fullSelectedObject);
+
         onSelectAction?.callback({
-          value: get(selectedOption, [itemTemplate.name]) as unknown,
+          value: fullSelectedObject,
         });
       }
     },
@@ -153,6 +160,8 @@ export const Search: React.FC<SearchProps> = ({
 
   const handleClear = useCallback(() => {
     setSearchValue(null);
+    setValue(null);
+    setSelectedObject(null);
     onClearAction?.callback();
   }, [onClearAction?.callback]);
 
@@ -169,27 +178,72 @@ export const Search: React.FC<SearchProps> = ({
       : EnsembleRuntime.render([unwrapWidget(notFoundContent)]);
   }, [values?.notFoundContent]);
 
+  const selectDefaultValue = useMemo(() => {
+    if (!values?.initialValue) return undefined;
+
+    if (isObject(values.initialValue)) {
+      const extractedValue = extractValue({
+        [itemTemplate?.name ?? ""]: values.initialValue,
+      });
+      return String(extractedValue);
+    }
+
+    return String(values.initialValue);
+  }, [values?.initialValue, extractValue, itemTemplate?.name]);
+
   const renderLabel = useCallback(
     (label: React.ReactNode, labelValue: string | number): React.ReactNode => {
-      if (isNil(rest.selectedLabel) || isEmpty(namedData)) {
-        return label;
+      // if we have selectedLabel and a selected object (from selection or initial object value)
+      if (!isNil(rest.selectedLabel) && selectedObject) {
+        return (
+          <CustomScopeProvider
+            value={{ value: { [itemTemplate?.name ?? ""]: selectedObject } }}
+          >
+            {EnsembleRuntime.render([unwrapWidget(rest.selectedLabel)])}
+          </CustomScopeProvider>
+        );
       }
 
-      const option = namedData.find(
-        (item) => extractValue(item) === labelValue,
-      );
-      return (
-        <CustomScopeProvider value={{ value: option }}>
-          {EnsembleRuntime.render([unwrapWidget(rest.selectedLabel)])}
-        </CustomScopeProvider>
-      );
+      // if we have selectedLabel but no selectedObject, try to find from namedData
+      if (!isNil(rest.selectedLabel) && !isEmpty(namedData)) {
+        const option = namedData.find(
+          (item) => extractValue(item) === labelValue,
+        );
+        if (option) {
+          return (
+            <CustomScopeProvider value={{ value: option }}>
+              {EnsembleRuntime.render([unwrapWidget(rest.selectedLabel)])}
+            </CustomScopeProvider>
+          );
+        }
+      }
+
+      return label;
     },
-    [extractValue, namedData, rest.selectedLabel],
+    [
+      extractValue,
+      itemTemplate?.name,
+      namedData,
+      rest.selectedLabel,
+      selectedObject,
+    ],
   );
 
   useEffect(() => {
-    if (!value) setValue(values?.initialValue);
-  }, [value, values?.initialValue]);
+    if (!value && values?.initialValue) {
+      if (isObject(values.initialValue)) {
+        // if initial value is an object, extract the key for widget value and store full object
+        const extractedValue = extractValue({
+          [itemTemplate?.name ?? ""]: values.initialValue,
+        });
+        setValue(extractedValue);
+        setSelectedObject(values.initialValue);
+      } else {
+        // if initial value is primitive, use it directly
+        setValue(values.initialValue);
+      }
+    }
+  }, [value, values?.initialValue, extractValue, itemTemplate?.name]);
 
   return (
     <div
@@ -220,7 +274,7 @@ export const Search: React.FC<SearchProps> = ({
       <SelectComponent
         allowClear
         className={`${values?.styles?.names || ""} ${id}_input`}
-        defaultValue={values?.initialValue}
+        defaultValue={selectDefaultValue}
         filterOption={false}
         id={values?.id}
         labelRender={({ label, value: labelValue }): React.ReactNode =>