@micromag/editor 0.2.408 → 0.2.412

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +12 -10
  2. package/es/index.js +2473 -1251
  3. package/lib/index.js +2488 -1265
  4. package/package.json +10 -7
package/lib/index.js CHANGED
@@ -2,147 +2,58 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
6
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- var React = require('react');
8
- var PropTypes = require('prop-types');
9
- var reactRouter = require('react-router');
10
- var reactRouterDom = require('react-router-dom');
11
- var reactIntl = require('react-intl');
7
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
+ var core = require('@micromag/core');
9
+ var components = require('@micromag/core/components');
12
10
  var contexts = require('@micromag/core/contexts');
11
+ var hooks = require('@micromag/core/hooks');
13
12
  var utils = require('@micromag/core/utils');
14
- var screens = require('@micromag/screens');
15
- var fields = require('@micromag/fields');
16
- var core = require('@micromag/core');
17
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
18
13
  var classNames = require('classnames');
19
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
20
- var hooks = require('@micromag/core/hooks');
21
- var components = require('@micromag/core/components');
14
+ var PropTypes = require('prop-types');
15
+ var React = require('react');
16
+ var reactIntl = require('react-intl');
17
+ var reactRouter = require('react-router');
18
+ var reactTransitionGroup = require('react-transition-group');
19
+ var uuid = require('uuid');
20
+ var isString = require('lodash/isString');
21
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
22
22
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
23
+ require('lodash/isArray');
24
+ require('lodash/get');
25
+ require('lodash/set');
23
26
  var reactFontawesome = require('@fortawesome/react-fontawesome');
24
27
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
25
- var isString = require('lodash/isString');
26
- var uuid = require('uuid');
28
+ var fields = require('@micromag/fields');
27
29
  var size = require('@folklore/size');
28
- var reactSortablejs = require('react-sortablejs');
30
+ var viewer = require('@micromag/viewer');
29
31
  var isFunction = require('lodash/isFunction');
32
+ var reactSortablejs = require('react-sortablejs');
33
+ var core$1 = require('@dnd-kit/core');
34
+ var sortable = require('@dnd-kit/sortable');
35
+ var reactDom = require('react-dom');
36
+ var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
37
+ var utilities = require('@dnd-kit/utilities');
30
38
  var orderBy = require('lodash/orderBy');
31
- var viewer = require('@micromag/viewer');
32
- var reactTransitionGroup = require('react-transition-group');
33
- require('lodash/isArray');
34
- require('lodash/get');
35
- require('lodash/set');
39
+ var screens = require('@micromag/screens');
40
+ var reactRouterDom = require('react-router-dom');
36
41
 
37
42
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
38
43
 
39
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
40
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
41
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
42
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
43
44
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
44
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
45
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
45
46
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
46
- var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
47
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
48
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
49
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
47
50
  var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
51
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
52
+ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
48
53
  var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
54
+ var _createForOfIteratorHelper__default = /*#__PURE__*/_interopDefaultLegacy(_createForOfIteratorHelper);
49
55
  var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
50
56
 
51
- var routes = PropTypes__default["default"].shape({
52
- home: PropTypes__default["default"].string.isRequired,
53
- screen: PropTypes__default["default"].string.isRequired,
54
- 'screen.field': PropTypes__default["default"].string.isRequired,
55
- 'screen.field.form': PropTypes__default["default"].string.isRequired
56
- });
57
-
58
- var styles$d = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
59
-
60
- var propTypes$j = {
61
- name: PropTypes__default["default"].string,
62
- field: core.PropTypes.formField.isRequired,
63
- value: core.PropTypes.component,
64
- className: PropTypes__default["default"].string,
65
- gotoFieldForm: PropTypes__default["default"].func.isRequired,
66
- closeFieldForm: PropTypes__default["default"].func.isRequired,
67
- onChange: PropTypes__default["default"].func
68
- };
69
- var defaultProps$j = {
70
- name: null,
71
- value: null,
72
- className: null,
73
- onChange: null
74
- };
75
-
76
- var SettingsForm = function SettingsForm(_ref) {
77
- var name = _ref.name,
78
- field = _ref.field,
79
- value = _ref.value,
80
- className = _ref.className,
81
- gotoFieldForm = _ref.gotoFieldForm,
82
- closeFieldForm = _ref.closeFieldForm,
83
- onChange = _ref.onChange;
84
- var _field$type = field.type,
85
- type = _field$type === void 0 ? null : _field$type;
86
- var fieldsManager = contexts.useFieldsManager();
87
-
88
- var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
89
- _ref2$component = _ref2.component,
90
- fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
91
- settings = _ref2.settings;
92
-
93
- var FieldComponent = contexts.useFieldComponent(fieldComponent);
94
- var FieldsComponent = contexts.useFieldComponent('fields');
95
- var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
96
- var onSettingsChange = React.useCallback(function (newSettingsValue) {
97
- var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), newSettingsValue);
98
-
99
- if (onChange !== null) {
100
- onChange(newValue);
101
- }
102
- }, [value, onChange]);
103
- return /*#__PURE__*/React__default["default"].createElement("div", {
104
- className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)])
105
- }, /*#__PURE__*/React__default["default"].createElement("div", {
106
- className: styles$d.inner
107
- }, /*#__PURE__*/React__default["default"].createElement(SettingsComponent, {
108
- name: name,
109
- field: field,
110
- fields: settings,
111
- value: value,
112
- onChange: onSettingsChange,
113
- gotoFieldForm: gotoFieldForm,
114
- closeFieldForm: closeFieldForm
115
- })));
116
- };
117
-
118
- SettingsForm.propTypes = propTypes$j;
119
- SettingsForm.defaultProps = defaultProps$j;
120
-
121
- // eslint-disable-next-line import/prefer-default-export
122
-
123
- var FormsComponents = /*#__PURE__*/Object.freeze({
124
- __proto__: null,
125
- Settings: SettingsForm
126
- });
127
-
128
- /* eslint-disable react/jsx-props-no-spreading */
129
- var propTypes$i = {
130
- children: PropTypes__default["default"].node
131
- };
132
- var defaultProps$i = {
133
- children: null
134
- };
135
-
136
- var FormsProvider = function FormsProvider(props) {
137
- return /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, Object.assign({
138
- namespace: contexts.FORMS_NAMESPACE,
139
- components: FormsComponents
140
- }, props));
141
- };
142
-
143
- FormsProvider.propTypes = propTypes$i;
144
- FormsProvider.defaultProps = defaultProps$i;
145
-
146
57
  var useRouteParams = function useRouteParams() {
147
58
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
148
59
  _ref$screenOnly = _ref.screenOnly,
@@ -179,25 +90,7 @@ var useRouteParams = function useRouteParams() {
179
90
  return routeParams;
180
91
  };
181
92
 
182
- var _excluded$8 = ["components"];
183
-
184
- var useThemeValue = function useThemeValue(value) {
185
- var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
186
- var valueWithTheme = React.useMemo(function () {
187
- if (!isTheme) {
188
- return value;
189
- }
190
-
191
- var _ref = value || {};
192
- _ref.components;
193
- var themeValue = _objectWithoutProperties__default["default"](_ref, _excluded$8);
194
-
195
- return value !== null ? _objectSpread__default["default"]({
196
- theme: themeValue
197
- }, value) : value;
198
- }, [value, isTheme]);
199
- return valueWithTheme;
200
- };
93
+ var styles$f = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
201
94
 
202
95
  var createScreen = function createScreen(definition) {
203
96
  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -231,614 +124,700 @@ var createScreen = function createScreen(definition) {
231
124
  });
232
125
  };
233
126
 
234
- var styles$c = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
127
+ var _excluded$b = ["components"];
235
128
 
236
- var propTypes$h = {
237
- active: PropTypes__default["default"].bool,
238
- id: PropTypes__default["default"].string,
239
- href: PropTypes__default["default"].string,
240
- label: core.PropTypes.label,
241
- icon: PropTypes__default["default"].node,
242
- title: PropTypes__default["default"].string,
243
- onClick: PropTypes__default["default"].func,
244
- children: PropTypes__default["default"].node,
245
- refButton: PropTypes__default["default"].shape({
246
- current: PropTypes__default["default"].any // eslint-disable-line
129
+ var deleteScreen = function deleteScreen(story, screenId) {
130
+ var _ref = story || {},
131
+ _ref$components = _ref.components,
132
+ components = _ref$components === void 0 ? [] : _ref$components,
133
+ currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$b);
247
134
 
248
- }),
249
- className: PropTypes__default["default"].string
250
- };
251
- var defaultProps$h = {
252
- active: false,
253
- id: null,
254
- href: null,
255
- label: null,
256
- icon: null,
257
- title: null,
258
- onClick: null,
259
- children: null,
260
- refButton: null,
261
- className: null
135
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
136
+ components: components.filter(function (_ref2) {
137
+ var id = _ref2.id;
138
+ return id !== screenId;
139
+ })
140
+ });
262
141
  };
263
142
 
264
- var ScreenButton = function ScreenButton(_ref) {
265
- var _ref2;
143
+ var _excluded$a = ["components"];
266
144
 
267
- var active = _ref.active,
268
- id = _ref.id,
269
- href = _ref.href,
270
- className = _ref.className,
271
- label = _ref.label,
272
- icon = _ref.icon,
273
- children = _ref.children,
274
- title = _ref.title,
275
- onClick = _ref.onClick,
276
- refButton = _ref.refButton;
277
- return /*#__PURE__*/React__default["default"].createElement("div", {
278
- className: classNames__default["default"]([styles$c.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$c.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
279
- }, /*#__PURE__*/React__default["default"].createElement("div", {
280
- className: styles$c.screen
281
- }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
282
- className: styles$c.inner
283
- }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
284
- className: styles$c.icon
285
- }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
286
- className: styles$c.label
287
- }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
288
- className: styles$c.button,
289
- withoutStyle: true,
290
- id: id,
291
- href: href,
292
- title: title,
293
- onClick: onClick,
294
- refButton: refButton
295
- }, /*#__PURE__*/React__default["default"].createElement("span", {
296
- className: classNames__default["default"]([styles$c.border, 'rounded'])
297
- })));
145
+ var duplicateScreen = function duplicateScreen(story, screenId) {
146
+ var _ref = story || {},
147
+ _ref$components = _ref.components,
148
+ components = _ref$components === void 0 ? [] : _ref$components,
149
+ currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
150
+
151
+ var screen = components.find(function (it) {
152
+ return it.id === screenId;
153
+ }) || null;
154
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
155
+ components: screen !== null ? [].concat(_toConsumableArray__default["default"](components), [_objectSpread__default["default"](_objectSpread__default["default"]({}, screen), {}, {
156
+ id: uuid.v1()
157
+ })]) : components
158
+ });
298
159
  };
299
160
 
300
- ScreenButton.propTypes = propTypes$h;
301
- ScreenButton.defaultProps = defaultProps$h;
302
- var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
303
- return /*#__PURE__*/React__default["default"].createElement(ScreenButton, Object.assign({}, props, {
304
- refButton: ref
305
- }));
306
- });
161
+ var _excluded$9 = ["components"];
307
162
 
308
- var styles$b = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
163
+ var updateScreen = function updateScreen(story, newScreenValue) {
164
+ var newScreenId = newScreenValue.id;
309
165
 
310
- var _excluded$7 = ["onClick", "title", "screen", "className"];
311
- var propTypes$g = {
312
- items: core.PropTypes.menuItems,
313
- withPreview: PropTypes__default["default"].bool,
314
- withPlaceholder: PropTypes__default["default"].bool,
315
- settings: PropTypes__default["default"].node,
316
- previewMinWidth: PropTypes__default["default"].number,
317
- sortable: PropTypes__default["default"].bool,
318
- isVertical: PropTypes__default["default"].bool,
319
- noWrap: PropTypes__default["default"].bool,
320
- className: PropTypes__default["default"].string,
321
- itemClassName: PropTypes__default["default"].string,
322
- buttonClassName: PropTypes__default["default"].string,
323
- settingsClassName: PropTypes__default["default"].string,
324
- onClickItem: PropTypes__default["default"].func,
325
- onOrderChange: PropTypes__default["default"].func
326
- };
327
- var defaultProps$g = {
328
- items: [],
329
- withPreview: false,
330
- withPlaceholder: false,
331
- settings: null,
332
- previewMinWidth: 320,
333
- sortable: false,
334
- isVertical: false,
335
- noWrap: false,
336
- className: null,
337
- itemClassName: null,
338
- buttonClassName: null,
339
- settingsClassName: null,
340
- onClickItem: null,
341
- onOrderChange: null
166
+ var _ref = story || {},
167
+ _ref$components = _ref.components,
168
+ components = _ref$components === void 0 ? [] : _ref$components,
169
+ currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$9);
170
+
171
+ var index = components.findIndex(function (it) {
172
+ return it.id === newScreenId;
173
+ });
174
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
175
+ components: [].concat(_toConsumableArray__default["default"](components.slice(0, index)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, components[index]), newScreenValue)], _toConsumableArray__default["default"](components.slice(index + 1)))
176
+ });
342
177
  };
343
178
 
344
- var ScreensMenu = function ScreensMenu(_ref) {
345
- var _ref8;
179
+ var getFieldByName = function getFieldByName(fields, name) {
180
+ return fields.reduce(function (foundField, it) {
181
+ if (foundField !== null) {
182
+ return foundField;
183
+ }
346
184
 
347
- var items = _ref.items,
348
- withPreview = _ref.withPreview,
349
- withPlaceholder = _ref.withPlaceholder,
350
- settings = _ref.settings,
351
- previewMinWidth = _ref.previewMinWidth,
352
- isVertical = _ref.isVertical,
353
- noWrap = _ref.noWrap,
354
- className = _ref.className,
355
- itemClassName = _ref.itemClassName,
356
- buttonClassName = _ref.buttonClassName,
357
- settingsClassName = _ref.settingsClassName,
358
- sortable = _ref.sortable,
359
- onClickItem = _ref.onClickItem,
360
- onOrderChange = _ref.onOrderChange;
361
- var intl = reactIntl.useIntl();
185
+ var _it$name = it.name,
186
+ fieldName = _it$name === void 0 ? null : _it$name,
187
+ _it$fields = it.fields,
188
+ subFields = _it$fields === void 0 ? [] : _it$fields;
362
189
 
363
- var _useResizeObserver = hooks.useResizeObserver({}, [items]),
364
- containerRef = _useResizeObserver.ref,
365
- contentRect = _useResizeObserver.entry.contentRect;
190
+ if (name !== null && fieldName === name) {
191
+ return it;
192
+ }
366
193
 
367
- var previewStyle = React.useMemo(function () {
368
- var _ref2 = contentRect || {},
369
- _ref2$width = _ref2.width,
370
- itemWidth = _ref2$width === void 0 ? 0 : _ref2$width,
371
- _ref2$height = _ref2.height,
372
- itemHeight = _ref2$height === void 0 ? 0 : _ref2$height;
194
+ return getFieldByName(subFields, name);
195
+ }, null);
196
+ };
373
197
 
374
- var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 0;
198
+ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
199
+ var lastPageRef = React.useRef({
200
+ url: url,
201
+ screenIndex: screenIndex
202
+ });
203
+ var direction = React.useMemo(function () {
204
+ var _lastPageRef$current = lastPageRef.current,
205
+ lastScreenIndex = _lastPageRef$current.screenIndex,
206
+ lastUrl = _lastPageRef$current.url;
207
+ lastPageRef.current.url = url;
208
+ lastPageRef.current.screenIndex = screenIndex;
375
209
 
376
- var _getSizeWithinBounds = size.getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
377
- previewScale = _getSizeWithinBounds.scale;
210
+ if (screenIndex !== lastScreenIndex) {
211
+ // return screenIndex > lastScreenIndex ? 'bottom' : 'top';
212
+ return null;
213
+ }
214
+
215
+ var urlSplit = url.split('/');
216
+ var lastUrlSplit = lastUrl.split('/');
217
+ var currentPartsCount = urlSplit.length;
218
+ var previousPartsCount = lastUrlSplit.length;
219
+ var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
220
+ var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
221
+ currentPartsCount -= isSettings ? 1 : 0;
222
+ previousPartsCount -= wasSettings ? 1 : 0;
223
+ return currentPartsCount >= previousPartsCount ? 'right' : 'left';
224
+ }, [url, screenIndex]);
225
+ var name = React.useMemo(function () {
226
+ var _classNames, _classNames2, _classNames3;
378
227
 
379
228
  return {
380
- width: previewMinWidth,
381
- height: previewMinWidth * ratio,
382
- transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
229
+ enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
230
+ enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
231
+ leave: styles.leave || 'none',
232
+ leaveActive: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty__default["default"](_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty__default["default"](_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty__default["default"](_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
383
233
  };
384
- }, [previewMinWidth, contentRect]);
385
- var itemsElements = items.map(function (_ref3, index) {
386
- var _ref4;
234
+ }, [direction, screenIndex]);
235
+ return {
236
+ direction: direction,
237
+ name: name,
238
+ timeout: direction === 'left' || direction === 'right' ? 300 : 10
239
+ };
240
+ };
387
241
 
388
- var _ref3$onClick = _ref3.onClick,
389
- _onClick = _ref3$onClick === void 0 ? null : _ref3$onClick,
390
- title = _ref3.title,
391
- screen = _ref3.screen,
392
- _ref3$className = _ref3.className,
393
- itemCustomClassName = _ref3$className === void 0 ? null : _ref3$className,
394
- item = _objectWithoutProperties__default["default"](_ref3, _excluded$7);
242
+ var _excluded$8 = ["className"];
243
+ var propTypes$n = {
244
+ className: PropTypes__default["default"].string
245
+ };
246
+ var defaultProps$n = {
247
+ className: null
248
+ };
395
249
 
396
- return /*#__PURE__*/React__default["default"].createElement("li", {
397
- key: item.id,
398
- className: classNames__default["default"]([styles$b.item, (_ref4 = {}, _defineProperty__default["default"](_ref4, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref4, itemCustomClassName, itemCustomClassName !== null), _ref4)]),
399
- "data-screen-id": item.id,
400
- ref: index === 0 ? containerRef : null
401
- }, /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, Object.assign({}, item, {
402
- className: classNames__default["default"]([styles$b.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
403
- title: utils.isMessage(title) ? intl.formatMessage(title) : null,
404
- onClick: function onClick() {
405
- if (_onClick !== null) {
406
- _onClick(screen, index);
407
- }
250
+ var SettingsButton = function SettingsButton(_ref) {
251
+ var className = _ref.className,
252
+ props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
408
253
 
409
- if (onClickItem !== null) {
410
- onClickItem(screen, index);
411
- }
412
- }
413
- }), withPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
414
- className: styles$b.preview,
415
- style: previewStyle
416
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
417
- screen: screen,
418
- width: previewStyle.width,
419
- height: previewStyle.height,
420
- className: styles$b.screen
421
- })) : null, withPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
422
- className: styles$b.placeholder,
423
- style: previewStyle
424
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPlaceholder, {
425
- screen: item,
426
- width: previewStyle.width,
427
- height: previewStyle.height,
428
- className: styles$b.screen
429
- })) : null), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
430
- className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$b.settings, 'p-2'])
431
- }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
432
- });
433
- var sortableItems = React.useMemo(function () {
434
- return items.map(function (_ref7) {
435
- var id = _ref7.id;
436
- return {
437
- id: id
438
- };
439
- });
440
- }, [items]);
441
- return /*#__PURE__*/React__default["default"].createElement("div", {
442
- className: classNames__default["default"]([styles$b.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$b.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$b.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$b.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
443
- }, sortable && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
444
- list: sortableItems,
445
- setList: onOrderChange,
446
- animation: 200,
447
- delayOnTouchStart: true,
448
- delay: 2,
449
- tag: "ul",
450
- className: styles$b.items
451
- }, itemsElements) : /*#__PURE__*/React__default["default"].createElement("ul", {
452
- className: styles$b.items
453
- }, itemsElements));
254
+ return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
255
+ className: className,
256
+ theme: "secondary",
257
+ size: "sm",
258
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
259
+ icon: freeSolidSvgIcons.faCogs
260
+ })
261
+ }, props));
454
262
  };
455
263
 
456
- ScreensMenu.propTypes = propTypes$g;
457
- ScreensMenu.defaultProps = defaultProps$g;
264
+ SettingsButton.propTypes = propTypes$n;
265
+ SettingsButton.defaultProps = defaultProps$n;
458
266
 
459
- var styles$a = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title"};
267
+ var styles$e = {"container":"micromag-editor-menus-breadcrumb-container"};
460
268
 
