Hello!
Preface - We’re integrating components from another service we use into Plasmic to do testing which is why I’m doing things the way I am since they have a pre-determined prop format.
I’m working with a multi step form component we built for another service, but are integrating it into Plasmic.
The multi step form accepts an unlimited number of “steps” which have options within those steps that are conditionally rendered based on selections in those steps.
When using ‘hidden’ in registerComponent
that is within a slot
, the props
aren’t available.
Example:
PLASMIC.registerComponent(MultiStepForm, {
name: 'MultiStepForm',
props: {
data: {
displayName: 'Steps',
type: 'slot',
allowedComponents: ['FormStep'],
defaultValue: [
{
type: 'component',
name: 'FormStep',
},
],
},
formType: {
type: 'object',
fields: {
formType: {
displayName: 'Form type',
type: 'choice',
defaultValue: 'value1',
options: [
{ value: 'value1', label: 'Value 1' },
{ value: 'value2', label: 'Value 2' },
],
},
display: {
displayName: 'Form display',
type: 'choice',
defaultValue: 'display1',
hidden: (props) => props.formType?.field !== 'value1',
options: [
{ value: 'display1', label: 'Display 1' },
{ value: 'display2', label: 'Display 2' },
],
},
},
},
},
});
PLASMIC.registerComponent(FormStep, {
name: 'FormStep',
props: {
headline: {
type: 'object',
fields: {
text: {
type: 'string',
},
textFormatting: {
displayName: 'Text Formatting',
defaultValue: 'default'
type: 'choice',
options: [
{ value: 'default', label: 'Use default' },
{ value: 'custom', label: 'Customize' },
],
},
element: {
type: 'choice',
defaultValue: 'h2',
options: [
{ value: 'h2', label: 'Heading 2' },
{ value: 'h3', label: 'Heading 3' },
],
hidden: (props) => props.headline?.textFormatting !== 'custom',
},
},
},
},
});
In MultiStepForm
, the hidden
prop control function works as expected.
In FormStep
, the hidden
prop control function does not, if I log out props
they do not contain props.headline.textFormatting
.
Also, is there a way to create an object that can be used like this?
Essentially just like the slot
type but instead of expecting a component, it accepts an object that can be added an unlimited number of times?
Thanks!