chore: add property based to hidden input

bettyblocks · Jan 16, 2025 · bbae1c3 · bbae1c3
1 parent a4f4c7e
commit bbae1c3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/src/prefabs/helpers/getKindsByType.ts b/src/prefabs/helpers/getKindsByType.ts
@@ -69,7 +69,7 @@ const inputTypeToActionInputVariableKind = {
   decimal: NUMBER,
   email: TEXT,
   file: TEXT,
-  hidden: TEXT,
+  hidden: NUMBER,
   iban: TEXT,
   image: TEXT,
   multiAutocomplete: ARRAY,

diff --git a/src/prefabs/hiddeninput.tsx b/src/prefabs/hiddeninput.tsx
@@ -1,42 +1,83 @@
 import {
   prefab,
   component,
-  option as optionFunction,
   variable,
   Icon,
   optionTemplateOptions,
   option,
   optionActionSetVariable,
-  CreateActionInputVariableKind,
+  showIf,
+  property,
+  hideIf,
+  buttongroup,
 } from '@betty-blocks/component-sdk';
+import { getKindsByType } from './helpers/getKindsByType';
 
 const attributes = {
   category: 'FORM',
   icon: Icon.HiddenInputIcon,
   keywords: ['Form', 'input', 'hidden'],
 };
 
+const { allowedKinds, actionInputVariableKind } = getKindsByType('hidden');
+
 const options = {
-  actionVariableId: optionFunction('ACTION_JS_VARIABLE', {
+  actionVariableId: option('ACTION_JS_VARIABLE', {
     label: 'Action input variable',
     value: '',
+    configuration: {
+      condition: showIf('property', 'EQ', ''),
+    },
   }),
+  property: property('Property', {
+    value: '',
+    configuration: {
+      allowedKinds,
+      disabled: true,
+      condition: hideIf('property', 'EQ', ''),
+    },
+  }),
+
   value: variable('Value'),
 };
 
 const addChildOptions = optionTemplateOptions({
+  propertyBased: buttongroup(
+    'Type',
+    [
+      ['Property-based', 'true'],
+      ['Non-property-based', 'false'],
+    ],
+    { value: 'true' },
+  ),
+
+  property: property('Property', {
+    value: '',
+    configuration: {
+      allowedKinds,
+      condition: showIf('propertyBased', 'EQ', 'true'),
+      createActionInputVariable: {
+        type: actionInputVariableKind,
+      },
+    },
+  }),
+
   actionVariableId: option('ACTION_JS_VARIABLE', {
-    label: 'Action input variable (number)',
+    label: 'Action input variable',
     value: '',
     configuration: {
+      condition: showIf('propertyBased', 'EQ', 'false'),
       createActionInputVariable: {
-        type: CreateActionInputVariableKind.NUMBER,
+        type: actionInputVariableKind,
       },
     },
   }),
 });
 
 const optionActions = {
+  property: {
+    onChange: [optionActionSetVariable('value', 'propertyValue')],
+  },
   actionVariableId: {
     onChange: [optionActionSetVariable('value', 'propertyValue')],
   },