461
- var propTypes$f = {
462
- screens: core.PropTypes.screenDefinitions,
463
- selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
464
- className: PropTypes__default["default"].string,
465
- onClickItem: PropTypes__default["default"].func
269
+ var propTypes$m = {
270
+ story: core.PropTypes.story,
271
+ screenId: PropTypes__default["default"].string,
272
+ field: PropTypes__default["default"].string,
273
+ form: PropTypes__default["default"].string,
274
+ url: PropTypes__default["default"].string.isRequired,
275
+ className: PropTypes__default["default"].string
466
276
  };
467
- var defaultProps$f = {
468
- screens: null,
469
- selectedTypes: null,
470
- className: null,
471
- onClickItem: null
277
+ var defaultProps$m = {
278
+ story: null,
279
+ screenId: null,
280
+ field: null,
281
+ form: null,
282
+ className: null
472
283
  };
473
284
 
474
- var ScreenTypes = function ScreenTypes(_ref) {
475
- var screens = _ref.screens,
476
- selectedTypes = _ref.selectedTypes,
477
- className = _ref.className,
478
- onClickItem = _ref.onClickItem;
285
+ var Breadcrumb = function Breadcrumb(_ref) {
286
+ var story = _ref.story,
287
+ screenId = _ref.screenId,
288
+ field = _ref.field,
289
+ form = _ref.form,
290
+ url = _ref.url,
291
+ className = _ref.className;
479
292
  var intl = reactIntl.useIntl();
480
- var screensManager = contexts.useScreensManager();
481
- var finalDefinitions = screens || screensManager.getDefinitions();
482
- var groups = React.useMemo(function () {
483
- var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
484
- var id = definition.id,
485
- title = definition.title,
486
- _definition$group = definition.group,
487
- group = _definition$group === void 0 ? {} : _definition$group;
488
293
 
489
- var _ref2 = group || {},
490
- _ref2$order = _ref2.order,
491
- order = _ref2$order === void 0 ? 0 : _ref2$order,
492
- _ref2$label = _ref2.label,
493
- label = _ref2$label === void 0 ? {} : _ref2$label,
494
- _ref2$hidden = _ref2.hidden,
495
- hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
294
+ var _ref2 = story || {},
295
+ _ref2$components = _ref2.components,
296
+ screens = _ref2$components === void 0 ? [] : _ref2$components;
496
297
 
497
- var _ref3 = label || {},
498
- _ref3$id = _ref3.id,
499
- messageId = _ref3$id === void 0 ? null : _ref3$id;
298
+ var history = reactRouter.useHistory();
299
+ var screensManager = contexts.useScreensManager();
300
+ var fieldsManager = contexts.useFieldsManager();
301
+ var items = React.useMemo(function () {
302
+ var screenIndex = screens.findIndex(function (it) {
303
+ return it.id === screenId;
304
+ });
500
305
 
501
- if (hidden) {
502
- return allGroups;
503
- }
306
+ if (!screens[screenIndex]) {
307
+ return [];
308
+ }
504
309
 
505
- var _ref4 = utils.isMessage(label) ? {
506
- id: messageId || id,
507
- name: group
508
- } : {
509
- id: messageId || id,
510
- name: title
511
- },
512
- groupId = _ref4.id,
513
- groupName = _ref4.name;
310
+ var type = screens[screenIndex].type;
311
+ var fieldItems = [];
514
312
 
515
- var groupIndex = allGroups.findIndex(function (it) {
516
- return it.id === groupId;
517
- });
518
- var selected = selectedTypes !== null && selectedTypes.indexOf(id) !== -1;
519
- var item = {
520
- id: id,
521
- type: id,
522
- screen: definition,
523
- className: classNames__default["default"](_defineProperty__default["default"]({
524
- 'bg-secondary': !selected,
525
- 'bg-primary': selected
526
- }, styles$a.selected, selected))
527
- };
528
- return groupIndex !== -1 ? [].concat(_toConsumableArray__default["default"](allGroups.slice(0, groupIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, allGroups[groupIndex]), {}, {
529
- items: [].concat(_toConsumableArray__default["default"](allGroups[groupIndex].items), [item])
530
- })], _toConsumableArray__default["default"](allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray__default["default"](allGroups), [{
531
- id: groupId,
532
- name: utils.isMessage(label) ? intl.formatMessage(label) : groupName,
533
- order: order,
534
- items: [item]
535
- }]);
536
- }, []);
537
- return orderBy__default["default"](groupItems, ['order', 'name'], ['asc', 'asc']);
538
- }, [finalDefinitions, selectedTypes]);
539
- return /*#__PURE__*/React__default["default"].createElement("div", {
540
- className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className)])
541
- }, /*#__PURE__*/React__default["default"].createElement("div", {
542
- className: styles$a.rows
543
- }, groups.map(function (_ref6) {
544
- var id = _ref6.id,
545
- name = _ref6.name,
546
- items = _ref6.items;
547
- return /*#__PURE__*/React__default["default"].createElement("div", {
548
- key: "group-".concat(id),
549
- className: styles$a.row
550
- }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, name), /*#__PURE__*/React__default["default"].createElement("div", {
551
- className: styles$a.layouts
552
- }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
553
- items: items,
554
- withPlaceholder: true,
555
- itemClassName: classNames__default["default"](['border', 'rounded', {
556
- 'border-secondary': selectedTypes === null,
557
- 'border-dark': selectedTypes !== null,
558
- 'bg-secondary': selectedTypes === null,
559
- 'text-secondary': selectedTypes !== null
560
- }]),
561
- previewMinWidth: 100,
562
- onClickItem: onClickItem
563
- })));
564
- })));
313
+ if (field !== null) {
314
+ var _screensManager$getDe = screensManager.getDefinition(type),
315
+ _screensManager$getDe2 = _screensManager$getDe.fields,
316
+ screenFields = _screensManager$getDe2 === void 0 ? [] : _screensManager$getDe2;
317
+
318
+ var fields = [].concat(_toConsumableArray__default["default"](screenFields), [utils.getScreenExtraField(intl)]);
319
+ var fieldPath = field.split('/');
320
+ var lastKeyIndex = fieldPath.length - 1;
321
+ var parentItem = null;
322
+ fieldPath.reduce(function (currentFields, key, keyIndex) {
323
+ var _currentFields$type = currentFields.type,
324
+ fieldType = _currentFields$type === void 0 ? null : _currentFields$type;
325
+ var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
326
+ var _fieldsDef$fields = fieldsDef.fields,
327
+ subFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
328
+ _fieldsDef$settings = fieldsDef.settings,
329
+ settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
330
+ _fieldsDef$itemsField = fieldsDef.itemsField,
331
+ itemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
332
+ var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
333
+ var currentSettings = settings !== null ? getFieldByName(settings, key) : null;
334
+ var isCurrentSubfields = currentSubfields !== null;
335
+ var isCurrentSettings = currentSettings !== null;
336
+ var isListItems = itemsField !== null && !!key.match(/^[0-9]+$/);
337
+ var isLastIndex = keyIndex === lastKeyIndex;
338
+ var pathPrefix = "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex + 1).join('/'));
339
+ var pathSuffix = isLastIndex && form !== null ? "/".concat(form) : '';
340
+ var addNewItem = isLastIndex || isListItems;
341
+ var itemPath = "".concat(pathPrefix).concat(pathSuffix);
342
+ var nextFields = null;
343
+
344
+ if (isCurrentSubfields) {
345
+ nextFields = currentSubfields;
346
+ } else if (isCurrentSettings) {
347
+ nextFields = currentSettings;
348
+
349
+ if (parentItem !== null) {
350
+ fieldItems.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, parentItem), {}, {
351
+ url: "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex).join('/'), "/settings")
352
+ }));
353
+ }
354
+ } else if (isListItems) {
355
+ nextFields = itemsField;
356
+ }
357
+
358
+ var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
359
+ var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
360
+
361
+ var _ref3 = parentItem || {},
362
+ _ref3$label = _ref3.label,
363
+ parentItemLabel = _ref3$label === void 0 ? null : _ref3$label;
364
+
365
+ var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
366
+ var item = {
367
+ url: itemPath,
368
+ label: finalItemLabel || '',
369
+ active: false
370
+ };
371
+
372
+ if (addNewItem) {
373
+ fieldItems.push(item);
374
+ }
375
+
376
+ parentItem = item;
377
+ return nextFields;
378
+ }, {
379
+ fields: fields
380
+ });
381
+ }
382
+
383
+ var finalItems = [{
384
+ label: intl.formatMessage({
385
+ id: "AHvHaY",
386
+ defaultMessage: [{
387
+ "type": 0,
388
+ "value": "Parameters"
389
+ }]
390
+ }),
391
+ url: "/".concat(screenId),
392
+ active: false
393
+ }].concat(fieldItems).filter(function (it) {
394
+ return it !== null;
395
+ });
396
+ var lastItemsIndex = finalItems.length - 1;
397
+ return finalItems.map(function (it, index) {
398
+ return index === lastItemsIndex ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
399
+ url: url,
400
+ active: true
401
+ }) : it;
402
+ });
403
+ }, [intl, screens, screenId, field, form, url, screensManager, fieldsManager]);
404
+ var itemsLength = items.length;
405
+ var onClickBack = React.useCallback(function () {
406
+ history.push(items[itemsLength - 2].url);
407
+ }, [items]);
408
+ var withBack = itemsLength > 1;
409
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withBack ? /*#__PURE__*/React__default["default"].createElement(components.BackButton, {
410
+ onClick: onClickBack,
411
+ className: "mr-2"
412
+ }) : null, /*#__PURE__*/React__default["default"].createElement(components.Breadcrumb, {
413
+ items: items,
414
+ theme: "secondary",
415
+ withoutBar: true,
416
+ noWrap: true,
417
+ className: classNames__default["default"]([styles$e.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
418
+ }));
565
419
  };
566
420
 
567
- ScreenTypes.propTypes = propTypes$f;
568
- ScreenTypes.defaultProps = defaultProps$f;
421
+ Breadcrumb.propTypes = propTypes$m;
422
+ Breadcrumb.defaultProps = defaultProps$m;
569
423
 
570
- var styles$9 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
424
+ var styles$d = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
571
425
 
572
- var propTypes$e = {
573
- selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
426
+ var propTypes$l = {
427
+ value: core.PropTypes.component,
574
428
  className: PropTypes__default["default"].string,
575
- onRequestClose: PropTypes__default["default"].func,
576
- onClickScreenType: PropTypes__default["default"].func
429
+ gotoFieldForm: PropTypes__default["default"].func.isRequired,
430
+ closeFieldForm: PropTypes__default["default"].func.isRequired,
431
+ onChange: PropTypes__default["default"].func // onClickDelete: PropTypes.func,
432
+
577
433
  };
578
- var defaultProps$e = {
579
- selectedTypes: null,
434
+ var defaultProps$l = {
435
+ value: null,
580
436
  className: null,
581
- onRequestClose: null,
582
- onClickScreenType: null
437
+ onChange: null // onClickDelete: null,
438
+
583
439
  };
584
440
 
585
- var ScreenTypesModal = function ScreenTypesModal(_ref) {
586
- var selectedTypes = _ref.selectedTypes,
441
+ var ScreenForm = function ScreenForm(_ref) {
442
+ var value = _ref.value,
587
443
  className = _ref.className,
588
- onRequestClose = _ref.onRequestClose,
589
- onClickScreenType = _ref.onClickScreenType;
590
- return /*#__PURE__*/React__default["default"].createElement(components.Modal, null, /*#__PURE__*/React__default["default"].createElement(components.ModalDialog, {
591
- title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
592
- id: "QBaiO0",
593
- defaultMessage: [{
594
- "type": 0,
595
- "value": "Add a screen"
596
- }]
597
- }),
598
- className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className)]),
599
- onClickClose: onRequestClose
600
- }, /*#__PURE__*/React__default["default"].createElement(ScreenTypes, {
601
- selectedTypes: selectedTypes,
602
- className: styles$9.menu,
603
- onClickItem: onClickScreenType
444
+ gotoFieldForm = _ref.gotoFieldForm,
445
+ closeFieldForm = _ref.closeFieldForm,
446
+ onChange = _ref.onChange;
447
+
448
+ var _useScreenDefinition = contexts.useScreenDefinition(),
449
+ _useScreenDefinition$ = _useScreenDefinition.fields,
450
+ fields$1 = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // const intl = useIntl();
451
+ // const finalOnClickDelete = useCallback(() => {
452
+ // if (
453
+ // onClickDelete !== null &&
454
+ // window.confirm(
455
+ // intl.formatMessage({
456
+ // defaultMessage: 'Are you sure you want to delete this screen?',
457
+ // description: 'Confirm message when deleting a screen',
458
+ // }),
459
+ // )
460
+ // ) {
461
+ // onClickDelete(value);
462
+ // }
463
+ // }, [intl, onClickDelete, value]);
464
+
465
+
466
+ return /*#__PURE__*/React__default["default"].createElement("div", {
467
+ className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)])
468
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
469
+ className: styles$d.inner
470
+ }, /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
471
+ fields: fields$1,
472
+ value: value,
473
+ onChange: onChange,
474
+ gotoFieldForm: gotoFieldForm,
475
+ closeFieldForm: closeFieldForm
604
476
  })));
605
477
  };
606
478
 
607
- ScreenTypesModal.propTypes = propTypes$e;
608
- ScreenTypesModal.defaultProps = defaultProps$e;
609
-
610
- var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
479
+ ScreenForm.propTypes = propTypes$l;
480
+ ScreenForm.defaultProps = defaultProps$l;
611
481
 
612
- var propTypes$d = {
613
- value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
614
- isTheme: PropTypes__default["default"].bool,
615
- isVertical: PropTypes__default["default"].bool,
616
- isCreateOpened: PropTypes__default["default"].bool,
617
- isParsed: PropTypes__default["default"].bool,
618
- onClickScreen: PropTypes__default["default"].func,
619
- onChange: PropTypes__default["default"].func,
620
- className: PropTypes__default["default"].string
482
+ /* eslint-disable react/jsx-props-no-spreading */
483
+ var propTypes$k = {
484
+ children: PropTypes__default["default"].node
621
485
  };
622
- var defaultProps$d = {
623
- value: null,
624
- isTheme: false,
625
- isVertical: false,
626
- isCreateOpened: false,
627
- isParsed: false,
628
- onClickScreen: null,
629
- onChange: null,
630
- className: null
486
+ var defaultProps$k = {
487
+ children: null
631
488
  };
632
489
 
633
- var EditorScreens = function EditorScreens(_ref) {
634
- var unparsedValue = _ref.value,
635
- isTheme = _ref.isTheme,
636
- isVertical = _ref.isVertical,
637
- isCreateOpened = _ref.isCreateOpened,
638
- isParsed = _ref.isParsed,
639
- onClickScreen = _ref.onClickScreen,
640
- onChange = _ref.onChange,
641
- className = _ref.className;
642
- var valueWithTheme = useThemeValue(unparsedValue, isTheme);
643
- var value = isParsed ? unparsedValue : hooks.useParsedStory(valueWithTheme, {
644
- withMedias: false
645
- });
490
+ var FieldWithContexts = function FieldWithContexts(props) {
491
+ // Get definitions
492
+ var _useScreenDefinition = contexts.useScreenDefinition(),
493
+ _useScreenDefinition$ = _useScreenDefinition.fields,
494
+ fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // To use a specific form component
646
495
 
647
- var _ref2 = value || {},
648
- _ref2$components = _ref2.components,
649
- screens = _ref2$components === void 0 ? [] : _ref2$components;
650
496
 
651
- var _useState = React.useState(isCreateOpened),
652
- _useState2 = _slicedToArray__default["default"](_useState, 2),
653
- createModalOpened = _useState2[0],
654
- setCreateModalOpened = _useState2[1];
497
+ var formComponents = contexts.useFormsComponents();
498
+ return /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
499
+ fields: fields,
500
+ formComponents: formComponents
501
+ }, props));
502
+ };
655
503
 
656
- var routes = contexts.useRoutes();
657
- var push = contexts.useRoutePush();
658
- var url = contexts.useUrlGenerator();
504
+ FieldWithContexts.propTypes = propTypes$k;
505
+ FieldWithContexts.defaultProps = defaultProps$k;
659
506
 
660
- var _useRouteParams = useRouteParams({
661
- screenOnly: true
662
- }),
663
- _useRouteParams$scree = _useRouteParams.screen,
664
- currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
507
+ var styles$c = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
665
508
 
666
- var createScreenFromDefinition = React.useCallback(function (definition) {
667
- var _ref3 = value || {},
668
- _ref3$components = _ref3.components,
669
- currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
670
- _ref3$theme = _ref3.theme,
671
- theme = _ref3$theme === void 0 ? {} : _ref3$theme;
509
+ var propTypes$j = {
510
+ className: PropTypes__default["default"].string,
511
+ onConfirm: PropTypes__default["default"].func,
512
+ onCancel: PropTypes__default["default"].func
513
+ };
514
+ var defaultProps$j = {
515
+ className: null,
516
+ onConfirm: null,
517
+ onCancel: null
518
+ };
672
519
 
673
- var _ref4 = isString__default["default"](definition) ? {
674
- id: definition
675
- } : definition,
676
- newScreenType = _ref4.id;
520
+ var DeleteScreenModal = function DeleteScreenModal(_ref) {
521
+ var className = _ref.className,
522
+ onConfirm = _ref.onConfirm,
523
+ onCancel = _ref.onCancel;
524
+ return /*#__PURE__*/React__default["default"].createElement(components.Modal, null, /*#__PURE__*/React__default["default"].createElement(components.ModalDialog, {
525
+ title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
526
+ id: "p6q/+/",
527
+ defaultMessage: [{
528
+ "type": 0,
529
+ "value": "Delete screen"
530
+ }]
531
+ }),
532
+ className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)]),
533
+ onClickClose: onCancel
534
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
535
+ className: styles$c.description
536
+ }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
537
+ id: "q/tLk0",
538
+ defaultMessage: [{
539
+ "type": 0,
540
+ "value": "Are you sure you want to delete this screen?"
541
+ }]
542
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
543
+ className: styles$c.actions
544
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
545
+ onClick: onCancel,
546
+ className: "btn-outline-secondary mr-2"
547
+ }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
548
+ id: "0GT0SI",
549
+ defaultMessage: [{
550
+ "type": 0,
551
+ "value": "Cancel"
552
+ }]
553
+ }))), /*#__PURE__*/React__default["default"].createElement(components.Button, {
554
+ onClick: onConfirm,
555
+ theme: "danger",
556
+ label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
557
+ id: "gRxcTc",
558
+ defaultMessage: [{
559
+ "type": 0,
560
+ "value": "Delete screen"
561
+ }]
562
+ })
563
+ }))));
564
+ };
677
565
 
678
- var _ref5 = theme || {},
679
- _ref5$components = _ref5.components,
680
- themeComponents = _ref5$components === void 0 ? null : _ref5$components;
566
+ DeleteScreenModal.propTypes = propTypes$j;
567
+ DeleteScreenModal.defaultProps = defaultProps$j;
681
568
 
682
- var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
683
- return it.type === newScreenType;
684
- }) || null : null;
685
- var newScreen = createScreen(definition, themeScreen);
686
- var foundIndex = screens.findIndex(function (_ref6) {
687
- var id = _ref6.id;
688
- return id === currentScreenId;
689
- });
690
- var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
569
+ var styles$b = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
691
570
 
692
- var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
693
- components: [].concat(_toConsumableArray__default["default"](currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray__default["default"](currentScreens.slice(currentScreenIndex)))
694
- });
571
+ var propTypes$i = {
572
+ value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
573
+ isTheme: PropTypes__default["default"].bool,
574
+ className: PropTypes__default["default"].string,
575
+ onChange: PropTypes__default["default"].func
576
+ };
577
+ var defaultProps$i = {
578
+ value: null,
579
+ isTheme: false,
580
+ className: null,
581
+ onChange: null
582
+ };
695
583
 
