1 | import "core-js/modules/es.array.map.js";
|
2 | import "core-js/modules/es.array.slice.js";
|
3 | import "core-js/modules/es.object.assign.js";
|
4 | import "core-js/modules/es.object.to-string.js";
|
5 | import "core-js/modules/es.regexp.exec.js";
|
6 | import "core-js/modules/es.regexp.to-string.js";
|
7 | import "core-js/modules/es.string.split.js";
|
8 | import "core-js/modules/es.string.trim.js";
|
9 |
|
10 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
11 |
|
12 | 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."); }
|
13 |
|
14 | 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; }
|
15 |
|
16 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
17 |
|
18 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
19 |
|
20 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
21 |
|
22 | 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); }
|
23 |
|
24 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
25 |
|
26 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
27 |
|
28 | 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; }
|
29 |
|
30 | import React, { useState } from 'react';
|
31 | import { styled } from '@storybook/theming';
|
32 | import memoize from 'memoizerific';
|
33 | import uniq from 'lodash/uniq';
|
34 | import { WithTooltipPure } from '../../tooltip/lazy-WithTooltip';
|
35 | import { Icons } from '../../icon/icon';
|
36 | import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
|
37 | import { codeCommon } from '../../typography/shared';
|
38 | var ITEMS_BEFORE_EXPANSION = 8;
|
39 | var Summary = styled.div(function (_ref) {
|
40 | var isExpanded = _ref.isExpanded;
|
41 | return {
|
42 | display: 'flex',
|
43 | flexDirection: isExpanded ? 'column' : 'row',
|
44 | flexWrap: 'wrap',
|
45 | alignItems: 'flex-start',
|
46 | marginBottom: '-4px',
|
47 | minWidth: 100
|
48 | };
|
49 | });
|
50 | var Text = styled.span(codeCommon, function (_ref2) {
|
51 | var theme = _ref2.theme,
|
52 | _ref2$simple = _ref2.simple,
|
53 | simple = _ref2$simple === void 0 ? false : _ref2$simple;
|
54 | return Object.assign({
|
55 | flex: '0 0 auto',
|
56 | fontFamily: theme.typography.fonts.mono,
|
57 | fontSize: theme.typography.size.s1,
|
58 | wordBreak: 'break-word',
|
59 | whiteSpace: 'normal',
|
60 | maxWidth: '100%',
|
61 | margin: 0,
|
62 | marginRight: '4px',
|
63 | marginBottom: '4px',
|
64 | paddingTop: '2px',
|
65 | paddingBottom: '2px',
|
66 | lineHeight: '13px'
|
67 | }, simple && {
|
68 | background: 'transparent',
|
69 | border: '0 none',
|
70 | paddingLeft: 0
|
71 | });
|
72 | });
|
73 | var ExpandButton = styled.button(function (_ref3) {
|
74 | var theme = _ref3.theme;
|
75 | return {
|
76 | fontFamily: theme.typography.fonts.mono,
|
77 | color: theme.color.secondary,
|
78 | marginBottom: '4px',
|
79 | background: 'none',
|
80 | border: 'none'
|
81 | };
|
82 | });
|
83 | var Expandable = styled.div(codeCommon, function (_ref4) {
|
84 | var theme = _ref4.theme;
|
85 | return {
|
86 | fontFamily: theme.typography.fonts.mono,
|
87 | color: theme.color.secondary,
|
88 | fontSize: theme.typography.size.s1,
|
89 |
|
90 | margin: 0,
|
91 | whiteSpace: 'nowrap',
|
92 | display: 'flex',
|
93 | alignItems: 'center'
|
94 | };
|
95 | });
|
96 | var Detail = styled.div(function (_ref5) {
|
97 | var theme = _ref5.theme,
|
98 | width = _ref5.width;
|
99 | return {
|
100 | width: width,
|
101 | minWidth: 200,
|
102 | maxWidth: 800,
|
103 | padding: 15,
|
104 |
|
105 | fontFamily: theme.typography.fonts.mono,
|
106 | fontSize: theme.typography.size.s1,
|
107 |
|
108 | boxSizing: 'content-box',
|
109 | '& code': {
|
110 | padding: '0 !important'
|
111 | }
|
112 | };
|
113 | });
|
114 | var ArrowIcon = styled(Icons)({
|
115 | height: 10,
|
116 | width: 10,
|
117 | minWidth: 10,
|
118 | marginLeft: 4
|
119 | });
|
120 |
|
121 | var EmptyArg = function EmptyArg() {
|
122 | return React.createElement("span", null, "-");
|
123 | };
|
124 |
|
125 | EmptyArg.displayName = "EmptyArg";
|
126 |
|
127 | var ArgText = function ArgText(_ref6) {
|
128 | var text = _ref6.text,
|
129 | simple = _ref6.simple;
|
130 | return React.createElement(Text, {
|
131 | simple: simple
|
132 | }, text);
|
133 | };
|
134 |
|
135 | ArgText.displayName = "ArgText";
|
136 | var calculateDetailWidth = memoize(1000)(function (detail) {
|
137 | var lines = detail.split(/\r?\n/);
|
138 | return "".concat(Math.max.apply(Math, _toConsumableArray(lines.map(function (x) {
|
139 | return x.length;
|
140 | }))), "ch");
|
141 | });
|
142 |
|
143 | var getSummaryItems = function getSummaryItems(summary) {
|
144 | if (!summary) return [summary];
|
145 | var splittedItems = summary.split('|');
|
146 | var summaryItems = splittedItems.map(function (value) {
|
147 | return value.trim();
|
148 | });
|
149 | return uniq(summaryItems);
|
150 | };
|
151 |
|
152 | var renderSummaryItems = function renderSummaryItems(summaryItems) {
|
153 | var isExpanded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
154 | var items = summaryItems;
|
155 |
|
156 | if (!isExpanded) {
|
157 | items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
|
158 | }
|
159 |
|
160 | return items.map(function (item) {
|
161 | return React.createElement(ArgText, {
|
162 | key: item,
|
163 | text: item === '' ? '""' : item
|
164 | });
|
165 | });
|
166 | };
|
167 |
|
168 | var ArgSummary = function ArgSummary(_ref7) {
|
169 | var value = _ref7.value,
|
170 | initialExpandedArgs = _ref7.initialExpandedArgs;
|
171 | var summary = value.summary,
|
172 | detail = value.detail;
|
173 |
|
174 | var _useState = useState(false),
|
175 | _useState2 = _slicedToArray(_useState, 2),
|
176 | isOpen = _useState2[0],
|
177 | setIsOpen = _useState2[1];
|
178 |
|
179 | var _useState3 = useState(initialExpandedArgs || false),
|
180 | _useState4 = _slicedToArray(_useState3, 2),
|
181 | isExpanded = _useState4[0],
|
182 | setIsExpanded = _useState4[1];
|
183 |
|
184 | if (summary === undefined || summary === null) return null;
|
185 |
|
186 |
|
187 | var summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
|
188 |
|
189 | if (detail == null) {
|
190 | var cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
|
191 |
|
192 | if (cannotBeSafelySplitted) {
|
193 | return React.createElement(ArgText, {
|
194 | text: summaryAsString
|
195 | });
|
196 | }
|
197 |
|
198 | var summaryItems = getSummaryItems(summaryAsString);
|
199 | var itemsCount = summaryItems.length;
|
200 | var hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
|
201 | return hasManyItems ? React.createElement(Summary, {
|
202 | isExpanded: isExpanded
|
203 | }, renderSummaryItems(summaryItems, isExpanded), React.createElement(ExpandButton, {
|
204 | onClick: function onClick() {
|
205 | return setIsExpanded(!isExpanded);
|
206 | }
|
207 | }, isExpanded ? 'Show less...' : "Show ".concat(itemsCount - ITEMS_BEFORE_EXPANSION, " more..."))) : React.createElement(Summary, null, renderSummaryItems(summaryItems));
|
208 | }
|
209 |
|
210 | return React.createElement(WithTooltipPure, {
|
211 | closeOnClick: true,
|
212 | trigger: "click",
|
213 | placement: "bottom",
|
214 | tooltipShown: isOpen,
|
215 | onVisibilityChange: function onVisibilityChange(isVisible) {
|
216 | setIsOpen(isVisible);
|
217 | },
|
218 | tooltip: React.createElement(Detail, {
|
219 | width: calculateDetailWidth(detail)
|
220 | }, React.createElement(SyntaxHighlighter, {
|
221 | language: "jsx",
|
222 | format: false
|
223 | }, detail))
|
224 | }, React.createElement(Expandable, {
|
225 | className: "sbdocs-expandable"
|
226 | }, React.createElement("span", null, summaryAsString), React.createElement(ArrowIcon, {
|
227 | icon: isOpen ? 'arrowup' : 'arrowdown'
|
228 | })));
|
229 | };
|
230 |
|
231 | ArgSummary.displayName = "ArgSummary";
|
232 | export var ArgValue = function ArgValue(_ref8) {
|
233 | var value = _ref8.value,
|
234 | initialExpandedArgs = _ref8.initialExpandedArgs;
|
235 | return value == null ? React.createElement(EmptyArg, null) : React.createElement(ArgSummary, {
|
236 | value: value,
|
237 | initialExpandedArgs: initialExpandedArgs
|
238 | });
|
239 | }; |
\ | No newline at end of file |