From e96c48ed5995b075a2b8a7c0834befd6608763db Mon Sep 17 00:00:00 2001
From: nileshgulia1 <nileshgulia@gmail.com>
Date: Wed, 2 Feb 2022 15:42:55 +0530
Subject: [PATCH] rafactor navigation block

---
 .../manage/Blocks/NavigationBlock/Edit.jsx    | 103 ++-------
 .../manage/Blocks/NavigationBlock/schema.js   |  56 +++++
 .../manage/Widgets/ObjectListWidget.jsx       | 200 ------------------
 3 files changed, 77 insertions(+), 282 deletions(-)
 create mode 100644 src/components/manage/Blocks/NavigationBlock/schema.js
 delete mode 100644 src/customizations/volto/components/manage/Widgets/ObjectListWidget.jsx

diff --git a/src/components/manage/Blocks/NavigationBlock/Edit.jsx b/src/components/manage/Blocks/NavigationBlock/Edit.jsx
index 3e8b260..8409b01 100644
--- a/src/components/manage/Blocks/NavigationBlock/Edit.jsx
+++ b/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>
+    </>
   );
 };
 
diff --git a/src/components/manage/Blocks/NavigationBlock/schema.js b/src/components/manage/Blocks/NavigationBlock/schema.js
new file mode 100644
index 0000000..01e6677
--- /dev/null
+++ b/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: [],
+};
diff --git a/src/customizations/volto/components/manage/Widgets/ObjectListWidget.jsx b/src/customizations/volto/components/manage/Widgets/ObjectListWidget.jsx
deleted file mode 100644
index 1cc7db4..0000000
--- a/src/customizations/volto/components/manage/Widgets/ObjectListWidget.jsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Accordion, Button, Segment } from 'semantic-ui-react';
-import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
-import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
-
-import upSVG from '@plone/volto/icons/up-key.svg';
-import downSVG from '@plone/volto/icons/down-key.svg';
-import deleteSVG from '@plone/volto/icons/delete.svg';
-import addSVG from '@plone/volto/icons/add.svg';
-import dragSVG from '@plone/volto/icons/drag.svg';
-import { v4 as uuid } from 'uuid';
-
-const messages = defineMessages({
-  labelRemoveItem: {
-    id: 'Remove item',
-    defaultMessage: 'Remove item',
-  },
-  labelCollapseItem: {
-    id: 'Collapse item',
-    defaultMessage: 'Collapse item',
-  },
-  labelShowItem: {
-    id: 'Show item',
-    defaultMessage: 'Show item',
-  },
-  emptyObjectList: {
-    id: 'Empty object list',
-    defaultMessage: 'Empty object list',
-  },
-});
-
-const ObjectListWidget = (props) => {
-  const {
-    block,
-    fieldSet,
-    id,
-    schema,
-    value = [],
-    onChange,
-    schemaExtender,
-  } = props;
-  const [activeColumn, setActiveColumn] = React.useState(value.length - 1);
-  const intl = useIntl();
-
-  function handleChangeColumn(e, blockProps) {
-    const { index } = blockProps;
-    const newIndex = activeColumn === index ? -1 : index;
-
-    setActiveColumn(newIndex);
-  }
-  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
-
-  const topLayerShadow = '0 1px 1px rgba(0,0,0,0.15)';
-  const secondLayer = ', 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15)';
-  const thirdLayer = ', 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15)';
-
-  return (
-    <div className="objectlist-widget">
-      <FormFieldWrapper {...props} noForInFieldLabel className="objectlist">
-        <div className="add-item-button-wrapper">
-          <Button
-            compact
-            icon
-            aria-label={objectSchema.addMessage || `Add ${objectSchema.title}`}
-            onClick={(e) => {
-              e.preventDefault();
-              onChange(id, [
-                ...value,
-                {
-                  '@id': uuid(),
-                },
-              ]);
-              setActiveColumn(value.length);
-            }}
-          >
-            <Icon name={addSVG} size="18px" />
-            &nbsp;
-            {/* Custom addMessage in schema, else default to english */}
-            {objectSchema.addMessage || `Add ${objectSchema.title}`}
-          </Button>
-        </div>
-        {value.length === 0 && (
-          <input
-            aria-labelledby={`fieldset-${
-              fieldSet || 'default'
-            }-field-label-${id}`}
-            type="hidden"
-            value={intl.formatMessage(messages.emptyObjectList)}
-          />
-        )}
-      </FormFieldWrapper>
-      <DragDropList
-        style={{
-          boxShadow: `${topLayerShadow}${value.length > 1 ? secondLayer : ''}${
-            value.length > 2 ? thirdLayer : ''
-          }`,
-        }}
-        forwardedAriaLabelledBy={`fieldset-${
-          fieldSet || 'default'
-        }-field-label-${id}`}
-        childList={value.map((o, index) => [o['@id'] || index + 1, o])}
-        onMoveItem={(result) => {
-          const { source, destination } = result;
-          if (!destination) {
-            return;
-          }
-
-          const first = value[source.index];
-          const second = value[destination.index];
-          value[destination.index] = first;
-          value[source.index] = second;
-
-          onChange(id, value);
-          return true;
-        }}
-      >
-        {({ child, childId, index, draginfo }) => {
-          return (
-            <div
-              ref={draginfo.innerRef}
-              {...draginfo.draggableProps}
-              key={childId}
-            >
-              <Accordion key={index} fluid styled>
-                <Accordion.Title
-                  active={activeColumn === index}
-                  index={index}
-                  onClick={handleChangeColumn}
-                  aria-label={`${
-                    activeColumn === index
-                      ? intl.formatMessage(messages.labelCollapseItem)
-                      : intl.formatMessage(messages.labelShowItem)
-                  } #${index + 1}`}
-                >
-                  <button
-                    style={{
-                      visibility: 'visible',
-                      display: 'inline-block',
-                    }}
-                    {...draginfo.dragHandleProps}
-                    className="drag handle"
-                  >
-                    <Icon name={dragSVG} size="18px" />
-                  </button>
-
-                  <div className="accordion-title-wrapper">
-                    {`${objectSchema.title} #${index + 1}`}
-                  </div>
-                  <div className="accordion-tools">
-                    <button
-                      aria-label={`${intl.formatMessage(
-                        messages.labelRemoveItem,
-                      )} #${index + 1}`}
-                      onClick={() => {
-                        onChange(
-                          id,
-                          value.filter((v, i) => i !== index),
-                        );
-                      }}
-                    >
-                      <Icon name={deleteSVG} size="20px" color="#e40166" />
-                    </button>
-                    {activeColumn === index ? (
-                      <Icon name={upSVG} size="20px" />
-                    ) : (
-                      <Icon name={downSVG} size="20px" />
-                    )}
-                  </div>
-                </Accordion.Title>
-                <Accordion.Content active={activeColumn === index}>
-                  <Segment>
-                    <ObjectWidget
-                      id={`${id}-${index}`}
-                      key={`ow-${id}-${index}`}
-                      block={block}
-                      schema={
-                        schemaExtender
-                          ? schemaExtender(schema, child)
-                          : objectSchema
-                      }
-                      value={child}
-                      onChange={(fi, fv) => {
-                        const newvalue = value.map((v, i) =>
-                          i !== index ? v : fv,
-                        );
-                        onChange(id, newvalue);
-                      }}
-                    />
-                  </Segment>
-                </Accordion.Content>
-              </Accordion>
-            </div>
-          );
-        }}
-      </DragDropList>
-    </div>
-  );
-};
-export default ObjectListWidget;