696
- if (onChange !== null) {
697
- onChange(newValue);
698
- }
584
+ var EditForm = function EditForm(_ref) {
585
+ var value = _ref.value,
586
+ isTheme = _ref.isTheme,
587
+ className = _ref.className,
588
+ onChange = _ref.onChange;
589
+ // Match routes
590
+ var history = reactRouter.useHistory();
591
+ var routePush = contexts.useRoutePush();
699
592
 
700
- return newScreen;
701
- }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
702
- var onOrderChange = React.useCallback(function (listItems) {
703
- var ids = listItems.map(function (_ref7) {
704
- var id = _ref7.id;
705
- return id;
706
- });
593
+ var _useRouteParams = useRouteParams(),
594
+ url = _useRouteParams.url,
595
+ _useRouteParams$scree = _useRouteParams.screen,
596
+ screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
597
+ _useRouteParams$field = _useRouteParams.field,
598
+ fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
599
+ _useRouteParams$form = _useRouteParams.form,
600
+ formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form; // Get screen
707
601
 
708
- var _ref8 = value || {},
709
- _ref8$components = _ref8.components,
710
- currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
711
602
 
712
- var currentIds = currentScreens.map(function (_ref9) {
713
- var id = _ref9.id;
714
- return id;
715
- });
716
- var sameOrder = listItems.reduce(function (same, _ref10, index) {
717
- var id = _ref10.id;
718
- return same && id === currentIds[index];
719
- }, true);
603
+ var _ref2 = value || {},
604
+ _ref2$components = _ref2.components,
605
+ screens = _ref2$components === void 0 ? [] : _ref2$components;
720
606
 
721
- if (!sameOrder) {
722
- var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
723
- components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref11, _ref12) {
724
- var idA = _ref11.id;
725
- var idB = _ref12.id;
726
- var indexA = ids.indexOf(idA);
727
- var indexB = ids.indexOf(idB);
607
+ var screenIndex = screens.findIndex(function (it) {
608
+ return it.id === screenId;
609
+ });
610
+ var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
728
611
 
729
- if (indexA === indexB) {
730
- return 0;
731
- }
612
+ var _useFormTransition = useFormTransition(url, screenIndex, styles$b),
613
+ transitionName = _useFormTransition.name,
614
+ transitionTimeout = _useFormTransition.timeout;
732
615
 
733
- return indexA > indexB ? 1 : -1;
734
- })
735
- });
616
+ var _useState = React.useState(false),
617
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
618
+ screenSettingsOpened = _useState2[0],
619
+ setScreenSettingsOpened = _useState2[1];
736
620
 
737
- if (onChange !== null) {
738
- onChange(newValue);
739
- }
740
- }
741
- }, [value, onChange]);
742
- var onClickScreenType = React.useCallback(function (definition) {
743
- setCreateModalOpened(false);
744
- var currentScreen = isTheme ? screens.find(function (_ref13) {
745
- var type = _ref13.type;
746
- return type === definition.id;
747
- }) || null : null;
621
+ var _useState3 = React.useState(false),
622
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
623
+ deleteScreenModalOpened = _useState4[0],
624
+ setDeleteScreenModalOpened = _useState4[1];
748
625
 
749
- if (!isTheme || currentScreen === null) {
750
- currentScreen = createScreenFromDefinition(definition);
626
+ var _useState5 = React.useState({}),
627
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
628
+ fieldForms = _useState6[0],
629
+ setFieldForms = _useState6[1];
630
+
631
+ var _useState7 = React.useState(null),
632
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
633
+ fieldContext = _useState8[0],
634
+ setFieldContext = _useState8[1]; // Callbacks
635
+
636
+
637
+ var gotoFieldForm = React.useCallback(function () {
638
+ var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
639
+ var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
640
+ var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
641
+ var hasField = field !== null;
642
+ var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
643
+ routePush(hasField ? fieldRoute : 'screen', {
644
+ screen: screenId,
645
+ field: field !== null ? field.split('.') : null,
646
+ form: formName !== null ? utils.slug(formName) : null
647
+ });
648
+ setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
649
+ setFieldContext(context);
650
+ }, [routePush, screenId, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
651
+ var closeFieldForm = React.useCallback(function (field) {
652
+ var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
653
+ var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
654
+ var pastUrl = fieldForms[fieldKey] || null;
655
+
656
+ if (pastUrl !== null) {
657
+ history.push(pastUrl);
751
658
  }
752
659
 
753
- push('screen', {
754
- screen: currentScreen.id
660
+ setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
661
+ return key !== fieldKey ? _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, key, fieldForms[key])) : map;
662
+ }, {}));
663
+ }, [history, screenId, fieldForms, setFieldForms]);
664
+ var triggerOnChange = React.useCallback(function (newValue) {
665
+ if (onChange !== null) {
666
+ onChange(newValue);
667
+ }
668
+ }, [onChange]);
669
+ var onScreenFormChange = React.useCallback(function (newScreenValue) {
670
+ triggerOnChange(updateScreen(value, newScreenValue));
671
+ }, [value, triggerOnChange]);
672
+ var onClickDuplicate = React.useCallback(function () {
673
+ triggerOnChange(duplicateScreen(value, screenId));
674
+ setScreenSettingsOpened(false);
675
+ }, [value, screenId, triggerOnChange, setScreenSettingsOpened]);
676
+ var onClickDelete = React.useCallback(function () {
677
+ setDeleteScreenModalOpened(true);
678
+ setScreenSettingsOpened(false);
679
+ }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
680
+ var onSettingsClick = React.useCallback(function () {
681
+ setScreenSettingsOpened(function (opened) {
682
+ return !opened;
755
683
  });
756
- onClickScreen(currentScreen);
757
- }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
758
- var onClickAdd = React.useCallback(function () {
759
- return setCreateModalOpened(true);
760
- }, [setCreateModalOpened]);
761
- var onCreateModalRequestClose = React.useCallback(function () {
762
- return setCreateModalOpened(false);
763
- }, [setCreateModalOpened]);
684
+ }, [setScreenSettingsOpened]);
685
+ var onDropdownClickOutside = React.useCallback(function () {
686
+ setScreenSettingsOpened(false);
687
+ }, [setScreenSettingsOpened]);
688
+ var onDeleteScreenConfirm = React.useCallback(function () {
689
+ triggerOnChange(deleteScreen(value, screenId));
690
+ setDeleteScreenModalOpened(false);
691
+ }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
692
+ var onDeleteScreenCancel = React.useCallback(function () {
693
+ setDeleteScreenModalOpened(false);
694
+ }, [setDeleteScreenModalOpened]);
695
+ var dropdownItems = [!isTheme ? {
696
+ id: 'duplicate',
697
+ type: 'button',
698
+ className: 'text-left text-info',
699
+ label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
700
+ id: "IBjY5r",
701
+ defaultMessage: [{
702
+ "type": 0,
703
+ "value": "Duplicate screen"
704
+ }]
705
+ }),
706
+ onClick: onClickDuplicate
707
+ } : null, {
708
+ id: 'delete',
709
+ type: 'button',
710
+ className: 'text-left text-danger',
711
+ label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
712
+ id: "hpiKce",
713
+ defaultMessage: [{
714
+ "type": 0,
715
+ "value": "Delete screen"
716
+ }]
717
+ }),
718
+ onClick: onClickDelete
719
+ }].filter(function (it) {
720
+ return it !== null;
721
+ });
764
722
  return /*#__PURE__*/React__default["default"].createElement("div", {
765
- className: classNames__default["default"](['d-flex', 'flex-column', styles$8.container, className])
766
- }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
723
+ className: classNames__default["default"](['d-flex', 'flex-column', className])
724
+ }, screenId !== null ? /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
767
725
  compact: true,
768
726
  noWrap: true,
769
727
  withoutCollapse: true,
770
- className: classNames__default["default"](['sticky-top', styles$8.navbar])
771
- }, /*#__PURE__*/React__default["default"].createElement("strong", {
772
- className: "mb-0 mr-auto"
728
+ className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
729
+ }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
730
+ story: value,
731
+ url: url,
732
+ screenId: screenId,
733
+ field: fieldParams,
734
+ form: formParams,
735
+ className: "mr-auto"
736
+ }), fieldParams === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SettingsButton, {
737
+ onClick: onSettingsClick
738
+ }), /*#__PURE__*/React__default["default"].createElement(components.DropdownMenu, {
739
+ items: dropdownItems,
740
+ visible: screenSettingsOpened,
741
+ align: "right",
742
+ onClickOutside: onDropdownClickOutside
743
+ })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
744
+ className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
745
+ }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransitionGroup, {
746
+ transitionName: transitionName,
747
+ transitionEnterTimeout: transitionTimeout,
748
+ transitionLeaveTimeout: transitionTimeout,
749
+ className: "w-100 flex-grow-1"
750
+ }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
751
+ className: classNames__default["default"](['w-100', styles$b.panel]),
752
+ key: "field-".concat(fieldParams, "-").concat(formParams)
753
+ }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
754
+ data: screen
755
+ }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
756
+ name: fieldParams.replace(/\//g, '.'),
757
+ value: screen,
758
+ form: formParams,
759
+ className: styles$b.form,
760
+ gotoFieldForm: gotoFieldForm,
761
+ closeFieldForm: closeFieldForm,
762
+ fieldContext: fieldContext,
763
+ onChange: onScreenFormChange
764
+ }))) : /*#__PURE__*/React__default["default"].createElement("div", {
765
+ className: classNames__default["default"](['w-100', styles$b.panel]),
766
+ key: "screen-".concat(screen.id)
767
+ }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
768
+ data: screen
769
+ }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
770
+ value: screen,
771
+ className: styles$b.form,
772
+ onChange: onScreenFormChange,
773
+ gotoFieldForm: gotoFieldForm,
774
+ closeFieldForm: closeFieldForm
775
+ })))) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
776
+ className: "w-100 m-2"
773
777
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
774
- id: "jf+4Hq",
778
+ id: "QfpTKK",
775
779
  defaultMessage: [{
776
780
  "type": 0,
777
- "value": "Screens"
778
- }]
779
- })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
780
- theme: "primary",
781
- size: "sm",
782
- onClick: onClickAdd,
783
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
784
- icon: freeSolidSvgIcons.faPlus
785
- })
786
- })), /*#__PURE__*/React__default["default"].createElement("div", {
787
- className: "flex-grow-1 d-flex w-100 p-2"
788
- }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
789
- path: [routes.screen, routes.home],
790
- render: function render(_ref14) {
791
- var _ref14$match$params$s = _ref14.match.params.screen,
792
- screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
793
- return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
794
- items: screens.map(function (it) {
795
- return {
796
- id: it.id,
797
- screen: it,
798
- href: url('screen', {
799
- screen: it.id
800
- }),
801
- active: it.id === screenId
802
- };
803
- }),
804
- isVertical: isVertical,
805
- withPreview: true,
806
- sortable: true,
807
- className: "w-100",
808
- onClickItem: onClickScreen,
809
- onOrderChange: onOrderChange
810
- }) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
811
- className: "flex-grow-1 p-2"
812
- }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
813
- theme: "primary",
814
- onClick: onClickAdd
815
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
816
- id: "JoWKee",
817
- defaultMessage: [{
818
- "type": 0,
819
- "value": "Create your first screen"
820
- }]
821
- })));
822
- }
823
- })), createModalOpened ? /*#__PURE__*/React__default["default"].createElement(ScreenTypesModal, {
824
- selectedTypes: isTheme ? screens.map(function (_ref15) {
825
- var type = _ref15.type;
826
- return type;
827
- }) : [],
828
- onClickScreenType: onClickScreenType,
829
- onRequestClose: onCreateModalRequestClose
781
+ "value": "Select a screen..."
782
+ }],
783
+ decription: "Indication to select a screen to view the form"
784
+ }))), deleteScreenModalOpened ? /*#__PURE__*/React__default["default"].createElement(DeleteScreenModal, {
785
+ onConfirm: onDeleteScreenConfirm,
786
+ onCancel: onDeleteScreenCancel
830
787
  }) : null);
831
788
  };
832
789
 
833
- EditorScreens.propTypes = propTypes$d;
834
- EditorScreens.defaultProps = defaultProps$d;
790
+ EditForm.propTypes = propTypes$i;
791
+ EditForm.defaultProps = defaultProps$i;
792
+
793
+ var _excluded$7 = ["components"];
794
+
795
+ var useThemeValue = function useThemeValue(value) {
796
+ var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
797
+ var valueWithTheme = React.useMemo(function () {
798
+ if (!isTheme) {
799
+ return value;
800
+ }
801
+
802
+ var _ref = value || {};
803
+ _ref.components;
804
+ var themeValue = _objectWithoutProperties__default["default"](_ref, _excluded$7);
805
+
806
+ return value !== null ? _objectSpread__default["default"]({
807
+ theme: themeValue
808
+ }, value) : value;
809
+ }, [value, isTheme]);
810
+ return valueWithTheme;
811
+ };
812
+
813
+ var styles$a = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
835
814
 
836
815
  /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
837
- var propTypes$c = {
816
+ var propTypes$h = {
838
817
  color: PropTypes__default["default"].string,
839
818
  className: PropTypes__default["default"].string
840
819
  };
841
- var defaultProps$c = {
820
+ var defaultProps$h = {
842
821
  color: 'currentColor',
843
822
  className: null
844
823
  };
@@ -863,15 +842,15 @@ var DesktopIcon = function DesktopIcon(_ref) {
863
842
  }));
864
843
  };
865
844
 
866
- DesktopIcon.propTypes = propTypes$c;
867
- DesktopIcon.defaultProps = defaultProps$c;
845
+ DesktopIcon.propTypes = propTypes$h;
846
+ DesktopIcon.defaultProps = defaultProps$h;
868
847
 
869
848
  /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
870
- var propTypes$b = {
849
+ var propTypes$g = {
871
850
  color: PropTypes__default["default"].string,
872
851
  className: PropTypes__default["default"].string
873
852
  };
874
- var defaultProps$b = {
853
+ var defaultProps$g = {
875
854
  color: 'currentColor',
876
855
  className: null
877
856
  };
@@ -896,8 +875,8 @@ var MobileIcon = function MobileIcon(_ref) {
896
875
  }));
897
876
  };
898
877
 
899
- MobileIcon.propTypes = propTypes$b;
900
- MobileIcon.defaultProps = defaultProps$b;
878
+ MobileIcon.propTypes = propTypes$g;
879
+ MobileIcon.defaultProps = defaultProps$g;
901
880
 
902
881
  var DeviceIcons = /*#__PURE__*/Object.freeze({
903
882
  __proto__: null,
@@ -905,15 +884,15 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
905
884
  Mobile: MobileIcon
906
885
  });
907
886
 
908
- var styles$7 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
887
+ var styles$9 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
909
888
 
910
889
  var _excluded$6 = ["device", "className", "iconComponents"];
911
- var propTypes$a = {
890
+ var propTypes$f = {
912
891
  device: PropTypes__default["default"].string.isRequired,
913
892
  iconComponents: core.PropTypes.components,
914
893
  className: PropTypes__default["default"].string
915
894
  };
916
- var defaultProps$a = {
895
+ var defaultProps$f = {
917
896
  iconComponents: DeviceIcons,
918
897
  className: null
919
898
  };
@@ -926,24 +905,22 @@ var DeviceButton = function DeviceButton(_ref) {
926
905
 
927
906
  var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
928
907
  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
929
- className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className !== null)])
908
+ className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)])
930
909
  }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
931
- className: styles$7.icon
910
+ className: styles$9.icon
932
911
  }));
933
912
  };
934
913
 
935
- DeviceButton.propTypes = propTypes$a;
936
- DeviceButton.defaultProps = defaultProps$a;
937
-
938
- var styles$6 = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
914
+ DeviceButton.propTypes = propTypes$f;
915
+ DeviceButton.defaultProps = defaultProps$f;
939
916
 
940
917
  var _excluded$5 = ["id"];
941
- var propTypes$9 = {
918
+ var propTypes$e = {
942
919
  items: core.PropTypes.menuItems,
943
920
  className: PropTypes__default["default"].string,
944
921
  onClickItem: PropTypes__default["default"].func
945
922
  };
946
- var defaultProps$9 = {
923
+ var defaultProps$e = {
947
924
  items: [],
948
925
  className: null,
949
926
  onClickItem: null
@@ -956,7 +933,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
956
933
  return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
957
934
  items: items,
958
935
  theme: "outline-secondary",
959
- className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className !== null)]),
936
+ className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
960
937
  renderItemButton: function renderItemButton(item, index, props) {
961
938
  var id = item.id,
962
939
  itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
@@ -964,7 +941,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
964
941
  return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
965
942
  device: id
966
943
  }, props, itemProps, {
967
- className: styles$6.button,
944
+ className: styles$a.button,
968
945
  onClick: function onClick(e) {
969
946
  return onClickItem !== null ? onClickItem(e, item, index) : null;
970
947
  }
@@ -973,12 +950,12 @@ var DevicesMenu = function DevicesMenu(_ref) {
973
950
  });
974
951
  };
975
952
 
976
- DevicesMenu.propTypes = propTypes$9;
977
- DevicesMenu.defaultProps = defaultProps$9;
953
+ DevicesMenu.propTypes = propTypes$e;
954
+ DevicesMenu.defaultProps = defaultProps$e;
978
955
 
979
- var styles$5 = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
956
+ var styles$8 = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
980
957
 
981
- var propTypes$8 = {
958
+ var propTypes$d = {
982
959
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
983
960
  devices: core.PropTypes.devices,
984
961
  device: PropTypes__default["default"].string,
@@ -988,7 +965,7 @@ var propTypes$8 = {
988
965
  onScreenChange: PropTypes__default["default"].func,
989
966
  withoutDevicesSizes: PropTypes__default["default"].bool
990
967
  };
991
- var defaultProps$8 = {
968
+ var defaultProps$d = {
992
969
  value: null,
993
970
  devices: [{
994
971
  id: 'mobile',
@@ -1078,13 +1055,13 @@ var EditorPreview = function EditorPreview(_ref) {
1078
1055
  };
1079
1056
  }, [device, contentRect, screen, withoutDevicesSizes]);
1080
1057
  return /*#__PURE__*/React__default["default"].createElement("div", {
1081
- className: classNames__default["default"]([styles$5.container, screens.map(function (screenName) {
1082
- return styles$5["screen-".concat(screenName)];
1083
- }), (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$5.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
1058
+ className: classNames__default["default"]([styles$8.container, screens.map(function (screenName) {
1059
+ return styles$8["screen-".concat(screenName)];
1060
+ }), (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
1084
1061
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1085
- className: styles$5.inner
1062
+ className: styles$8.inner
1086
1063
  }, !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
1087
- className: styles$5.top
1064
+ className: styles$8.top
1088
1065
  }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
1089
1066
  items: devices.map(function (it) {
1090
1067
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -1093,12 +1070,12 @@ var EditorPreview = function EditorPreview(_ref) {
1093
1070
  }),
1094
1071
  onClickItem: onClickDeviceItem
1095
1072
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1096
- className: styles$5.bottom
1073
+ className: styles$8.bottom
1097
1074
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1098
- className: styles$5.inner,
1075
+ className: styles$8.inner,
1099
1076
  ref: bottomRef
1100
1077
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1101
- className: styles$5.preview,
1078
+ className: styles$8.preview,
1102
1079
  style: previewStyle
1103
1080
  }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
1104
1081
  path: [routes.screen, routes.home],
@@ -1106,12 +1083,12 @@ var EditorPreview = function EditorPreview(_ref) {
1106
1083
  var _ref4$match$params$sc = _ref4.match.params.screen,
1107
1084
  screenId = _ref4$match$params$sc === void 0 ? null : _ref4$match$params$sc;
1108
1085
  return /*#__PURE__*/React__default["default"].createElement("div", {
1109
- className: styles$5.viewerContainer
1086
+ className: styles$8.viewerContainer
1110
1087
  }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
1111
1088
  story: valueParsed,
1112
1089
  storyIsParsed: true,
1113
1090
  screen: screenId,
1114
- className: styles$5.story,
1091
+ className: styles$8.story,
1115
1092
  theme: viewerTheme,
1116
1093
  interactions: null,
1117
1094
  renderContext: "edit",
@@ -1121,678 +1098,1823 @@ var EditorPreview = function EditorPreview(_ref) {
1121
1098
  }))))));
1122
1099
  };
1123
1100
 
1124
- EditorPreview.propTypes = propTypes$8;
1125
- EditorPreview.defaultProps = defaultProps$8;
1101
+ EditorPreview.propTypes = propTypes$d;
1102
+ EditorPreview.defaultProps = defaultProps$d;
1126
1103
 
1127
- var _excluded$4 = ["components"];
1104
+ var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
1128
1105
 
1129
- var deleteScreen = function deleteScreen(story, screenId) {
1130
- var _ref = story || {},
1131
- _ref$components = _ref.components,
1132
- components = _ref$components === void 0 ? [] : _ref$components,
1133
- currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$4);
1106
+ var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
1134
1107
 
1135
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
1136
- components: components.filter(function (_ref2) {
1137
- var id = _ref2.id;
1138
- return id !== screenId;
1139
- })
1140
- });
1108
+ var styles$5 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
1109
+
1110
+ var styles$4 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
1111
+
1112
+ var propTypes$c = {
1113
+ active: PropTypes__default["default"].bool,
1114
+ id: PropTypes__default["default"].string,
1115
+ href: PropTypes__default["default"].string,
1116
+ label: core.PropTypes.label,
1117
+ icon: PropTypes__default["default"].node,
1118
+ title: PropTypes__default["default"].string,
1119
+ onClick: PropTypes__default["default"].func,
1120
+ children: PropTypes__default["default"].node,
1121
+ refButton: PropTypes__default["default"].shape({
1122
+ current: PropTypes__default["default"].any // eslint-disable-line
1123
+
1124
+ }),
1125
+ className: PropTypes__default["default"].string
1126
+ };
1127
+ var defaultProps$c = {
1128
+ active: false,
1129
+ id: null,
1130
+ href: null,
1131
+ label: null,
1132
+ icon: null,
1133
+ title: null,
1134
+ onClick: null,
1135
+ children: null,
1136
+ refButton: null,
1137
+ className: null
1141
1138
  };
1142
1139
 
1143
- var _excluded$3 = ["components"];
1140
+ var ScreenButton = function ScreenButton(_ref) {
1141
+ var _ref2;
1144
1142
 
1145
- var duplicateScreen = function duplicateScreen(story, screenId) {
1146
- var _ref = story || {},
1147
- _ref$components = _ref.components,
1148
- components = _ref$components === void 0 ? [] : _ref$components,
1149
- currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$3);
1143
+ var active = _ref.active,
1144
+ id = _ref.id,
1145
+ href = _ref.href,
1146
+ className = _ref.className,
1147
+ label = _ref.label,
1148
+ icon = _ref.icon,
1149
+ children = _ref.children,
1150
+ title = _ref.title,
1151
+ onClick = _ref.onClick,
1152
+ refButton = _ref.refButton;
1153
+ return /*#__PURE__*/React__default["default"].createElement("div", {
1154
+ className: classNames__default["default"]([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
1155
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1156
+ className: styles$4.screen
1157
+ }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
1158
+ className: styles$4.inner
1159
+ }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1160
+ className: styles$4.icon
1161
+ }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1162
+ className: styles$4.label
1163
+ }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
1164
+ className: styles$4.button,
1165
+ withoutStyle: true,
1166
+ id: id,
1167
+ href: href,
1168
+ title: title,
1169
+ onClick: onClick,
1170
+ refButton: refButton
1171
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
1172
+ className: classNames__default["default"]([styles$4.border, 'rounded'])
1173
+ })));
1174
+ };
1150
1175
 
