diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx index 26f6d18379f..66fe96fdade 100644 --- a/addons/notes/src/Panel.tsx +++ b/addons/notes/src/Panel.tsx @@ -101,8 +101,9 @@ export default class NotesPanel extends React.Component return null; } - // TODO: maybe memoize - const options = { ...defaultOptions, overrides: { ...defaultOptions.overrides, ...api.getElements(types.NOTES_ELEMENT) } }; + // TODO: memoize + const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {}); + const options = { ...defaultOptions, overrides: { ...defaultOptions.overrides, ...extraElements } }; return value ? ( diff --git a/addons/notes/src/giphy.tsx b/addons/notes/src/giphy.tsx index 0c6c556e1a2..b51f92bc7f6 100644 --- a/addons/notes/src/giphy.tsx +++ b/addons/notes/src/giphy.tsx @@ -6,11 +6,11 @@ import { logger } from '@storybook/client-logger'; interface Props { query: string; } -interface GiphyState { - src?: string; +interface State { + src: string | null; } -export default class Giphy extends Component { - state = { +export default class Giphy extends Component { + state: State = { src: null, }; componentDidMount() { diff --git a/addons/notes/src/shared.ts b/addons/notes/src/shared.ts index 5bbe3b51f74..c3afe553f00 100644 --- a/addons/notes/src/shared.ts +++ b/addons/notes/src/shared.ts @@ -1,3 +1,5 @@ +import { ReactElement } from 'react'; + export const ADDON_ID = 'storybooks/notes'; export const PANEL_ID = `${ADDON_ID}/panel`; export const PARAM_KEY = `notes`; @@ -9,6 +11,14 @@ export interface API { emit(event: string, callback: (...args: any) => any): void; getParameters(id: string, scope?: string): undefined | Parameters; + getElements( + type: string + ): { + [id: string]: { + id: string; + render: () => ReactElement; + }; + }; } interface TextParameter {