Slot component props aren't available when trying to use the `hidden` prop control function

Developer Support
1

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!

2

So I circled back to this and figured it out, apparently there’s more values in hidden

Example for PLASMIC.registerComponent(FormStep, {...

Instead of

hidden: (props) => props.headline?.textFormatting !== 'custom',

it would be

hidden: (props, ctx, { item } ) => item.field !== 'custom',

Now just gotta figure out why defaultValue in these situations does not work, but defaultValueHint does (but doesn’t pass the value through, just acts as a placeholder).

3

The defaultValue issue is due to the objects and setting them on the specific prop doesn’t work but setting them in the object does, like below:

formType: {
  type: 'object',
  defaultValue: {
    formType: 'value1',
    display: 'display1',
  }
  fields: {
    formType: {
      displayName: 'Form type',
      type: 'choice',
      options: [
        { value: 'value1', label: 'Value 1' },
        { value: 'value2', label: 'Value 2' },
      ],
    },
    display: {
      displayName: 'Form display',
      type: 'choice',
      hidden: (props) => props.formType?.field !== 'value1',
      options: [
        { value: 'display1', label: 'Display 1' },
        { value: 'display2', label: 'Display 2' },
      ],
    },
  },
}