@micromag/editor 0.3.16 → 0.3.19

package/assets/css/styles.css

@@ -3,7 +3,7 @@
 .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}
 .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}
 .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}
-.micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;padding:20px 0}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
+.micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;padding:20px 0}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-container .micromag-editor-preview-devices{position:absolute;right:10px;bottom:10px}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
 .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}
 .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
 .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{font-size:.75em}

package/es/index.js

@@ -19,8 +19,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import 'lodash/isArray';
 import 'lodash/get';
 import 'lodash/set';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisV, faCogs, faPlus, faGripLines, faTimes, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Fields, FieldsProvider } from '@micromag/fields';
 import { getSizeWithinBounds } from '@folklore/size';
 import { Viewer } from '@micromag/viewer';
@@ -839,15 +839,38 @@ var EditForm = function EditForm(_ref) {
     setScreenSettingsOpened(false);
   }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
   var onSettingsClick = useCallback(function () {
+    console.log('screenSettingsOpened', screenSettingsOpened); // eslint-disable-line
+
     setScreenSettingsOpened(!screenSettingsOpened);
   }, [screenSettingsOpened, setScreenSettingsOpened]);
   var onDropdownClickOutside = useCallback(function () {
     setScreenSettingsOpened(false);
   }, [setScreenSettingsOpened]);
   var onDeleteScreenConfirm = useCallback(function () {
+    var current = screens.findIndex(function (_ref8) {
+      var _ref8$id = _ref8.id,
+          scrId = _ref8$id === void 0 ? null : _ref8$id;
+      return scrId === screenId;
+    }) || 0;
+    var previous = screens.find(function (_ref9, i) {
+      var _ref9$id = _ref9.id,
+          scrId = _ref9$id === void 0 ? null : _ref9$id;
+      return scrId !== screenId && (i === current - 1 || current === 0);
+    }) || null;
+
+    if (previous !== null) {
+      var _ref10 = previous || {},
+          _ref10$id = _ref10.id,
+          firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
+
+      routePush('screen', {
+        screen: firstScreenId
+      });
+    }
+
     triggerOnChange(deleteScreen(value, screenId));
     setDeleteScreenModalOpened(false);
-  }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
+  }, [value, triggerOnChange, screenId, setScreenSettingsOpened, routePush, screens]);
   var onDeleteScreenCancel = useCallback(function () {
     setDeleteScreenModalOpened(false);
   }, [setDeleteScreenModalOpened]);
@@ -876,6 +899,8 @@ var EditForm = function EditForm(_ref) {
   }].filter(function (it) {
     return it !== null;
   });
+  console.log(screenSettingsOpened); // eslint-disable-line
+
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'flex-column', className])
   }, screenId !== null ? /*#__PURE__*/React.createElement(Navbar, {
@@ -997,7 +1022,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$d = {"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"};
+var styles$d = {"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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
 
 var styles$c = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
 
@@ -1458,7 +1483,7 @@ var defaultProps$b = {
   className: null,
   onScreenChange: null,
   onChange: null,
-  withoutDevicesSizes: true
+  withoutDevicesSizes: false
 };
 
 var EditorPreview = function EditorPreview(_ref) {
@@ -1574,17 +1599,7 @@ var EditorPreview = function EditorPreview(_ref) {
     }), (_ref9 = {}, _defineProperty(_ref9, className, className), _defineProperty(_ref9, styles$d.withoutDevicesSizes, withoutDevicesSizes), _ref9)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$d.inner
-  }, !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$d.top
-  }, /*#__PURE__*/React.createElement(DevicesMenu, {
-    items: devices.map(function (it) {
-      return _objectSpread(_objectSpread({}, it), {}, {
-        active: it.id === deviceId
-      });
-    }),
-    onClickItem: onClickDeviceItem,
-    className: styles$d.devices
-  })) : null, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
+  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$d.top, 'px-1'])
   }, /*#__PURE__*/React.createElement(ScreenStates, {
     screen: currentScreen,
@@ -1611,7 +1626,17 @@ var EditorPreview = function EditorPreview(_ref) {
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
-  })))))));
+  }))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
+    className: styles$d.deviceMenu
+  }, /*#__PURE__*/React.createElement(DevicesMenu, {
+    items: devices.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        active: it.id === deviceId
+      });
+    }),
+    onClickItem: onClickDeviceItem,
+    className: styles$d.devices
+  })) : null));
 };
 
 EditorPreview.propTypes = propTypes$b;