1151
- var screen = components.find(function (it) {
1152
- return it.id === screenId;
1153
- }) || null;
1154
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
1155
- components: screen !== null ? [].concat(_toConsumableArray__default["default"](components), [_objectSpread__default["default"](_objectSpread__default["default"]({}, screen), {}, {
1156
- id: uuid.v1()
1157
- })]) : components
1176
+ ScreenButton.propTypes = propTypes$c;
1177
+ ScreenButton.defaultProps = defaultProps$c;
1178
+ var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
1179
+ return /*#__PURE__*/React__default["default"].createElement(ScreenButton, Object.assign({}, props, {
1180
+ refButton: ref
1181
+ }));
1182
+ });
1183
+
1184
+ var propTypes$b = {
1185
+ screen: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
1186
+ index: PropTypes__default["default"].number.isRequired,
1187
+ title: PropTypes__default["default"].string,
1188
+ previewStyle: PropTypes__default["default"].shape({
1189
+ width: PropTypes__default["default"].number,
1190
+ height: PropTypes__default["default"].number
1191
+ }),
1192
+ withPreview: PropTypes__default["default"].bool,
1193
+ withPlaceholder: PropTypes__default["default"].bool,
1194
+ onClick: PropTypes__default["default"].func,
1195
+ onClickItem: PropTypes__default["default"].func,
1196
+ buttonClassName: PropTypes__default["default"].string,
1197
+ className: PropTypes__default["default"].string
1198
+ };
1199
+ var defaultProps$b = {
1200
+ screen: null,
1201
+ title: null,
1202
+ previewStyle: null,
1203
+ withPreview: true,
1204
+ withPlaceholder: false,
1205
+ onClick: null,
1206
+ onClickItem: null,
1207
+ buttonClassName: null,
1208
+ className: null
1209
+ };
1210
+
1211
+ var ScreenWithPreview = function ScreenWithPreview(_ref) {
1212
+ var _ref3;
1213
+
1214
+ var screen = _ref.screen,
1215
+ index = _ref.index,
1216
+ title = _ref.title,
1217
+ className = _ref.className,
1218
+ buttonClassName = _ref.buttonClassName,
1219
+ previewStyle = _ref.previewStyle,
1220
+ _onClick = _ref.onClick,
1221
+ onClickItem = _ref.onClickItem,
1222
+ withPreview = _ref.withPreview,
1223
+ withPlaceholder = _ref.withPlaceholder;
1224
+ var intl = reactIntl.useIntl();
1225
+
1226
+ var _ref2 = previewStyle || {},
1227
+ _ref2$width = _ref2.width,
1228
+ width = _ref2$width === void 0 ? null : _ref2$width,
1229
+ _ref2$height = _ref2.height,
1230
+ height = _ref2$height === void 0 ? null : _ref2$height;
1231
+
1232
+ return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, Object.assign({}, screen, {
1233
+ className: classNames__default["default"]([styles$5.button, (_ref3 = {}, _defineProperty__default["default"](_ref3, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
1234
+ title: utils.isMessage(title) ? intl.formatMessage(title) : null,
1235
+ onClick: function onClick() {
1236
+ if (_onClick !== null) {
1237
+ _onClick(screen, index);
1238
+ }
1239
+
1240
+ if (onClickItem !== null) {
1241
+ onClickItem(screen, index);
1242
+ }
1243
+ }
1244
+ }), withPreview && !withPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
1245
+ className: styles$5.preview,
1246
+ style: previewStyle
1247
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
1248
+ screen: screen,
1249
+ width: width,
1250
+ height: height,
1251
+ className: styles$5.screen
1252
+ })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
1253
+ className: styles$5.placeholder,
1254
+ style: previewStyle
1255
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPlaceholder, {
1256
+ screen: screen,
1257
+ width: width,
1258
+ height: height,
1259
+ className: styles$5.screen
1260
+ })) : null);
1261
+ };
1262
+
1263
+ ScreenWithPreview.propTypes = propTypes$b;
1264
+ ScreenWithPreview.defaultProps = defaultProps$b;
1265
+
1266
+ var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
1267
+ function getDragDepth(offset, indentationWidth) {
1268
+ return Math.round(offset / indentationWidth);
1269
+ }
1270
+ function getMaxDepth(_ref) {
1271
+ var previousItem = _ref.previousItem;
1272
+
1273
+ if (previousItem) {
1274
+ // return previousItem.depth + 1;
1275
+ return 1;
1276
+ }
1277
+
1278
+ return 0;
1279
+ }
1280
+ function getMinDepth(_ref2) {
1281
+ var nextItem = _ref2.nextItem;
1282
+
1283
+ if (nextItem) {
1284
+ // return nextItem.depth;
1285
+ return 0;
1286
+ }
1287
+
1288
+ return 0;
1289
+ }
1290
+ function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
1291
+ var overItemIndex = items.findIndex(function (_ref3) {
1292
+ var id = _ref3.id;
1293
+ return id === overId;
1294
+ });
1295
+ var activeItemIndex = items.findIndex(function (_ref4) {
1296
+ var id = _ref4.id;
1297
+ return id === activeId;
1298
+ });
1299
+ var activeItem = items[activeItemIndex];
1300
+ var newItems = sortable.arrayMove(items, activeItemIndex, overItemIndex);
1301
+ var previousItem = newItems[overItemIndex - 1];
1302
+ var nextItem = newItems[overItemIndex + 1];
1303
+ var dragDepth = getDragDepth(dragOffset, indentationWidth);
1304
+ var projectedDepth = activeItem.depth + dragDepth;
1305
+ var maxDepth = getMaxDepth({
1306
+ previousItem: previousItem
1307
+ });
1308
+ var minDepth = getMinDepth({
1309
+ nextItem: nextItem
1310
+ });
1311
+ var depth = projectedDepth;
1312
+
1313
+ if (projectedDepth >= maxDepth) {
1314
+ depth = maxDepth;
1315
+ } else if (projectedDepth < minDepth) {
1316
+ depth = minDepth;
1317
+ }
1318
+
1319
+ function getParentId() {
1320
+ var _newItems$slice$rever;
1321
+
1322
+ if (depth === 0 || !previousItem) {
1323
+ return null;
1324
+ }
1325
+
1326
+ if (depth === previousItem.depth) {
1327
+ return previousItem.parentId;
1328
+ }
1329
+
1330
+ if (depth > previousItem.depth) {
1331
+ return previousItem.id;
1332
+ }
1333
+
1334
+ var newParent = (_newItems$slice$rever = newItems.slice(0, overItemIndex).reverse().find(function (item) {
1335
+ return item.depth === depth;
1336
+ })) === null || _newItems$slice$rever === void 0 ? void 0 : _newItems$slice$rever.parentId;
1337
+ return newParent !== null && newParent !== void 0 ? newParent : null;
1338
+ }
1339
+
1340
+ return {
1341
+ depth: depth,
1342
+ maxDepth: maxDepth,
1343
+ minDepth: minDepth,
1344
+ parentId: getParentId()
1345
+ };
1346
+ }
1347
+
1348
+ function flatten(items) {
1349
+ var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
1350
+ var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
1351
+ return items.reduce(function (acc, item, index) {
1352
+ return [].concat(_toConsumableArray__default["default"](acc), [_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
1353
+ parentId: item.parentId || parentId,
1354
+ depth: item.parentId ? 1 : 0,
1355
+ index: index
1356
+ })], _toConsumableArray__default["default"](flatten(item.children || [], item.id, depth + 1)));
1357
+ }, []);
1358
+ }
1359
+
1360
+ function flattenTree(items) {
1361
+ return flatten(items);
1362
+ }
1363
+ function findItem(items, itemId) {
1364
+ return items.find(function (_ref5) {
1365
+ var id = _ref5.id;
1366
+ return id === itemId;
1367
+ });
1368
+ }
1369
+ function buildTree(flattenedItems) {
1370
+ var root = {
1371
+ id: 'root',
1372
+ children: []
1373
+ };
1374
+
1375
+ var nodes = _defineProperty__default["default"]({}, root.id, root);
1376
+
1377
+ var items = flattenedItems.map(function (item) {
1378
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
1379
+ children: []
1380
+ });
1381
+ }); // eslint-disable-next-line no-restricted-syntax
1382
+
1383
+ var _iterator = _createForOfIteratorHelper__default["default"](items),
1384
+ _step;
1385
+
1386
+ try {
1387
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
1388
+ var _item$parentId, _nodes$parentId;
1389
+
1390
+ var item = _step.value;
1391
+ var id = item.id,
1392
+ children = item.children;
1393
+ var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
1394
+ var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
1395
+ nodes[id] = {
1396
+ id: id,
1397
+ children: children
1398
+ };
1399
+ parent.children.push(item);
1400
+ }
1401
+ } catch (err) {
1402
+ _iterator.e(err);
1403
+ } finally {
1404
+ _iterator.f();
1405
+ }
1406
+
1407
+ return root.children;
1408
+ }
1409
+ function findItemDeep(items, itemId) {
1410
+ for (var i = 0; i < items.length; i += 1) {
1411
+ var item = items[i] || {};
1412
+ var id = item.id,
1413
+ _item$children = item.children,
1414
+ children = _item$children === void 0 ? [] : _item$children;
1415
+
1416
+ if (id === itemId) {
1417
+ return item;
1418
+ }
1419
+
1420
+ if (children.length > 0) {
1421
+ var child = findItemDeep(children, itemId);
1422
+
1423
+ if (child) {
1424
+ return child;
1425
+ }
1426
+ }
1427
+ }
1428
+
1429
+ return undefined;
1430
+ }
1431
+ function removeItem(items, id) {
1432
+ var newItems = []; // eslint-disable-next-line no-restricted-syntax
1433
+
1434
+ var _iterator2 = _createForOfIteratorHelper__default["default"](items),
1435
+ _step2;
1436
+
1437
+ try {
1438
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
1439
+ var item = _step2.value;
1440
+
1441
+ if (item.id === id) {
1442
+ // eslint-disable-next-line no-continue
1443
+ continue;
1444
+ }
1445
+
1446
+ if (item.children.length) {
1447
+ item.children = removeItem(item.children, id);
1448
+ }
1449
+
1450
+ newItems.push(item);
1451
+ }
1452
+ } catch (err) {
1453
+ _iterator2.e(err);
1454
+ } finally {
1455
+ _iterator2.f();
1456
+ }
1457
+
1458
+ return newItems;
1459
+ }
1460
+ function setProperty(items, id, property, setter) {
1461
+ // eslint-disable-next-line no-restricted-syntax
1462
+ var _iterator3 = _createForOfIteratorHelper__default["default"](items),
1463
+ _step3;
1464
+
1465
+ try {
1466
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
1467
+ var item = _step3.value;
1468
+
1469
+ if (item.id === id) {
1470
+ item[property] = setter(item[property]); // eslint-disable-next-line no-continue
1471
+
1472
+ continue;
1473
+ }
1474
+
1475
+ if (item.children.length) {
1476
+ item.children = setProperty(item.children, id, property, setter);
1477
+ }
1478
+ }
1479
+ } catch (err) {
1480
+ _iterator3.e(err);
1481
+ } finally {
1482
+ _iterator3.f();
1483
+ }
1484
+
1485
+ return _toConsumableArray__default["default"](items);
1486
+ }
1487
+
1488
+ function countChildren(items) {
1489
+ var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
1490
+ return items.reduce(function (acc, _ref6) {
1491
+ var _ref6$children = _ref6.children,
1492
+ children = _ref6$children === void 0 ? [] : _ref6$children;
1493
+
1494
+ if (children.length) {
1495
+ return countChildren(children, acc + 1);
1496
+ }
1497
+
1498
+ return acc + 1;
1499
+ }, count);
1500
+ }
1501
+
1502
+ function getChildCount(items, id) {
1503
+ if (!id) {
1504
+ return 0;
1505
+ }
1506
+
1507
+ var item = findItemDeep(items, id);
1508
+ return item ? countChildren(item.children || []) : 0;
1509
+ }
1510
+ function removeChildrenOf(items, ids) {
1511
+ var excludeParentIds = _toConsumableArray__default["default"](ids);
1512
+
1513
+ return items.filter(function (item) {
1514
+ if (item.parentId && excludeParentIds.includes(item.parentId)) {
1515
+ var _item$children2 = item.children,
1516
+ children = _item$children2 === void 0 ? [] : _item$children2;
1517
+
1518
+ if (children.length) {
1519
+ excludeParentIds.push(item.id);
1520
+ }
1521
+
1522
+ return false;
1523
+ }
1524
+
1525
+ return true;
1158
1526
  });
1527
+ }
1528
+
1529
+ var directions = [core$1.KeyboardCode.Down, core$1.KeyboardCode.Right, core$1.KeyboardCode.Up, core$1.KeyboardCode.Left];
1530
+ var horizontal = [core$1.KeyboardCode.Left, core$1.KeyboardCode.Right];
1531
+ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(context, indentationWidth) {
1532
+ return function (event, _ref) {
1533
+ var currentCoordinates = _ref.currentCoordinates,
1534
+ _ref$context = _ref.context,
1535
+ active = _ref$context.active,
1536
+ over = _ref$context.over,
1537
+ collisionRect = _ref$context.collisionRect,
1538
+ droppableContainers = _ref$context.droppableContainers;
1539
+
1540
+ if (directions.includes(event.code)) {
1541
+ var _droppableContainers$;
1542
+
1543
+ if (!active || !collisionRect) {
1544
+ return;
1545
+ }
1546
+
1547
+ event.preventDefault();
1548
+ var _context$current = context.current,
1549
+ items = _context$current.items,
1550
+ offset = _context$current.offset;
1551
+
1552
+ if (horizontal.includes(event.code) && over !== null && over !== void 0 && over.id) {
1553
+ var _getProjection = getProjection(items, active.id, over.id, offset, indentationWidth),
1554
+ depth = _getProjection.depth,
1555
+ maxDepth = _getProjection.maxDepth,
1556
+ minDepth = _getProjection.minDepth;
1557
+
1558
+ switch (event.code) {
1559
+ case core$1.KeyboardCode.Left:
1560
+ if (depth > minDepth) {
1561
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentCoordinates), {}, {
1562
+ x: currentCoordinates.x - indentationWidth
1563
+ });
1564
+ }
1565
+
1566
+ break;
1567
+
1568
+ case core$1.KeyboardCode.Right:
1569
+ if (depth < maxDepth) {
1570
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentCoordinates), {}, {
1571
+ x: currentCoordinates.x + indentationWidth
1572
+ });
1573
+ }
1574
+
1575
+ break;
1576
+
1577
+ default:
1578
+ return undefined;
1579
+ }
1580
+
1581
+ return undefined;
1582
+ }
1583
+
1584
+ var containers = [];
1585
+ var overRect = over !== null && over !== void 0 && over.id ? (_droppableContainers$ = droppableContainers.get(over.id)) === null || _droppableContainers$ === void 0 ? void 0 : _droppableContainers$.rect.current : undefined;
1586
+
1587
+ if (overRect) {
1588
+ droppableContainers.forEach(function (container) {
1589
+ if (container !== null && container !== void 0 && container.disabled) {
1590
+ return;
1591
+ }
1592
+
1593
+ var rect = container === null || container === void 0 ? void 0 : container.rect.current;
1594
+
1595
+ if (!rect) {
1596
+ return;
1597
+ }
1598
+
1599
+ switch (event.code) {
1600
+ case core$1.KeyboardCode.Down:
1601
+ if (overRect.top < rect.top) {
1602
+ containers.push(container);
1603
+ }
1604
+
1605
+ break;
1606
+
1607
+ case core$1.KeyboardCode.Up:
1608
+ if (overRect.top > rect.top) {
1609
+ containers.push(container);
1610
+ }
1611
+
1612
+ break;
1613
+
1614
+ }
1615
+ });
1616
+ }
1617
+
1618
+ var collisions = core$1.closestCorners({
1619
+ active: active,
1620
+ collisionRect: collisionRect,
1621
+ pointerCoordinates: null,
1622
+ droppableContainers: containers
1623
+ });
1624
+ var closestId = core$1.getFirstCollision(collisions, 'id');
1625
+
1626
+ if (closestId && over !== null && over !== void 0 && over.id) {
1627
+ var _droppableContainers$2, _droppableContainers$3;
1628
+
1629
+ var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.node.current;
1630
+ var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : _droppableContainers$3.rect.current;
1631
+
1632
+ if (newNode && activeNodeRect) {
1633
+ var newRect = core$1.getClientRect(newNode, {
1634
+ ignoreTransform: true
1635
+ });
1636
+ var newItem = items.find(function (_ref2) {
1637
+ var id = _ref2.id;
1638
+ return id === closestId;
1639
+ });
1640
+ var activeItem = items.find(function (_ref3) {
1641
+ var id = _ref3.id;
1642
+ return id === active.id;
1643
+ });
1644
+
1645
+ if (newItem && activeItem) {
1646
+ var _getProjection2 = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth),
1647
+ _depth = _getProjection2.depth;
1648
+
1649
+ var topOffset = newRect.top > activeNodeRect.top ? Math.abs(activeNodeRect.height - newRect.height) : 0;
1650
+ var newCoordinates = {
1651
+ x: newRect.left + _depth * indentationWidth,
1652
+ y: newRect.top + topOffset
1653
+ };
1654
+ return newCoordinates;
1655
+ }
1656
+ }
1657
+ }
1658
+ }
1659
+
1660
+ return undefined;
1661
+ };
1662
+ };
1663
+
1664
+ var styles$3 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator","text":"micromag-editor-sortable-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","Count":"micromag-editor-sortable-sortable-tree-item-actions-Count","Text":"micromag-editor-sortable-sortable-tree-item-actions-Text","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children"};
1665
+
1666
+ var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "children"];
1667
+ var propTypes$a = {
1668
+ childCount: PropTypes__default["default"].number,
1669
+ clone: PropTypes__default["default"].bool,
1670
+ collapsed: PropTypes__default["default"].bool,
1671
+ depth: PropTypes__default["default"].number.isRequired,
1672
+ disableInteraction: PropTypes__default["default"].bool,
1673
+ disableSelection: PropTypes__default["default"].bool,
1674
+ ghost: PropTypes__default["default"].bool,
1675
+ // eslint-disable-next-line react/forbid-prop-types
1676
+ handleProps: PropTypes__default["default"].any,
1677
+ indicator: PropTypes__default["default"].bool,
1678
+ indentationWidth: PropTypes__default["default"].number.isRequired,
1679
+ value: PropTypes__default["default"].string,
1680
+ onCollapse: PropTypes__default["default"].func,
1681
+ onRemove: PropTypes__default["default"].func,
1682
+ onClick: PropTypes__default["default"].func,
1683
+ // eslint-disable-next-line react/forbid-prop-types
1684
+ wrapperRef: PropTypes__default["default"].any,
1685
+ style: PropTypes__default["default"].shape({
1686
+ width: PropTypes__default["default"].number.isRequired,
1687
+ height: PropTypes__default["default"].number.isRequired,
1688
+ transform: PropTypes__default["default"].string.isRequired
1689
+ }),
1690
+ showId: PropTypes__default["default"].bool,
1691
+ children: PropTypes__default["default"].node
1692
+ };
1693
+ var defaultProps$a = {
1694
+ childCount: null,
1695
+ clone: false,
1696
+ collapsed: false,
1697
+ disableInteraction: false,
1698
+ disableSelection: false,
1699
+ ghost: false,
1700
+ handleProps: null,
1701
+ indicator: false,
1702
+ value: null,
1703
+ onCollapse: null,
1704
+ onRemove: null,
1705
+ onClick: null,
1706
+ wrapperRef: null,
1707
+ style: null,
1708
+ showId: false,
1709
+ children: null
1710
+ };
1711
+ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1712
+ var _ref2;
1713
+
1714
+ var childCount = _ref.childCount,
1715
+ clone = _ref.clone,
1716
+ depth = _ref.depth,
1717
+ disableSelection = _ref.disableSelection,
1718
+ disableInteraction = _ref.disableInteraction,
1719
+ ghost = _ref.ghost,
1720
+ handleProps = _ref.handleProps,
1721
+ indentationWidth = _ref.indentationWidth,
1722
+ indicator = _ref.indicator,
1723
+ collapsed = _ref.collapsed,
1724
+ onCollapse = _ref.onCollapse,
1725
+ onRemove = _ref.onRemove;
1726
+ _ref.onClick;
1727
+ var style = _ref.style;
1728
+ _ref.value;
1729
+ var wrapperRef = _ref.wrapperRef;
1730
+ _ref.showId;
1731
+ var children = _ref.children,
1732
+ props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
1733
+
1734
+ return /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
1735
+ className: classNames__default["default"]([styles$3.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$3.clone, clone), _defineProperty__default["default"](_ref2, styles$3.ghost, ghost), _defineProperty__default["default"](_ref2, styles$3.indicator, indicator), _defineProperty__default["default"](_ref2, styles$3.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$3.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$3.withChildren, onCollapse !== null), _ref2)]),
1736
+ ref: wrapperRef,
1737
+ style: _objectSpread__default["default"]({
1738
+ marginLeft: "".concat(indentationWidth * depth, "px")
1739
+ }, style)
1740
+ }, props), /*#__PURE__*/React__default["default"].createElement("div", {
1741
+ className: styles$3.inner,
1742
+ ref: ref,
1743
+ style: {
1744
+ width: style.width,
1745
+ height: style.height
1746
+ }
1747
+ }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
1748
+ className: classNames__default["default"]([styles$3.button, styles$3.handle]),
1749
+ type: "button"
1750
+ }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1751
+ className: styles$3.icon,
1752
+ icon: freeSolidSvgIcons.faGripLines
1753
+ })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
1754
+ type: "button",
1755
+ onClick: onRemove
1756
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1757
+ icon: freeSolidSvgIcons.faTimes
1758
+ })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
1759
+ className: styles$3.count
1760
+ }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
1761
+ className: styles$3.collapsedCount
1762
+ }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
1763
+ type: "button",
1764
+ onClick: onCollapse,
1765
+ className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
1766
+ style: {
1767
+ width: style.width
1768
+ }
1769
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1770
+ icon: freeSolidSvgIcons.faAngleDown
1771
+ })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1772
+ className: styles$3.children
1773
+ }, children));
1774
+ });
1775
+ SortableTreeItemActions.propTypes = propTypes$a;
1776
+ SortableTreeItemActions.defaultProps = defaultProps$a;
1777
+
1778
+ var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "onCollapse", "onClickItem"];
1779
+ var propTypes$9 = {
1780
+ id: PropTypes__default["default"].string.isRequired,
1781
+ index: PropTypes__default["default"].number.isRequired,
1782
+ depth: PropTypes__default["default"].number.isRequired,
1783
+ component: PropTypes__default["default"].func,
1784
+ // eslint-disable-next-line react/forbid-prop-types
1785
+ value: PropTypes__default["default"].object,
1786
+ style: PropTypes__default["default"].shape({
1787
+ width: PropTypes__default["default"].number.isRequired,
1788
+ height: PropTypes__default["default"].number.isRequired,
1789
+ scaledWidth: PropTypes__default["default"].number.isRequired,
1790
+ scaledHeight: PropTypes__default["default"].number.isRequired,
1791
+ transform: PropTypes__default["default"].string.isRequired,
1792
+ scale: PropTypes__default["default"].number.isRequired
1793
+ }),
1794
+ smallScale: PropTypes__default["default"].number,
1795
+ onCollapse: PropTypes__default["default"].func,
1796
+ onClickItem: PropTypes__default["default"].func
1797
+ };
1798
+ var defaultProps$9 = {
1799
+ component: null,
1800
+ value: null,
1801
+ style: null,
1802
+ smallScale: 0.75,
1803
+ onCollapse: null,
1804
+ onClickItem: null
1805
+ };
1806
+
1807
+ var animateLayoutChanges = function animateLayoutChanges(_ref) {
1808
+ var isSorting = _ref.isSorting,
1809
+ wasDragging = _ref.wasDragging;
1810
+ return !(isSorting || wasDragging);
1159
1811
  };
