Custom Section in typescript is not possible

[iamsterdam800]

Hi Anton,

I'm trying to make the QR code sample work with Typescript, but getting a wierd error for the Tab field type.

When I check the type definition for any standard section it's like this:

export declare const ElementsSection: {
    name: string;
    Tab: ((props: SectionTabProps) => JSX.Element) & {
        displayName: string;
    };
    Panel: ({ store }: {
        store: any;
    }) => JSX.Element;
};

But I don't understand what is that displayName field and how / where to add it in the implementation to make Typescript happy?

Additionally, is there a reason the Section interface is not defined/exported? This makes creating custom sections in Typescript a struggle.

[lavrton]

Looks like { displayName: string; } automatically goes from usage of observer function that I use for most of side panel tabs.

import { observer } from 'mobx-react-lite';

export const ElementsSection = {
  name: 'elements',
  Tab: observer((props: SectionTabProps) => (
    <SectionTab name={t('sidePanel.elements')} iconSize={16} {...props}>
      <span className="bp4-icon">
        <FaShapes />
      </span>
    </SectionTab>
  )),
  Panel: ({ store }) => <ElementsPanel store={store} />,
};

I need an observer here to react for translations change here. You may not need that in your app, so you may skip using it, or you can use it too.

I am uncertain if it is really useful to fully copy this type interface.

Section is not defined just because I don't have that type in the code. Probably I can add it, but I don't see much value here yet.

[iamsterdam800]

Ok. So to make QR sample work, I need to wrap the Tab contents in observer? Will try.

[iamsterdam800]

Yep. Works as charm! Thanks!

[ADTC]

Hi @lavrton I was looking at why Section type is not available. It seems that in node_modules/polotno/side-panel/side-panel.d.ts the Section type is defined, but it's not exported:

// node_modules/polotno/side-panel/side-panel.d.ts
type Section = { /* ... */ };

Could you export it please?

// node_modules/polotno/side-panel/side-panel.d.ts
export type Section = { /* ... */ };

Otherwise we have to hack our own export like this, using one of the exported constants:

// wherever.ts/tsx
export type Section = typeof TemplatesSection;
// or any other *Section from "polotno/side-panel"

And use it when we define a custom section:

// MyCustomSection.tsx
import { Section } from "./wherever";

const MyCustomSection: Section = { /* ... */ };

It works but it feels like a hacky workaround.

Hope you can reopen this issue, or we can open a new issue.

[lavrton]

@ADTC I will release a new version soon with Section available for import.