Merge pull request #3306 from bettyblocks/feat/add-kind-select-hidden…

…-input-PAGE-3977 Feat/add kind select hidden input page 3977
bettyblocks · Dec 28, 2023 · df4ac4c · df4ac4c
2 parents 1ffb540 + a4c97c9
commit df4ac4c
Showing 1 changed file with 69 additions and 30 deletions.
diff --git a/src/prefabs/hiddeninput.tsx b/src/prefabs/hiddeninput.tsx
@@ -14,6 +14,7 @@ const beforeCreate = ({
   close,
   components: {
     Content,
+    Dropdown,
     Field,
     Footer,
     Header,
@@ -32,6 +33,7 @@ const beforeCreate = ({
   const {
     BettyPrefabs,
     prepareInput,
+    PropertyKind,
     useModelIdSelector,
     useActionIdSelector,
     usePrefabSelector,
@@ -53,6 +55,13 @@ const beforeCreate = ({
   const [prefabSaved, setPrefabSaved] = React.useState(false);
 
   const [validationMessage, setValidationMessage] = React.useState('');
+  const [propertyData, setPropertyData] = React.useState<any>({
+    name: undefined,
+    propertyModelId: '',
+    propertyKind: PropertyKind.TEXT,
+  });
+
+  const { name, propertyModelId, propertyKind } = propertyData;
 
   const modelRequest = useModelQuery({
     variables: { id: modelId },
@@ -72,9 +81,6 @@ const beforeCreate = ({
     return true;
   };
 
-  let name: string | undefined;
-  let propertyKind;
-  let propertyModelId;
   const componentId = createUuid();
 
   function isProperty(path: string) {
@@ -95,13 +101,17 @@ const beforeCreate = ({
 
   const propertyResponse = usePropertyQuery(propertyId);
 
-  if (!(propertyResponse.loading || propertyResponse.error)) {
-    if (propertyResponse.data) {
-      name = propertyResponse.data.property.label;
-      propertyKind = propertyResponse.data.property.kind;
-      propertyModelId = propertyResponse.data.property.referenceModel?.id;
+  React.useEffect(() => {
+    if (!(propertyResponse.loading || propertyResponse.error)) {
+      if (propertyResponse.data) {
+        setPropertyData({
+          name: propertyResponse.data.property.label,
+          propertyKind: propertyResponse.data.property.kind,
+          propertyModelId: propertyResponse.data.property.referenceModel?.id,
+        });
+      }
     }
-  }
+  }, [propertyId, propertyResponse]);
 
   const modelRelationResponse = useModelRelationQuery(propertyModelId);
 
@@ -154,7 +164,18 @@ const beforeCreate = ({
       <Content>
         {modelId && (
           <Field label="Property based input">
-            <FormField onClick={(): void => setPropertyBased(!propertyBased)}>
+            <FormField
+              onClick={(): void => {
+                setVariableInput(null);
+                setPropertyBased(!propertyBased);
+                setProperty('');
+                setPropertyData({
+                  name: undefined,
+                  propertyKind: PropertyKind.TEXT,
+                  propertyModelId: '',
+                });
+              }}
+            >
               <Toggle
                 color="purple"
                 checked={propertyBased}
@@ -184,27 +205,45 @@ const beforeCreate = ({
             />
           </Field>
         ) : (
-          <Field>
-            <Label>
-              Action input variable
-              <CircleQuestion
-                color="grey500"
-                size="medium"
-                data-tip="You can use this action input variable in the action itself."
-                data-for="variable-tooltip"
+          <>
+            <Field>
+              <Label>
+                Action input variable
+                <CircleQuestion
+                  color="grey500"
+                  size="medium"
+                  data-tip="You can use this action input variable in the action itself."
+                  data-for="variable-tooltip"
+                />
+              </Label>
+              <BBTooltip
+                id="variable-tooltip"
+                place="top"
+                type="dark"
+                effect="solid"
               />
-            </Label>
-            <BBTooltip
-              id="variable-tooltip"
-              place="top"
-              type="dark"
-              effect="solid"
-            />
-            <Text
-              onChange={(e): void => setVariableInput(e.target.value)}
-              color="orange"
-            />
-          </Field>
+              <Text
+                onChange={(e): void => setVariableInput(e.target.value)}
+                color="orange"
+              />
+            </Field>
+            <Field>
+              <Label>Kind</Label>
+              <Dropdown
+                onChange={(e) =>
+                  setPropertyData({
+                    name,
+                    propertyKind: e.target.value,
+                    propertyModelId,
+                  })
+                }
+              >
+                <option value={PropertyKind.TEXT}>Text</option>
+                <option value={PropertyKind.INTEGER}>Number</option>
+                <option value={PropertyKind.BOOLEAN}>Checkbox</option>
+              </Dropdown>
+            </Field>
+          </>
         )}
       </Content>
       <Footer