1 | "use strict";
|
2 |
|
3 | require("core-js/modules/es.symbol");
|
4 |
|
5 | require("core-js/modules/es.symbol.description");
|
6 |
|
7 | require("core-js/modules/es.symbol.iterator");
|
8 |
|
9 | require("core-js/modules/es.array.concat");
|
10 |
|
11 | require("core-js/modules/es.array.find");
|
12 |
|
13 | require("core-js/modules/es.array.from");
|
14 |
|
15 | require("core-js/modules/es.array.is-array");
|
16 |
|
17 | require("core-js/modules/es.array.iterator");
|
18 |
|
19 | require("core-js/modules/es.array.join");
|
20 |
|
21 | require("core-js/modules/es.array.map");
|
22 |
|
23 | require("core-js/modules/es.array.slice");
|
24 |
|
25 | require("core-js/modules/es.date.to-string");
|
26 |
|
27 | require("core-js/modules/es.function.name");
|
28 |
|
29 | require("core-js/modules/es.object.create");
|
30 |
|
31 | require("core-js/modules/es.object.define-property");
|
32 |
|
33 | require("core-js/modules/es.object.get-prototype-of");
|
34 |
|
35 | require("core-js/modules/es.object.set-prototype-of");
|
36 |
|
37 | require("core-js/modules/es.object.to-string");
|
38 |
|
39 | require("core-js/modules/es.reflect.construct");
|
40 |
|
41 | require("core-js/modules/es.regexp.to-string");
|
42 |
|
43 | require("core-js/modules/es.string.iterator");
|
44 |
|
45 | require("core-js/modules/web.dom-collections.iterator");
|
46 |
|
47 | Object.defineProperty(exports, "__esModule", {
|
48 | value: true
|
49 | });
|
50 | exports.BackgroundSelector = void 0;
|
51 |
|
52 | var _react = _interopRequireWildcard(require("react"));
|
53 |
|
54 | var _memoizerific = _interopRequireDefault(require("memoizerific"));
|
55 |
|
56 | var _api = require("@storybook/api");
|
57 |
|
58 | var _theming = require("@storybook/theming");
|
59 |
|
60 | var _clientLogger = require("@storybook/client-logger");
|
61 |
|
62 | var _components = require("@storybook/components");
|
63 |
|
64 | var _constants = require("../constants");
|
65 |
|
66 | var _ColorIcon = require("../components/ColorIcon");
|
67 |
|
68 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
69 |
|
70 | function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
71 |
|
72 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
|
73 |
|
74 | 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); }
|
75 |
|
76 | 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; }
|
77 |
|
78 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
79 |
|
80 | 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); } }
|
81 |
|
82 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
83 |
|
84 | 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); }
|
85 |
|
86 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
87 |
|
88 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { 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); }; }
|
89 |
|
90 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
91 |
|
92 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
93 |
|
94 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
95 |
|
96 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
97 |
|
98 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
99 |
|
100 | 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."); }
|
101 |
|
102 | 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); }
|
103 |
|
104 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
105 |
|
106 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
107 |
|
108 | 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; }
|
109 |
|
110 | var iframeId = 'storybook-preview-iframe';
|
111 | var createBackgroundSelectorItem = (0, _memoizerific["default"])(1000)(function (id, name, value, hasSwatch, change) {
|
112 | return {
|
113 | id: id || name,
|
114 | title: name,
|
115 | onClick: function onClick() {
|
116 | change({
|
117 | selected: value,
|
118 | name: name
|
119 | });
|
120 | },
|
121 | value: value,
|
122 | right: hasSwatch ? _react["default"].createElement(_ColorIcon.ColorIcon, {
|
123 | background: value
|
124 | }) : undefined
|
125 | };
|
126 | });
|
127 | var getDisplayedItems = (0, _memoizerific["default"])(10)(function (backgrounds, selectedBackgroundColor, change) {
|
128 | var backgroundSelectorItems = backgrounds.map(function (_ref) {
|
129 | var name = _ref.name,
|
130 | value = _ref.value;
|
131 | return createBackgroundSelectorItem(null, name, value, true, change);
|
132 | });
|
133 |
|
134 | if (selectedBackgroundColor !== 'transparent') {
|
135 | return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)].concat(_toConsumableArray(backgroundSelectorItems));
|
136 | }
|
137 |
|
138 | return backgroundSelectorItems;
|
139 | });
|
140 |
|
141 | var getSelectedBackgroundColor = function getSelectedBackgroundColor() {
|
142 | var backgrounds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
143 | var currentSelectedValue = arguments.length > 1 ? arguments[1] : undefined;
|
144 | var defaultName = arguments.length > 2 ? arguments[2] : undefined;
|
145 |
|
146 | if (currentSelectedValue === 'transparent') {
|
147 | return 'transparent';
|
148 | }
|
149 |
|
150 | if (backgrounds.find(function (background) {
|
151 | return background.value === currentSelectedValue;
|
152 | })) {
|
153 | return currentSelectedValue;
|
154 | }
|
155 |
|
156 | var defaultBackground = backgrounds.find(function (background) {
|
157 | return background.name === defaultName;
|
158 | });
|
159 |
|
160 | if (defaultBackground) {
|
161 | return defaultBackground.value;
|
162 | }
|
163 |
|
164 | if (defaultName) {
|
165 | var availableColors = backgrounds.map(function (background) {
|
166 | return background.name;
|
167 | }).join(', ');
|
168 |
|
169 | _clientLogger.logger.warn("Backgrounds Addon: could not find the default color \"".concat(defaultName, "\".\n These are the available colors for your story based on your configuration: ").concat(availableColors));
|
170 | }
|
171 |
|
172 | return 'transparent';
|
173 | };
|
174 |
|
175 | var getBackgroundsConfig = function getBackgroundsConfig(_ref2) {
|
176 | var _backgroundsParameter;
|
177 |
|
178 | var api = _ref2.api,
|
179 | state = _ref2.state;
|
180 | var backgroundsParameter = api.getCurrentParameter(_constants.PARAM_KEY);
|
181 | var selectedBackgroundValue = state.addons[_constants.PARAM_KEY] || null;
|
182 |
|
183 | if (Array.isArray(backgroundsParameter)) {
|
184 | _clientLogger.logger.warn('Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md');
|
185 | }
|
186 |
|
187 | var isBackgroundsEmpty = !(backgroundsParameter === null || backgroundsParameter === void 0 ? void 0 : (_backgroundsParameter = backgroundsParameter.values) === null || _backgroundsParameter === void 0 ? void 0 : _backgroundsParameter.length);
|
188 |
|
189 | if ((backgroundsParameter === null || backgroundsParameter === void 0 ? void 0 : backgroundsParameter.disable) || isBackgroundsEmpty) {
|
190 |
|
191 | return {
|
192 | disable: true,
|
193 | backgrounds: null,
|
194 | selectedBackground: null,
|
195 | defaultBackgroundName: null
|
196 | };
|
197 | }
|
198 |
|
199 | return {
|
200 | disable: false,
|
201 | backgrounds: backgroundsParameter === null || backgroundsParameter === void 0 ? void 0 : backgroundsParameter.values,
|
202 | selectedBackground: selectedBackgroundValue,
|
203 | defaultBackgroundName: backgroundsParameter === null || backgroundsParameter === void 0 ? void 0 : backgroundsParameter["default"]
|
204 | };
|
205 | };
|
206 |
|
207 | var BackgroundSelector = function (_Component) {
|
208 | _inherits(BackgroundSelector, _Component);
|
209 |
|
210 | var _super = _createSuper(BackgroundSelector);
|
211 |
|
212 | function BackgroundSelector() {
|
213 | var _this;
|
214 |
|
215 | _classCallCheck(this, BackgroundSelector);
|
216 |
|
217 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
218 | args[_key] = arguments[_key];
|
219 | }
|
220 |
|
221 | _this = _super.call.apply(_super, [this].concat(args));
|
222 |
|
223 | _this.change = function (_ref3) {
|
224 | var selected = _ref3.selected,
|
225 | name = _ref3.name;
|
226 | var api = _this.props.api;
|
227 |
|
228 | if (typeof selected === 'string') {
|
229 | api.setAddonState(_constants.PARAM_KEY, selected);
|
230 | }
|
231 |
|
232 | api.emit(_constants.EVENTS.UPDATE, {
|
233 | selected: selected,
|
234 | name: name
|
235 | });
|
236 | };
|
237 |
|
238 | return _this;
|
239 | }
|
240 |
|
241 | _createClass(BackgroundSelector, [{
|
242 | key: "render",
|
243 | value: function render() {
|
244 | var _this2 = this;
|
245 |
|
246 | return _react["default"].createElement(_api.Consumer, {
|
247 | filter: getBackgroundsConfig
|
248 | }, function (_ref4) {
|
249 | var disable = _ref4.disable,
|
250 | backgrounds = _ref4.backgrounds,
|
251 | selectedBackground = _ref4.selectedBackground,
|
252 | defaultBackgroundName = _ref4.defaultBackgroundName;
|
253 |
|
254 | if (disable) {
|
255 | return null;
|
256 | }
|
257 |
|
258 | var selectedBackgroundColor = getSelectedBackgroundColor(backgrounds, selectedBackground, defaultBackgroundName);
|
259 | return _react["default"].createElement(_react.Fragment, null, selectedBackgroundColor ? _react["default"].createElement(_theming.Global, {
|
260 | styles: function styles(theme) {
|
261 | return _defineProperty({}, "#".concat(iframeId), {
|
262 | background: selectedBackgroundColor === 'transparent' ? theme.background.content : selectedBackgroundColor
|
263 | });
|
264 | }
|
265 | }) : null, _react["default"].createElement(_components.WithTooltip, {
|
266 | placement: "top",
|
267 | trigger: "click",
|
268 | closeOnClick: true,
|
269 | tooltip: function tooltip(_ref6) {
|
270 | var onHide = _ref6.onHide;
|
271 | return _react["default"].createElement(_components.TooltipLinkList, {
|
272 | links: getDisplayedItems(backgrounds, selectedBackgroundColor, function (i) {
|
273 | _this2.change(i);
|
274 |
|
275 | onHide();
|
276 | })
|
277 | });
|
278 | }
|
279 | }, _react["default"].createElement(_components.IconButton, {
|
280 | key: "background",
|
281 | title: "Change the background of the preview",
|
282 | active: selectedBackgroundColor !== 'transparent'
|
283 | }, _react["default"].createElement(_components.Icons, {
|
284 | icon: "photo"
|
285 | }))));
|
286 | });
|
287 | }
|
288 | }]);
|
289 |
|
290 | return BackgroundSelector;
|
291 | }(_react.Component);
|
292 |
|
293 | exports.BackgroundSelector = BackgroundSelector; |
\ | No newline at end of file |