UNPKG

896 BTypeScriptView Raw
1import React, { useMemo } from 'react';
2
3import { useParameter } from '@storybook/api';
4import { addons, types } from '@storybook/addons';
5import { AddonPanel } from '@storybook/components';
6import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
7
8type Results = string[] | undefined;
9
10export const Content = () => {
11 const results = useParameter<Results>(PARAM_KEY, []);
12
13 return useMemo(
14 () =>
15 results.length ? (
16 <ol>
17 {results.map((i, index) => (
18 // eslint-disable-next-line react/no-array-index-key
19 <li key={index}>{i}</li>
20 ))}
21 </ol>
22 ) : null,
23 [results]
24 );
25};
26
27addons.register(ADDON_ID, () => {
28 addons.add(PANEL_ID, {
29 title: 'parameter',
30 type: types.PANEL,
31 render: ({ active, key }) => (
32 <AddonPanel active={active} key={key}>
33 <Content />
34 </AddonPanel>
35 ),
36 });
37});