UNPKG

1.83 kBJavaScriptView Raw
1import "core-js/modules/es.array.reduce.js";
2import React from 'react';
3import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
4import { ArgsTable, NoControlsWarning } from '@storybook/components';
5import { PARAM_KEY } from './constants';
6export 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 /*#__PURE__*/React.createElement(React.Fragment, null, showWarning && /*#__PURE__*/React.createElement(NoControlsWarning, null), /*#__PURE__*/React.createElement(ArgsTable, {
33 key: path,
34 // resets state when switching stories
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