package/lib/index.js

@@ -23,8 +23,8 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 require('lodash/isArray');
 require('lodash/get');
 require('lodash/set');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var fields = require('@micromag/fields');
 var size = require('@folklore/size');
 var viewer = require('@micromag/viewer');
@@ -859,15 +859,38 @@ var EditForm = function EditForm(_ref) {
     setScreenSettingsOpened(false);
   }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
   var onSettingsClick = React.useCallback(function () {
+    console.log('screenSettingsOpened', screenSettingsOpened); // eslint-disable-line
+
     setScreenSettingsOpened(!screenSettingsOpened);
   }, [screenSettingsOpened, setScreenSettingsOpened]);
   var onDropdownClickOutside = React.useCallback(function () {
     setScreenSettingsOpened(false);
   }, [setScreenSettingsOpened]);
   var onDeleteScreenConfirm = React.useCallback(function () {
+    var current = screens.findIndex(function (_ref8) {
+      var _ref8$id = _ref8.id,
+          scrId = _ref8$id === void 0 ? null : _ref8$id;
+      return scrId === screenId;
+    }) || 0;
+    var previous = screens.find(function (_ref9, i) {
+      var _ref9$id = _ref9.id,
+          scrId = _ref9$id === void 0 ? null : _ref9$id;
+      return scrId !== screenId && (i === current - 1 || current === 0);
+    }) || null;
+
+    if (previous !== null) {
+      var _ref10 = previous || {},
+          _ref10$id = _ref10.id,
+          firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
+
+      routePush('screen', {
+        screen: firstScreenId
+      });
+    }
+
     triggerOnChange(deleteScreen(value, screenId));
     setDeleteScreenModalOpened(false);
-  }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
+  }, [value, triggerOnChange, screenId, setScreenSettingsOpened, routePush, screens]);
   var onDeleteScreenCancel = React.useCallback(function () {
     setDeleteScreenModalOpened(false);
   }, [setDeleteScreenModalOpened]);
@@ -896,6 +919,8 @@ var EditForm = function EditForm(_ref) {
   }].filter(function (it) {
     return it !== null;
   });
+  console.log(screenSettingsOpened); // eslint-disable-line
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['d-flex', 'flex-column', className])
   }, screenId !== null ? /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
@@ -1017,7 +1042,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$d = {"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"};
+var styles$d = {"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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
 
 var styles$c = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
 
@@ -1478,7 +1503,7 @@ var defaultProps$b = {
   className: null,
   onScreenChange: null,
   onChange: null,
-  withoutDevicesSizes: true
+  withoutDevicesSizes: false
 };
 
 var EditorPreview = function EditorPreview(_ref) {
@@ -1594,17 +1619,7 @@ var EditorPreview = function EditorPreview(_ref) {
     }), (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className), _defineProperty__default["default"](_ref9, styles$d.withoutDevicesSizes, withoutDevicesSizes), _ref9)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$d.inner
-  }, !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.top
-  }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
-    items: devices.map(function (it) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
-        active: it.id === deviceId
-      });
-    }),
-    onClickItem: onClickDeviceItem,
-    className: styles$d.devices
-  })) : null, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$d.top, 'px-1'])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenStates, {
     screen: currentScreen,
@@ -1631,7 +1646,17 @@ var EditorPreview = function EditorPreview(_ref) {
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
-  })))))));
+  }))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$d.deviceMenu
+  }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
+    items: devices.map(function (it) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+        active: it.id === deviceId
+      });
+    }),
+    onClickItem: onClickDeviceItem,
+    className: styles$d.devices
+  })) : null));
 };
 
 EditorPreview.propTypes = propTypes$b;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.16",
+    "version": "0.3.19",
     "description": "",
     "keywords": [
         "javascript"
@@ -62,11 +62,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.15",
-        "@micromag/elements": "^0.3.15",
-        "@micromag/fields": "^0.3.15",
-        "@micromag/screens": "^0.3.15",
-        "@micromag/viewer": "^0.3.15",
+        "@micromag/core": "^0.3.19",
+        "@micromag/elements": "^0.3.19",
+        "@micromag/fields": "^0.3.19",
+        "@micromag/screens": "^0.3.19",
+        "@micromag/viewer": "^0.3.19",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b8c86ca62042d43be71c553c70370b01d0202f26"
+    "gitHead": "567326b79369a96c8c4cfed8ec08a3e67114261f"
 }