feat: add addChild option templates

src/prefabs/structures/ActionJSForm/children.ts

@@ -20,20 +20,18 @@ import {
   dateTimePickerOptions,
   fileUploadOptions,
   multiAutocompleteOptions,
-  priceInputOptions,
   radioInputOptions,
   ratingInputOptions,
   richTextOptions,
   selectInputOptions,
-  textAreaOptions,
   textInputOptions,
 } from '..';
 
 export const inputTypes = [
-  TextInput({ label: 'Text field', options: { ...textInputOptions } }),
-  SelectInput({ label: 'Select', options: { ...selectInputOptions } }),
-  PriceInput({ label: 'Price', options: { ...priceInputOptions } }),
-  TextArea({ label: 'Textarea', options: { ...textAreaOptions } }),
+  TextInput({ label: 'Text field' }),
+  SelectInput({ label: 'Select' }),
+  PriceInput({ label: 'Price' }),
+  TextArea({ label: 'Textarea' }),
 ];
 
 const defaultOptions = {

src/prefabs/structures/Configuration.ts

@@ -1,11 +1,13 @@
 import {
   OptionCategory,
   OptionProducer,
+  OptionTemplates,
   PrefabComponentStyle,
 } from '@betty-blocks/component-sdk';
 
 export interface Configuration {
   options?: Record<string, OptionProducer>;
+  optionTemplates?: OptionTemplates;
   adornmentIcon?: string;
   label?: string;
   inputLabel?: string;

src/prefabs/structures/PriceInput/index.ts

@@ -3,6 +3,7 @@ import { updateOption } from '../../../utils';
 import { TextInput } from '../TextInput';
 import { options } from './options';
 import { Configuration } from '../Configuration';
+import { addChildOptions } from './options/addChild';
 
 export const PriceInput = (
   config: Configuration,
@@ -13,5 +14,17 @@ export const PriceInput = (
     value: 'start',
   });
 
-  return TextInput({ ...config, options, label }, descendants);
+  return TextInput(
+    {
+      ...config,
+      options,
+      label,
+      optionTemplates: {
+        addChild: {
+          options: addChildOptions,
+        },
+      },
+    },
+    descendants,
+  );
 };

src/prefabs/structures/PriceInput/options/addChild.ts

@@ -0,0 +1,41 @@
+import {
+  buttongroup,
+  CreateActionInputVariableKind,
+  option,
+  optionTemplateOptions,
+  property,
+  showIf,
+} from '@betty-blocks/component-sdk';
+
+export const addChildOptions = optionTemplateOptions({
+  propertyBased: buttongroup(
+    'Type',
+    [
+      ['Property-based', 'true'],
+      ['Non-property-based', 'false'],
+    ],
+    { value: 'true' },
+  ),
+  actionVariableId: option('ACTION_JS_VARIABLE', {
+    label: 'Action input variable',
+    value: '',
+    configuration: {
+      condition: showIf('propertyBased', 'EQ', 'false'),
+      createActionInputVariable: {
+        type: CreateActionInputVariableKind.NUMBER,
+      },
+    },
+  }),
+
+  property: property('Property', {
+    value: '',
+    showInReconfigure: true,
+    configuration: {
+      allowedKinds: ['INTEGER', 'PRICE', 'PRICE_EXPRESSION'],
+      condition: showIf('propertyBased', 'EQ', 'true'),
+      createActionInputVariable: {
+        type: CreateActionInputVariableKind.NUMBER,
+      },
+    },
+  }),
+});

src/prefabs/structures/PriceInput/options/index.ts

@@ -1,6 +1,5 @@
 import {
-  buttongroup,
-  CreateActionInputVariableKind,
+  hideIf,
   option,
   property,
   showIf,
@@ -18,45 +17,20 @@ const styles = { ...defaultStyles };
 delete (<PartialBy<typeof styles, 'adornmentIcon'>>styles).adornmentIcon;
 
 export const options = {
-  propertyBased: buttongroup(
-    'Type',
-    [
-      ['Property-based', 'true'],
-      ['Non-property-based', 'false'],
-    ],
-    {
-      value: 'true',
-      showInAddChild: true,
-      configuration: {
-        showOnDrop: true,
-      },
-    },
-  ),
-
   actionVariableId: option('ACTION_JS_VARIABLE', {
     label: 'Action input variable',
     value: '',
-    showInAddChild: true,
     configuration: {
-      condition: showIf('propertyBased', 'EQ', 'false'),
-      showOnDrop: true,
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.NUMBER,
-      },
+      condition: showIf('property', 'EQ', ''),
     },
   }),
 
   property: property('Property', {
     value: '',
-    showInAddChild: true,
     configuration: {
       allowedKinds: ['INTEGER', 'PRICE', 'PRICE_EXPRESSION'],
       disabled: true,
-      condition: showIf('propertyBased', 'EQ', 'true'),
-      showOnDrop: true,
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.NUMBER,
-      },
+      condition: hideIf('property', 'EQ', ''),
     },
   }),
 

src/prefabs/structures/SelectInput/index.ts

@@ -2,6 +2,7 @@ import { component, PrefabReference } from '@betty-blocks/component-sdk';
 import { Configuration } from '../Configuration';
 import { options as defaults } from './options/index';
 import { updateOption } from '../../../utils';
+import { addChildOptions } from './options/addChild';
 
 export const SelectInput = (
   config: Configuration,
@@ -47,7 +48,18 @@ export const SelectInput = (
 
   return component(
     'SelectInput',
-    { options, style, ref, label, optionCategories: categories },
+    {
+      options,
+      style,
+      ref,
+      label,
+      optionCategories: categories,
+      optionTemplates: {
+        addChild: {
+          options: addChildOptions,
+        },
+      },
+    },
     children,
   );
 };

src/prefabs/structures/SelectInput/options/addChild.ts

@@ -0,0 +1,44 @@
+import {
+  buttongroup,
+  CreateActionInputVariableKind,
+  option,
+  optionTemplateOptions,
+  property,
+  showIf,
+} from '@betty-blocks/component-sdk';
+
+export const addChildOptions = optionTemplateOptions({
+  propertyBased: buttongroup(
+    'Type',
+    [
+      ['Property-based', 'true'],
+      ['Non-property-based', 'false'],
+    ],
+    {
+      value: 'true',
+    },
+  ),
+
+  actionVariableId: option('ACTION_JS_VARIABLE', {
+    label: 'Action input variable',
+    value: '',
+    configuration: {
+      condition: showIf('propertyBased', 'EQ', 'false'),
+      createActionInputVariable: {
+        type: CreateActionInputVariableKind.NUMBER,
+      },
+    },
+  }),
+
+  property: property('Property', {
+    value: '',
+    configuration: {
+      allowedKinds: ['LIST', 'BELONGS_TO'],
+      allowRelations: true,
+      condition: showIf('propertyBased', 'EQ', 'true'),
+      createActionInputVariable: {
+        type: CreateActionInputVariableKind.NUMBER,
+      },
+    },
+  }),
+});

src/prefabs/structures/SelectInput/options/index.ts

@@ -1,6 +1,5 @@
 import {
   buttongroup,
-  CreateActionInputVariableKind,
   filter,
   hideIf,
   modelAndRelation,
@@ -15,47 +14,21 @@ import { validation } from './validation';
 import { styles } from './styles';
 
 export const options = {
-  propertyBased: buttongroup(
-    'Type',
-    [
-      ['Property-based', 'true'],
-      ['Non-property-based', 'false'],
-    ],
-    {
-      value: 'true',
-      showInAddChild: true,
-      configuration: {
-        showOnDrop: true,
-      },
-    },
-  ),
-
   actionVariableId: option('ACTION_JS_VARIABLE', {
     label: 'Action input variable',
     value: '',
-    showInAddChild: true,
     configuration: {
-      condition: showIf('propertyBased', 'EQ', 'false'),
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.NUMBER,
-      },
-      showOnDrop: true,
+      condition: showIf('property', 'EQ', ''),
     },
   }),
 
   property: property('Property', {
     value: '',
-    showInReconfigure: true,
-    showInAddChild: true,
     configuration: {
       allowedKinds: ['LIST', 'BELONGS_TO'],
       allowRelations: true,
       disabled: true,
-      condition: showIf('propertyBased', 'EQ', 'true'),
-      showOnDrop: true,
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.NUMBER,
-      },
+      condition: hideIf('property', 'EQ', ''),
     },
   }),
 

src/prefabs/structures/TextArea/options/index.ts

@@ -1,6 +1,5 @@
 import {
-  buttongroup,
-  CreateActionInputVariableKind,
+  hideIf,
   option,
   property,
   showIf,
@@ -13,46 +12,20 @@ import { styles } from '../../TextInput/options/styles';
 import { validation } from '../../TextInput/options/validation';
 
 export const options = {
-  propertyBased: buttongroup(
-    'Type',
-    [
-      ['Property-based', 'true'],
-      ['Non-property-based', 'false'],
-    ],
-    {
-      value: 'true',
-      showInAddChild: true,
-      configuration: {
-        showOnDrop: true,
-      },
-    },
-  ),
-
   actionVariableId: option('ACTION_JS_VARIABLE', {
     label: 'Action input variable',
     value: '',
-    showInAddChild: true,
     configuration: {
-      condition: showIf('propertyBased', 'EQ', 'false'),
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.TEXT,
-      },
-      showOnDrop: true,
+      condition: showIf('property', 'EQ', ''),
     },
   }),
 
   property: property('Property', {
     value: '',
-    showInAddChild: true,
-    showInReconfigure: true,
     configuration: {
       allowedKinds: ['TEXT', 'URL', 'IBAN', 'STRING'],
       disabled: true,
-      condition: showIf('propertyBased', 'EQ', 'true'),
-      showOnDrop: true,
-      createActionInputVariable: {
-        type: CreateActionInputVariableKind.TEXT,
-      },
+      condition: hideIf('property', 'EQ', ''),
     },
   }),
 

src/prefabs/structures/TextInput/index.ts

@@ -2,12 +2,17 @@ import { component, PrefabReference } from '@betty-blocks/component-sdk';
 import { updateOption } from '../../../utils';
 import { Configuration } from '../Configuration';
 import { options as defaults } from './options/index';
+import { addChildOptions as defaultAddChildOptions } from './options/addChild';
 
 export const TextInput = (
   config: Configuration,
   children: PrefabReference[] = [],
 ) => {
   const options = { ...(config.options || defaults) };
+  const addChildOptions = [
+    ...(config.optionTemplates?.addChild?.options || defaultAddChildOptions),
+  ];
+
   const ref = config.ref ? { ...config.ref } : undefined;
 
   const categories = [
@@ -80,7 +85,17 @@ export const TextInput = (
 
   return component(
     'TextInput',
-    { label: config.label, options, ref, optionCategories: categories },
+    {
+      label: config.label,
+      options,
+      ref,
+      optionCategories: categories,
+      optionTemplates: {
+        addChild: {
+          options: addChildOptions,
+        },
+      },
+    },
     children,
   );
 };