priteshjha4u / react-jspanel4 Goto Github PK

import React, { Suspense, createContext, useState, useContext } from "react";
import AuthContext from "./auth";

import CreatePortal from "../components/CreatePortal";
// jspanels needed importion
import "jspanel4/es6module/jspanel.css";
import { jsPanel } from "jspanel4/es6module/jspanel";
import "jspanel4/es6module/extensions/modal/jspanel.modal";
import "jspanel4/es6module/extensions/layout/jspanel.layout";

const JsPanelsContext = createContext({});

export function JsPanelsProvider({ children }) {
  const { signed } = useContext(AuthContext);
  const [panels, setPanels] = useState({});

  const storedData = jsPanel.layout.save({
    selector: ".jsPanel-standard",
    storagename: "mypanels",
  });

  function createCustomJsPanel(action, comp, custom, modal = false) {
    const appPanels = panels;
    const currentpanel = panels[action];
    // check if its already mounted, bring it to front
    if (currentpanel) {
      console.log(panels);
      console.log(panels[action]);
      return panels[action]["panel"].front(() => {
        panels[action]["panel"].resize({
          height: "auto",
        });
        panels[action]["panel"].reposition("center-top 0 5%");
      });
    }

    const options = {
      ...custom,
      // animateIn: 'jsPanelFadeIn',
      // animateOut: 'jsPanelFadeOut',

      position: "center-top 0 5%",
      headerTitle: action,
      headerLogo:
        "<span class='fa fa-spinner fa-spin' style='margin-left:8px;'></span>",
      onbeforeclose: () => {
        // remove closed jsPanel and its mounted component from state
        console.log(action);
        console.log("current panel:" + panels[action]);
        if (action) {
          const paneljson = jsPanel.layout.getAll();
          console.log("axei:" + JSON.stringify(paneljson));
          delete appPanels[action];
          setPanels({ ...appPanels });
          return true;
        }
      },
      callback: (panel) => {
        panel.resize({
          height: "auto",
        });
        const maxHeight = window.innerHeight;
        panel.content.style.maxHeight = `${maxHeight}px`;
        panel.content.style.maxWidth = `${window.innerWidth - 20}px`;

        panel.options.data = { [action]: { comp } };
        jsPanel.layout.save();
      },
    };
    // create jsPanel
    const panel = modal
      ? jsPanel.modal.create(options)
      : jsPanel.create(options);
    // save panel and compponent (this will be mounted later inside panel body) reference inside state
    const savedpanelsjson = jsPanel.layout.getAll();
    setPanels({ ...panels, [action]: { comp, panel } });
  }

  function renderJsPanlesInsidePortal() {
    return Object.keys(panels).map((action) => {
      const jsPanel = panels[action].panel;
      const Comp = panels[action].comp;
      const node = document.getElementById(`${jsPanel.id}-node`);
      let counter = 0;
      if (!Comp) return null;
      return (
        <CreatePortal rootNode={node} key={jsPanel.id}>
          {Array.isArray(Comp) ? (
            Comp.map((C) => (
              <Suspense
                key={`${jsPanel.id}-${counter++}`}
                fallback={<div className="alert alert-info">Loading...</div>}
              >
                <C jsPanel={jsPanel} />
              </Suspense>
            ))
          ) : (
            <Suspense
              fallback={<div className="alert alert-info">Loading...</div>}
            >
              <Comp jsPanel={jsPanel} />
            </Suspense>
          )}
        </CreatePortal>
      );
    });
  }

  const jsPanels = Object.keys(panels);

  return (
    <JsPanelsContext.Provider
      value={{
        panels,
        jsPanels,
        renderJsPanlesInsidePortal,
        createCustomJsPanel,
      }}
    >
      {children}
    </JsPanelsContext.Provider>
  );
}

export default JsPanelsContext;

import React, { lazy, useContext } from "react";
import { Menubar } from "primereact/menubar";
// import { useHistory } from "react-router-dom";
import { AiOutlineUserAdd } from "react-icons/ai";
import { FiInfo } from "react-icons/fi";

import AuthContext from "../../../contexts/auth";
import JsPanelsContext from "../../../contexts/jspanels";

//jspanelcustomoptions

import CustomOptionsforSingin from "../../../components/SingIn/jsPanelSingin";
import CustomOptionsforIntro from "../../../components/Intro/jsPanelIntro";
import CustomOptionsforLogin from "../../../components/Loginpanel/jsPanelLogin";
//jspanelcustomoptions
//jspanel

import Createpanel from "../../../utils/CreateJspanels";

//jspanel lazy loaded
const Login = lazy(() => import("../../../components/Loginpanel"));
const SingIn = lazy(() => import("../../../components/SingIn"));
const Intro = lazy(() => import("../../../components/Intro"));
//jspanel lazy loaded

export default function Menu() {
  const { signed } = useContext(AuthContext);
  const {
    jsPanels,
    renderJsPanlesInsidePortal,
    createCustomJsPanel,
  } = useContext(JsPanelsContext);

  // const history = useHistory();

  const items = [
    {
      label: "Log in",
      icon: "fas fa-pen-square",
      command: (event) => {
        createCustomJsPanel(
          "Log in to your account",
          Login,
          CustomOptionsforLogin,
          false
        );
      },
    },
    {
      label: "Register",
      icon: "fas fa-pen-square",
      command: (event) => {
        createCustomJsPanel("Register", SingIn, CustomOptionsforSingin, false);
      },
    },
    {
      label: "Contact us",
      icon: "pi pi-fw pi-comments",
      items: [
        {
          label: "Chat",
          icon: "pi pi-fw pi-comment",
          command: (event) => {
            Createpanel.createchatpanel();
          },
        },
      ],
    },
    {
      label: "Projects",
      icon: "pi pi-fw pi-desktop",
      items: [
        {
          label: "Edit",
          icon: "pi pi-fw pi-pencil",
          items: [
            {
              label: "Save",
              icon: "pi pi-fw pi-calendar-plus",
            },
            {
              label: "Delete",
              icon: "pi pi-fw pi-calendar-minus",
            },
          ],
        },
        {
          label: "Archieve",
          icon: "pi pi-fw pi-calendar-times",
          items: [
            {
              label: "Remove",
              icon: "pi pi-fw pi-calendar-minus",
            },
          ],
        },
      ],
    },
    {
      label: "Information",
      icon: "fas fa-info",
      command: (event) => {
        createCustomJsPanel("Information", Intro, CustomOptionsforIntro, false);
      },
    },
  ];

  return (
    <div>
      <Menubar model={items}></Menubar>
      {jsPanels.length > 0 && renderJsPanlesInsidePortal()}
    </div>
  );
}