rafactor navigation block

src/components/manage/Blocks/NavigationBlock/Edit.jsx

@@ -1,92 +1,31 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import _uniqueId from 'lodash/uniqueId';
-//import RenderFields from '@eeacms/volto-datablocks/Utils/RenderFields';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
 import View from './View';
-import config from '@plone/volto/registry';
 
-const getSchema = (props) => {
-  return {
-    parent: {
-      title: 'Parent page',
-      widget: 'object_by_path',
-    },
-    className: {
-      title: 'Classname',
-      type: 'text',
-    },
-    fixedTabs: {
-      title: 'Fixed navigation',
-      type: 'boolean',
-    },
-    navFromParent: {
-      title: 'Show navigation from parent',
-      type: 'boolean',
-    },
-    pages: {
-      title: 'Specific pages',
-      type: 'schema',
-      fieldSetTitle: 'specific pages',
-      fieldSetId: 'specific-pages',
-      fieldSetSchema: {
-        fieldsets: [
-          {
-            id: 'default',
-            title: 'Default',
-            fields: ['title', 'url'],
-          },
-        ],
-        properties: {
-          title: {
-            title: 'Title',
-            type: 'text',
-          },
-          url: {
-            title: 'Url',
-            widget: 'text',
-          },
-        },
-        required: ['title', 'url'],
-      },
-      editFieldset: false,
-      deleteFieldset: false,
-    },
-  };
-};
+import schema from './schema';
 
 const Edit = (props) => {
-  const [state, setState] = useState({
-    schema: getSchema({ ...props, providerUrl: config.settings.providerUrl }),
-    id: _uniqueId('block_'),
-  });
-  useEffect(() => {
-    setState({
-      ...state,
-      schema: getSchema({
-        ...props,
-      }),
-    });
-    /* eslint-disable-next-line */
-  }, [state.item, props.data.components]);
   return (
-    <div
-      style={{
-        position: 'relative',
-      }}
-    >
-      {/* <RenderFields schema={state.schema} {...props} title="Navigation block" /> */}
-      <View {...props} id={state.id} mode="edit" />
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-        }}
-      ></div>
-    </div>
+    <>
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
   );
 };
 

src/components/manage/Blocks/NavigationBlock/schema.js

@@ -0,0 +1,56 @@
+const pagesSchema = {
+  title: 'Specific pages',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'url'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      type: 'text',
+    },
+    url: {
+      title: 'Url',
+      widget: 'text',
+    },
+  },
+  required: ['title', 'url'],
+};
+
+export default {
+  title: 'Navigation block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['navFromParent', 'className', 'fixedTabs', 'parent', 'pages'],
+    },
+  ],
+  properties: {
+    parent: {
+      title: 'Parent page',
+      widget: 'object_by_path',
+    },
+    className: {
+      title: 'Classname',
+      type: 'text',
+    },
+    fixedTabs: {
+      title: 'Fixed navigation',
+      type: 'boolean',
+    },
+    navFromParent: {
+      title: 'Show navigation from parent',
+      type: 'boolean',
+    },
+    pages: {
+      title: 'Pages',
+      schema: pagesSchema,
+      type: 'schema',
+    },
+  },
+  required: [],
+};