Feat: #1243 Add drag & drop functionality to nav items & replace right items with dropdown

app/components/FeatureFlags/flags.js

@@ -15,5 +15,7 @@ export const FLAGS = {
   PLATFORM_FEATURES_OPT_IN: "platform-feature-opt-in-feature-flag",
   EVENT_NUDGE_FEATURE_FLAG_KEY : "user-event-nudge-feature-flag",
   CUSTOMIZE_NAVIGATION_MENU: "customize-navigation-menu-feature-flag",
+  DRAGGABLE_NAVIGATION_ITEMS: "draggable-navigation-items-feature-flag", 
+  DROPDOWN_VIEW_FOR_NAV_CONTROL : "dropdown-view-for-nav-items-feature-flag",
   ...USER_PORTAL_FLAGS
 };

app/containers/MassEnergizeSuperAdmin/ME Tools/dropdown/MEDropdownPro.js

@@ -1,7 +1,5 @@
 import { Checkbox, Chip, FormControlLabel } from "@mui/material";
-import React, {
-  useEffect, useState, useCallback, useRef
-} from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import { pop } from "../../../../utils/common";
 import { apiCall } from "../../../../utils/messenger";
 
@@ -15,14 +13,16 @@ function MEDropdownPro({
   placeholder,
   defaultValue,
   value,
+  noCaret = false,
+  renderChild,
+  renderLabel,
   ...rest
 }) {
   const [selected, setSelected] = useState(defaultValue || value || []);
   const [show, setShow] = useState(false);
   const [cursor, setCursor] = React.useState({ has_more: true, next: 1 });
   const [optionsToDisplay, setOptionsToDisplay] = useState(data || []);
 
-
   // -------------------------------------------------------------------
   const elementObserver = useRef(null);
   const lastDropDownItemRef = useCallback(
@@ -31,29 +31,21 @@ function MEDropdownPro({
       elementObserver.current = new IntersectionObserver((entries) => {
         if (entries[0].isIntersecting && cursor.has_more) {
           if (!rest?.endpoint) return;
-          apiCall(rest?.endpoint, { page: cursor.next, limit: 10 }).then(
-            (res) => {
-              setCursor({
-                has_more: res?.cursor?.count > optionsToDisplay?.length,
-                next: res?.cursor?.next,
-              });
-              const items = [
-                ...optionsToDisplay,
-                ...(res?.data || [])?.map((item) => ({
-                  ...item,
-                  displayName: labelExtractor
-                    ? labelExtractor(item)
-                    : item?.name || item?.title,
-                })),
-              ];
+          apiCall(rest?.endpoint, { page: cursor.next, limit: 10 }).then((res) => {
+            setCursor({
+              has_more: res?.cursor?.count > optionsToDisplay?.length,
+              next: res?.cursor?.next
+            });
+            const items = [
+              ...optionsToDisplay,
+              ...(res?.data || [])?.map((item) => ({
+                ...item,
+                displayName: labelExtractor ? labelExtractor(item) : item?.name || item?.title
+              }))
+            ];
 
-              setOptionsToDisplay([
-                ...new Map(
-                  items.map((item) => [item.id, item])
-                ).values(),
-              ]);
-            }
-          );
+            setOptionsToDisplay([...new Map(items.map((item) => [item.id, item])).values()]);
+          });
         }
       });
 
@@ -111,48 +103,37 @@ function MEDropdownPro({
   };
 
   const itemIsSelected = (item) => {
-    const found = (selected || []).find(
-      (it) => it.toString() === item.toString()
-    );
+    const found = (selected || []).find((it) => it.toString() === item.toString());
     return found;
   };
   const renderChildren = () => {
     if (!show) return <></>;
-    return optionsToDisplay?.map((d, i) => (
-      <p
-        ref={(i === optionsToDisplay.length - 1) && rest?.isAsync ? lastDropDownItemRef : null}
-        key={i}
-        onClick={() => handleOnChange(d)}
-        className="drop-pro-child"
-        style={{ ...(multiple ? { padding: '13px' } : {}), ...(d.style || {}) }}
-      >
-        {multiple && (
-          <Checkbox
-            checked={itemIsSelected(valueOf(d))}
-            value={valueOf(d)}
-            name={labelOf(d)}
-          />
-        )}
-        {labelOf(d)}
-      </p>
-    ));
+    return optionsToDisplay?.map((d, i) =>
+      renderChild ? (
+        renderChild(d, i)
+      ) : (
+        <p
+          ref={i === optionsToDisplay.length - 1 && rest?.isAsync ? lastDropDownItemRef : null}
+          key={i}
+          onClick={() => handleOnChange(d)}
+          className="drop-pro-child"
+          style={{ ...(multiple ? { padding: "13px" } : {}), ...(d.style || {}) }}
+        >
+          {multiple && <Checkbox checked={itemIsSelected(valueOf(d))} value={valueOf(d)} name={labelOf(d)} />}
+          {renderLabel ? renderLabel({ item: d, selected }) : labelOf(d)}
+        </p>
+      )
+    );
   };
 
   return (
     <div style={{ position: "relative", display: "inline-block" }}>
       <div className="drop-pro-trigger" onClick={() => setShow(!show)}>
         {renderHeader()}
-        <i className="fa fa-caret-down" style={{ marginLeft: 10 }} />
+        {!noCaret && <i className="fa fa-caret-down" style={{ marginLeft: 10 }} />}
       </div>
-      {show && (
-        <div
-          className="drop-ghost-curtain"
-          onClick={() => setShow(false)}
-        />
-      )}
-      {show && (
-        <div className="drop-children-area">{renderChildren()}</div>
-      )}
+      {show && <div className="drop-ghost-curtain" onClick={() => setShow(false)} />}
+      {show && <div className="drop-children-area">{renderChildren()}</div>}
     </div>
   );
 }