1 | "use strict";
|
2 |
|
3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports["default"] = exports.DEFAULT_GROUP_ID = void 0;
|
9 |
|
10 | var _react = _interopRequireWildcard(require("react"));
|
11 |
|
12 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
13 |
|
14 | var _qs = _interopRequireDefault(require("qs"));
|
15 |
|
16 | var _global = require("global");
|
17 |
|
18 | var _theming = require("@storybook/theming");
|
19 |
|
20 | var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
|
21 |
|
22 | var _coreEvents = require("@storybook/core-events");
|
23 |
|
24 | var _components = require("@storybook/components");
|
25 |
|
26 | var _shared = require("../shared");
|
27 |
|
28 | var _types = require("./types");
|
29 |
|
30 | var _PropForm = _interopRequireDefault(require("./PropForm"));
|
31 |
|
32 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
33 |
|
34 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
35 |
|
36 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
37 |
|
38 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
39 |
|
40 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
41 |
|
42 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
43 |
|
44 | 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."); }
|
45 |
|
46 | 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); }
|
47 |
|
48 | 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; }
|
49 |
|
50 | function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
51 |
|
52 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
53 |
|
54 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
55 |
|
56 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
57 |
|
58 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
59 |
|
60 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
61 |
|
62 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
63 |
|
64 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
65 |
|
66 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
67 |
|
68 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
69 |
|
70 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
71 |
|
72 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
73 |
|
74 | 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; }
|
75 |
|
76 | var getTimestamp = function getTimestamp() {
|
77 | return +new Date();
|
78 | };
|
79 |
|
80 | var DEFAULT_GROUP_ID = 'Other';
|
81 | exports.DEFAULT_GROUP_ID = DEFAULT_GROUP_ID;
|
82 | var PanelWrapper = (0, _theming.styled)(function (_ref) {
|
83 | var children = _ref.children,
|
84 | className = _ref.className;
|
85 | return _react["default"].createElement(_components.ScrollArea, {
|
86 | horizontal: true,
|
87 | vertical: true,
|
88 | className: className
|
89 | }, children);
|
90 | })({
|
91 | height: '100%',
|
92 | width: '100%'
|
93 | });
|
94 |
|
95 | var KnobPanel = function (_PureComponent) {
|
96 | _inherits(KnobPanel, _PureComponent);
|
97 |
|
98 | var _super = _createSuper(KnobPanel);
|
99 |
|
100 | function KnobPanel() {
|
101 | var _this;
|
102 |
|
103 | _classCallCheck(this, KnobPanel);
|
104 |
|
105 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
106 | args[_key] = arguments[_key];
|
107 | }
|
108 |
|
109 | _this = _super.call.apply(_super, [this].concat(args));
|
110 |
|
111 | _defineProperty(_assertThisInitialized(_this), "state", {
|
112 | knobs: {}
|
113 | });
|
114 |
|
115 | _defineProperty(_assertThisInitialized(_this), "options", {});
|
116 |
|
117 | _defineProperty(_assertThisInitialized(_this), "lastEdit", getTimestamp());
|
118 |
|
119 | _defineProperty(_assertThisInitialized(_this), "loadedFromUrl", false);
|
120 |
|
121 | _defineProperty(_assertThisInitialized(_this), "mounted", false);
|
122 |
|
123 | _defineProperty(_assertThisInitialized(_this), "setOptions", function () {
|
124 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
125 | timestamps: false
|
126 | };
|
127 | _this.options = options;
|
128 | });
|
129 |
|
130 | _defineProperty(_assertThisInitialized(_this), "setKnobs", function (_ref2) {
|
131 | var knobs = _ref2.knobs,
|
132 | timestamp = _ref2.timestamp;
|
133 | var queryParams = {};
|
134 | var api = _this.props.api;
|
135 |
|
136 | if (!_this.options.timestamps || !timestamp || _this.lastEdit <= timestamp) {
|
137 | Object.keys(knobs).forEach(function (name) {
|
138 | var knob = knobs[name];
|
139 |
|
140 | if (!_this.loadedFromUrl) {
|
141 | var urlValue = api.getQueryParam("knob-".concat(name));
|
142 |
|
143 | if (urlValue !== undefined) {
|
144 | var value = (0, _types.getKnobControl)(knob.type).deserialize(urlValue);
|
145 | knob.value = value;
|
146 | queryParams["knob-".concat(name)] = (0, _types.getKnobControl)(knob.type).serialize(value);
|
147 | api.emit(_shared.CHANGE, knob);
|
148 | }
|
149 | }
|
150 | });
|
151 | api.setQueryParams(queryParams);
|
152 |
|
153 | _this.setState({
|
154 | knobs: knobs
|
155 | });
|
156 |
|
157 | _this.loadedFromUrl = true;
|
158 | }
|
159 | });
|
160 |
|
161 | _defineProperty(_assertThisInitialized(_this), "reset", function () {
|
162 | var api = _this.props.api;
|
163 | api.emit(_shared.RESET);
|
164 | });
|
165 |
|
166 | _defineProperty(_assertThisInitialized(_this), "copy", function () {
|
167 | var location = _global.document.location;
|
168 |
|
169 | var query = _qs["default"].parse(location.search, {
|
170 | ignoreQueryPrefix: true
|
171 | });
|
172 |
|
173 | var knobs = _this.state.knobs;
|
174 | Object.entries(knobs).forEach(function (_ref3) {
|
175 | var _ref4 = _slicedToArray(_ref3, 2),
|
176 | name = _ref4[0],
|
177 | knob = _ref4[1];
|
178 |
|
179 | query["knob-".concat(name)] = (0, _types.getKnobControl)(knob.type).serialize(knob.value);
|
180 | });
|
181 | (0, _copyToClipboard["default"])("".concat(location.origin + location.pathname, "?").concat(_qs["default"].stringify(query, {
|
182 | encode: false
|
183 | })));
|
184 | });
|
185 |
|
186 | _defineProperty(_assertThisInitialized(_this), "emitChange", function (changedKnob) {
|
187 | var api = _this.props.api;
|
188 | api.emit(_shared.CHANGE, changedKnob);
|
189 | });
|
190 |
|
191 | _defineProperty(_assertThisInitialized(_this), "handleChange", function (changedKnob) {
|
192 | _this.lastEdit = getTimestamp();
|
193 | var api = _this.props.api;
|
194 | var knobs = _this.state.knobs;
|
195 | var name = changedKnob.name;
|
196 |
|
197 | var newKnobs = _objectSpread({}, knobs);
|
198 |
|
199 | newKnobs[name] = _objectSpread(_objectSpread({}, newKnobs[name]), changedKnob);
|
200 |
|
201 | _this.setState({
|
202 | knobs: newKnobs
|
203 | }, function () {
|
204 | _this.emitChange(changedKnob);
|
205 |
|
206 | var queryParams = {};
|
207 | Object.keys(newKnobs).forEach(function (n) {
|
208 | var knob = newKnobs[n];
|
209 | queryParams["knob-".concat(n)] = (0, _types.getKnobControl)(knob.type).serialize(knob.value);
|
210 | });
|
211 | api.setQueryParams(queryParams);
|
212 | });
|
213 | });
|
214 |
|
215 | _defineProperty(_assertThisInitialized(_this), "handleClick", function (knob) {
|
216 | var api = _this.props.api;
|
217 | api.emit(_shared.CLICK, knob);
|
218 | });
|
219 |
|
220 | return _this;
|
221 | }
|
222 |
|
223 | _createClass(KnobPanel, [{
|
224 | key: "componentDidMount",
|
225 | value: function componentDidMount() {
|
226 | var _this2 = this;
|
227 |
|
228 | this.mounted = true;
|
229 | var api = this.props.api;
|
230 | api.on(_shared.SET, this.setKnobs);
|
231 | api.on(_shared.SET_OPTIONS, this.setOptions);
|
232 | this.stopListeningOnStory = api.on(_coreEvents.STORY_CHANGED, function () {
|
233 | if (_this2.mounted) {
|
234 | _this2.setKnobs({
|
235 | knobs: {}
|
236 | });
|
237 | }
|
238 |
|
239 | _this2.setKnobs({
|
240 | knobs: {}
|
241 | });
|
242 | });
|
243 | }
|
244 | }, {
|
245 | key: "componentWillUnmount",
|
246 | value: function componentWillUnmount() {
|
247 | this.mounted = false;
|
248 | var api = this.props.api;
|
249 | api.off(_shared.SET, this.setKnobs);
|
250 | this.stopListeningOnStory();
|
251 | }
|
252 | }, {
|
253 | key: "render",
|
254 | value: function render() {
|
255 | var _this3 = this;
|
256 |
|
257 | var knobs = this.state.knobs;
|
258 | var panelActive = this.props.active;
|
259 |
|
260 | if (!panelActive) {
|
261 | return null;
|
262 | }
|
263 |
|
264 | var groups = {};
|
265 | var groupIds = [];
|
266 | var knobKeysArray = Object.keys(knobs).filter(function (key) {
|
267 | return knobs[key].used;
|
268 | });
|
269 | knobKeysArray.forEach(function (key) {
|
270 | var knobKeyGroupId = knobs[key].groupId || DEFAULT_GROUP_ID;
|
271 | groupIds.push(knobKeyGroupId);
|
272 | groups[knobKeyGroupId] = {
|
273 | render: function render(_ref5) {
|
274 | var active = _ref5.active;
|
275 | return _react["default"].createElement(_components.TabWrapper, {
|
276 | key: knobKeyGroupId,
|
277 | active: active
|
278 | }, _react["default"].createElement(_PropForm["default"], {
|
279 | knobs: knobsArray.filter(function (knob) {
|
280 | return (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId;
|
281 | }),
|
282 | onFieldChange: _this3.handleChange,
|
283 | onFieldClick: _this3.handleClick
|
284 | }));
|
285 | },
|
286 | title: knobKeyGroupId
|
287 | };
|
288 | });
|
289 | var knobsArray = knobKeysArray.map(function (key) {
|
290 | return knobs[key];
|
291 | });
|
292 |
|
293 | if (knobsArray.length === 0) {
|
294 | return _react["default"].createElement(_components.Placeholder, null, _react["default"].createElement(_react.Fragment, null, "No knobs found"), _react["default"].createElement(_react.Fragment, null, "Learn how to\xA0", _react["default"].createElement(_components.Link, {
|
295 | href: "https://github.com/storybookjs/storybook/tree/master/addons/knobs",
|
296 | target: "_blank",
|
297 | withArrow: true,
|
298 | cancel: false
|
299 | }, "dynamically interact with components")));
|
300 | }
|
301 |
|
302 |
|
303 | var sortEntries = function sortEntries(g) {
|
304 | var unsortedKeys = Object.keys(g);
|
305 |
|
306 | if (unsortedKeys.includes(DEFAULT_GROUP_ID)) {
|
307 | var sortedKeys = unsortedKeys.filter(function (key) {
|
308 | return key !== DEFAULT_GROUP_ID;
|
309 | });
|
310 | sortedKeys.push(DEFAULT_GROUP_ID);
|
311 | return sortedKeys.map(function (key) {
|
312 | return [key, g[key]];
|
313 | });
|
314 | }
|
315 |
|
316 | return Object.entries(g);
|
317 | };
|
318 |
|
319 | var entries = sortEntries(groups);
|
320 | return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PanelWrapper, null, entries.length > 1 ? _react["default"].createElement(_components.TabsState, null, entries.map(function (_ref6) {
|
321 | var _ref7 = _slicedToArray(_ref6, 2),
|
322 | k = _ref7[0],
|
323 | v = _ref7[1];
|
324 |
|
325 | return _react["default"].createElement("div", {
|
326 | id: k,
|
327 | key: k,
|
328 | title: v.title
|
329 | }, v.render);
|
330 | })) : _react["default"].createElement(_PropForm["default"], {
|
331 | knobs: knobsArray,
|
332 | onFieldChange: this.handleChange,
|
333 | onFieldClick: this.handleClick
|
334 | })), _react["default"].createElement(_components.ActionBar, {
|
335 | actionItems: [{
|
336 | title: 'Copy',
|
337 | onClick: this.copy
|
338 | }, {
|
339 | title: 'Reset',
|
340 | onClick: this.reset
|
341 | }]
|
342 | }));
|
343 | }
|
344 | }]);
|
345 |
|
346 | return KnobPanel;
|
347 | }(_react.PureComponent);
|
348 |
|
349 | exports["default"] = KnobPanel;
|
350 |
|
351 | _defineProperty(KnobPanel, "propTypes", {
|
352 | active: _propTypes["default"].bool.isRequired,
|
353 | onReset: _propTypes["default"].object,
|
354 |
|
355 | api: _propTypes["default"].shape({
|
356 | on: _propTypes["default"].func,
|
357 | off: _propTypes["default"].func,
|
358 | emit: _propTypes["default"].func,
|
359 | getQueryParam: _propTypes["default"].func,
|
360 | setQueryParams: _propTypes["default"].func
|
361 | }).isRequired
|
362 | });
|
363 |
|
364 | _defineProperty(KnobPanel, "defaultProps", {
|
365 | active: true,
|
366 | api: {
|
367 | on: function on() {
|
368 | return function () {};
|
369 | },
|
370 | off: function off() {},
|
371 | emit: function emit() {},
|
372 | getQueryParam: function getQueryParam() {
|
373 | return undefined;
|
374 | },
|
375 | setQueryParams: function setQueryParams() {}
|
376 | }
|
377 | }); |
\ | No newline at end of file |