How to retrieve displaySettings when rendering a component?

[rawnanoob]

If you have a component defined like:

export const FAQContentType = contentType({
  key: 'FAQ',
  baseType: '_page',
  displayName: 'FAQ',
  mayContainTypes: [ArticleContentType],
  properties: {
    heading: {
      type: 'string',
    },
    body: {
      type: 'richText',
    },
  },
});

With his own display settings:

export const FAQDisplayTemplate = displayTemplate({
  key: "FAQDisplayTemplate",
  isDefault: true,
  displayName: "FAQ Styles",
  contentType: "FAQ",
  settings: {
    switchOrder: {
      editor: "checkbox",
      displayName: "Switch order",
      sortOrder: 0,
      choices: {
        true: {
          displayName: "Inversed direction",
          sortOrder: 1,
        },
        false: {
          displayName: "Normal direction",
          sortOrder: 2,
        },
      },
    },
  },
});

Problem

How would you retrieve the displaySettings?

I thought this would work:

type Props = {
  opti: Infer<typeof FAQContentType>;
  displaySettings?: Record<string, string>;
};

[TRomesh]

Hi @rawnanoob type inference of displaySetitngs is not yet implemented. If you need type safety, for the time being you will have to something like this

type Props = {
  opti: Infer<typeof FAQContentType>;
  displaySettings?: {switchOrder:string}
};

Then in your component you can use the displaySettings like this.

function Notice({ opti, displaySettings }: Props) {
  const { pa } = getPreviewUtils(opti);
  const switchOrder = (displaySettings?.switchOrder === "true"); // since values are returned as string
  return (
    <div>
      // rest of the code
    </div>
  );
}

[rawnanoob]

Hi @TRomesh Thanks for your suggestions. Unfortunately this doesn't work.
The displaySettings is undefined.

I think the problem is it's missing the prop.

function ComponentWrapper({
  children,
  node,
  displaySettings,
}: ComponentContainerProps) {
  const { pa } = getPreviewUtils(node);

  console.log("ComponentWrapper render:", children );
  return (
    <section {...pa(node)}>
      {children}
    </section>
  );
}

here the displaySettings of the FAQ component is available but is not where we want to work with it.
If I look at what children contains. I see it is missing the prop displaySettings in the props

{
    "key": null,
    "props": {
        "opti": {
            "__typename": "FAQ",
            "heading": "",
            ....
        }
    },
    ....
}