fix form item's label not picking evaluated value (#854)

EnsembleUI · Oct 1, 2024 · 489ed91 · 489ed91
1 parent e1cb8b3
commit 489ed91
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/unlucky-bugs-tie.md b/.changeset/unlucky-bugs-tie.md
@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+fix form item's label not picking evaluated value
diff --git a/apps/kitchen-sink/src/ensemble/screens/forms.yaml b/apps/kitchen-sink/src/ensemble/screens/forms.yaml
@@ -1,3 +1,6 @@
+Import:
+ - common
+
 View:
  styles:
  scrollableView: true
@@ -205,9 +208,13 @@ View:
  format: DD-MM-YY
  - Date:
  id: date2
- label: Date 2
+ label: ${getDateLabel(dropdown.selectedValue)}
+ labelStyle:
+ color: ${dropdown.selectedValue === 'option2' ? 'green' :'blue'}
+ required: true
  value: "2024/04/04"
- hintText: Choose date 2
+ format: MM/DD/YYYY
+ hintText: ${ensemble.storage.get('inputVal')}
  - TextInput:
  id: customNumberInput
  required: true
@@ -397,7 +404,7 @@ View:
  label: Call API!
  onTap:
  invokeAPI:
- name: ${ensemble.storage.get('mockApiName')}
+ name: testMockResponse
  onResponse:
  executeCode: console.log("Mock API called ", response);
  - Button:
@@ -406,7 +413,7 @@ View:
  label: Call API from executeCode!
  onTap:
  executeCode: |
- ensemble.invokeAPI(ensemble.storage.get('mockApiName'));
+ ensemble.invokeAPI('testMockResponse');
  - Spacer:
  styles:
  size: 20

diff --git a/apps/kitchen-sink/src/ensemble/scripts/common.js b/apps/kitchen-sink/src/ensemble/scripts/common.js
@@ -1 +1,5 @@
 const productTitleName = "SgrDvr";
+
+const getDateLabel = (val) => {
+ return `i am a date label ${val}`
+}
diff --git a/packages/runtime/src/widgets/Form/FormItem.tsx b/packages/runtime/src/widgets/Form/FormItem.tsx
@@ -39,7 +39,7 @@ export const EnsembleFormItem: React.FC<EnsembleFormItemProps<unknown>> = (
  : EnsembleRuntime.render([unwrapWidget(values.label)])}
  </label>
  );
- }, []);
+ }, [values?.label, values?.labelStyle, values?.id]);
 
  return (
  <AntForm.Item