1 | "use strict";
|
2 |
|
3 | require("core-js/modules/es.symbol.js");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.StoryPanel = void 0;
|
9 |
|
10 | require("core-js/modules/es.array.find.js");
|
11 |
|
12 | require("core-js/modules/es.object.to-string.js");
|
13 |
|
14 | require("core-js/modules/es.object.keys.js");
|
15 |
|
16 | require("core-js/modules/es.regexp.exec.js");
|
17 |
|
18 | require("core-js/modules/es.string.split.js");
|
19 |
|
20 | require("core-js/modules/es.string.ends-with.js");
|
21 |
|
22 | require("core-js/modules/es.array.map.js");
|
23 |
|
24 | require("core-js/modules/es.array.slice.js");
|
25 |
|
26 | require("core-js/modules/es.array.concat.js");
|
27 |
|
28 | require("core-js/modules/web.dom-collections.for-each.js");
|
29 |
|
30 | require("core-js/modules/es.object.assign.js");
|
31 |
|
32 | var _react = _interopRequireDefault(require("react"));
|
33 |
|
34 | var _api = require("@storybook/api");
|
35 |
|
36 | var _theming = require("@storybook/theming");
|
37 |
|
38 | var _router = require("@storybook/router");
|
39 |
|
40 | var _components = require("@storybook/components");
|
41 |
|
42 | var _reactSyntaxHighlighter = require("react-syntax-highlighter");
|
43 |
|
44 | var _excluded = ["properties"];
|
45 |
|
46 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
47 |
|
48 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
49 |
|
50 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
51 |
|
52 | var StyledStoryLink = (0, _theming.styled)(_router.Link)(function (_ref) {
|
53 | var theme = _ref.theme;
|
54 | return {
|
55 | display: 'block',
|
56 | textDecoration: 'none',
|
57 | borderRadius: theme.appBorderRadius,
|
58 | color: 'inherit',
|
59 | '&:hover': {
|
60 | background: theme.background.hoverable
|
61 | }
|
62 | };
|
63 | });
|
64 |
|
65 | var SelectedStoryHighlight = _theming.styled.div(function (_ref2) {
|
66 | var theme = _ref2.theme;
|
67 | return {
|
68 | background: theme.background.hoverable,
|
69 | borderRadius: theme.appBorderRadius
|
70 | };
|
71 | });
|
72 |
|
73 | var StyledSyntaxHighlighter = (0, _theming.styled)(_components.SyntaxHighlighter)(function (_ref3) {
|
74 | var theme = _ref3.theme;
|
75 | return {
|
76 | fontSize: theme.typography.size.s2 - 1
|
77 | };
|
78 | });
|
79 |
|
80 | var areLocationsEqual = function areLocationsEqual(a, b) {
|
81 | return a.startLoc.line === b.startLoc.line && a.startLoc.col === b.startLoc.col && a.endLoc.line === b.endLoc.line && a.endLoc.col === b.endLoc.col;
|
82 | };
|
83 |
|
84 | var StoryPanel = function StoryPanel(_ref4) {
|
85 | var api = _ref4.api;
|
86 | var story = api.getCurrentStoryData();
|
87 |
|
88 | var selectedStoryRef = _react.default.useRef(null);
|
89 |
|
90 | var _useParameter = (0, _api.useParameter)('storySource', {
|
91 | source: 'loading source...'
|
92 | }),
|
93 | source = _useParameter.source,
|
94 | locationsMap = _useParameter.locationsMap;
|
95 |
|
96 | var currentLocation = locationsMap ? locationsMap[Object.keys(locationsMap).find(function (key) {
|
97 | var sourceLoaderId = key.split('--');
|
98 | return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
|
99 | })] : undefined;
|
100 |
|
101 | _react.default.useEffect(function () {
|
102 | if (selectedStoryRef.current) {
|
103 | selectedStoryRef.current.scrollIntoView();
|
104 | }
|
105 | }, [selectedStoryRef.current]);
|
106 |
|
107 | var createPart = function createPart(_ref5) {
|
108 | var rows = _ref5.rows,
|
109 | stylesheet = _ref5.stylesheet,
|
110 | useInlineStyles = _ref5.useInlineStyles;
|
111 | return rows.map(function (node, i) {
|
112 | return (0, _reactSyntaxHighlighter.createElement)({
|
113 | node: node,
|
114 | stylesheet: stylesheet,
|
115 | useInlineStyles: useInlineStyles,
|
116 | key: "code-segment".concat(i)
|
117 | });
|
118 | });
|
119 | };
|
120 |
|
121 | var createStoryPart = function createStoryPart(_ref6) {
|
122 | var rows = _ref6.rows,
|
123 | stylesheet = _ref6.stylesheet,
|
124 | useInlineStyles = _ref6.useInlineStyles,
|
125 | location = _ref6.location,
|
126 | id = _ref6.id,
|
127 | refId = _ref6.refId;
|
128 | var first = location.startLoc.line - 1;
|
129 | var last = location.endLoc.line;
|
130 | var storyRows = rows.slice(first, last);
|
131 | var storySource = createPart({
|
132 | rows: storyRows,
|
133 | stylesheet: stylesheet,
|
134 | useInlineStyles: useInlineStyles
|
135 | });
|
136 | var storyKey = "".concat(first, "-").concat(last);
|
137 |
|
138 | if (currentLocation && areLocationsEqual(location, currentLocation)) {
|
139 | return _react.default.createElement(SelectedStoryHighlight, {
|
140 | key: storyKey,
|
141 | ref: selectedStoryRef
|
142 | }, storySource);
|
143 | }
|
144 |
|
145 | return _react.default.createElement(StyledStoryLink, {
|
146 | to: refId ? "/story/".concat(refId, "_").concat(id) : "/story/".concat(id),
|
147 | key: storyKey
|
148 | }, storySource);
|
149 | };
|
150 |
|
151 | var createParts = function createParts(_ref7) {
|
152 | var rows = _ref7.rows,
|
153 | stylesheet = _ref7.stylesheet,
|
154 | useInlineStyles = _ref7.useInlineStyles;
|
155 | var parts = [];
|
156 | var lastRow = 0;
|
157 | Object.keys(locationsMap).forEach(function (key) {
|
158 | var location = locationsMap[key];
|
159 | var first = location.startLoc.line - 1;
|
160 | var last = location.endLoc.line;
|
161 | var kind = story.kind,
|
162 | refId = story.refId;
|
163 |
|
164 | var sourceIdParts = key.split('--');
|
165 | var id = api.storyId(kind, sourceIdParts[sourceIdParts.length - 1]);
|
166 | var start = createPart({
|
167 | rows: rows.slice(lastRow, first),
|
168 | stylesheet: stylesheet,
|
169 | useInlineStyles: useInlineStyles
|
170 | });
|
171 | var storyPart = createStoryPart({
|
172 | rows: rows,
|
173 | stylesheet: stylesheet,
|
174 | useInlineStyles: useInlineStyles,
|
175 | location: location,
|
176 | id: id,
|
177 | refId: refId
|
178 | });
|
179 | parts.push(start);
|
180 | parts.push(storyPart);
|
181 | lastRow = last;
|
182 | });
|
183 | var lastPart = createPart({
|
184 | rows: rows.slice(lastRow),
|
185 | stylesheet: stylesheet,
|
186 | useInlineStyles: useInlineStyles
|
187 | });
|
188 | parts.push(lastPart);
|
189 | return parts;
|
190 | };
|
191 |
|
192 | var lineRenderer = function lineRenderer(_ref8) {
|
193 | var rows = _ref8.rows,
|
194 | stylesheet = _ref8.stylesheet,
|
195 | useInlineStyles = _ref8.useInlineStyles;
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | var myrows = rows.map(function (_ref9) {
|
201 | var properties = _ref9.properties,
|
202 | rest = _objectWithoutProperties(_ref9, _excluded);
|
203 |
|
204 | return Object.assign({}, rest, {
|
205 | properties: {
|
206 | className: []
|
207 | }
|
208 | });
|
209 | });
|
210 |
|
211 | if (!locationsMap || !Object.keys(locationsMap).length) {
|
212 | return createPart({
|
213 | rows: myrows,
|
214 | stylesheet: stylesheet,
|
215 | useInlineStyles: useInlineStyles
|
216 | });
|
217 | }
|
218 |
|
219 | var parts = createParts({
|
220 | rows: myrows,
|
221 | stylesheet: stylesheet,
|
222 | useInlineStyles: useInlineStyles
|
223 | });
|
224 | return _react.default.createElement("span", null, parts);
|
225 | };
|
226 |
|
227 | return story ? _react.default.createElement(StyledSyntaxHighlighter, {
|
228 | language: "jsx",
|
229 | showLineNumbers: true,
|
230 | renderer: lineRenderer,
|
231 | format: false,
|
232 | copyable: false,
|
233 | padded: true
|
234 | }, source) : null;
|
235 | };
|
236 |
|
237 | exports.StoryPanel = StoryPanel; |
\ | No newline at end of file |