@micromag/editor 0.3.252 → 0.3.263

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 +1 -1
  2. package/es/index.js +98 -90
  3. package/lib/index.js +98 -90
  4. package/package.json +7 -7
package/assets/css/styles.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{scrollbar-width:none}.micromag-editor-container .micromag-editor-left::-webkit-scrollbar,.micromag-editor-container .micromag-editor-right::-webkit-scrollbar{display:none}.micromag-editor-container .micromag-editor-center,.micromag-editor-container.micromag-editor-fullscreen,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-preview,.micromag-editor-container .micromag-editor-right{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-editor-container>.micromag-editor-inner{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%}.micromag-editor-container .micromag-editor-center,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{display:none;z-index:1}.micromag-editor-container .micromag-editor-center.micromag-editor-visible,.micromag-editor-container .micromag-editor-left.micromag-editor-visible,.micromag-editor-container .micromag-editor-right.micromag-editor-visible{display:block}.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{overflow-y:auto;scroll-behavior:smooth}.micromag-editor-container .micromag-editor-left>.micromag-editor-inner,.micromag-editor-container .micromag-editor-right>.micromag-editor-inner{min-height:100%}.micromag-editor-container .micromag-editor-center{background-color:#2b2b2b}.micromag-editor-screen-medium>.micromag-editor-top{display:none}.micromag-editor-screen-medium>.micromag-editor-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:100%}.micromag-editor-screen-medium .micromag-editor-center,.micromag-editor-screen-medium .micromag-editor-left,.micromag-editor-screen-medium .micromag-editor-right{position:relative;height:100%}.micromag-editor-screen-medium .micromag-editor-left{width:140px}.micromag-editor-screen-medium .micromag-editor-center{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:auto}.micromag-editor-screen-medium .micromag-editor-right{width:320px}
2
- .micromag-editor-form-panel.micromag-editor-form-exit{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-exit{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft,.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom,.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
3
2
  .micromag-editor-forms-screen-container{position:relative;padding:.5rem}.micromag-editor-forms-screen-container .micromag-editor-forms-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
4
3
  .micromag-editor-menus-breadcrumb-container li{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-menus-breadcrumb-container li:before{float:none}.micromag-editor-menus-breadcrumb-container li:last-child{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
5
4
  .micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-description{margin-bottom:10px}.micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
5
+ .micromag-editor-form-panel.micromag-editor-form-exit{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-exit{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft,.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom,.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
6
6
  .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;width:40px;height:30px;padding:5px}
7
7
  .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
8
8
  .micromag-editor-partials-screen-states-container{display:inline-block}.micromag-editor-partials-screen-states-button{width:50px;min-height:75px}.micromag-editor-partials-screen-states-button.btn-outline-secondary{border-color:#6c6c6c;color:#6c6c6c}.micromag-editor-partials-screen-states-button.btn-outline-secondary:hover{border-color:#e9e9e9;background:rgba(0,0,0,0);color:#e9e9e9}.micromag-editor-partials-screen-states-addButton{border-style:dashed}.micromag-editor-partials-screen-states-title{padding:0 .2em;font-size:.75em;text-align:left}
package/es/index.js CHANGED
@@ -123,12 +123,10 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
123
123
  };
124
124
  };
125
125
 
126
- var styles$h = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","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","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
127
-
128
126
  function getScreenFieldsWithStates(definition) {
129
127
  var _ref = definition || {},
130
128
  _ref$fields = _ref.fields,
131
- screenFields = _ref$fields === void 0 ? [] : _ref$fields,
129
+ screenFields = _ref$fields === void 0 ? null : _ref$fields,
132
130
  _ref$states = _ref.states,
133
131
  states = _ref$states === void 0 ? null : _ref$states;
134
132
 
@@ -136,8 +134,9 @@ function getScreenFieldsWithStates(definition) {
136
134
  return screenFields;
137
135
  }
138
136
 
139
- return [].concat(_toConsumableArray(states.reduce(function (statesFields, _ref2) {
140
- var id = _ref2.id,
137
+ var extraFields = states.reduce(function (statesFields, current) {
138
+ var _ref2 = current || {},
139
+ id = _ref2.id,
141
140
  _ref2$fields = _ref2.fields,
142
141
  fields = _ref2$fields === void 0 ? [] : _ref2$fields,
143
142
  _ref2$repeatable = _ref2.repeatable,
@@ -147,6 +146,7 @@ function getScreenFieldsWithStates(definition) {
147
146
  label = _ref2.label,
148
147
  _ref2$defaultValue = _ref2.defaultValue,
149
148
  defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
149
+
150
150
  return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
151
151
  type: 'items',
152
152
  name: fieldName || id,
@@ -168,7 +168,8 @@ function getScreenFieldsWithStates(definition) {
168
168
  stateId: id
169
169
  });
170
170
  }) : []));
171
- }, [])), _toConsumableArray(screenFields));
171
+ }, []);
172
+ return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
172
173
  }
173
174
 
174
175
  var createScreen = function createScreen(definition) {
@@ -316,13 +317,10 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
316
317
  form = _ref.form,
317
318
  props = _objectWithoutProperties(_ref, _excluded$8);
318
319
 
319
- // Get definitions
320
320
  var definition = useScreenDefinition() || null;
321
321
  var _definition$states = definition.states,
322
322
  states = _definition$states === void 0 ? null : _definition$states;
323
- var screenFields = getScreenFieldsWithStates(definition); // const [stateId = null] = name.split('.');
324
- // const currentState = states !== null ? states.find(({ id }) => id === stateId) || null : null;
325
-
323
+ var screenFields = getScreenFieldsWithStates(definition);
326
324
  var nameParts = name.split('.');
327
325
 
328
326
  var _nameParts = _slicedToArray(nameParts, 1),
@@ -343,35 +341,23 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
343
341
  _ref3$fields = _ref3.fields,
344
342
  stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
345
343
 
344
+ var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
345
+ var itemName = _ref4.name,
346
+ fieldStateId = _ref4.stateId;
347
+ return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
348
+ }) : screenFields;
349
+
346
350
  if (currentState !== null) {
347
351
  finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(nameParts.slice(1))) : nameParts.slice(1);
348
352
  }