1160
1812
 
1161
- var _excluded$2 = ["components"];
1813
+ var SortableTreeItem = function SortableTreeItem(_ref2) {
1814
+ var id = _ref2.id,
1815
+ index = _ref2.index,
1816
+ depth = _ref2.depth,
1817
+ Component = _ref2.component,
1818
+ value = _ref2.value,
1819
+ itemStyle = _ref2.style,
1820
+ smallScale = _ref2.smallScale,
1821
+ onCollapse = _ref2.onCollapse,
1822
+ onClickItem = _ref2.onClickItem,
1823
+ props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
1824
+
1825
+ var _useSortable = sortable.useSortable({
1826
+ id: id,
1827
+ animateLayoutChanges: animateLayoutChanges
1828
+ }),
1829
+ attributes = _useSortable.attributes,
1830
+ isDragging = _useSortable.isDragging,
1831
+ isSorting = _useSortable.isSorting,
1832
+ listeners = _useSortable.listeners,
1833
+ setDraggableNodeRef = _useSortable.setDraggableNodeRef,
1834
+ setDroppableNodeRef = _useSortable.setDroppableNodeRef,
1835
+ transform = _useSortable.transform,
1836
+ transition = _useSortable.transition;
1837
+
1838
+ var hasCollapse = onCollapse !== null;
1839
+ var _itemStyle$scaledWidt = itemStyle.scaledWidth,
1840
+ scaledWidth = _itemStyle$scaledWidt === void 0 ? 100 : _itemStyle$scaledWidt,
1841
+ _itemStyle$scaledHeig = itemStyle.scaledHeight,
1842
+ scaledHeight = _itemStyle$scaledHeig === void 0 ? 66 : _itemStyle$scaledHeig,
1843
+ _itemStyle$scale = itemStyle.scale,
1844
+ scale = _itemStyle$scale === void 0 ? 1 : _itemStyle$scale;
1845
+ var extraHeight = hasCollapse ? 30 : 0;
1846
+ var actionsStyle = {
1847
+ width: depth === 0 ? scaledWidth : scaledWidth * smallScale,
1848
+ height: depth === 0 ? scaledHeight + extraHeight : scaledHeight * smallScale,
1849
+ transform: utilities.CSS.Translate.toString(transform),
1850
+ transition: transition
1851
+ };
1852
+ var previewStyle = {
1853
+ width: itemStyle.width,
1854
+ height: itemStyle.height,
1855
+ transform: depth === 0 ? itemStyle.transform : "scale(".concat(scale * smallScale, ", ").concat(scale * smallScale, ")")
1856
+ };
1857
+
1858
+ var _ref3 = listeners || {},
1859
+ onPointerDown = _ref3.onPointerDown;
1162
1860
 
1163
- var updateScreen = function updateScreen(story, newScreenValue) {
1164
- var newScreenId = newScreenValue.id;
1861
+ var onClickAction = React.useCallback(function (e) {
1862
+ if (onClickItem !== null) {
1863
+ onClickItem(value, index);
1864
+ }
1165
1865
 
1166
- var _ref = story || {},
1167
- _ref$components = _ref.components,
1168
- components = _ref$components === void 0 ? [] : _ref$components,
1169
- currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$2);
1866
+ if (onPointerDown !== null) {
1867
+ onPointerDown(e);
1868
+ }
1869
+ }, [value, index, onClickItem, onPointerDown]);
1870
+ return /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
1871
+ ref: setDraggableNodeRef,
1872
+ wrapperRef: setDroppableNodeRef,
1873
+ style: actionsStyle,
1874
+ depth: depth,
1875
+ ghost: isDragging,
1876
+ disableSelection: iOS,
1877
+ disableInteraction: isSorting,
1878
+ handleProps: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, attributes), listeners), {}, {
1879
+ onPointerDown: onClickAction
1880
+ }),
1881
+ onCollapse: onCollapse
1882
+ }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement(Component, Object.assign({}, value, {
1883
+ previewStyle: previewStyle
1884
+ })) : null);
1885
+ };
1886
+ SortableTreeItem.propTypes = propTypes$9;
1887
+ SortableTreeItem.defaultProps = defaultProps$9;
1888
+
1889
+ var initialItems = [{
1890
+ id: 'Home',
1891
+ children: []
1892
+ }, {
1893
+ id: 'Collections',
1894
+ children: [{
1895
+ id: 'Spring',
1896
+ children: []
1897
+ }, {
1898
+ id: 'Summer',
1899
+ children: []
1900
+ }, {
1901
+ id: 'Fall',
1902
+ children: []
1903
+ }, {
1904
+ id: 'Winter',
1905
+ children: []
1906
+ }]
1907
+ }, {
1908
+ id: 'About Us',
1909
+ children: []
1910
+ }, {
1911
+ id: 'My Account',
1912
+ children: [{
1913
+ id: 'Addresses',
1914
+ children: []
1915
+ }, {
1916
+ id: 'Order History',
1917
+ children: []
1918
+ }]
1919
+ }];
1920
+ var measuring = {
1921
+ droppable: {
1922
+ strategy: core$1.MeasuringStrategy.Always
1923
+ }
1924
+ };
1925
+
1926
+ var dropAnimation = _objectSpread__default["default"](_objectSpread__default["default"]({}, core$1.defaultDropAnimation), {}, {
1927
+ dragSourceOpacity: 0.5
1928
+ });
1170
1929
 
1171
- var index = components.findIndex(function (it) {
1172
- return it.id === newScreenId;
1173
- });
1174
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
1175
- components: [].concat(_toConsumableArray__default["default"](components.slice(0, index)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, components[index]), newScreenValue)], _toConsumableArray__default["default"](components.slice(index + 1)))
1930
+ var adjustTranslate = function adjustTranslate(_ref) {
1931
+ var transform = _ref.transform;
1932
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, transform), {}, {
1933
+ y: transform.y - 25
1176
1934
  });
1177
1935
  };
1178
1936
 
1179
- var getFieldByName = function getFieldByName(fields, name) {
1180
- return fields.reduce(function (foundField, it) {
1181
- if (foundField !== null) {
1182
- return foundField;
1183
- }
1184
-
1185
- var _it$name = it.name,
1186
- fieldName = _it$name === void 0 ? null : _it$name,
1187
- _it$fields = it.fields,
1188
- subFields = _it$fields === void 0 ? [] : _it$fields;
1937
+ var propTypes$8 = {
1938
+ collapsible: PropTypes__default["default"].bool,
1939
+ // eslint-disable-next-line react/forbid-prop-types
1940
+ items: PropTypes__default["default"].array,
1941
+ indentationWidth: PropTypes__default["default"].number,
1942
+ indicator: PropTypes__default["default"].bool,
1943
+ removable: PropTypes__default["default"].bool,
1944
+ component: PropTypes__default["default"].func,
1945
+ itemStyle: PropTypes__default["default"].shape({}),
1946
+ onClickItem: PropTypes__default["default"].func,
1947
+ onChange: PropTypes__default["default"].func
1948
+ };
1949
+ var defaultProps$8 = {
1950
+ collapsible: true,
1951
+ items: initialItems,
1952
+ indentationWidth: 30,
1953
+ indicator: false,
1954
+ removable: false,
1955
+ component: null,
1956
+ itemStyle: null,
1957
+ onClickItem: null,
1958
+ onChange: null
1959
+ };
1960
+ var SortableTree = function SortableTree(_ref2) {
1961
+ var collapsible = _ref2.collapsible,
1962
+ defaultItems = _ref2.items,
1963
+ indicator = _ref2.indicator,
1964
+ indentationWidth = _ref2.indentationWidth,
1965
+ removable = _ref2.removable,
1966
+ component = _ref2.component,
1967
+ itemStyle = _ref2.itemStyle,
1968
+ onClickItem = _ref2.onClickItem,
1969
+ onChange = _ref2.onChange;
1970
+
1971
+ var _useState = React.useState(function () {
1972
+ return defaultItems;
1973
+ }),
1974
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
1975
+ items = _useState2[0],
1976
+ setItems = _useState2[1];
1189
1977
 
1190
- if (name !== null && fieldName === name) {
1191
- return it;
1192
- }
1978
+ var _useState3 = React.useState(null),
1979
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
1980
+ activeId = _useState4[0],
1981
+ setActiveId = _useState4[1];
1193
1982
 
1194
- return getFieldByName(subFields, name);
1195
- }, null);
1196
- };
1983
+ var _useState5 = React.useState(null),
1984
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1985
+ overId = _useState6[0],
1986
+ setOverId = _useState6[1];
1197
1987
 
1198
- var useFormTransition = function useFormTransition(url, screenIndex, styles) {
1199
- var lastPageRef = React.useRef({
1200
- url: url,
1201
- screenIndex: screenIndex
1988
+ var _useState7 = React.useState(0),
1989
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1990
+ offsetLeft = _useState8[0],
1991
+ setOffsetLeft = _useState8[1];
1992
+
1993
+ var _useState9 = React.useState(null),
1994
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
1995
+ currentPosition = _useState10[0],
1996
+ setCurrentPosition = _useState10[1];
1997
+
1998
+ var flattenedItems = React.useMemo(function () {
1999
+ var flattenedTree = flattenTree(items); // console.log('yo', items, flattenedTree);
2000
+
2001
+ var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
2002
+ var _ref3$children = _ref3.children,
2003
+ children = _ref3$children === void 0 ? [] : _ref3$children,
2004
+ collapsed = _ref3.collapsed,
2005
+ id = _ref3.id;
2006
+ return collapsed && children.length ? [].concat(_toConsumableArray__default["default"](acc), [id]) : acc;
2007
+ }, []) || null;
2008
+ return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray__default["default"](collapsedItems)) : collapsedItems);
2009
+ }, [activeId, items]);
2010
+ var projected = activeId && overId ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
2011
+ var sensorContext = React.useRef({
2012
+ items: flattenedItems,
2013
+ offset: offsetLeft
1202
2014
  });
1203
- var direction = React.useMemo(function () {
1204
- var _lastPageRef$current = lastPageRef.current,
1205
- lastScreenIndex = _lastPageRef$current.screenIndex,
1206
- lastUrl = _lastPageRef$current.url;
1207
- lastPageRef.current.url = url;
1208
- lastPageRef.current.screenIndex = screenIndex;
1209
-
1210
- if (screenIndex !== lastScreenIndex) {
1211
- // return screenIndex > lastScreenIndex ? 'bottom' : 'top';
1212
- return null;
1213
- }
1214
2015
 
1215
- var urlSplit = url.split('/');
1216
- var lastUrlSplit = lastUrl.split('/');
1217
- var currentPartsCount = urlSplit.length;
1218
- var previousPartsCount = lastUrlSplit.length;
1219
- var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
1220
- var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
1221
- currentPartsCount -= isSettings ? 1 : 0;
1222
- previousPartsCount -= wasSettings ? 1 : 0;
1223
- return currentPartsCount >= previousPartsCount ? 'right' : 'left';
1224
- }, [url, screenIndex]);
1225
- var name = React.useMemo(function () {
1226
- var _classNames, _classNames2, _classNames3;
2016
+ var _useState11 = React.useState(function () {
2017
+ return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
2018
+ }),
2019
+ _useState12 = _slicedToArray__default["default"](_useState11, 1),
2020
+ coordinateGetter = _useState12[0];
1227
2021
 
2022
+ var sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor), core$1.useSensor(core$1.KeyboardSensor, {
2023
+ coordinateGetter: coordinateGetter
2024
+ }));
2025
+ var sortedIds = React.useMemo(function () {
2026
+ return flattenedItems.map(function (_ref4) {
2027
+ var id = _ref4.id;
2028
+ return id;
2029
+ });
2030
+ }, [flattenedItems]);
2031
+ var activeItem = activeId ? flattenedItems.find(function (_ref5) {
2032
+ var id = _ref5.id;
2033
+ return id === activeId;
2034
+ }) : null;
2035
+ React.useEffect(function () {
2036
+ sensorContext.current = {
2037
+ items: flattenedItems,
2038
+ offset: offsetLeft
2039
+ };
2040
+ }, [flattenedItems, offsetLeft]);
2041
+ var announcements = React.useMemo(function () {
1228
2042
  return {
1229
- enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
1230
- enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
1231
- leave: styles.leave || 'none',
1232
- leaveActive: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty__default["default"](_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty__default["default"](_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty__default["default"](_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
2043
+ onDragStart: function onDragStart(id) {
2044
+ return "Picked up ".concat(id, ".");
2045
+ },
2046
+ onDragMove: function onDragMove(id, currentOverId) {
2047
+ return getMovementAnnouncement('onDragMove', id, currentOverId);
2048
+ },
2049
+ onDragOver: function onDragOver(id, currentOverId) {
2050
+ return getMovementAnnouncement('onDragOver', id, currentOverId);
2051
+ },
2052
+ onDragEnd: function onDragEnd(id, currentOverId) {
2053
+ // console.log('drag end', flattenedItems);
2054
+ if (onChange !== null) {
2055
+ onChange((flattenedItems || []).map(function (_ref6) {
2056
+ var itemId = _ref6.id,
2057
+ _ref6$children = _ref6.children,
2058
+ children = _ref6$children === void 0 ? [] : _ref6$children,
2059
+ _ref6$parentId = _ref6.parentId,
2060
+ parentId = _ref6$parentId === void 0 ? null : _ref6$parentId,
2061
+ _ref6$collapsed = _ref6.collapsed,
2062
+ collapsed = _ref6$collapsed === void 0 ? false : _ref6$collapsed;
2063
+ return {
2064
+ id: itemId,
2065
+ props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
2066
+ group: {
2067
+ collapsed: collapsed,
2068
+ mergeNavItems: true
2069
+ }
2070
+ } : {
2071
+ group: null
2072
+ }), parentId !== null ? {
2073
+ parentId: parentId
2074
+ } : {
2075
+ parentId: null
2076
+ })
2077
+ };
2078
+ }));
2079
+ }
2080
+
2081
+ return getMovementAnnouncement('onDragEnd', id, currentOverId);
2082
+ },
2083
+ onDragCancel: function onDragCancel(id) {
2084
+ return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
2085
+ }
1233
2086
  };
1234
- }, [direction, screenIndex]);
1235
- return {
1236
- direction: direction,
1237
- name: name,
1238
- timeout: direction === 'left' || direction === 'right' ? 300 : 10
1239
- };
1240
- };
2087
+ }, [flattenedItems, onChange]); // Initial tree setup from list
1241
2088
 
