KnobManager.js
6.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es6.array.for-each");
require("core-js/modules/es6.array.filter");
require("core-js/modules/es6.object.keys");
require("core-js/modules/es7.symbol.async-iterator");
require("core-js/modules/es6.symbol");
require("core-js/modules/es6.object.define-property");
require("core-js/modules/web.dom.iterable");
require("core-js/modules/es6.array.iterator");
require("core-js/modules/es7.object.entries");
require("core-js/modules/es6.array.reduce");
require("core-js/modules/es6.array.some");
require("core-js/modules/es6.array.map");
require("core-js/modules/es6.array.is-array");
var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
var _escapeHtml = _interopRequireDefault(require("escape-html"));
var _KnobStore = _interopRequireDefault(require("./KnobStore"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
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; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { 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; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _typeof(obj) { 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); }
// This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
var PANEL_UPDATE_INTERVAL = 400;
var escapeStrings = function escapeStrings(obj) {
if (typeof obj === 'string') {
return (0, _escapeHtml.default)(obj);
}
if (obj == null || _typeof(obj) !== 'object') {
return obj;
}
if (Array.isArray(obj)) {
var newArray = obj.map(escapeStrings);
var didChange = newArray.some(function (newValue, key) {
return newValue !== obj[key];
});
return didChange ? newArray : obj;
}
return Object.entries(obj).reduce(function (acc, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
oldValue = _ref2[1];
var newValue = escapeStrings(oldValue);
return newValue === oldValue ? acc : _objectSpread({}, acc, _defineProperty({}, key, newValue));
}, obj);
};
var KnobManager =
/*#__PURE__*/
function () {
function KnobManager() {
_classCallCheck(this, KnobManager);
this.knobStore = new _KnobStore.default();
this.options = {};
}
_createClass(KnobManager, [{
key: "setChannel",
value: function setChannel(channel) {
this.channel = channel;
}
}, {
key: "setOptions",
value: function setOptions(options) {
this.options = options;
}
}, {
key: "getKnobValue",
value: function getKnobValue(_ref3) {
var value = _ref3.value;
return this.options.escapeHTML ? escapeStrings(value) : value;
}
}, {
key: "knob",
value: function knob(name, options) {
this._mayCallChannel();
var knobStore = this.knobStore;
var existingKnob = knobStore.get(name); // We need to return the value set by the knob editor via this.
// But, if the user changes the code for the defaultValue we should set
// that value instead.
if (existingKnob && (0, _fastDeepEqual.default)(options.value, existingKnob.defaultValue)) {
return this.getKnobValue(existingKnob);
}
var defaultValue = options.value;
var knobInfo = _objectSpread({}, options, {
name: name,
defaultValue: defaultValue
});
knobStore.set(name, knobInfo);
return this.getKnobValue(knobStore.get(name));
}
}, {
key: "_mayCallChannel",
value: function _mayCallChannel() {
var _this = this;
// Re rendering of the story may cause changes to the knobStore. Some new knobs maybe added and
// Some knobs may go unused. So we need to update the panel accordingly. For example remove the
// unused knobs from the panel. This function sends the `setKnobs` message to the channel
// triggering a panel re-render.
if (this.calling) {
// If a call to channel has already registered ignore this call.
// Once the previous call is completed all the changes to knobStore including the one that
// triggered this, will be added to the panel.
// This avoids emitting to the channel within very short periods of time.
return;
}
this.calling = true;
var timestamp = +new Date();
setTimeout(function () {
_this.calling = false; // emit to the channel and trigger a panel re-render
_this.channel.emit('addon:knobs:setKnobs', {
knobs: _this.knobStore.getAll(),
timestamp: timestamp
});
}, PANEL_UPDATE_INTERVAL);
}
}]);
return KnobManager;
}();
exports.default = KnobManager;