349
353
 
350
- var formComponents = useFormsComponents(); // if (currentState !== null && !repeatable && stateFieldName === null) {
351
- // return (
352
- // <div className="p-2">
353
- // <Fields fields={stateFields} {...props} />
354
- // </div>
355
- // );
356
- // }
357
- // const finalFields =
358
- // repeatable || stateFieldName !== null
359
- // ? [{
360
- // name: stateFieldName || stateId,
361
- // itemsField: {
362
- // type: 'fields',
363
- // fields: stateFields,
364
- // className: 'p-2'
365
- // },
366
- // }]
367
- // : fields;
368
-
354
+ var formComponents = useFormsComponents();
369
355
  return definition !== null ? /*#__PURE__*/React.createElement("div", {
370
356
  className: classNames({
371
357
  'p-2': form === null
372
358
  })
373
359
  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(FieldForm, Object.assign({
374
- fields: screenFields,
360
+ fields: finalScreenFields,
375
361
  formComponents: formComponents,
376
362
  name: finalNameParts.join('.'),
377
363
  form: form
@@ -383,7 +369,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
383
369
  FieldWithContexts.propTypes = propTypes$n;
384
370
  FieldWithContexts.defaultProps = defaultProps$n;
385
371
 
386
- var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
372
+ var styles$h = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
387
373
 
388
374
  var propTypes$m = {
389
375
  value: PropTypes$1.component,
@@ -426,9 +412,9 @@ var ScreenForm = function ScreenForm(_ref) {
426
412
 
427
413
 
428
414
  return /*#__PURE__*/React.createElement("div", {
429
- className: classNames([styles$g.container, _defineProperty({}, className, className)])
415
+ className: classNames([styles$h.container, _defineProperty({}, className, className)])
430
416
  }, /*#__PURE__*/React.createElement("div", {
431
- className: styles$g.inner
417
+ className: styles$h.inner
432
418
  }, fields !== null ? /*#__PURE__*/React.createElement(Fields, {
433
419
  fields: fields,
434
420
  value: value,
@@ -441,7 +427,7 @@ var ScreenForm = function ScreenForm(_ref) {
441
427
  ScreenForm.propTypes = propTypes$m;
442
428
  ScreenForm.defaultProps = defaultProps$m;
443
429
 
444
- var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
430
+ var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
445
431
 
446
432
  var propTypes$l = {
447
433
  story: PropTypes$1.story,
@@ -544,19 +530,24 @@ var Breadcrumb = function Breadcrumb(_ref) {
544
530
  var lastKeyIndex = finalFieldPath.length - 1;
545
531
  var parentItem = null;
546
532
  finalFieldPath.reduce(function (currentFields, key, keyIndex) {
547
- var _currentFields$type = currentFields.type,
548
- fieldType = _currentFields$type === void 0 ? null : _currentFields$type,
549
- _currentFields$fields = currentFields.fields,
550
- currentSubFields = _currentFields$fields === void 0 ? null : _currentFields$fields,
551
- _currentFields$itemsF = currentFields.itemsField,
552
- currentItemsField = _currentFields$itemsF === void 0 ? null : _currentFields$itemsF;
533
+ var _ref6 = currentFields || {},
534
+ _ref6$type = _ref6.type,
535
+ fieldType = _ref6$type === void 0 ? null : _ref6$type,
536
+ _ref6$fields = _ref6.fields,
537
+ currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
538
+ _ref6$itemsField = _ref6.itemsField,
539
+ currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
540
+
553
541
  var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
554
- var _fieldsDef$fields = fieldsDef.fields,
555
- defSubFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
556
- _fieldsDef$settings = fieldsDef.settings,
557
- settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
558
- _fieldsDef$itemsField = fieldsDef.itemsField,
559
- defItemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
542
+
543
+ var _ref7 = fieldsDef || {},
544
+ _ref7$fields = _ref7.fields,
545
+ defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
546
+ _ref7$settings = _ref7.settings,
547
+ settings = _ref7$settings === void 0 ? null : _ref7$settings,
548
+ _ref7$itemsField = _ref7.itemsField,
549
+ defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
550
+
560
551
  var itemsField = currentItemsField || defItemsField;
561
552
  var subFields = currentSubFields || defSubFields;
562
553
  var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
@@ -599,9 +590,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
599
590
  var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
600
591
  var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
601
592
 
602
- var _ref6 = parentItem || {},
603
- _ref6$label = _ref6.label,
604
- parentItemLabel = _ref6$label === void 0 ? null : _ref6$label;
593
+ var _ref8 = parentItem || {},
594
+ _ref8$label = _ref8.label,
595
+ parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
605
596
 
606
597
  var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
607
598
  var item = {
@@ -617,17 +608,21 @@ var Breadcrumb = function Breadcrumb(_ref) {
617
608
  parentItem = item;
618
609
  return nextFields;
619
610
  }, {
620
- fields: screenFields
611
+ fields: stateId === null ? screenFields : screenFields.filter(function (_ref9) {
612
+ var _ref9$stateId = _ref9.stateId,
613
+ fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
614
+ return fieldStateId === null || fieldStateId === stateId;
615
+ })
621
616
  });
622
617
  }
623
618
 
624
- var _ref7 = screenParameters || {},
625
- _ref7$metadata = _ref7.metadata,
626
- metadata = _ref7$metadata === void 0 ? null : _ref7$metadata;
619
+ var _ref10 = screenParameters || {},
620
+ _ref10$metadata = _ref10.metadata,
621
+ metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
627
622
 
628
- var _ref8 = metadata || {},
629
- _ref8$title = _ref8.title,
630
- title = _ref8$title === void 0 ? null : _ref8$title;
623
+ var _ref11 = metadata || {},
624
+ _ref11$title = _ref11.title,
625
+ title = _ref11$title === void 0 ? null : _ref11$title;
631
626
 
632
627
  var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(FormattedMessage, screenTitle) : null;
633
628
  var parametersMessage = intl.formatMessage({
@@ -671,14 +666,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
671
666
  theme: "secondary",
672
667
  withoutBar: true,
673
668
  noWrap: true,
674
- className: classNames([styles$f.container, 'text-truncate', _defineProperty({}, className, className !== null)])
669
+ className: classNames([styles$g.container, 'text-truncate', _defineProperty({}, className, className !== null)])
675
670
  }));
676
671
  };
677
672
 
678
673
  Breadcrumb.propTypes = propTypes$l;
679
674
  Breadcrumb.defaultProps = defaultProps$l;
680
675
 
681
- var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
676
+ var styles$f = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
682
677
 
683
678
  var propTypes$k = {
684
679
  className: PropTypes.string,
@@ -703,10 +698,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
703
698
  "value": "Delete screen"
704
699
  }]
705
700
  }),
706
- className: classNames([styles$e.container, _defineProperty({}, className, className)]),
701
+ className: classNames([styles$f.container, _defineProperty({}, className, className)]),
707
702
  onClickClose: onCancel
708
703
  }, /*#__PURE__*/React.createElement("div", {
709
- className: styles$e.description
704
+ className: styles$f.description
710
705
  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
711
706
  id: "q/tLk0",
712
707
  defaultMessage: [{
@@ -714,7 +709,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
714
709
  "value": "Are you sure you want to delete this screen?"
715
710
  }]
716
711
  }))), /*#__PURE__*/React.createElement("div", {
717
- className: styles$e.actions
712
+ className: styles$f.actions
718
713
  }, /*#__PURE__*/React.createElement(Button, {
719
714
  onClick: onCancel,
720
715
  className: "btn-outline-secondary me-2"
@@ -740,6 +735,8 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
740
735
  DeleteScreenModal.propTypes = propTypes$k;
741
736
  DeleteScreenModal.defaultProps = defaultProps$k;
742
737
 
738
+ var styles$e = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","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","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
739
+
743
740
  var propTypes$j = {
744
741
  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
745
742
  isTheme: PropTypes.bool,
@@ -789,7 +786,7 @@ var EditForm = function EditForm(_ref) {
789
786
  return definition != null ? getScreenFieldsWithStates(definition) : [];
790
787
  }, [screensManager, screen]); // Get transition value
791
788
 
792
- var _useFormTransition = useFormTransition(url, screenIndex, styles$h),
789
+ var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
793
790
  transitionClassNames = _useFormTransition.classNames,
794
791
  transitionTimeout = _useFormTransition.timeout;
795
792
 
@@ -826,12 +823,18 @@ var EditForm = function EditForm(_ref) {
826
823
  _ref5$ = _ref5[0],
827
824
  rootFieldName = _ref5$ === void 0 ? null : _ref5$;
828
825
 
829
- var _ref6 = (rootFieldName !== null ? screenFields.find(function (_ref7) {
830
- var name = _ref7.name;
831
- return name === rootFieldName;
826
+ var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
827
+ _ref7 = _slicedToArray(_ref6, 1),
828
+ _ref7$ = _ref7[0],
829
+ currentStateId = _ref7$ === void 0 ? null : _ref7$;
830
+
831
+ var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
832
+ var name = _ref9.name,
833
+ fieldStateId = _ref9.stateId;
834
+ return name === rootFieldName && currentStateId === fieldStateId;
832
835
  }) || null : null) || {},
833
- _ref6$stateId = _ref6.stateId,
834
- stateId = _ref6$stateId === void 0 ? null : _ref6$stateId;
836
+ _ref8$stateId = _ref8.stateId,
837
+ stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
835
838
 
836
839
  routePush(hasField ? fieldRoute : 'screen', {
837
840
  screen: screenId,
@@ -842,7 +845,7 @@ var EditForm = function EditForm(_ref) {
842
845
  });
843
846
  setFieldForms(_objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
844
847
  setFieldContext(context);
845
- }, [routePush, screenId, screenFields, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
848
+ }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
846
849
  var closeFieldForm = useCallback(function (field) {
847
850
  var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
848
851
  var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
@@ -879,21 +882,21 @@ var EditForm = function EditForm(_ref) {
879
882
  setScreenSettingsOpened(false);
880
883
  }, [setScreenSettingsOpened]);
881
884
  var onDeleteScreenConfirm = useCallback(function () {
882
- var current = screens.findIndex(function (_ref8) {
883
- var _ref8$id = _ref8.id,
884
- scrId = _ref8$id === void 0 ? null : _ref8$id;
885
+ var current = screens.findIndex(function (_ref10) {
886
+ var _ref10$id = _ref10.id,
887
+ scrId = _ref10$id === void 0 ? null : _ref10$id;
885
888
  return scrId === screenId;
886
889
  }) || 0;
887
- var previous = screens.find(function (_ref9, i) {
888
- var _ref9$id = _ref9.id,
889
- scrId = _ref9$id === void 0 ? null : _ref9$id;
890
+ var previous = screens.find(function (_ref11, i) {
891
+ var _ref11$id = _ref11.id,
892
+ scrId = _ref11$id === void 0 ? null : _ref11$id;
890
893
  return scrId !== screenId && (i === current - 1 || current === 0);
891
894
  }) || null;
892
895
 
893
896
  if (previous !== null) {
894
- var _ref10 = previous || {},
895
- _ref10$id = _ref10.id,
896
- firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
897
+ var _ref12 = previous || {},
898
+ _ref12$id = _ref12.id,
899
+ firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
897
900
 
898
901
  routePush('screen', {
899
902
  screen: firstScreenId
@@ -937,7 +940,7 @@ var EditForm = function EditForm(_ref) {
937
940
  compact: true,
938
941
  noWrap: true,
939
942
  withoutCollapse: true,
940
- className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$h.navbar])
943
+ className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
941
944
  }, /*#__PURE__*/React.createElement(Breadcrumb, {
942
945
  story: value,
943
946
  url: url,
@@ -958,7 +961,7 @@ var EditForm = function EditForm(_ref) {
958
961
  visible: screenSettingsOpened,
959
962
  onClickOutside: onDropdownClickOutside
960
963
  })) : null) : null, /*#__PURE__*/React.createElement("div", {
961
- className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$h.content])
964
+ className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
962
965
  }, screen !== null ? /*#__PURE__*/React.createElement(TransitionGroup, {
963
966
  className: "w-100 flex-grow-1",
964
967
  childFactory: function childFactory(child) {
@@ -970,14 +973,14 @@ var EditForm = function EditForm(_ref) {
970
973
  timeout: transitionTimeout,
971
974
  key: "field-".concat(fieldParams, "-").concat(formParams)
972
975
  }, /*#__PURE__*/React.createElement("div", {
973
- className: classNames(['w-100', styles$h.panel])
976
+ className: classNames(['w-100', styles$e.panel])
974
977
  }, /*#__PURE__*/React.createElement(ScreenProvider, {
975
978
  data: screen
976
979
  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
977
980
  name: fieldParams.replace(/\//g, '.'),
978
981
  value: screen,
979
982
  form: formParams,
980
- className: styles$h.form,
983
+ className: styles$e.form,
981
984
  gotoFieldForm: gotoFieldForm,
982
985
  closeFieldForm: closeFieldForm,
983
986
  fieldContext: fieldContext,
@@ -987,13 +990,13 @@ var EditForm = function EditForm(_ref) {
987
990
  timeout: transitionTimeout,
988
991
  key: "screen-".concat(screen.id)
989
992
  }, /*#__PURE__*/React.createElement("div", {
990
- className: classNames(['w-100', styles$h.panel]),
993
+ className: classNames(['w-100', styles$e.panel]),
991
994
  key: "screen-".concat(screen.id)
992
995
  }, /*#__PURE__*/React.createElement(ScreenProvider, {
993
996
  data: screen
994
997
  }, /*#__PURE__*/React.createElement(ScreenForm, {
995
998
  value: screen,
996
- className: styles$h.form,
999
+ className: styles$e.form,
997
1000
  onChange: onScreenFormChange,
998
1001
  gotoFieldForm: gotoFieldForm,
999
1002
  closeFieldForm: closeFieldForm
@@ -3550,7 +3553,7 @@ var styles = {"container":"micromag-editor-forms-settings-container","inner":"mi
3550
3553
 
3551
3554
  var propTypes$2 = {
3552
3555
  name: PropTypes.string,
3553
- field: PropTypes$1.formField.isRequired,
3556
+ field: PropTypes$1.formField,
3554
3557
  value: PropTypes$1.component,
3555
3558
  className: PropTypes.string,
3556
3559
  gotoFieldForm: PropTypes.func.isRequired,
@@ -3559,6 +3562,7 @@ var propTypes$2 = {
3559
3562
  };
3560
3563
  var defaultProps$2 = {
3561
3564
  name: null,
3565
+ field: null,
3562
3566
  value: null,
3563
3567
  className: null,
3564
3568
  onChange: null
@@ -3572,14 +3576,18 @@ var SettingsForm = function SettingsForm(_ref) {
3572
3576
  gotoFieldForm = _ref.gotoFieldForm,
3573
3577
  closeFieldForm = _ref.closeFieldForm,
3574
3578
  onChange = _ref.onChange;
3575
- var _field$type = field.type,
3576
- type = _field$type === void 0 ? null : _field$type;
3579
+ if (field === null) return false;
3580
+
3581
+ var _ref2 = field || {},
3582
+ _ref2$type = _ref2.type,
3583
+ type = _ref2$type === void 0 ? null : _ref2$type;
3584
+
3577
3585
  var fieldsManager = useFieldsManager();
3578
3586
 
3579
- var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
3580
- _ref2$component = _ref2.component,
3581
- fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
3582
- settings = _ref2.settings;
3587
+ var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
3588
+ _ref3$component = _ref3.component,
3589
+ fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
3590
+ settings = _ref3.settings;
3583
3591
 
3584
3592
  var FieldComponent = useFieldComponent(fieldComponent);
3585
3593
  var FieldsComponent = useFieldComponent('fields');
package/lib/index.js CHANGED
@@ -143,12 +143,10 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
143
143
  };
144
144
  };
145
145
 
146
- var styles$h = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","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","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
147
-
148
146
  function getScreenFieldsWithStates(definition) {
149
147
  var _ref = definition || {},
150
148
  _ref$fields = _ref.fields,
151
- screenFields = _ref$fields === void 0 ? [] : _ref$fields,
149
+ screenFields = _ref$fields === void 0 ? null : _ref$fields,
152
150
  _ref$states = _ref.states,
153
151
  states = _ref$states === void 0 ? null : _ref$states;
154
152
 
@@ -156,8 +154,9 @@ function getScreenFieldsWithStates(definition) {
156
154
  return screenFields;
157
155
  }
158
156
 
159
- return [].concat(_toConsumableArray__default["default"](states.reduce(function (statesFields, _ref2) {
160
- var id = _ref2.id,
157
+ var extraFields = states.reduce(function (statesFields, current) {
158
+ var _ref2 = current || {},
159
+ id = _ref2.id,
161
160
  _ref2$fields = _ref2.fields,
162
161
  fields = _ref2$fields === void 0 ? [] : _ref2$fields,
163
162
  _ref2$repeatable = _ref2.repeatable,
@@ -167,6 +166,7 @@ function getScreenFieldsWithStates(definition) {
167
166
  label = _ref2.label,
168
167
  _ref2$defaultValue = _ref2.defaultValue,
169
168
  defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
169
+
170
170
  return [].concat(_toConsumableArray__default["default"](statesFields), _toConsumableArray__default["default"](repeatable ? [{
171
171
  type: 'items',
172
172
  name: fieldName || id,
@@ -188,7 +188,8 @@ function getScreenFieldsWithStates(definition) {
188
188
  stateId: id
189
189
  });
190
190
  }) : []));
191
- }, [])), _toConsumableArray__default["default"](screenFields));
191
+ }, []);
192
+ return [].concat(_toConsumableArray__default["default"](extraFields), _toConsumableArray__default["default"](screenFields));
192
193
  }
193
194
 
194
195
  var createScreen = function createScreen(definition) {
@@ -336,13 +337,10 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
336
337
  form = _ref.form,
337
338
  props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
338
339
 
339
- // Get definitions
340
340
  var definition = contexts.useScreenDefinition() || null;
341
341
  var _definition$states = definition.states,
342
342
  states = _definition$states === void 0 ? null : _definition$states;
343
- var screenFields = getScreenFieldsWithStates(definition); // const [stateId = null] = name.split('.');
344
- // const currentState = states !== null ? states.find(({ id }) => id === stateId) || null : null;
345
-
343
+ var screenFields = getScreenFieldsWithStates(definition);
346
344
  var nameParts = name.split('.');
347
345
 
348
346
  var _nameParts = _slicedToArray__default["default"](nameParts, 1),
@@ -363,35 +361,23 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
363
361
  _ref3$fields = _ref3.fields,
364
362
  stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
365
363
 
364
+ var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
365
+ var itemName = _ref4.name,
366
+ fieldStateId = _ref4.stateId;
367
+ return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
368
+ }) : screenFields;
369
+
366
370
  if (currentState !== null) {
367
371
  finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](nameParts.slice(1))) : nameParts.slice(1);
368
372
  }
369
373
 
370
- var formComponents = contexts.useFormsComponents(); // if (currentState !== null && !repeatable && stateFieldName === null) {
371
- // return (
372
- // <div className="p-2">
373
- // <Fields fields={stateFields} {...props} />
374
- // </div>
375
- // );
376
- // }
377
- // const finalFields =
378
- // repeatable || stateFieldName !== null
379
- // ? [{
380
- // name: stateFieldName || stateId,
381
- // itemsField: {
382
- // type: 'fields',
383
- // fields: stateFields,
384
- // className: 'p-2'
385
- // },
386
- // }]
387
- // : fields;
388
-
374
+ var formComponents = contexts.useFormsComponents();
389
375
  return definition !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
390
376
  className: classNames__default["default"]({
391
377
  'p-2': form === null
392
378
  })
393
379
  }, finalNameParts.length > 0 ? /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
394
- fields: screenFields,
380
+ fields: finalScreenFields,
395
381
  formComponents: formComponents,
396
382
  name: finalNameParts.join('.'),
397
383
  form: form
@@ -403,7 +389,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
403
389
  FieldWithContexts.propTypes = propTypes$n;
404
390
  FieldWithContexts.defaultProps = defaultProps$n;
405
391
 
406
- var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
392
+ var styles$h = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
407
393
 
408
394
  var propTypes$m = {
409
395
  value: core.PropTypes.component,
@@ -446,9 +432,9 @@ var ScreenForm = function ScreenForm(_ref) {
446
432
 
447
433
 
448
434
  return /*#__PURE__*/React__default["default"].createElement("div", {
449
- className: classNames__default["default"]([styles$g.container, _defineProperty__default["default"]({}, className, className)])
435
+ className: classNames__default["default"]([styles$h.container, _defineProperty__default["default"]({}, className, className)])
450
436
  }, /*#__PURE__*/React__default["default"].createElement("div", {
451
- className: styles$g.inner
437
+ className: styles$h.inner
452
438
  }, fields$1 !== null ? /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
453
439
  fields: fields$1,
454
440
  value: value,
@@ -461,7 +447,7 @@ var ScreenForm = function ScreenForm(_ref) {
461
447
  ScreenForm.propTypes = propTypes$m;
462
448
  ScreenForm.defaultProps = defaultProps$m;
463
449
 
464
- var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
450
+ var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
465
451
 
466
452
  var propTypes$l = {
467
453
  story: core.PropTypes.story,
@@ -564,19 +550,24 @@ var Breadcrumb = function Breadcrumb(_ref) {
564
550
  var lastKeyIndex = finalFieldPath.length - 1;
565
551
  var parentItem = null;
566
552
  finalFieldPath.reduce(function (currentFields, key, keyIndex) {
567
- var _currentFields$type = currentFields.type,
568
- fieldType = _currentFields$type === void 0 ? null : _currentFields$type,
569
- _currentFields$fields = currentFields.fields,
570
- currentSubFields = _currentFields$fields === void 0 ? null : _currentFields$fields,
571
- _currentFields$itemsF = currentFields.itemsField,
572
- currentItemsField = _currentFields$itemsF === void 0 ? null : _currentFields$itemsF;
553
+ var _ref6 = currentFields || {},
554
+ _ref6$type = _ref6.type,
555
+ fieldType = _ref6$type === void 0 ? null : _ref6$type,
556
+ _ref6$fields = _ref6.fields,
557
+ currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
558
+ _ref6$itemsField = _ref6.itemsField,
559
+ currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
560
+
573
561
  var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
574
- var _fieldsDef$fields = fieldsDef.fields,
575
- defSubFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
576
- _fieldsDef$settings = fieldsDef.settings,
577
- settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
578
- _fieldsDef$itemsField = fieldsDef.itemsField,
579
- defItemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
562
+
563
+ var _ref7 = fieldsDef || {},
564
+ _ref7$fields = _ref7.fields,
565
+ defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
566
+ _ref7$settings = _ref7.settings,
567
+ settings = _ref7$settings === void 0 ? null : _ref7$settings,
568
+ _ref7$itemsField = _ref7.itemsField,
569
+ defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
570
+
580
571
  var itemsField = currentItemsField || defItemsField;
581
572
  var subFields = currentSubFields || defSubFields;
582
573
  var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
@@ -619,9 +610,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
619
610
  var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
620
611
  var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
621
612
 
622
- var _ref6 = parentItem || {},
623
- _ref6$label = _ref6.label,
624
- parentItemLabel = _ref6$label === void 0 ? null : _ref6$label;
613
+ var _ref8 = parentItem || {},
614
+ _ref8$label = _ref8.label,
615
+ parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
625
616
 
626
617
  var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
627
618
  var item = {
@@ -637,17 +628,21 @@ var Breadcrumb = function Breadcrumb(_ref) {
637
628
  parentItem = item;
638
629
  return nextFields;
639
630
  }, {
640
- fields: screenFields
631
+ fields: stateId === null ? screenFields : screenFields.filter(function (_ref9) {
632
+ var _ref9$stateId = _ref9.stateId,
633
+ fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
634
+ return fieldStateId === null || fieldStateId === stateId;
635
+ })
641
636
  });
642
637
  }
643
638
 
644
- var _ref7 = screenParameters || {},
645
- _ref7$metadata = _ref7.metadata,
646
- metadata = _ref7$metadata === void 0 ? null : _ref7$metadata;
639
+ var _ref10 = screenParameters || {},
640
+ _ref10$metadata = _ref10.metadata,
641
+ metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
647
642
 
648
- var _ref8 = metadata || {},
649
- _ref8$title = _ref8.title,
650
- title = _ref8$title === void 0 ? null : _ref8$title;
643
+ var _ref11 = metadata || {},
644
+ _ref11$title = _ref11.title,
645
+ title = _ref11$title === void 0 ? null : _ref11$title;
651
646
 
652
647
  var typeTitle = screenTitle !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, screenTitle) : null;
653
648
  var parametersMessage = intl.formatMessage({
@@ -691,14 +686,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
691
686
  theme: "secondary",
692
687
  withoutBar: true,
693
688
  noWrap: true,
694
- className: classNames__default["default"]([styles$f.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
689
+ className: classNames__default["default"]([styles$g.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
695
690
  }));
696
691
  };
697
692
 
698
693
  Breadcrumb.propTypes = propTypes$l;
699
694
  Breadcrumb.defaultProps = defaultProps$l;
700
695
 
701
- var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
696
+ var styles$f = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
702
697
 
703
698
  var propTypes$k = {
704
699
  className: PropTypes__default["default"].string,
@@ -723,10 +718,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
723
718
  "value": "Delete screen"
724
719
  }]
725
720
  }),
726
- className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
721
+ className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className)]),
727
722
  onClickClose: onCancel
728
723
  }, /*#__PURE__*/React__default["default"].createElement("div", {
729
- className: styles$e.description
724
+ className: styles$f.description
730
725
  }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
731
726
  id: "q/tLk0",
732
727
  defaultMessage: [{
@@ -734,7 +729,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
734
729
  "value": "Are you sure you want to delete this screen?"
735
730
  }]
736
731
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
737
- className: styles$e.actions
732
+ className: styles$f.actions
738
733
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
739
734
  onClick: onCancel,
740
735
  className: "btn-outline-secondary me-2"
@@ -760,6 +755,8 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
760
755
  DeleteScreenModal.propTypes = propTypes$k;
761
756
  DeleteScreenModal.defaultProps = defaultProps$k;
762
757
 
758
+ var styles$e = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","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","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
759
+
763
760
  var propTypes$j = {
764
761
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
765
762
  isTheme: PropTypes__default["default"].bool,
@@ -809,7 +806,7 @@ var EditForm = function EditForm(_ref) {
809
806
  return definition != null ? getScreenFieldsWithStates(definition) : [];
810
807
  }, [screensManager, screen]); // Get transition value
811
808
 
812
- var _useFormTransition = useFormTransition(url, screenIndex, styles$h),
809
+ var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
813
810
  transitionClassNames = _useFormTransition.classNames,
814
811
  transitionTimeout = _useFormTransition.timeout;
815
812
 
@@ -846,12 +843,18 @@ var EditForm = function EditForm(_ref) {
846
843
  _ref5$ = _ref5[0],
847
844
  rootFieldName = _ref5$ === void 0 ? null : _ref5$;
848
845
 
849
- var _ref6 = (rootFieldName !== null ? screenFields.find(function (_ref7) {
850
- var name = _ref7.name;
851
- return name === rootFieldName;
846
+ var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
847
+ _ref7 = _slicedToArray__default["default"](_ref6, 1),
848
+ _ref7$ = _ref7[0],
849
+ currentStateId = _ref7$ === void 0 ? null : _ref7$;
850
+
851
+ var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
852
+ var name = _ref9.name,
853
+ fieldStateId = _ref9.stateId;
854
+ return name === rootFieldName && currentStateId === fieldStateId;
852
855
  }) || null : null) || {},
853
- _ref6$stateId = _ref6.stateId,
854
- stateId = _ref6$stateId === void 0 ? null : _ref6$stateId;
856
+ _ref8$stateId = _ref8.stateId,
857
+ stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
855
858
 
856
859
  routePush(hasField ? fieldRoute : 'screen', {
857
860
  screen: screenId,
@@ -862,7 +865,7 @@ var EditForm = function EditForm(_ref) {
862
865
  });
863
866
  setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
864
867
  setFieldContext(context);
865
- }, [routePush, screenId, screenFields, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
868
+ }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
866
869
  var closeFieldForm = React.useCallback(function (field) {
867
870
  var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
868
871
  var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
@@ -899,21 +902,21 @@ var EditForm = function EditForm(_ref) {
899
902
  setScreenSettingsOpened(false);
900
903
  }, [setScreenSettingsOpened]);
901
904
  var onDeleteScreenConfirm = React.useCallback(function () {
902
- var current = screens.findIndex(function (_ref8) {
903
- var _ref8$id = _ref8.id,
904
- scrId = _ref8$id === void 0 ? null : _ref8$id;
905
+ var current = screens.findIndex(function (_ref10) {
906
+ var _ref10$id = _ref10.id,
907
+ scrId = _ref10$id === void 0 ? null : _ref10$id;
905
908
  return scrId === screenId;
906
909
  }) || 0;
907
- var previous = screens.find(function (_ref9, i) {
908
- var _ref9$id = _ref9.id,
909
- scrId = _ref9$id === void 0 ? null : _ref9$id;
910
+ var previous = screens.find(function (_ref11, i) {
911
+ var _ref11$id = _ref11.id,
912
+ scrId = _ref11$id === void 0 ? null : _ref11$id;
910
913
  return scrId !== screenId && (i === current - 1 || current === 0);
911
914
  }) || null;
912
915
 
913
916
  if (previous !== null) {
914
- var _ref10 = previous || {},
915
- _ref10$id = _ref10.id,
916
- firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
917
+ var _ref12 = previous || {},
918
+ _ref12$id = _ref12.id,
919
+ firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
917
920
 
918
921
  routePush('screen', {
919
922
  screen: firstScreenId
@@ -957,7 +960,7 @@ var EditForm = function EditForm(_ref) {
957
960
  compact: true,
958
961
  noWrap: true,
959
962
  withoutCollapse: true,
960
- className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$h.navbar])
963
+ className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
961
964
  }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
962
965
  story: value,
963
966
  url: url,
@@ -978,7 +981,7 @@ var EditForm = function EditForm(_ref) {
978
981
  visible: screenSettingsOpened,
979
982
  onClickOutside: onDropdownClickOutside
980
983
  })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
981
- className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$h.content])
984
+ className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
982
985
  }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
983
986
  className: "w-100 flex-grow-1",
984
987
  childFactory: function childFactory(child) {
@@ -990,14 +993,14 @@ var EditForm = function EditForm(_ref) {
990
993
  timeout: transitionTimeout,
991
994
  key: "field-".concat(fieldParams, "-").concat(formParams)
992
995
  }, /*#__PURE__*/React__default["default"].createElement("div", {
993
- className: classNames__default["default"](['w-100', styles$h.panel])
996
+ className: classNames__default["default"](['w-100', styles$e.panel])
994
997
  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
995
998
  data: screen
996
999
  }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
997
1000
  name: fieldParams.replace(/\//g, '.'),
998
1001
  value: screen,
999
1002
  form: formParams,
1000
- className: styles$h.form,
1003
+ className: styles$e.form,
1001
1004
  gotoFieldForm: gotoFieldForm,
1002
1005
  closeFieldForm: closeFieldForm,
1003
1006
  fieldContext: fieldContext,
@@ -1007,13 +1010,13 @@ var EditForm = function EditForm(_ref) {
1007
1010
  timeout: transitionTimeout,
1008
1011
  key: "screen-".concat(screen.id)
1009
1012
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1010
- className: classNames__default["default"](['w-100', styles$h.panel]),
1013
+ className: classNames__default["default"](['w-100', styles$e.panel]),
1011
1014
  key: "screen-".concat(screen.id)
1012
1015
  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
1013
1016
  data: screen
1014
1017
  }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
1015
1018
  value: screen,
1016
- className: styles$h.form,
1019
+ className: styles$e.form,
1017
1020
  onChange: onScreenFormChange,
1018
1021
  gotoFieldForm: gotoFieldForm,
1019
1022
  closeFieldForm: closeFieldForm
@@ -3570,7 +3573,7 @@ var styles = {"container":"micromag-editor-forms-settings-container","inner":"mi
3570
3573
 
3571
3574
  var propTypes$2 = {
3572
3575
  name: PropTypes__default["default"].string,
3573
- field: core.PropTypes.formField.isRequired,
3576
+ field: core.PropTypes.formField,
3574
3577
  value: core.PropTypes.component,
3575
3578
  className: PropTypes__default["default"].string,
3576
3579
  gotoFieldForm: PropTypes__default["default"].func.isRequired,
@@ -3579,6 +3582,7 @@ var propTypes$2 = {
3579
3582
  };
3580
3583
  var defaultProps$2 = {
3581
3584
  name: null,
3585
+ field: null,
3582
3586
  value: null,
3583
3587
  className: null,
3584
3588
  onChange: null
@@ -3592,14 +3596,18 @@ var SettingsForm = function SettingsForm(_ref) {
3592
3596
  gotoFieldForm = _ref.gotoFieldForm,
3593
3597
  closeFieldForm = _ref.closeFieldForm,
3594
3598
  onChange = _ref.onChange;
3595
- var _field$type = field.type,
3596
- type = _field$type === void 0 ? null : _field$type;
3599
+ if (field === null) return false;
3600
+
3601
+ var _ref2 = field || {},
3602
+ _ref2$type = _ref2.type,
3603
+ type = _ref2$type === void 0 ? null : _ref2$type;
3604
+
3597
3605
  var fieldsManager = contexts.useFieldsManager();
3598
3606
 
3599
- var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
3600
- _ref2$component = _ref2.component,
3601
- fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
3602
- settings = _ref2.settings;
3607
+ var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
3608
+ _ref3$component = _ref3.component,
3609
+ fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
3610
+ settings = _ref3.settings;
3603
3611
 
3604
3612
  var FieldComponent = contexts.useFieldComponent(fieldComponent);
3605
3613
  var FieldsComponent = contexts.useFieldComponent('fields');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/editor",
3
- "version": "0.3.252",
3
+ "version": "0.3.263",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -62,11 +62,11 @@
62
62
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
63
63
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
64
64
  "@fortawesome/react-fontawesome": "^0.1.13",
65
- "@micromag/core": "^0.3.252",
66
- "@micromag/elements": "^0.3.252",
67
- "@micromag/fields": "^0.3.252",
68
- "@micromag/screens": "^0.3.252",
69
- "@micromag/viewer": "^0.3.252",
65
+ "@micromag/core": "^0.3.263",
66
+ "@micromag/elements": "^0.3.263",
67
+ "@micromag/fields": "^0.3.263",
68
+ "@micromag/screens": "^0.3.263",
69
+ "@micromag/viewer": "^0.3.263",
70
70
  "classnames": "^2.2.6",
71
71
  "lodash": "^4.17.21",
72
72
  "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
84
+ "gitHead": "711b660a3fa66a6490bdb75148e340aec0064f45"
85
85
  }