1242
- var _excluded$1 = ["className"];
1243
- var propTypes$7 = {
1244
- className: PropTypes__default["default"].string
1245
- };
1246
- var defaultProps$7 = {
1247
- className: null
1248
- };
2089
+ React.useEffect(function () {
2090
+ // console.log('fuck off');
2091
+ setItems(buildTree(defaultItems));
2092
+ }, []);
2093
+ return /*#__PURE__*/React__default["default"].createElement(core$1.DndContext, {
2094
+ announcements: announcements,
2095
+ sensors: sensors,
2096
+ collisionDetection: core$1.closestCenter,
2097
+ measuring: measuring,
2098
+ onDragStart: handleDragStart,
2099
+ onDragMove: handleDragMove,
2100
+ onDragOver: handleDragOver,
2101
+ onDragEnd: handleDragEnd,
2102
+ onDragCancel: handleDragCancel
2103
+ }, /*#__PURE__*/React__default["default"].createElement(sortable.SortableContext, {
2104
+ items: sortedIds,
2105
+ strategy: sortable.verticalListSortingStrategy
2106
+ }, flattenedItems.map(function (_ref7, idx) {
2107
+ var id = _ref7.id,
2108
+ _ref7$children = _ref7.children,
2109
+ children = _ref7$children === void 0 ? [] : _ref7$children,
2110
+ collapsed = _ref7.collapsed,
2111
+ depth = _ref7.depth,
2112
+ _ref7$value = _ref7.value,
2113
+ value = _ref7$value === void 0 ? null : _ref7$value;
2114
+ return /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2115
+ key: id,
2116
+ id: id,
2117
+ depth: id === activeId && projected ? projected.depth : depth,
2118
+ indentationWidth: indentationWidth,
2119
+ indicator: indicator,
2120
+ collapsed: Boolean(collapsed && children.length),
2121
+ onCollapse: collapsible && children.length ? function () {
2122
+ return handleCollapse(id);
2123
+ } : undefined,
2124
+ onRemove: removable ? function () {
2125
+ return handleRemove(id);
2126
+ } : undefined,
2127
+ childCount: getChildCount(items, id),
2128
+ component: component,
2129
+ value: value,
2130
+ style: itemStyle,
2131
+ onClickItem: onClickItem,
2132
+ index: idx
2133
+ });
2134
+ }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(core$1.DragOverlay, {
2135
+ dropAnimation: dropAnimation,
2136
+ modifiers: indicator ? [adjustTranslate] : undefined
2137
+ }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2138
+ id: activeId,
2139
+ depth: activeItem.depth,
2140
+ clone: true,
2141
+ childCount: getChildCount(items, activeId) + 1,
2142
+ indentationWidth: indentationWidth,
2143
+ component: component,
2144
+ value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value,
2145
+ onClickItem: onClickItem,
2146
+ index: flattenedItems.findIndex(function (_ref8) {
2147
+ var id = _ref8.id;
2148
+ return activeId === id;
2149
+ }),
2150
+ style: itemStyle
2151
+ }) : null), document.body)));
2152
+
2153
+ function handleDragStart(_ref9) {
2154
+ var newActiveId = _ref9.active.id;
2155
+ setActiveId(newActiveId);
2156
+ setOverId(newActiveId);
2157
+ var newActiveItem = flattenedItems.find(function (_ref10) {
2158
+ var id = _ref10.id;
2159
+ return id === newActiveId;
2160
+ });
1249
2161
 
1250
- var SettingsButton = function SettingsButton(_ref) {
1251
- var className = _ref.className,
1252
- props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
2162
+ if (newActiveItem) {
2163
+ setCurrentPosition({
2164
+ parentId: newActiveItem.parentId,
2165
+ overId: activeId
2166
+ });
2167
+ }
1253
2168
 
1254
- return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
1255
- className: className,
1256
- theme: "secondary",
1257
- size: "sm",
1258
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1259
- icon: freeSolidSvgIcons.faCogs
1260
- })
1261
- }, props));
1262
- };
2169
+ document.body.style.setProperty('cursor', 'grabbing');
2170
+ }
2171
+
2172
+ function handleDragMove(_ref11) {
2173
+ var delta = _ref11.delta;
2174
+ setOffsetLeft(delta.x);
2175
+ }
2176
+
2177
+ function handleDragOver(_ref12) {
2178
+ var _over$id;
2179
+
2180
+ var over = _ref12.over;
2181
+ setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
2182
+ }
2183
+
2184
+ function resetState() {
2185
+ setOverId(null);
2186
+ setActiveId(null);
2187
+ setOffsetLeft(0);
2188
+ setCurrentPosition(null);
2189
+ document.body.style.setProperty('cursor', '');
2190
+ }
2191
+
2192
+ function handleDragEnd(_ref13) {
2193
+ var active = _ref13.active,
2194
+ over = _ref13.over;
2195
+ resetState();
2196
+
2197
+ if (projected && over) {
2198
+ var depth = projected.depth,
2199
+ parentId = projected.parentId;
2200
+ var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
2201
+ var overIndex = clonedItems.findIndex(function (_ref14) {
2202
+ var id = _ref14.id;
2203
+ return id === over.id;
2204
+ });
2205
+ var activeIndex = clonedItems.findIndex(function (_ref15) {
2206
+ var id = _ref15.id;
2207
+ return id === active.id;
2208
+ });
2209
+ var activeTreeItem = clonedItems[activeIndex];
2210
+ var maxDepth = getMaxDepth(activeTreeItem); // Un-merge and flatten
2211
+
2212
+ if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
2213
+ var _loop = function _loop(i) {
2214
+ var childId = activeTreeItem.children[i].id;
2215
+ var childIndex = clonedItems.findIndex(function (_ref16) {
2216
+ var id = _ref16.id;
2217
+ return id === childId;
2218
+ });
2219
+ clonedItems[childIndex].parentId = parentId;
2220
+ clonedItems[childIndex].depth = depth;
2221
+ };
1263
2222
 
1264
- SettingsButton.propTypes = propTypes$7;
1265
- SettingsButton.defaultProps = defaultProps$7;
2223
+ for (var i = 0; i < activeTreeItem.children.length; i += 1) {
2224
+ _loop(i);
2225
+ }
1266
2226
 
1267
- var styles$4 = {"container":"micromag-editor-menus-breadcrumb-container"};
2227
+ activeTreeItem.children = [];
2228
+ }
1268
2229
 
1269
- var propTypes$6 = {
1270
- story: core.PropTypes.story,
1271
- screenId: PropTypes__default["default"].string,
1272
- field: PropTypes__default["default"].string,
1273
- form: PropTypes__default["default"].string,
1274
- url: PropTypes__default["default"].string.isRequired,
1275
- className: PropTypes__default["default"].string
1276
- };
1277
- var defaultProps$6 = {
1278
- story: null,
1279
- screenId: null,
1280
- field: null,
1281
- form: null,
1282
- className: null
1283
- };
2230
+ clonedItems[activeIndex] = _objectSpread__default["default"](_objectSpread__default["default"]({}, activeTreeItem), {}, {
2231
+ depth: depth,
2232
+ parentId: parentId
2233
+ });
2234
+ var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
2235
+ var newItems = buildTree(sortedItems);
2236
+ setItems(newItems);
2237
+ }
2238
+ }
1284
2239
 
1285
- var Breadcrumb = function Breadcrumb(_ref) {
1286
- var story = _ref.story,
1287
- screenId = _ref.screenId,
1288
- field = _ref.field,
1289
- form = _ref.form,
1290
- url = _ref.url,
1291
- className = _ref.className;
1292
- var intl = reactIntl.useIntl();
2240
+ function handleDragCancel() {
2241
+ resetState();
2242
+ }
1293
2243
 
1294
- var _ref2 = story || {},
1295
- _ref2$components = _ref2.components,
1296
- screens = _ref2$components === void 0 ? [] : _ref2$components;
2244
+ function handleRemove(id) {
2245
+ setItems(function (newItems) {
2246
+ return removeItem(newItems, id);
2247
+ });
2248
+ }
1297
2249
 
1298
- var history = reactRouter.useHistory();
1299
- var screensManager = contexts.useScreensManager();
1300
- var fieldsManager = contexts.useFieldsManager();
1301
- var items = React.useMemo(function () {
1302
- var screenIndex = screens.findIndex(function (it) {
1303
- return it.id === screenId;
2250
+ function handleCollapse(id) {
2251
+ setItems(function (newItems) {
2252
+ return setProperty(newItems, id, 'collapsed', function (value) {
2253
+ return !value;
2254
+ });
1304
2255
  });
2256
+ }
1305
2257
 
1306
- if (!screens[screenIndex]) {
1307
- return [];
2258
+ function getMovementAnnouncement(eventName, currentActiveId, currentOverId) {
2259
+ if (currentOverId && projected) {
2260
+ if (eventName !== 'onDragEnd') {
2261
+ if (currentPosition && projected.parentId === currentPosition.parentId && currentOverId === currentPosition.overId) {
2262
+ return;
2263
+ }
2264
+
2265
+ setCurrentPosition({
2266
+ parentId: projected.parentId,
2267
+ overId: currentOverId
2268
+ });
2269
+ }
2270
+
2271
+ var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
2272
+ var overIndex = clonedItems.findIndex(function (_ref17) {
2273
+ var id = _ref17.id;
2274
+ return id === currentOverId;
2275
+ });
2276
+ var activeIndex = clonedItems.findIndex(function (_ref18) {
2277
+ var id = _ref18.id;
2278
+ return id === currentActiveId;
2279
+ });
2280
+ var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
2281
+ var previousItem = sortedItems[overIndex - 1];
2282
+ var newAnnouncement;
2283
+ var movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
2284
+ var nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
2285
+
2286
+ if (!previousItem) {
2287
+ var nextItem = sortedItems[overIndex + 1];
2288
+ newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " before ").concat(nextItem.id, ".");
2289
+ } else if (projected.depth > previousItem.depth) {
2290
+ newAnnouncement = "".concat(currentActiveId, " was ").concat(nestedVerb, " under ").concat(previousItem.id, ".");
2291
+ } else {
2292
+ var previousSibling = previousItem;
2293
+
2294
+ var _loop2 = function _loop2() {
2295
+ var _previousSibling = previousSibling,
2296
+ parentId = _previousSibling.parentId;
2297
+ previousSibling = sortedItems.find(function (_ref19) {
2298
+ var id = _ref19.id;
2299
+ return id === parentId;
2300
+ });
2301
+ };
2302
+
2303
+ while (previousSibling && projected.depth < previousSibling.depth) {
2304
+ _loop2();
2305
+ }
2306
+
2307
+ if (previousSibling) {
2308
+ newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " after ").concat(previousSibling.id, ".");
2309
+ }
2310
+ } // eslint-disable-next-line consistent-return
2311
+
2312
+
2313
+ return newAnnouncement;
1308
2314
  }
2315
+ }
2316
+ };
2317
+ SortableTree.propTypes = propTypes$8;
2318
+ SortableTree.defaultProps = defaultProps$8;
1309
2319
 
1310
- var type = screens[screenIndex].type;
1311
- var fieldItems = [];
2320
+ var _excluded$2 = ["className", "screen", "type", "onClick"],
2321
+ _excluded2 = ["id", "screen"];
2322
+ var propTypes$7 = {
2323
+ items: core.PropTypes.menuItems,
2324
+ withPreview: PropTypes__default["default"].bool,
2325
+ withPlaceholder: PropTypes__default["default"].bool,
2326
+ settings: PropTypes__default["default"].node,
2327
+ previewMinWidth: PropTypes__default["default"].number,
2328
+ sortable: PropTypes__default["default"].bool,
2329
+ isTree: PropTypes__default["default"].bool,
2330
+ isVertical: PropTypes__default["default"].bool,
2331
+ noWrap: PropTypes__default["default"].bool,
2332
+ className: PropTypes__default["default"].string,
2333
+ itemClassName: PropTypes__default["default"].string,
2334
+ buttonClassName: PropTypes__default["default"].string,
2335
+ settingsClassName: PropTypes__default["default"].string,
2336
+ onClickItem: PropTypes__default["default"].func,
2337
+ onOrderChange: PropTypes__default["default"].func
2338
+ };
2339
+ var defaultProps$7 = {
2340
+ items: [],
2341
+ withPreview: false,
2342
+ withPlaceholder: false,
2343
+ settings: null,
2344
+ previewMinWidth: 320,
2345
+ sortable: false,
2346
+ isTree: false,
2347
+ isVertical: false,
2348
+ noWrap: false,
2349
+ className: null,
2350
+ itemClassName: null,
2351
+ buttonClassName: null,
2352
+ settingsClassName: null,
2353
+ onClickItem: null,
2354
+ onOrderChange: null
2355
+ };
1312
2356
 
1313
- if (field !== null) {
1314
- var _screensManager$getDe = screensManager.getDefinition(type),
1315
- _screensManager$getDe2 = _screensManager$getDe.fields,
1316
- screenFields = _screensManager$getDe2 === void 0 ? [] : _screensManager$getDe2;
2357
+ var ScreensMenu = function ScreensMenu(_ref) {
2358
+ var _ref10;
1317
2359
 
1318
- var fields = [].concat(_toConsumableArray__default["default"](screenFields), [utils.getScreenExtraField(intl)]);
1319
- var fieldPath = field.split('/');
1320
- var lastKeyIndex = fieldPath.length - 1;
1321
- var parentItem = null;
1322
- fieldPath.reduce(function (currentFields, key, keyIndex) {
1323
- var _currentFields$type = currentFields.type,
1324
- fieldType = _currentFields$type === void 0 ? null : _currentFields$type;
1325
- var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
1326
- var _fieldsDef$fields = fieldsDef.fields,
1327
- subFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
1328
- _fieldsDef$settings = fieldsDef.settings,
1329
- settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
1330
- _fieldsDef$itemsField = fieldsDef.itemsField,
1331
- itemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
1332
- var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
1333
- var currentSettings = settings !== null ? getFieldByName(settings, key) : null;
1334
- var isCurrentSubfields = currentSubfields !== null;
1335
- var isCurrentSettings = currentSettings !== null;
1336
- var isListItems = itemsField !== null && !!key.match(/^[0-9]+$/);
1337
- var isLastIndex = keyIndex === lastKeyIndex;
1338
- var pathPrefix = "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex + 1).join('/'));
1339
- var pathSuffix = isLastIndex && form !== null ? "/".concat(form) : '';
1340
- var addNewItem = isLastIndex || isListItems;
1341
- var itemPath = "".concat(pathPrefix).concat(pathSuffix);
1342
- var nextFields = null;
2360
+ var items = _ref.items,
2361
+ withPreview = _ref.withPreview,
2362
+ withPlaceholder = _ref.withPlaceholder,
2363
+ settings = _ref.settings,
2364
+ previewMinWidth = _ref.previewMinWidth,
2365
+ isVertical = _ref.isVertical,
2366
+ noWrap = _ref.noWrap,
2367
+ className = _ref.className,
2368
+ itemClassName = _ref.itemClassName,
2369
+ buttonClassName = _ref.buttonClassName,
2370
+ settingsClassName = _ref.settingsClassName,
2371
+ sortable = _ref.sortable,
2372
+ isTree = _ref.isTree,
2373
+ onClickItem = _ref.onClickItem,
2374
+ onOrderChange = _ref.onOrderChange;
1343
2375
 
1344
- if (isCurrentSubfields) {
1345
- nextFields = currentSubfields;
1346
- } else if (isCurrentSettings) {
1347
- nextFields = currentSettings;
2376
+ var _useResizeObserver = hooks.useResizeObserver({}, [items]),
2377
+ containerRef = _useResizeObserver.ref,
2378
+ contentRect = _useResizeObserver.entry.contentRect;
1348
2379
 
1349
- if (parentItem !== null) {
1350
- fieldItems.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, parentItem), {}, {
1351
- url: "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex).join('/'), "/settings")
1352
- }));
1353
- }
1354
- } else if (isListItems) {
1355
- nextFields = itemsField;
1356
- }
2380
+ var _useResizeObserver2 = hooks.useResizeObserver({}, [items]),
2381
+ columnRef = _useResizeObserver2.ref,
2382
+ columnRect = _useResizeObserver2.entry.contentRect;
1357
2383
 
1358
- var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
1359
- var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
2384
+ var previewStyle = React.useMemo(function () {
2385
+ var _ref2 = contentRect || {},
2386
+ _ref2$width = _ref2.width,
2387
+ itemWidth = _ref2$width === void 0 ? 0 : _ref2$width,
2388
+ _ref2$height = _ref2.height,
2389
+ itemHeight = _ref2$height === void 0 ? 0 : _ref2$height;
1360
2390
 
1361
- var _ref3 = parentItem || {},
1362
- _ref3$label = _ref3.label,
1363
- parentItemLabel = _ref3$label === void 0 ? null : _ref3$label;
2391
+ var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 2 / 3;
1364
2392
 
1365
- var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
1366
- var item = {
1367
- url: itemPath,
1368
- label: finalItemLabel || '',
1369
- active: false
1370
- };
2393
+ var _getSizeWithinBounds = size.getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
2394
+ previewScale = _getSizeWithinBounds.scale;
1371
2395
 
1372
- if (addNewItem) {
1373
- fieldItems.push(item);
1374
- }
2396
+ return {
2397
+ width: previewMinWidth,
2398
+ height: previewMinWidth * ratio,
2399
+ transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
2400
+ };
2401
+ }, [previewMinWidth, contentRect]);
2402
+ var treeStyle = React.useMemo(function () {
2403
+ var _ref3 = columnRect || {},
2404
+ _ref3$width = _ref3.width,
2405
+ itemWidth = _ref3$width === void 0 ? 0 : _ref3$width;
1375
2406
 
1376
- parentItem = item;
1377
- return nextFields;
1378
- }, {
1379
- fields: fields
1380
- });
1381
- }
2407
+ var itemHeight = itemWidth * 3 / 2;
2408
+ var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 0;
1382
2409
 
1383
- var finalItems = [{
1384
- label: intl.formatMessage({
1385
- id: "AHvHaY",
1386
- defaultMessage: [{
1387
- "type": 0,
1388
- "value": "Parameters"
1389
- }]
1390
- }),
1391
- url: "/".concat(screenId),
1392
- active: false
1393
- }].concat(fieldItems).filter(function (it) {
1394
- return it !== null;
1395
- });
1396
- var lastItemsIndex = finalItems.length - 1;
1397
- return finalItems.map(function (it, index) {
1398
- return index === lastItemsIndex ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
1399
- url: url,
1400
- active: true
1401
- }) : it;
2410
+ var _getSizeWithinBounds2 = size.getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
2411
+ scaledWidth = _getSizeWithinBounds2.width,
2412
+ scaledHeight = _getSizeWithinBounds2.height,
2413
+ previewScale = _getSizeWithinBounds2.scale;
2414
+
2415
+ return {
2416
+ width: previewMinWidth,
2417
+ height: previewMinWidth * ratio,
2418
+ transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")"),
2419
+ scale: previewScale,
2420
+ scaledWidth: scaledWidth,
2421
+ scaledHeight: scaledHeight
2422
+ };
2423
+ }, [previewMinWidth, columnRect]);
2424
+ var itemsElements = !isTree ? items.map(function (_ref4, index) {
2425
+ var _ref5;
2426
+
2427
+ var _ref4$className = _ref4.className,
2428
+ itemCustomClassName = _ref4$className === void 0 ? null : _ref4$className,
2429
+ screen = _ref4.screen,
2430
+ type = _ref4.type,
2431
+ _ref4$onClick = _ref4.onClick,
2432
+ onClick = _ref4$onClick === void 0 ? null : _ref4$onClick,
2433
+ item = _objectWithoutProperties__default["default"](_ref4, _excluded$2);
2434
+
2435
+ return /*#__PURE__*/React__default["default"].createElement("li", {
2436
+ key: item.id,
2437
+ className: classNames__default["default"]([styles$6.item, (_ref5 = {}, _defineProperty__default["default"](_ref5, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
2438
+ "data-screen-id": item.id,
2439
+ ref: index === 0 ? containerRef : null
2440
+ }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
2441
+ index: index,
2442
+ screen: _objectSpread__default["default"](_objectSpread__default["default"]({}, screen), withPlaceholder ? {
2443
+ type: type
2444
+ } : null),
2445
+ buttonClassName: buttonClassName,
2446
+ previewStyle: previewStyle,
2447
+ withPreview: withPreview,
2448
+ withPlaceholder: withPlaceholder,
2449
+ onClick: onClick,
2450
+ onClickItem: onClickItem
2451
+ }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2452
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
2453
+ }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
2454
+ }) : [];
2455
+ var sortableItems = React.useMemo(function () {
2456
+ return isTree ? items.map(function (_ref7) {
2457
+ var id = _ref7.id,
2458
+ _ref7$screen = _ref7.screen,
2459
+ screen = _ref7$screen === void 0 ? {} : _ref7$screen,
2460
+ props = _objectWithoutProperties__default["default"](_ref7, _excluded2);
2461
+
2462
+ var _screen$parentId = screen.parentId,
2463
+ parentId = _screen$parentId === void 0 ? null : _screen$parentId,
2464
+ _screen$group = screen.group,
2465
+ group = _screen$group === void 0 ? {} : _screen$group;
2466
+
2467
+ var _ref8 = group || {},
2468
+ _ref8$collapsed = _ref8.collapsed,
2469
+ collapsed = _ref8$collapsed === void 0 ? true : _ref8$collapsed;
2470
+
2471
+ return _objectSpread__default["default"]({
2472
+ id: id,
2473
+ parentId: parentId,
2474
+ collapsed: collapsed,
2475
+ value: {
2476
+ id: id,
2477
+ screen: screen
2478
+ }
2479
+ }, props);
2480
+ }, []) : items.map(function (_ref9) {
2481
+ var id = _ref9.id;
2482
+ return {
2483
+ id: id
2484
+ };
1402
2485
  });
1403
- }, [intl, screens, screenId, field, form, url, screensManager, fieldsManager]);
1404
- var itemsLength = items.length;
1405
- var onClickBack = React.useCallback(function () {
1406
- history.push(items[itemsLength - 2].url);
1407
- }, [items]);
1408
- var withBack = itemsLength > 1;
1409
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withBack ? /*#__PURE__*/React__default["default"].createElement(components.BackButton, {
1410
- onClick: onClickBack,
1411
- className: "mr-2"
1412
- }) : null, /*#__PURE__*/React__default["default"].createElement(components.Breadcrumb, {
1413
- items: items,
1414
- theme: "secondary",
1415
- withoutBar: true,
1416
- noWrap: true,
1417
- className: classNames__default["default"]([styles$4.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
1418
- }));
2486
+ }, [items, isTree]);
2487
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2488
+ className: classNames__default["default"]([styles$6.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$6.noWrap, noWrap), _defineProperty__default["default"](_ref10, styles$6.isVertical, isVertical), _defineProperty__default["default"](_ref10, styles$6.isTree, isTree), _defineProperty__default["default"](_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref10, className, className), _ref10)]),
2489
+ ref: columnRef
2490
+ }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
2491
+ items: sortableItems,
2492
+ component: ScreenWithPreview,
2493
+ itemStyle: treeStyle,
2494
+ onClickItem: onClickItem,
2495
+ onChange: onOrderChange
2496
+ }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
2497
+ list: sortableItems,
2498
+ setList: onOrderChange,
2499
+ animation: 200,
2500
+ delayOnTouchStart: true,
2501
+ delay: 2,
2502
+ tag: "ul",
2503
+ className: styles$6.items
2504
+ }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React__default["default"].createElement("ul", {
2505
+ className: styles$6.items
2506
+ }, itemsElements) : null);
1419
2507
  };
