1 | import "core-js/modules/es.array.concat.js";
|
2 | import "core-js/modules/es.array.for-each.js";
|
3 | import "core-js/modules/es.array.map.js";
|
4 | import "core-js/modules/es.array.reduce.js";
|
5 | import "core-js/modules/es.function.name.js";
|
6 | import "core-js/modules/es.number.constructor.js";
|
7 | import "core-js/modules/es.object.assign.js";
|
8 | import "core-js/modules/es.object.entries.js";
|
9 | import "core-js/modules/es.object.keys.js";
|
10 | import "core-js/modules/web.dom-collections.for-each.js";
|
11 |
|
12 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
13 |
|
14 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
15 |
|
16 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
17 |
|
18 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
19 |
|
20 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
21 |
|
22 | function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
23 |
|
24 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
25 |
|
26 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
27 |
|
28 | import React from 'react';
|
29 | import pickBy from 'lodash/pickBy';
|
30 | import { styled, ignoreSsrWarning } from '@storybook/theming';
|
31 | import { opacify, transparentize, darken, lighten } from 'polished';
|
32 | import { Icons } from '../../icon/icon';
|
33 | import { ArgRow } from './ArgRow';
|
34 | import { SectionRow } from './SectionRow';
|
35 | import { EmptyBlock } from '../EmptyBlock';
|
36 | import { Link } from '../../typography/link/link';
|
37 | import { ResetWrapper } from '../../typography/DocumentFormatting';
|
38 | export var TableWrapper = styled.table(function (_ref) {
|
39 | var _trFirstChild$conca, _trLastChild$concat, _;
|
40 |
|
41 | var theme = _ref.theme,
|
42 | compact = _ref.compact,
|
43 | inAddonPanel = _ref.inAddonPanel;
|
44 | return {
|
45 | '&&': (_ = {
|
46 |
|
47 | borderCollapse: 'collapse',
|
48 | borderSpacing: 0,
|
49 | color: theme.color.defaultText,
|
50 | 'td, th': {
|
51 | padding: 0,
|
52 | border: 'none',
|
53 | verticalAlign: 'top',
|
54 | textOverflow: 'ellipsis'
|
55 | },
|
56 |
|
57 | fontSize: theme.typography.size.s2 - 1,
|
58 | lineHeight: '20px',
|
59 | textAlign: 'left',
|
60 | width: '100%',
|
61 |
|
62 | marginTop: inAddonPanel ? 0 : 25,
|
63 | marginBottom: inAddonPanel ? 0 : 40,
|
64 | 'thead th:first-of-type, td:first-of-type': {
|
65 |
|
66 | width: '25%'
|
67 | },
|
68 | 'th:first-of-type, td:first-of-type': {
|
69 | paddingLeft: 20
|
70 | },
|
71 | 'th:nth-of-type(2), td:nth-of-type(2)': Object.assign({}, compact ? null : {
|
72 |
|
73 | width: '35%'
|
74 | }),
|
75 | 'td:nth-of-type(3)': Object.assign({}, compact ? null : {
|
76 |
|
77 | width: '15%'
|
78 | }),
|
79 | 'th:last-of-type, td:last-of-type': Object.assign({
|
80 | paddingRight: 20
|
81 | }, compact ? null : {
|
82 |
|
83 | width: '25%'
|
84 | }),
|
85 | th: {
|
86 | color: theme.base === 'light' ? transparentize(0.25, theme.color.defaultText) : transparentize(0.45, theme.color.defaultText),
|
87 | paddingTop: 10,
|
88 | paddingBottom: 10,
|
89 | paddingLeft: 15,
|
90 | paddingRight: 15
|
91 | },
|
92 | td: {
|
93 | paddingTop: '10px',
|
94 | paddingBottom: '10px',
|
95 | '&:not(:first-of-type)': {
|
96 | paddingLeft: 15,
|
97 | paddingRight: 15
|
98 | },
|
99 | '&:last-of-type': {
|
100 | paddingRight: 20
|
101 | }
|
102 | },
|
103 |
|
104 |
|
105 |
|
106 |
|
107 | marginLeft: inAddonPanel ? 0 : 1,
|
108 | marginRight: inAddonPanel ? 0 : 1
|
109 | }, _defineProperty(_, "tr:first-child".concat(ignoreSsrWarning), (_trFirstChild$conca = {}, _defineProperty(_trFirstChild$conca, "td:first-child".concat(ignoreSsrWarning, ", th:first-child").concat(ignoreSsrWarning), {
|
110 | borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius
|
111 | }), _defineProperty(_trFirstChild$conca, "td:last-child".concat(ignoreSsrWarning, ", th:last-child").concat(ignoreSsrWarning), {
|
112 | borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius
|
113 | }), _trFirstChild$conca)), _defineProperty(_, "tr:last-child".concat(ignoreSsrWarning), (_trLastChild$concat = {}, _defineProperty(_trLastChild$concat, "td:first-child".concat(ignoreSsrWarning, ", th:first-child").concat(ignoreSsrWarning), {
|
114 | borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius
|
115 | }), _defineProperty(_trLastChild$concat, "td:last-child".concat(ignoreSsrWarning, ", th:last-child").concat(ignoreSsrWarning), {
|
116 | borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius
|
117 | }), _trLastChild$concat)), _defineProperty(_, "tbody", {
|
118 |
|
119 | boxShadow: !inAddonPanel && (theme.base === 'light' ? "rgba(0, 0, 0, 0.10) 0 1px 3px 1px,\n ".concat(transparentize(0.035, theme.appBorderColor), " 0 0 0 1px") : "rgba(0, 0, 0, 0.20) 0 2px 5px 1px,\n ".concat(opacify(0.05, theme.appBorderColor), " 0 0 0 1px")),
|
120 | borderRadius: theme.appBorderRadius,
|
121 |
|
122 |
|
123 | '@media not all and (min-resolution:.001dpcm)': {
|
124 | '@supports (-webkit-appearance:none)': {
|
125 | borderWidth: 1,
|
126 | borderStyle: 'solid',
|
127 | borderColor: !inAddonPanel && (theme.base === 'light' ? transparentize(0.035, theme.appBorderColor) : opacify(0.05, theme.appBorderColor))
|
128 | }
|
129 | },
|
130 | tr: Object.assign({
|
131 | background: 'transparent',
|
132 | overflow: 'hidden'
|
133 | }, inAddonPanel ? {
|
134 | borderTopWidth: 1,
|
135 | borderTopStyle: 'solid',
|
136 | borderTopColor: theme.base === 'light' ? darken(0.1, theme.background.content) : lighten(0.05, theme.background.content)
|
137 | } : _defineProperty({}, "&:not(:first-child".concat(ignoreSsrWarning, ")"), {
|
138 | borderTopWidth: 1,
|
139 | borderTopStyle: 'solid',
|
140 | borderTopColor: theme.base === 'light' ? darken(0.1, theme.background.content) : lighten(0.05, theme.background.content)
|
141 | })),
|
142 | td: {
|
143 | background: theme.background.content
|
144 | }
|
145 | }), _)
|
146 | };
|
147 | });
|
148 | var ResetButton = styled.button(function (_ref3) {
|
149 | var theme = _ref3.theme;
|
150 | return {
|
151 | border: 0,
|
152 | borderRadius: '3em',
|
153 | cursor: 'pointer',
|
154 | display: 'inline-block',
|
155 | overflow: 'hidden',
|
156 | padding: '3px 8px',
|
157 | transition: 'all 150ms ease-out',
|
158 | verticalAlign: 'top',
|
159 | userSelect: 'none',
|
160 | margin: 0,
|
161 | backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.color.border,
|
162 | boxShadow: theme.base === 'light' ? "".concat(theme.color.border, " 0 0 0 1px inset") : "".concat(theme.color.darker, " 0 0 0 1px inset"),
|
163 | color: theme.color.secondary,
|
164 | '&:hover': {
|
165 | background: theme.base === 'light' ? darken(0.03, '#EAF3FC') : opacify(0.1, theme.color.border)
|
166 | },
|
167 | '&:focus': {
|
168 | boxShadow: "".concat(theme.color.secondary, " 0 0 0 1px inset"),
|
169 | outline: 'none'
|
170 | },
|
171 | svg: {
|
172 | display: 'block',
|
173 | height: 14,
|
174 | width: 14
|
175 | }
|
176 | };
|
177 | });
|
178 | var ControlHeadingWrapper = styled.span({
|
179 | display: 'flex',
|
180 | justifyContent: 'space-between'
|
181 | });
|
182 | export var ArgsTableError;
|
183 |
|
184 | (function (ArgsTableError) {
|
185 | ArgsTableError["NO_COMPONENT"] = "No component found.";
|
186 | ArgsTableError["ARGS_UNSUPPORTED"] = "Args unsupported. See Args documentation for your framework.";
|
187 | })(ArgsTableError || (ArgsTableError = {}));
|
188 |
|
189 | var sortFns = {
|
190 | alpha: function alpha(a, b) {
|
191 | return a.name.localeCompare(b.name);
|
192 | },
|
193 | requiredFirst: function requiredFirst(a, b) {
|
194 | var _b$type, _a$type;
|
195 |
|
196 | return Number(!!((_b$type = b.type) !== null && _b$type !== void 0 && _b$type.required)) - Number(!!((_a$type = a.type) !== null && _a$type !== void 0 && _a$type.required)) || a.name.localeCompare(b.name);
|
197 | },
|
198 | none: undefined
|
199 | };
|
200 |
|
201 | var groupRows = function groupRows(rows, sort) {
|
202 | var sections = {
|
203 | ungrouped: [],
|
204 | ungroupedSubsections: {},
|
205 | sections: {}
|
206 | };
|
207 | if (!rows) return sections;
|
208 | Object.entries(rows).forEach(function (_ref4) {
|
209 | var _ref5 = _slicedToArray(_ref4, 2),
|
210 | key = _ref5[0],
|
211 | row = _ref5[1];
|
212 |
|
213 | var _ref6 = (row === null || row === void 0 ? void 0 : row.table) || {},
|
214 | category = _ref6.category,
|
215 | subcategory = _ref6.subcategory;
|
216 |
|
217 | if (category) {
|
218 | var section = sections.sections[category] || {
|
219 | ungrouped: [],
|
220 | subsections: {}
|
221 | };
|
222 |
|
223 | if (!subcategory) {
|
224 | section.ungrouped.push(Object.assign({
|
225 | key: key
|
226 | }, row));
|
227 | } else {
|
228 | var subsection = section.subsections[subcategory] || [];
|
229 | subsection.push(Object.assign({
|
230 | key: key
|
231 | }, row));
|
232 | section.subsections[subcategory] = subsection;
|
233 | }
|
234 |
|
235 | sections.sections[category] = section;
|
236 | } else if (subcategory) {
|
237 | var _subsection = sections.ungroupedSubsections[subcategory] || [];
|
238 |
|
239 | _subsection.push(Object.assign({
|
240 | key: key
|
241 | }, row));
|
242 |
|
243 | sections.ungroupedSubsections[subcategory] = _subsection;
|
244 | } else {
|
245 | sections.ungrouped.push(Object.assign({
|
246 | key: key
|
247 | }, row));
|
248 | }
|
249 | });
|
250 |
|
251 | var sortFn = sortFns[sort];
|
252 |
|
253 | var sortSubsection = function sortSubsection(record) {
|
254 | if (!sortFn) return record;
|
255 | return Object.keys(record).reduce(function (acc, cur) {
|
256 | return Object.assign({}, acc, _defineProperty({}, cur, record[cur].sort(sortFn)));
|
257 | }, {});
|
258 | };
|
259 |
|
260 | var sorted = {
|
261 | ungrouped: sections.ungrouped.sort(sortFn),
|
262 | ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
|
263 | sections: Object.keys(sections.sections).reduce(function (acc, cur) {
|
264 | return Object.assign({}, acc, _defineProperty({}, cur, {
|
265 | ungrouped: sections.sections[cur].ungrouped.sort(sortFn),
|
266 | subsections: sortSubsection(sections.sections[cur].subsections)
|
267 | }));
|
268 | }, {})
|
269 | };
|
270 | return sorted;
|
271 | };
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 | export var ArgsTable = function ArgsTable(props) {
|
279 | var _ref7 = props,
|
280 | error = _ref7.error;
|
281 |
|
282 | if (error) {
|
283 | return React.createElement(EmptyBlock, null, error, "\xA0", React.createElement(Link, {
|
284 | href: "http://storybook.js.org/docs/",
|
285 | target: "_blank",
|
286 | withArrow: true
|
287 | }, "Read the docs"));
|
288 | }
|
289 |
|
290 | var _ref8 = props,
|
291 | rows = _ref8.rows,
|
292 | args = _ref8.args,
|
293 | updateArgs = _ref8.updateArgs,
|
294 | resetArgs = _ref8.resetArgs,
|
295 | compact = _ref8.compact,
|
296 | inAddonPanel = _ref8.inAddonPanel,
|
297 | initialExpandedArgs = _ref8.initialExpandedArgs,
|
298 | _ref8$sort = _ref8.sort,
|
299 | sort = _ref8$sort === void 0 ? 'none' : _ref8$sort;
|
300 | var groups = groupRows(pickBy(rows, function (row) {
|
301 | var _row$table;
|
302 |
|
303 | return !(row !== null && row !== void 0 && (_row$table = row.table) !== null && _row$table !== void 0 && _row$table.disable);
|
304 | }), sort);
|
305 |
|
306 | if (groups.ungrouped.length === 0 && Object.entries(groups.sections).length === 0 && Object.entries(groups.ungroupedSubsections).length === 0) {
|
307 | return React.createElement(EmptyBlock, null, "No inputs found for this component.\xA0", React.createElement(Link, {
|
308 | href: "http://storybook.js.org/docs/",
|
309 | target: "_blank",
|
310 | withArrow: true
|
311 | }, "Read the docs"));
|
312 | }
|
313 |
|
314 | var colSpan = 1;
|
315 | if (updateArgs) colSpan += 1;
|
316 | if (!compact) colSpan += 2;
|
317 | var expandable = Object.keys(groups.sections).length > 0;
|
318 | var common = {
|
319 | updateArgs: updateArgs,
|
320 | compact: compact,
|
321 | inAddonPanel: inAddonPanel,
|
322 | initialExpandedArgs: initialExpandedArgs
|
323 | };
|
324 | return React.createElement(ResetWrapper, null, React.createElement(TableWrapper, {
|
325 | compact: compact,
|
326 | inAddonPanel: inAddonPanel,
|
327 | className: "docblock-argstable"
|
328 | }, React.createElement("thead", {
|
329 | className: "docblock-argstable-head"
|
330 | }, React.createElement("tr", null, React.createElement("th", null, "Name"), compact ? null : React.createElement("th", null, "Description"), compact ? null : React.createElement("th", null, "Default"), updateArgs ? React.createElement("th", null, React.createElement(ControlHeadingWrapper, null, "Control", ' ', resetArgs && React.createElement(ResetButton, {
|
331 | onClick: function onClick() {
|
332 | return resetArgs();
|
333 | },
|
334 | title: "Reset controls"
|
335 | }, React.createElement(Icons, {
|
336 | icon: "sync",
|
337 | "aria-hidden": true
|
338 | })))) : null)), React.createElement("tbody", {
|
339 | className: "docblock-argstable-body"
|
340 | }, groups.ungrouped.map(function (row) {
|
341 | return React.createElement(ArgRow, _extends({
|
342 | key: row.key,
|
343 | row: row,
|
344 | arg: args && args[row.key]
|
345 | }, common));
|
346 | }), Object.entries(groups.ungroupedSubsections).map(function (_ref9) {
|
347 | var _ref10 = _slicedToArray(_ref9, 2),
|
348 | subcategory = _ref10[0],
|
349 | subsection = _ref10[1];
|
350 |
|
351 | return React.createElement(SectionRow, {
|
352 | key: subcategory,
|
353 | label: subcategory,
|
354 | level: "subsection",
|
355 | colSpan: colSpan
|
356 | }, subsection.map(function (row) {
|
357 | return React.createElement(ArgRow, _extends({
|
358 | key: row.key,
|
359 | row: row,
|
360 | arg: args && args[row.key],
|
361 | expandable: expandable
|
362 | }, common));
|
363 | }));
|
364 | }), Object.entries(groups.sections).map(function (_ref11) {
|
365 | var _ref12 = _slicedToArray(_ref11, 2),
|
366 | category = _ref12[0],
|
367 | section = _ref12[1];
|
368 |
|
369 | return React.createElement(SectionRow, {
|
370 | key: category,
|
371 | label: category,
|
372 | level: "section",
|
373 | colSpan: colSpan
|
374 | }, section.ungrouped.map(function (row) {
|
375 | return React.createElement(ArgRow, _extends({
|
376 | key: row.key,
|
377 | row: row,
|
378 | arg: args && args[row.key]
|
379 | }, common));
|
380 | }), Object.entries(section.subsections).map(function (_ref13) {
|
381 | var _ref14 = _slicedToArray(_ref13, 2),
|
382 | subcategory = _ref14[0],
|
383 | subsection = _ref14[1];
|
384 |
|
385 | return React.createElement(SectionRow, {
|
386 | key: subcategory,
|
387 | label: subcategory,
|
388 | level: "subsection",
|
389 | colSpan: colSpan
|
390 | }, subsection.map(function (row) {
|
391 | return React.createElement(ArgRow, _extends({
|
392 | key: row.key,
|
393 | row: row,
|
394 | arg: args && args[row.key],
|
395 | expandable: expandable
|
396 | }, common));
|
397 | }));
|
398 | }));
|
399 | }))));
|
400 | };
|
401 | ArgsTable.displayName = "ArgsTable"; |
\ | No newline at end of file |