1 | import React, { useMemo } from 'react';
|
2 |
|
3 | import { useParameter } from '@storybook/api';
|
4 | import { addons, types } from '@storybook/addons';
|
5 | import { AddonPanel } from '@storybook/components';
|
6 | import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
7 |
|
8 | type Results = string[] | undefined;
|
9 |
|
10 | export 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 |
|
19 | <li key={index}>{i}</li>
|
20 | ))}
|
21 | </ol>
|
22 | ) : null,
|
23 | [results]
|
24 | );
|
25 | };
|
26 |
|
27 | addons.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 | });
|