1420
2508
 
1421
- Breadcrumb.propTypes = propTypes$6;
1422
- Breadcrumb.defaultProps = defaultProps$6;
2509
+ ScreensMenu.propTypes = propTypes$7;
2510
+ ScreensMenu.defaultProps = defaultProps$7;
1423
2511
 
1424
- var styles$3 = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
2512
+ var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title"};
1425
2513
 
1426
- var propTypes$5 = {
1427
- value: core.PropTypes.component,
2514
+ var propTypes$6 = {
2515
+ screens: core.PropTypes.screenDefinitions,
2516
+ selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
1428
2517
  className: PropTypes__default["default"].string,
1429
- gotoFieldForm: PropTypes__default["default"].func.isRequired,
1430
- closeFieldForm: PropTypes__default["default"].func.isRequired,
1431
- onChange: PropTypes__default["default"].func // onClickDelete: PropTypes.func,
1432
-
2518
+ onClickItem: PropTypes__default["default"].func
1433
2519
  };
1434
- var defaultProps$5 = {
1435
- value: null,
2520
+ var defaultProps$6 = {
2521
+ screens: null,
2522
+ selectedTypes: null,
1436
2523
  className: null,
1437
- onChange: null // onClickDelete: null,
1438
-
2524
+ onClickItem: null
1439
2525
  };
1440
2526
 
1441
- var ScreenForm = function ScreenForm(_ref) {
1442
- var value = _ref.value,
2527
+ var ScreenTypes = function ScreenTypes(_ref) {
2528
+ var screens = _ref.screens,
2529
+ selectedTypes = _ref.selectedTypes,
1443
2530
  className = _ref.className,
1444
- gotoFieldForm = _ref.gotoFieldForm,
1445
- closeFieldForm = _ref.closeFieldForm,
1446
- onChange = _ref.onChange;
1447
-
1448
- var _useScreenDefinition = contexts.useScreenDefinition(),
1449
- _useScreenDefinition$ = _useScreenDefinition.fields,
1450
- fields$1 = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // const intl = useIntl();
1451
- // const finalOnClickDelete = useCallback(() => {
1452
- // if (
1453
- // onClickDelete !== null &&
1454
- // window.confirm(
1455
- // intl.formatMessage({
1456
- // defaultMessage: 'Are you sure you want to delete this screen?',
1457
- // description: 'Confirm message when deleting a screen',
1458
- // }),
1459
- // )
1460
- // ) {
1461
- // onClickDelete(value);
1462
- // }
1463
- // }, [intl, onClickDelete, value]);
1464
-
1465
-
1466
- return /*#__PURE__*/React__default["default"].createElement("div", {
1467
- className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className)])
1468
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1469
- className: styles$3.inner
1470
- }, /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
1471
- fields: fields$1,
1472
- value: value,
1473
- onChange: onChange,
1474
- gotoFieldForm: gotoFieldForm,
1475
- closeFieldForm: closeFieldForm
1476
- })));
1477
- };
2531
+ onClickItem = _ref.onClickItem;
2532
+ var intl = reactIntl.useIntl();
2533
+ var screensManager = contexts.useScreensManager();
2534
+ var finalDefinitions = screens || screensManager.getDefinitions();
2535
+ var groups = React.useMemo(function () {
2536
+ var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
2537
+ var id = definition.id,
2538
+ title = definition.title,
2539
+ _definition$group = definition.group,
2540
+ group = _definition$group === void 0 ? {} : _definition$group;
1478
2541
 
1479
- ScreenForm.propTypes = propTypes$5;
1480
- ScreenForm.defaultProps = defaultProps$5;
2542
+ var _ref2 = group || {},
2543
+ _ref2$order = _ref2.order,
2544
+ order = _ref2$order === void 0 ? 0 : _ref2$order,
2545
+ _ref2$label = _ref2.label,
2546
+ label = _ref2$label === void 0 ? {} : _ref2$label,
2547
+ _ref2$hidden = _ref2.hidden,
2548
+ hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
1481
2549
 
1482
- /* eslint-disable react/jsx-props-no-spreading */
1483
- var propTypes$4 = {
1484
- children: PropTypes__default["default"].node
1485
- };
1486
- var defaultProps$4 = {
1487
- children: null
1488
- };
2550
+ var _ref3 = label || {},
2551
+ _ref3$id = _ref3.id,
2552
+ messageId = _ref3$id === void 0 ? null : _ref3$id;
1489
2553
 
1490
- var FieldWithContexts = function FieldWithContexts(props) {
1491
- // Get definitions
1492
- var _useScreenDefinition = contexts.useScreenDefinition(),
1493
- _useScreenDefinition$ = _useScreenDefinition.fields,
1494
- fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // To use a specific form component
2554
+ if (hidden) {
2555
+ return allGroups;
2556
+ }
1495
2557
 
2558
+ var _ref4 = utils.isMessage(label) ? {
2559
+ id: messageId || id,
2560
+ name: group
2561
+ } : {
2562
+ id: messageId || id,
2563
+ name: title
2564
+ },
2565
+ groupId = _ref4.id,
2566
+ groupName = _ref4.name;
1496
2567
 
1497
- var formComponents = contexts.useFormsComponents();
1498
- return /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
1499
- fields: fields,
1500
- formComponents: formComponents
1501
- }, props));
2568
+ var groupIndex = allGroups.findIndex(function (it) {
2569
+ return it.id === groupId;
2570
+ });
2571
+ var selected = selectedTypes !== null && selectedTypes.indexOf(id) !== -1;
2572
+ var item = {
2573
+ id: id,
2574
+ type: id,
2575
+ screen: definition,
2576
+ className: classNames__default["default"](_defineProperty__default["default"]({
2577
+ 'bg-secondary': !selected,
2578
+ 'bg-primary': selected
2579
+ }, styles$2.selected, selected))
2580
+ };
2581
+ return groupIndex !== -1 ? [].concat(_toConsumableArray__default["default"](allGroups.slice(0, groupIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, allGroups[groupIndex]), {}, {
2582
+ items: [].concat(_toConsumableArray__default["default"](allGroups[groupIndex].items), [item])
2583
+ })], _toConsumableArray__default["default"](allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray__default["default"](allGroups), [{
2584
+ id: groupId,
2585
+ name: utils.isMessage(label) ? intl.formatMessage(label) : groupName,
2586
+ order: order,
2587
+ items: [item]
2588
+ }]);
2589
+ }, []);
2590
+ return orderBy__default["default"](groupItems, ['order', 'name'], ['asc', 'asc']);
2591
+ }, [finalDefinitions, selectedTypes]);
2592
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2593
+ className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className)])
2594
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2595
+ className: styles$2.rows
2596
+ }, groups.map(function (_ref6) {
2597
+ var id = _ref6.id,
2598
+ name = _ref6.name,
2599
+ items = _ref6.items;
2600
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2601
+ key: "group-".concat(id),
2602
+ className: styles$2.row
2603
+ }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, name), /*#__PURE__*/React__default["default"].createElement("div", {
2604
+ className: styles$2.layouts
2605
+ }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
2606
+ items: items,
2607
+ withPlaceholder: true,
2608
+ itemClassName: classNames__default["default"](['border', 'rounded', {
2609
+ 'border-secondary': selectedTypes === null,
2610
+ 'border-dark': selectedTypes !== null,
2611
+ 'bg-secondary': selectedTypes === null,
2612
+ 'text-secondary': selectedTypes !== null
2613
+ }]),
2614
+ previewMinWidth: 100,
2615
+ onClickItem: onClickItem
2616
+ })));
2617
+ })));
1502
2618
  };
1503
2619
 
1504
- FieldWithContexts.propTypes = propTypes$4;
1505
- FieldWithContexts.defaultProps = defaultProps$4;
2620
+ ScreenTypes.propTypes = propTypes$6;
2621
+ ScreenTypes.defaultProps = defaultProps$6;
1506
2622
 
1507
- var styles$2 = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
2623
+ var styles$1 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
1508
2624
 
1509
- var propTypes$3 = {
2625
+ var propTypes$5 = {
2626
+ selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
1510
2627
  className: PropTypes__default["default"].string,
1511
- onConfirm: PropTypes__default["default"].func,
1512
- onCancel: PropTypes__default["default"].func
2628
+ onRequestClose: PropTypes__default["default"].func,
2629
+ onClickScreenType: PropTypes__default["default"].func
1513
2630
  };
1514
- var defaultProps$3 = {
2631
+ var defaultProps$5 = {
2632
+ selectedTypes: null,
1515
2633
  className: null,
1516
- onConfirm: null,
1517
- onCancel: null
2634
+ onRequestClose: null,
2635
+ onClickScreenType: null
1518
2636
  };
1519
2637
 
1520
- var DeleteScreenModal = function DeleteScreenModal(_ref) {
1521
- var className = _ref.className,
1522
- onConfirm = _ref.onConfirm,
1523
- onCancel = _ref.onCancel;
2638
+ var ScreenTypesModal = function ScreenTypesModal(_ref) {
2639
+ var selectedTypes = _ref.selectedTypes,
2640
+ className = _ref.className,
2641
+ onRequestClose = _ref.onRequestClose,
2642
+ onClickScreenType = _ref.onClickScreenType;
1524
2643
  return /*#__PURE__*/React__default["default"].createElement(components.Modal, null, /*#__PURE__*/React__default["default"].createElement(components.ModalDialog, {
1525
2644
  title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1526
- id: "p6q/+/",
2645
+ id: "QBaiO0",
1527
2646
  defaultMessage: [{
1528
2647
  "type": 0,
1529
- "value": "Delete screen"
2648
+ "value": "Add a screen"
1530
2649
  }]
1531
2650
  }),
1532
- className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className)]),
1533
- onClickClose: onCancel
1534
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1535
- className: styles$2.description
1536
- }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1537
- id: "q/tLk0",
1538
- defaultMessage: [{
1539
- "type": 0,
1540
- "value": "Are you sure you want to delete this screen?"
1541
- }]
1542
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
1543
- className: styles$2.actions
1544
- }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
1545
- onClick: onCancel,
1546
- className: "btn-outline-secondary mr-2"
1547
- }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1548
- id: "0GT0SI",
1549
- defaultMessage: [{
1550
- "type": 0,
1551
- "value": "Cancel"
1552
- }]
1553
- }))), /*#__PURE__*/React__default["default"].createElement(components.Button, {
1554
- onClick: onConfirm,
1555
- theme: "danger",
1556
- label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1557
- id: "gRxcTc",
1558
- defaultMessage: [{
1559
- "type": 0,
1560
- "value": "Delete screen"
1561
- }]
1562
- })
1563
- }))));
2651
+ className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)]),
2652
+ onClickClose: onRequestClose
2653
+ }, /*#__PURE__*/React__default["default"].createElement(ScreenTypes, {
2654
+ selectedTypes: selectedTypes,
2655
+ className: styles$1.menu,
2656
+ onClickItem: onClickScreenType
2657
+ })));
1564
2658
  };
1565
2659
 
1566
- DeleteScreenModal.propTypes = propTypes$3;
1567
- DeleteScreenModal.defaultProps = defaultProps$3;
1568
-
1569
- var styles$1 = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
2660
+ ScreenTypesModal.propTypes = propTypes$5;
2661
+ ScreenTypesModal.defaultProps = defaultProps$5;
1570
2662
 
