1 | import "core-js/modules/es.array.concat.js";
|
2 | import "core-js/modules/es.array.join.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.object.assign.js";
|
6 |
|
7 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
8 |
|
9 | 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."); }
|
10 |
|
11 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
12 |
|
13 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
14 |
|
15 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
16 |
|
17 | 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."); }
|
18 |
|
19 | 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); }
|
20 |
|
21 | 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; }
|
22 |
|
23 | 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; }
|
24 |
|
25 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
26 |
|
27 | 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; }
|
28 |
|
29 | 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; }
|
30 |
|
31 | 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); }
|
32 |
|
33 | import React, { Children, useState } from 'react';
|
34 | import { darken } from 'polished';
|
35 | import { styled } from '@storybook/theming';
|
36 | import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
|
37 | import { Source } from './Source';
|
38 | import { ActionBar } from '../ActionBar/ActionBar';
|
39 | import { Toolbar } from './Toolbar';
|
40 | import { ZoomContext } from './ZoomContext';
|
41 | import { Zoom } from '../Zoom/Zoom';
|
42 | var ChildrenContainer = styled.div(function (_ref) {
|
43 | var isColumn = _ref.isColumn,
|
44 | columns = _ref.columns,
|
45 | layout = _ref.layout;
|
46 | return {
|
47 | display: isColumn || !columns ? 'block' : 'flex',
|
48 | position: 'relative',
|
49 | flexWrap: 'wrap',
|
50 | overflow: 'auto',
|
51 | flexDirection: isColumn ? 'column' : 'row',
|
52 | '& .innerZoomElementWrapper > *': isColumn ? {
|
53 | width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
|
54 | display: 'block'
|
55 | } : {
|
56 | maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
|
57 | display: 'inline-block'
|
58 | }
|
59 | };
|
60 | }, function (_ref2) {
|
61 | var _ref2$layout = _ref2.layout,
|
62 | layout = _ref2$layout === void 0 ? 'padded' : _ref2$layout;
|
63 | return layout === 'centered' || layout === 'padded' ? {
|
64 | padding: '30px 20px',
|
65 | margin: -10,
|
66 | '& .innerZoomElementWrapper > *': {
|
67 | width: 'auto',
|
68 | border: '10px solid transparent!important'
|
69 | }
|
70 | } : {};
|
71 | }, function (_ref3) {
|
72 | var _ref3$layout = _ref3.layout,
|
73 | layout = _ref3$layout === void 0 ? 'padded' : _ref3$layout;
|
74 | return layout === 'centered' ? {
|
75 | display: 'flex',
|
76 | justifyContent: 'center',
|
77 | justifyItems: 'center',
|
78 | alignContent: 'center',
|
79 | alignItems: 'center'
|
80 | } : {};
|
81 | }, function (_ref4) {
|
82 | var columns = _ref4.columns;
|
83 | return columns && columns > 1 ? {
|
84 | '.innerZoomElementWrapper > *': {
|
85 | minWidth: "calc(100% / ".concat(columns, " - 20px)")
|
86 | }
|
87 | } : {};
|
88 | });
|
89 | var StyledSource = styled(Source)(function (_ref5) {
|
90 | var theme = _ref5.theme;
|
91 | return {
|
92 | margin: 0,
|
93 | borderTopLeftRadius: 0,
|
94 | borderTopRightRadius: 0,
|
95 | borderBottomLeftRadius: theme.appBorderRadius,
|
96 | borderBottomRightRadius: theme.appBorderRadius,
|
97 | border: 'none',
|
98 | background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
|
99 | color: theme.color.lightest,
|
100 | button: {
|
101 | background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content)
|
102 | }
|
103 | };
|
104 | });
|
105 | var PreviewContainer = styled.div(function (_ref6) {
|
106 | var theme = _ref6.theme,
|
107 | withSource = _ref6.withSource,
|
108 | isExpanded = _ref6.isExpanded;
|
109 | return Object.assign({
|
110 | position: 'relative',
|
111 | overflow: 'hidden',
|
112 | margin: '25px 0 40px'
|
113 | }, getBlockBackgroundStyle(theme), {
|
114 | borderBottomLeftRadius: withSource && isExpanded && 0,
|
115 | borderBottomRightRadius: withSource && isExpanded && 0,
|
116 | borderBottomWidth: isExpanded && 0
|
117 | });
|
118 | }, function (_ref7) {
|
119 | var withToolbar = _ref7.withToolbar;
|
120 | return withToolbar && {
|
121 | paddingTop: 40
|
122 | };
|
123 | });
|
124 |
|
125 | var getSource = function getSource(withSource, expanded, setExpanded) {
|
126 | switch (true) {
|
127 | case !!(withSource && withSource.error):
|
128 | {
|
129 | return {
|
130 | source: null,
|
131 | actionItem: {
|
132 | title: 'No code available',
|
133 | disabled: true,
|
134 | onClick: function onClick() {
|
135 | return setExpanded(false);
|
136 | }
|
137 | }
|
138 | };
|
139 | }
|
140 |
|
141 | case expanded:
|
142 | {
|
143 | return {
|
144 | source: React.createElement(StyledSource, _extends({}, withSource, {
|
145 | dark: true
|
146 | })),
|
147 | actionItem: {
|
148 | title: 'Hide code',
|
149 | onClick: function onClick() {
|
150 | return setExpanded(false);
|
151 | }
|
152 | }
|
153 | };
|
154 | }
|
155 |
|
156 | default:
|
157 | {
|
158 | return {
|
159 | source: null,
|
160 | actionItem: {
|
161 | title: 'Show code',
|
162 | onClick: function onClick() {
|
163 | return setExpanded(true);
|
164 | }
|
165 | }
|
166 | };
|
167 | }
|
168 | }
|
169 | };
|
170 |
|
171 | function getStoryId(children) {
|
172 | if (Children.count(children) === 1) {
|
173 | var elt = children;
|
174 |
|
175 | if (elt.props) {
|
176 | return elt.props.id;
|
177 | }
|
178 | }
|
179 |
|
180 | return null;
|
181 | }
|
182 |
|
183 | var PositionedToolbar = styled(Toolbar)({
|
184 | position: 'absolute',
|
185 | top: 0,
|
186 | left: 0,
|
187 | right: 0,
|
188 | height: 40
|
189 | });
|
190 | var Relative = styled.div({
|
191 | overflow: 'hidden',
|
192 | position: 'relative'
|
193 | });
|
194 |
|
195 | var getLayout = function getLayout(children) {
|
196 | return children.reduce(function (result, c) {
|
197 | if (result) {
|
198 | return result;
|
199 | }
|
200 |
|
201 | if (typeof c === 'string' || typeof c === 'number') {
|
202 | return 'padded';
|
203 | }
|
204 |
|
205 | return c.props && c.props.parameters && c.props.parameters.layout || 'padded';
|
206 | }, undefined);
|
207 | };
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 | var Preview = function Preview(_ref8) {
|
216 | var isColumn = _ref8.isColumn,
|
217 | columns = _ref8.columns,
|
218 | children = _ref8.children,
|
219 | withSource = _ref8.withSource,
|
220 | _ref8$withToolbar = _ref8.withToolbar,
|
221 | withToolbar = _ref8$withToolbar === void 0 ? false : _ref8$withToolbar,
|
222 | _ref8$isExpanded = _ref8.isExpanded,
|
223 | isExpanded = _ref8$isExpanded === void 0 ? false : _ref8$isExpanded,
|
224 | additionalActions = _ref8.additionalActions,
|
225 | className = _ref8.className,
|
226 | props = _objectWithoutProperties(_ref8, ["isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"]);
|
227 |
|
228 | var _useState = useState(isExpanded),
|
229 | _useState2 = _slicedToArray(_useState, 2),
|
230 | expanded = _useState2[0],
|
231 | setExpanded = _useState2[1];
|
232 |
|
233 | var _getSource = getSource(withSource, expanded, setExpanded),
|
234 | source = _getSource.source,
|
235 | actionItem = _getSource.actionItem;
|
236 |
|
237 | var _useState3 = useState(1),
|
238 | _useState4 = _slicedToArray(_useState3, 2),
|
239 | scale = _useState4[0],
|
240 | setScale = _useState4[1];
|
241 |
|
242 | var previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
|
243 | var defaultActionItems = withSource ? [actionItem] : [];
|
244 | var actionItems = additionalActions ? [].concat(defaultActionItems, _toConsumableArray(additionalActions)) : defaultActionItems;
|
245 |
|
246 | var layout = getLayout(Children.count(children) === 1 ? [children] : children);
|
247 | return React.createElement(PreviewContainer, _extends({
|
248 | withSource: withSource,
|
249 | withToolbar: withToolbar
|
250 | }, props, {
|
251 | className: previewClasses.join(' ')
|
252 | }), withToolbar && React.createElement(PositionedToolbar, {
|
253 | border: true,
|
254 | zoom: function zoom(z) {
|
255 | return setScale(scale * z);
|
256 | },
|
257 | resetZoom: function resetZoom() {
|
258 | return setScale(1);
|
259 | },
|
260 | storyId: getStoryId(children),
|
261 | baseUrl: "./iframe.html"
|
262 | }), React.createElement(ZoomContext.Provider, {
|
263 | value: {
|
264 | scale: scale
|
265 | }
|
266 | }, React.createElement(Relative, {
|
267 | className: "docs-story"
|
268 | }, React.createElement(ChildrenContainer, {
|
269 | isColumn: isColumn || !Array.isArray(children),
|
270 | columns: columns,
|
271 | layout: layout
|
272 | }, React.createElement(Zoom.Element, {
|
273 | scale: scale
|
274 | }, Array.isArray(children) ?
|
275 | children.map(function (child, i) {
|
276 | return React.createElement("div", {
|
277 | key: i
|
278 | }, child);
|
279 | }) : React.createElement("div", null, children))), React.createElement(ActionBar, {
|
280 | actionItems: actionItems
|
281 | }))), withSource && source);
|
282 | };
|
283 |
|
284 | Preview.displayName = "Preview";
|
285 | export { Preview }; |
\ | No newline at end of file |