1 | import "core-js/modules/es.array.reduce.js";
|
2 | import React from 'react';
|
3 | import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
|
4 | import { ArgsTable, NoControlsWarning } from '@storybook/components';
|
5 | import { PARAM_KEY } from './constants';
|
6 | export const ControlsPanel = () => {
|
7 | const [args, updateArgs, resetArgs] = useArgs();
|
8 | const [globals] = useGlobals();
|
9 | const rows = useArgTypes();
|
10 | const isArgsStory = useParameter('__isArgsStory', false);
|
11 | const {
|
12 | expanded,
|
13 | sort,
|
14 | presetColors,
|
15 | hideNoControlsWarning = false
|
16 | } = useParameter(PARAM_KEY, {});
|
17 | const {
|
18 | path
|
19 | } = useStorybookState();
|
20 | const hasControls = Object.values(rows).some(arg => arg === null || arg === void 0 ? void 0 : arg.control);
|
21 | const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
22 | const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
|
23 | var _arg$control, _arg$control2;
|
24 |
|
25 | if ((arg === null || arg === void 0 ? void 0 : (_arg$control = arg.control) === null || _arg$control === void 0 ? void 0 : _arg$control.type) !== 'color' || arg !== null && arg !== void 0 && (_arg$control2 = arg.control) !== null && _arg$control2 !== void 0 && _arg$control2.presetColors) acc[key] = arg;else acc[key] = Object.assign({}, arg, {
|
26 | control: Object.assign({}, arg.control, {
|
27 | presetColors
|
28 | })
|
29 | });
|
30 | return acc;
|
31 | }, {});
|
32 | return React.createElement(React.Fragment, null, showWarning && React.createElement(NoControlsWarning, null), React.createElement(ArgsTable, {
|
33 | key: path,
|
34 |
|
35 | compact: !expanded && hasControls,
|
36 | rows: withPresetColors,
|
37 | args,
|
38 | globals,
|
39 | updateArgs,
|
40 | resetArgs,
|
41 | inAddonPanel: true,
|
42 | sort
|
43 | }));
|
44 | }; |
\ | No newline at end of file |