1571
- var propTypes$2 = {
2663
+ var _excluded$1 = ["id"];
2664
+ var propTypes$4 = {
1572
2665
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
1573
2666
  isTheme: PropTypes__default["default"].bool,
1574
- className: PropTypes__default["default"].string,
1575
- onChange: PropTypes__default["default"].func
2667
+ isVertical: PropTypes__default["default"].bool,
2668
+ isCreateOpened: PropTypes__default["default"].bool,
2669
+ isParsed: PropTypes__default["default"].bool,
2670
+ isTree: PropTypes__default["default"].bool,
2671
+ onClickScreen: PropTypes__default["default"].func,
2672
+ onChange: PropTypes__default["default"].func,
2673
+ className: PropTypes__default["default"].string
1576
2674
  };
1577
- var defaultProps$2 = {
2675
+ var defaultProps$4 = {
1578
2676
  value: null,
1579
2677
  isTheme: false,
1580
- className: null,
1581
- onChange: null
2678
+ isVertical: false,
2679
+ isCreateOpened: false,
2680
+ isParsed: false,
2681
+ isTree: false,
2682
+ onClickScreen: null,
2683
+ onChange: null,
2684
+ className: null
1582
2685
  };
1583
2686
 
1584
- var EditForm = function EditForm(_ref) {
1585
- var value = _ref.value,
2687
+ var EditorScreens = function EditorScreens(_ref) {
2688
+ var unparsedValue = _ref.value,
1586
2689
  isTheme = _ref.isTheme,
1587
- className = _ref.className,
1588
- onChange = _ref.onChange;
1589
- // Match routes
1590
- var history = reactRouter.useHistory();
1591
- var routePush = contexts.useRoutePush();
1592
-
1593
- var _useRouteParams = useRouteParams(),
1594
- url = _useRouteParams.url,
1595
- _useRouteParams$scree = _useRouteParams.screen,
1596
- screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
1597
- _useRouteParams$field = _useRouteParams.field,
1598
- fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
1599
- _useRouteParams$form = _useRouteParams.form,
1600
- formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form; // Get screen
1601
-
2690
+ isVertical = _ref.isVertical,
2691
+ isCreateOpened = _ref.isCreateOpened,
2692
+ isParsed = _ref.isParsed,
2693
+ isTree = _ref.isTree,
2694
+ onClickScreen = _ref.onClickScreen,
2695
+ onChange = _ref.onChange,
2696
+ className = _ref.className;
2697
+ var valueWithTheme = useThemeValue(unparsedValue, isTheme);
2698
+ var value = isParsed ? unparsedValue : hooks.useParsedStory(valueWithTheme, {
2699
+ withMedias: false
2700
+ });
1602
2701
 
1603
2702
  var _ref2 = value || {},
1604
2703
  _ref2$components = _ref2.components,
1605
2704
  screens = _ref2$components === void 0 ? [] : _ref2$components;
1606
2705
 
1607
- var screenIndex = screens.findIndex(function (it) {
1608
- return it.id === screenId;
1609
- });
1610
- var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
1611
-
1612
- var _useFormTransition = useFormTransition(url, screenIndex, styles$1),
1613
- transitionName = _useFormTransition.name,
1614
- transitionTimeout = _useFormTransition.timeout;
1615
-
1616
- var _useState = React.useState(false),
2706
+ var _useState = React.useState(isCreateOpened),
1617
2707
  _useState2 = _slicedToArray__default["default"](_useState, 2),
1618
- screenSettingsOpened = _useState2[0],
1619
- setScreenSettingsOpened = _useState2[1];
2708
+ createModalOpened = _useState2[0],
2709
+ setCreateModalOpened = _useState2[1];
1620
2710
 
1621
- var _useState3 = React.useState(false),
1622
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
1623
- deleteScreenModalOpened = _useState4[0],
1624
- setDeleteScreenModalOpened = _useState4[1];
2711
+ var routes = contexts.useRoutes();
2712
+ var push = contexts.useRoutePush();
2713
+ var url = contexts.useUrlGenerator();
1625
2714
 
1626
- var _useState5 = React.useState({}),
1627
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1628
- fieldForms = _useState6[0],
1629
- setFieldForms = _useState6[1];
2715
+ var _useRouteParams = useRouteParams({
2716
+ screenOnly: true
2717
+ }),
2718
+ _useRouteParams$scree = _useRouteParams.screen,
2719
+ currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
1630
2720
 
1631
- var _useState7 = React.useState(null),
1632
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1633
- fieldContext = _useState8[0],
1634
- setFieldContext = _useState8[1]; // Callbacks
2721
+ var createScreenFromDefinition = React.useCallback(function (definition) {
2722
+ var _ref3 = value || {},
2723
+ _ref3$components = _ref3.components,
2724
+ currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
2725
+ _ref3$theme = _ref3.theme,
2726
+ theme = _ref3$theme === void 0 ? {} : _ref3$theme;
2727
+
2728
+ var _ref4 = isString__default["default"](definition) ? {
2729
+ id: definition
2730
+ } : definition,
2731
+ newScreenType = _ref4.id;
1635
2732
 
2733
+ var _ref5 = theme || {},
2734
+ _ref5$components = _ref5.components,
2735
+ themeComponents = _ref5$components === void 0 ? null : _ref5$components;
1636
2736
 
1637
- var gotoFieldForm = React.useCallback(function () {
1638
- var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1639
- var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
1640
- var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
1641
- var hasField = field !== null;
1642
- var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
1643
- routePush(hasField ? fieldRoute : 'screen', {
1644
- screen: screenId,
1645
- field: field !== null ? field.split('.') : null,
1646
- form: formName !== null ? utils.slug(formName) : null
2737
+ var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
2738
+ return it.type === newScreenType;
2739
+ }) || null : null;
2740
+ var newScreen = createScreen(definition, themeScreen);
2741
+ var foundIndex = screens.findIndex(function (_ref6) {
2742
+ var id = _ref6.id;
2743
+ return id === currentScreenId;
1647
2744
  });
1648
- setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
1649
- setFieldContext(context);
1650
- }, [routePush, screenId, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
1651
- var closeFieldForm = React.useCallback(function (field) {
1652
- var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
1653
- var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
1654
- var pastUrl = fieldForms[fieldKey] || null;
2745
+ var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
1655
2746
 
1656
- if (pastUrl !== null) {
1657
- history.push(pastUrl);
1658
- }
2747
+ var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
2748
+ components: [].concat(_toConsumableArray__default["default"](currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray__default["default"](currentScreens.slice(currentScreenIndex)))
2749
+ });
1659
2750
 
1660
- setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
1661
- return key !== fieldKey ? _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, key, fieldForms[key])) : map;
1662
- }, {}));
1663
- }, [history, screenId, fieldForms, setFieldForms]);
1664
- var triggerOnChange = React.useCallback(function (newValue) {
1665
2751
  if (onChange !== null) {
1666
2752
  onChange(newValue);
1667
2753
  }
1668
- }, [onChange]);
1669
- var onScreenFormChange = React.useCallback(function (newScreenValue) {
1670
- triggerOnChange(updateScreen(value, newScreenValue));
1671
- }, [value, triggerOnChange]);
1672
- var onClickDuplicate = React.useCallback(function () {
1673
- triggerOnChange(duplicateScreen(value, screenId));
1674
- setScreenSettingsOpened(false);
1675
- }, [value, screenId, triggerOnChange, setScreenSettingsOpened]);
1676
- var onClickDelete = React.useCallback(function () {
1677
- setDeleteScreenModalOpened(true);
1678
- setScreenSettingsOpened(false);
1679
- }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
1680
- var onSettingsClick = React.useCallback(function () {
1681
- setScreenSettingsOpened(function (opened) {
1682
- return !opened;
2754
+
2755
+ return newScreen;
2756
+ }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
2757
+ var onOrderChange = React.useCallback(function (listItems) {
2758
+ var ids = listItems.map(function (_ref7) {
2759
+ var id = _ref7.id;
2760
+ return id;
2761
+ });
2762
+ var screenProps = listItems.map(function (_ref8) {
2763
+ var id = _ref8.id,
2764
+ _ref8$props = _ref8.props,
2765
+ props = _ref8$props === void 0 ? null : _ref8$props;
2766
+ return {
2767
+ id: id,
2768
+ props: props
2769
+ };
2770
+ });
2771
+ var hasScreenProps = (screenProps.filter(function (_ref9) {
2772
+ var props = _ref9.props;
2773
+ return props !== null;
2774
+ }) || []).length > 0;
2775
+
2776
+ var _ref10 = value || {},
2777
+ _ref10$components = _ref10.components,
2778
+ currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
2779
+
2780
+ var currentIds = currentScreens.map(function (_ref11) {
2781
+ var id = _ref11.id;
2782
+ return id;
2783
+ });
2784
+ var sameOrder = listItems.reduce(function (same, _ref12, index) {
2785
+ var id = _ref12.id;
2786
+ return same && id === currentIds[index];
2787
+ }, true);
2788
+
2789
+ if (!sameOrder || hasScreenProps) {
2790
+ var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
2791
+ components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref13, _ref14) {
2792
+ var idA = _ref13.id;
2793
+ var idB = _ref14.id;
2794
+ var indexA = ids.indexOf(idA);
2795
+ var indexB = ids.indexOf(idB);
2796
+
2797
+ if (indexA === indexB) {
2798
+ return 0;
2799
+ }
2800
+
2801
+ return indexA > indexB ? 1 : -1;
2802
+ }).map(function (_ref15) {
2803
+ var _screenProps$find;
2804
+
2805
+ var id = _ref15.id,
2806
+ props = _objectWithoutProperties__default["default"](_ref15, _excluded$1);
2807
+
2808
+ return _objectSpread__default["default"](_objectSpread__default["default"]({
2809
+ id: id
2810
+ }, props), (_screenProps$find = screenProps.find(function (_ref16) {
2811
+ var propsId = _ref16.id;
2812
+ return propsId === id;
2813
+ })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
2814
+ })
2815
+ });
2816
+
2817
+ if (onChange !== null) {
2818
+ onChange(newValue);
2819
+ }
2820
+ }
2821
+ }, [value, onChange]);
2822
+ var onClickScreenType = React.useCallback(function (definition) {
2823
+ setCreateModalOpened(false);
2824
+ var currentScreen = isTheme ? screens.find(function (_ref17) {
2825
+ var type = _ref17.type;
2826
+ return type === definition.id;
2827
+ }) || null : null;
2828
+
2829
+ if (!isTheme || currentScreen === null) {
2830
+ currentScreen = createScreenFromDefinition(definition);
2831
+ }
2832
+
2833
+ push('screen', {
2834
+ screen: currentScreen.id
1683
2835
  });
1684
- }, [setScreenSettingsOpened]);
1685
- var onDropdownClickOutside = React.useCallback(function () {
1686
- setScreenSettingsOpened(false);
1687
- }, [setScreenSettingsOpened]);
1688
- var onDeleteScreenConfirm = React.useCallback(function () {
1689
- triggerOnChange(deleteScreen(value, screenId));
1690
- setDeleteScreenModalOpened(false);
1691
- }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
1692
- var onDeleteScreenCancel = React.useCallback(function () {
1693
- setDeleteScreenModalOpened(false);
1694
- }, [setDeleteScreenModalOpened]);
1695
- var dropdownItems = [!isTheme ? {
1696
- id: 'duplicate',
1697
- type: 'button',
1698
- className: 'text-left text-info',
1699
- label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1700
- id: "IBjY5r",
1701
- defaultMessage: [{
1702
- "type": 0,
1703
- "value": "Duplicate screen"
1704
- }]
1705
- }),
1706
- onClick: onClickDuplicate
1707
- } : null, {
1708
- id: 'delete',
1709
- type: 'button',
1710
- className: 'text-left text-danger',
1711
- label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1712
- id: "hpiKce",
1713
- defaultMessage: [{
1714
- "type": 0,
1715
- "value": "Delete screen"
1716
- }]
1717
- }),
1718
- onClick: onClickDelete
1719
- }].filter(function (it) {
1720
- return it !== null;
1721
- });
2836
+ onClickScreen(currentScreen);
2837
+ }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
2838
+ var onClickAdd = React.useCallback(function () {
2839
+ return setCreateModalOpened(true);
2840
+ }, [setCreateModalOpened]);
2841
+ var onCreateModalRequestClose = React.useCallback(function () {
2842
+ return setCreateModalOpened(false);
2843
+ }, [setCreateModalOpened]);
1722
2844
  return /*#__PURE__*/React__default["default"].createElement("div", {
1723
- className: classNames__default["default"](['d-flex', 'flex-column', className])
1724
- }, screenId !== null ? /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
2845
+ className: classNames__default["default"](['d-flex', 'flex-column', styles$7.container, className])
2846
+ }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
1725
2847
  compact: true,
1726
2848
  noWrap: true,
1727
2849
  withoutCollapse: true,
1728
- className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$1.navbar])
1729
- }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
1730
- story: value,
1731
- url: url,
1732
- screenId: screenId,
1733
- field: fieldParams,
1734
- form: formParams,
1735
- className: "mr-auto"
1736
- }), fieldParams === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SettingsButton, {
1737
- onClick: onSettingsClick
1738
- }), /*#__PURE__*/React__default["default"].createElement(components.DropdownMenu, {
1739
- items: dropdownItems,
1740
- visible: screenSettingsOpened,
1741
- align: "right",
1742
- onClickOutside: onDropdownClickOutside
1743
- })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1744
- className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$1.content])
1745
- }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransitionGroup, {
1746
- transitionName: transitionName,
1747
- transitionEnterTimeout: transitionTimeout,
1748
- transitionLeaveTimeout: transitionTimeout,
1749
- className: "w-100 flex-grow-1"
1750
- }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1751
- className: classNames__default["default"](['w-100', styles$1.panel]),
1752
- key: "field-".concat(fieldParams, "-").concat(formParams)
1753
- }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
1754
- data: screen
1755
- }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
1756
- name: fieldParams.replace(/\//g, '.'),
1757
- value: screen,
1758
- form: formParams,
1759
- className: styles$1.form,
1760
- gotoFieldForm: gotoFieldForm,
1761
- closeFieldForm: closeFieldForm,
1762
- fieldContext: fieldContext,
1763
- onChange: onScreenFormChange
1764
- }))) : /*#__PURE__*/React__default["default"].createElement("div", {
1765
- className: classNames__default["default"](['w-100', styles$1.panel]),
1766
- key: "screen-".concat(screen.id)
1767
- }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
1768
- data: screen
1769
- }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
1770
- value: screen,
1771
- className: styles$1.form,
1772
- onChange: onScreenFormChange,
1773
- gotoFieldForm: gotoFieldForm,
1774
- closeFieldForm: closeFieldForm
1775
- })))) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
1776
- className: "w-100 m-2"
2850
+ className: classNames__default["default"](['sticky-top', styles$7.navbar])
2851
+ }, /*#__PURE__*/React__default["default"].createElement("strong", {
2852
+ className: "mb-0 mr-auto"
1777
2853
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1778
- id: "QfpTKK",
2854
+ id: "jf+4Hq",
1779
2855
  defaultMessage: [{
1780
2856
  "type": 0,
1781
- "value": "Select a screen..."
1782
- }],
1783
- decription: "Indication to select a screen to view the form"
1784
- }))), deleteScreenModalOpened ? /*#__PURE__*/React__default["default"].createElement(DeleteScreenModal, {
1785
- onConfirm: onDeleteScreenConfirm,
1786
- onCancel: onDeleteScreenCancel
2857
+ "value": "Screens"
2858
+ }]
2859
+ })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
2860
+ theme: "primary",
2861
+ size: "sm",
2862
+ onClick: onClickAdd,
2863
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2864
+ icon: freeSolidSvgIcons.faPlus
2865
+ })
2866
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
2867
+ className: "flex-grow-1 d-flex w-100 p-2"
2868
+ }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
2869
+ path: [routes.screen, routes.home],
2870
+ render: function render(_ref18) {
2871
+ var _ref18$match$params$s = _ref18.match.params.screen,
2872
+ screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
2873
+ return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
2874
+ items: screens.map(function (it) {
2875
+ return {
2876
+ id: it.id,
2877
+ screen: it,
2878
+ href: url('screen', {
2879
+ screen: it.id
2880
+ }),
2881
+ active: it.id === screenId
2882
+ };
2883
+ }),
2884
+ isVertical: isVertical,
2885
+ withPreview: true,
2886
+ sortable: !isTree,
2887
+ className: "w-100",
2888
+ onClickItem: onClickScreen,
2889
+ onOrderChange: onOrderChange,
2890
+ isTree: isTree
2891
+ }) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
2892
+ className: "flex-grow-1 p-2"
2893
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
2894
+ theme: "primary",
2895
+ onClick: onClickAdd
2896
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
2897
+ id: "JoWKee",
2898
+ defaultMessage: [{
2899
+ "type": 0,
2900
+ "value": "Create your first screen"
2901
+ }]
2902
+ })));
2903
+ }
2904
+ })), createModalOpened ? /*#__PURE__*/React__default["default"].createElement(ScreenTypesModal, {
2905
+ selectedTypes: isTheme ? screens.map(function (_ref19) {
2906
+ var type = _ref19.type;
2907
+ return type;
2908
+ }) : [],
2909
+ onClickScreenType: onClickScreenType,
2910
+ onRequestClose: onCreateModalRequestClose
1787
2911
  }) : null);
1788
2912
  };
1789
2913
 
1790
- EditForm.propTypes = propTypes$2;
1791
- EditForm.defaultProps = defaultProps$2;
1792
-
1793
- var styles = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
2914
+ EditorScreens.propTypes = propTypes$4;
2915
+ EditorScreens.defaultProps = defaultProps$4;
1794
2916
 
1795
- var propTypes$1 = {
2917
+ var propTypes$3 = {
1796
2918
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
1797
2919
  deviceScreens: core.PropTypes.deviceScreens,
1798
2920
  viewerTheme: core.PropTypes.viewerTheme,
@@ -1803,7 +2925,7 @@ var propTypes$1 = {
1803
2925
  onChange: PropTypes__default["default"].func,
1804
2926
  className: PropTypes__default["default"].string
1805
2927
  };
1806
- var defaultProps$1 = {
2928
+ var defaultProps$3 = {
1807
2929
  value: null,
1808
2930
  deviceScreens: utils.getDeviceScreens(),
1809
2931
  viewerTheme: null,
@@ -1896,7 +3018,11 @@ var Editor = function Editor(_ref) {
1896
3018
  if (screenSize.screen) {
1897
3019
  setMobileView('preview');
1898
3020
  }
1899
- }, [screenSize.screen]);
3021
+
3022
+ push('screen', {
3023
+ screen: clickedScreenId.current
3024
+ });
3025
+ }, [screenSize.screen, push]);
1900
3026
  var onPreviewScreenChange = React.useCallback(function (_ref4) {
1901
3027
  var newScreenId = _ref4.id;
1902
3028
  push('screen', {
@@ -1918,20 +3044,21 @@ var Editor = function Editor(_ref) {
1918
3044
  var cnt = item.parentNode.parentNode.parentNode;
1919
3045
  screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
1920
3046
  }
1921
- }, [screenId]);
3047
+ }, [screenId]); // console.log('editor level value', value);
3048
+
1922
3049
  return /*#__PURE__*/React__default["default"].createElement(contexts.ModalsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PanelsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
1923
3050
  size: screenSize
1924
3051
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1925
- className: classNames__default["default"]([styles.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
1926
- return styles["screen-".concat(screenName)];
1927
- }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
3052
+ className: classNames__default["default"]([styles$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
3053
+ return styles$f["screen-".concat(screenName)];
3054
+ }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$f.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
1928
3055
  ref: refContainer
1929
3056
  }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
1930
3057
  theme: "light",
1931
3058
  compact: true,
1932
3059
  noWrap: true,
1933
3060
  withoutCollapse: true,
1934
- className: styles.top
3061
+ className: styles$f.top
1935
3062
  }, mobileView !== 'screens' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1936
3063
  size: "sm",
1937
3064
  theme: "secondary",
@@ -1964,9 +3091,9 @@ var Editor = function Editor(_ref) {
1964
3091
  "value": "View screen"
1965
3092
  }]
1966
3093
  })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1967
- className: styles.inner
3094
+ className: styles$f.inner
1968
3095
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1969
- className: classNames__default["default"]([styles.left, _defineProperty__default["default"]({}, styles.visible, !isMobile || mobileView === 'screens')]),
3096
+ className: classNames__default["default"]([styles$f.left, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
1970
3097
  ref: refScreensContainer
1971
3098
  }, /*#__PURE__*/React__default["default"].createElement(EditorScreens, {
1972
3099
  value: story,
@@ -1976,28 +3103,29 @@ var Editor = function Editor(_ref) {
1976
3103
  onChange: onStoryChange,
1977
3104
  onClickScreen: onClickScreen,
1978
3105
  isVertical: !isMobile,
1979
- className: styles.inner
3106
+ className: styles$f.inner,
3107
+ isTree: true
1980
3108
  })), /*#__PURE__*/React__default["default"].createElement("div", {
1981
- className: classNames__default["default"]([styles.center, _defineProperty__default["default"]({}, styles.visible, !isMobile || mobileView === 'preview')])
3109
+ className: classNames__default["default"]([styles$f.center, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'preview')])
1982
3110
  }, /*#__PURE__*/React__default["default"].createElement(EditorPreview, {
1983
3111
  value: story,
1984
3112
  isTheme: isTheme,
1985
3113
  viewerTheme: viewerTheme,
1986
- className: styles.preview,
3114
+ className: styles$f.preview,
1987
3115
  onScreenChange: onPreviewScreenChange
1988
3116
  })), /*#__PURE__*/React__default["default"].createElement("div", {
1989
- className: classNames__default["default"]([styles.right, _defineProperty__default["default"]({}, styles.visible, !isMobile || mobileView === 'form')])
3117
+ className: classNames__default["default"]([styles$f.right, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'form')])
1990
3118
  }, /*#__PURE__*/React__default["default"].createElement(EditForm, {
1991
3119
  key: screenId,
1992
3120
  value: story,
1993
3121
  isTheme: isTheme,
1994
3122
  onChange: onStoryChange,
1995
- className: styles.inner
3123
+ className: styles$f.inner
1996
3124
  }))), /*#__PURE__*/React__default["default"].createElement(components.Modals, null)))));
1997
3125
  };
1998
3126
 
1999
- Editor.propTypes = propTypes$1;
2000
- Editor.defaultProps = defaultProps$1;
3127
+ Editor.propTypes = propTypes$3;
3128
+ Editor.defaultProps = defaultProps$3;
2001
3129
 
2002
3130
  var home = "/";
2003
3131
  var screen = "/:screen";
@@ -2008,6 +3136,101 @@ var defaultRoutes = {
2008
3136
  "screen.field.form": "/:screen/:field+/:form"
2009
3137
  };
2010
3138
 
3139
+ var routes = PropTypes__default["default"].shape({
3140
+ home: PropTypes__default["default"].string.isRequired,
3141
+ screen: PropTypes__default["default"].string.isRequired,
3142
+ 'screen.field': PropTypes__default["default"].string.isRequired,
3143
+ 'screen.field.form': PropTypes__default["default"].string.isRequired
3144
+ });
3145
+
3146
+ var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
3147
+
3148
+ var propTypes$2 = {
3149
+ name: PropTypes__default["default"].string,
3150
+ field: core.PropTypes.formField.isRequired,
3151
+ value: core.PropTypes.component,
3152
+ className: PropTypes__default["default"].string,
3153
+ gotoFieldForm: PropTypes__default["default"].func.isRequired,
3154
+ closeFieldForm: PropTypes__default["default"].func.isRequired,
3155
+ onChange: PropTypes__default["default"].func
3156
+ };
3157
+ var defaultProps$2 = {
3158
+ name: null,
3159
+ value: null,
3160
+ className: null,
3161
+ onChange: null
3162
+ };
3163
+
3164
+ var SettingsForm = function SettingsForm(_ref) {
3165
+ var name = _ref.name,
3166
+ field = _ref.field,
3167
+ value = _ref.value,
3168
+ className = _ref.className,
3169
+ gotoFieldForm = _ref.gotoFieldForm,
3170
+ closeFieldForm = _ref.closeFieldForm,
3171
+ onChange = _ref.onChange;
3172
+ var _field$type = field.type,
3173
+ type = _field$type === void 0 ? null : _field$type;
3174
+ var fieldsManager = contexts.useFieldsManager();
3175
+
3176
+ var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
3177
+ _ref2$component = _ref2.component,
3178
+ fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
3179
+ settings = _ref2.settings;
3180
+
3181
+ var FieldComponent = contexts.useFieldComponent(fieldComponent);
3182
+ var FieldsComponent = contexts.useFieldComponent('fields');
3183
+ var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
3184
+ var onSettingsChange = React.useCallback(function (newSettingsValue) {
3185
+ var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), newSettingsValue);
3186
+
3187
+ if (onChange !== null) {
3188
+ onChange(newValue);
3189
+ }
3190
+ }, [value, onChange]);
3191
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3192
+ className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className)])
3193
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3194
+ className: styles.inner
3195
+ }, /*#__PURE__*/React__default["default"].createElement(SettingsComponent, {
3196
+ name: name,
3197
+ field: field,
3198
+ fields: settings,
3199
+ value: value,
3200
+ onChange: onSettingsChange,
3201
+ gotoFieldForm: gotoFieldForm,
3202
+ closeFieldForm: closeFieldForm
3203
+ })));
3204
+ };
3205
+
3206
+ SettingsForm.propTypes = propTypes$2;
3207
+ SettingsForm.defaultProps = defaultProps$2;
3208
+
3209
+ // eslint-disable-next-line import/prefer-default-export
3210
+
3211
+ var FormsComponents = /*#__PURE__*/Object.freeze({
3212
+ __proto__: null,
3213
+ Settings: SettingsForm
3214
+ });
3215
+
3216
+ /* eslint-disable react/jsx-props-no-spreading */
3217
+ var propTypes$1 = {
3218
+ children: PropTypes__default["default"].node
3219
+ };
3220
+ var defaultProps$1 = {
3221
+ children: null
3222
+ };
3223
+
3224
+ var FormsProvider = function FormsProvider(props) {
3225
+ return /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, Object.assign({
3226
+ namespace: contexts.FORMS_NAMESPACE,
3227
+ components: FormsComponents
3228
+ }, props));
3229
+ };
3230
+
3231
+ FormsProvider.propTypes = propTypes$1;
3232
+ FormsProvider.defaultProps = defaultProps$1;
3233
+
2011
3234
  var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries"];
2012
3235
  var propTypes = {
2013
3236
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),