@micromag/editor 0.2.388 → 0.2.389

package/es/index.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouteMatch, useParams, Route, useHistory, MemoryRouter } from 'react-router';
+import { useRouteMatch, Route, useHistory, MemoryRouter } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useFieldsManager, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, useRoutes, useScreensManager, useRoutePush, useUrlGenerator, useScreenSize, useScreenDefinition, useFormsComponents, ScreenProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
@@ -639,9 +639,11 @@ var EditorScreens = function EditorScreens(_ref) {
   var push = useRoutePush();
   var url = useUrlGenerator();
 
-  var _useParams = useParams(),
-      _useParams$screen = _useParams.screen,
-      currentScreenId = _useParams$screen === void 0 ? null : _useParams$screen;
+  var _useRouteParams = useRouteParams({
+    screenOnly: true
+  }),
+      _useRouteParams$scree = _useRouteParams.screen,
+      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
 
   var createScreenFromDefinition = useCallback(function (definition) {
     var _ref3 = value || {},
@@ -662,13 +664,15 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen); // const currentScreenIndex = !isTheme
-    //     ? screens.findIndex(({ id }) => id === currentScreenId) || null
-    //     : null;
-    // console.log(currentScreenIndex); // eslint-disable-line
+    var newScreen = createScreen(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
+    });
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
 
     var newValue = _objectSpread(_objectSpread({}, value), {}, {
-      components: [].concat(_toConsumableArray(currentScreens || []), [newScreen])
+      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
     });
 
     if (onChange !== null) {
@@ -678,29 +682,29 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref6) {
-      var id = _ref6.id;
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
       return id;
     });
 
-    var _ref7 = value || {},
-        _ref7$components = _ref7.components,
-        currentScreens = _ref7$components === void 0 ? [] : _ref7$components;
+    var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
 
-    var currentIds = currentScreens.map(function (_ref8) {
-      var id = _ref8.id;
+    var currentIds = currentScreens.map(function (_ref9) {
+      var id = _ref9.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref9, index) {
-      var id = _ref9.id;
+    var sameOrder = listItems.reduce(function (same, _ref10, index) {
+      var id = _ref10.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder) {
       var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: _toConsumableArray(currentScreens).sort(function (_ref10, _ref11) {
-          var idA = _ref10.id;
-          var idB = _ref11.id;
+        components: _toConsumableArray(currentScreens).sort(function (_ref11, _ref12) {
+          var idA = _ref11.id;
+          var idB = _ref12.id;
           var indexA = ids.indexOf(idA);
           var indexB = ids.indexOf(idB);
 
@@ -719,8 +723,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref12) {
-      var type = _ref12.type;
+    var currentScreen = isTheme ? screens.find(function (_ref13) {
+      var type = _ref13.type;
       return type === definition.id;
     }) || null : null;
 
@@ -765,9 +769,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
-    render: function render(_ref13) {
-      var _ref13$match$params$s = _ref13.match.params.screen,
-          screenId = _ref13$match$params$s === void 0 ? null : _ref13$match$params$s;
+    render: function render(_ref14) {
+      var _ref14$match$params$s = _ref14.match.params.screen,
+          screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -799,8 +803,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref14) {
-      var type = _ref14.type;
+    selectedTypes: isTheme ? screens.map(function (_ref15) {
+      var type = _ref15.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,

package/lib/index.js

@@ -657,9 +657,11 @@ var EditorScreens = function EditorScreens(_ref) {
   var push = contexts.useRoutePush();
   var url = contexts.useUrlGenerator();
 
-  var _useParams = reactRouter.useParams(),
-      _useParams$screen = _useParams.screen,
-      currentScreenId = _useParams$screen === void 0 ? null : _useParams$screen;
+  var _useRouteParams = useRouteParams({
+    screenOnly: true
+  }),
+      _useRouteParams$scree = _useRouteParams.screen,
+      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
 
   var createScreenFromDefinition = React.useCallback(function (definition) {
     var _ref3 = value || {},
@@ -680,13 +682,15 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen); // const currentScreenIndex = !isTheme
-    //     ? screens.findIndex(({ id }) => id === currentScreenId) || null
-    //     : null;
-    // console.log(currentScreenIndex); // eslint-disable-line
+    var newScreen = createScreen(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
+    });
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
 
     var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-      components: [].concat(_toConsumableArray__default["default"](currentScreens || []), [newScreen])
+      components: [].concat(_toConsumableArray__default["default"](currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray__default["default"](currentScreens.slice(currentScreenIndex)))
     });
 
     if (onChange !== null) {
@@ -696,29 +700,29 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = React.useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref6) {
-      var id = _ref6.id;
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
       return id;
     });
 
-    var _ref7 = value || {},
-        _ref7$components = _ref7.components,
-        currentScreens = _ref7$components === void 0 ? [] : _ref7$components;
+    var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
 
-    var currentIds = currentScreens.map(function (_ref8) {
-      var id = _ref8.id;
+    var currentIds = currentScreens.map(function (_ref9) {
+      var id = _ref9.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref9, index) {
-      var id = _ref9.id;
+    var sameOrder = listItems.reduce(function (same, _ref10, index) {
+      var id = _ref10.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder) {
       var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-        components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref10, _ref11) {
-          var idA = _ref10.id;
-          var idB = _ref11.id;
+        components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref11, _ref12) {
+          var idA = _ref11.id;
+          var idB = _ref12.id;
           var indexA = ids.indexOf(idA);
           var indexB = ids.indexOf(idB);
 
@@ -737,8 +741,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = React.useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref12) {
-      var type = _ref12.type;
+    var currentScreen = isTheme ? screens.find(function (_ref13) {
+      var type = _ref13.type;
       return type === definition.id;
     }) || null : null;
 
@@ -783,9 +787,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
     path: [routes.screen, routes.home],
-    render: function render(_ref13) {
-      var _ref13$match$params$s = _ref13.match.params.screen,
-          screenId = _ref13$match$params$s === void 0 ? null : _ref13$match$params$s;
+    render: function render(_ref14) {
+      var _ref14$match$params$s = _ref14.match.params.screen,
+          screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -817,8 +821,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React__default["default"].createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref14) {
-      var type = _ref14.type;
+    selectedTypes: isTheme ? screens.map(function (_ref15) {
+      var type = _ref15.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.2.388",
+    "version": "0.2.389",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,7 +59,7 @@
         "@micromag/elements": "^0.2.386",
         "@micromag/fields": "^0.2.388",
         "@micromag/screens": "^0.2.386",
-        "@micromag/viewer": "^0.2.388",
+        "@micromag/viewer": "^0.2.389",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -74,5 +74,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a4603ba442ea185aad8d45d36f61b8e35445582c"
+    "gitHead": "4d1e175e60baf8da9ecbbce89d29d6d4a57f29ad"
 }