@solidstarters/solid-core-ui 1.1.74 → 1.1.75

package/src/components/layout/Layout.tsx

@@ -1,136 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client';
-
-import { ChildContainerProps, LayoutState } from '@/types';
-import { usePathname, useSearchParams } from 'next/navigation';
-import { PrimeReactContext } from 'primereact/api';
-import { useEventListener, useUnmountEffect } from 'primereact/hooks';
-import { classNames } from 'primereact/utils';
-import React, { useContext, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFooter } from '../CustomFooter/CustomFooter';
-import { CustomHeader } from '../CustomHeader/CustomHeader';
-import AppConfig from './AppConfig';
-import { LayoutContext } from './context/layoutcontext';
-import AppSidebar from './AppSidebar';
-
-export const Layout = ({ children }: ChildContainerProps) => {
-    const { layoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
-    const { setRipple } = useContext(PrimeReactContext);
-    // const topbarRef = useRef<AppTopbarRef>(null);
-    const sidebarRef = useRef<HTMLDivElement>(null);
-    const [bindMenuOutsideClickListener, unbindMenuOutsideClickListener] = useEventListener({
-        type: 'click',
-        listener: (event) => {
-            const isOutsideClicked = !(
-                sidebarRef.current?.isSameNode(event.target as Node) ||
-                sidebarRef.current?.contains(event.target as Node)
-                // topbarRef.current?.menubutton?.isSameNode(event.target as Node) ||
-                // topbarRef.current?.menubutton?.contains(event.target as Node)
-            );
-
-            if (isOutsideClicked) {
-                hideMenu();
-            }
-        }
-    });
-
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    useEffect(() => {
-        hideMenu();
-        hideProfileMenu();
-    }, [pathname, searchParams]);
-
-    // const [bindProfileMenuOutsideClickListener, unbindProfileMenuOutsideClickListener] = useEventListener({
-    //     type: 'click',
-    //     listener: (event) => {
-    //         const isOutsideClicked = !(
-    //             topbarRef.current?.topbarmenu?.isSameNode(event.target as Node) ||
-    //             topbarRef.current?.topbarmenu?.contains(event.target as Node) ||
-    //             topbarRef.current?.topbarmenubutton?.isSameNode(event.target as Node) ||
-    //             topbarRef.current?.topbarmenubutton?.contains(event.target as Node)
-    //         );
-
-    //         if (isOutsideClicked) {
-    //             hideProfileMenu();
-    //         }
-    //     }
-    // });
-
-    const hideMenu = () => {
-        setLayoutState((prevLayoutState: LayoutState) => ({
-            ...prevLayoutState,
-            overlayMenuActive: false,
-            staticMenuMobileActive: false,
-            menuHoverActive: false
-        }));
-        unbindMenuOutsideClickListener();
-        unblockBodyScroll();
-    };
-
-    const hideProfileMenu = () => {
-        setLayoutState((prevLayoutState: LayoutState) => ({
-            ...prevLayoutState,
-            profileSidebarVisible: false
-        }));
-        // unbindProfileMenuOutsideClickListener();
-    };
-
-    const blockBodyScroll = (): void => {
-        if (document.body.classList) {
-            document.body.classList.add('blocked-scroll');
-        } else {
-            document.body.className += ' blocked-scroll';
-        }
-    };
-
-    const unblockBodyScroll = (): void => {
-        if (document.body.classList) {
-            document.body.classList.remove('blocked-scroll');
-        } else {
-            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-        }
-    };
-
-    useEffect(() => {
-        if (layoutState.overlayMenuActive || layoutState.staticMenuMobileActive) {
-            bindMenuOutsideClickListener();
-        }
-
-        layoutState.staticMenuMobileActive && blockBodyScroll();
-    }, [layoutState.overlayMenuActive, layoutState.staticMenuMobileActive]);
-
-    // useEffect(() => {
-    //     if (layoutState.profileSidebarVisible) {
-    //         bindProfileMenuOutsideClickListener();
-    //     }
-    // }, [layoutState.profileSidebarVisible]);
-
-    useUnmountEffect(() => {
-        unbindMenuOutsideClickListener();
-        // unbindProfileMenuOutsideClickListener();
-    });
-
-    const containerClass = classNames('layout-wrapper', {
-        'layout-overlay-active': layoutState.overlayMenuActive,
-        'layout-mobile-active': layoutState.staticMenuMobileActive,
-        'p-input-filled': layoutConfig.inputStyle === 'filled',
-    });
-    const { visibleNavbar } = useSelector((state:any) => state.navbarState); // Get the visibility state of sidebar-two
-
-    return (
-        <React.Fragment>
-            <div className={containerClass}>
-                {process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && <CustomHeader />}
-                <AppSidebar />
-                <div className={`main-content ${visibleNavbar ? "shifted" : ""}`}>
-                    {children}
-                    {process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && <CustomFooter />}
-                </div>
-                <AppConfig />
-                <div className="layout-mask"></div>
-            </div>
-        </React.Fragment>
-    );
-};

package/src/components/layout/ListingHeader.tsx

@@ -1,204 +0,0 @@
-"use client";
-import { Menu } from "primereact/menu";
-import React, { useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-// import { RootState } from "@/redux/store";
-import { gridView, listView } from "@/redux/features/dataViewSlice";
-import { usePathname, useRouter } from 'next/navigation';
-import { HeaderDynamicTitles } from "../common/HeaderDynamicTitles";
-import FilterMenu from "./FilterMenu";
-
-const ListingHeader = () => {
-  const dispatch = useDispatch();
-  const router = useRouter();
-  const pathname = usePathname();
-
-
-  const visibleFieldsPopup = useSelector(
-    (state: any) => state.popup.visibleFieldsPopup
-  );
-
-  const menu = useRef<Menu>(null);
-  const items = [
-    {
-      label: "Settings",
-      icon: "pi pi-cog",
-      command: () => {
-      },
-    },
-    {
-      label: "Update",
-      icon: "pi pi-refresh",
-      command: () => {
-      },
-    },
-    {
-      label: "Delete",
-      icon: "pi pi-trash",
-      command: () => {
-      },
-    },
-  ];
-  const [value, setValue] = useState(null);
-  const contextMenuOptions = [
-    {
-      label: (
-        <div id="kanban" onClick={() => dispatch(gridView())}>
-          <img
-            src="/images/icons/icon-kanban.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "kanban",
-      tooltip: "Kanban",
-    },
-    {
-      label: (
-        <div id="list_view" onClick={() => dispatch(listView())}>
-          <img
-            src="/images/icons/icon-list.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "list_view",
-      tooltip: "List view",
-    },
-    {
-      label: (
-        <div id="calender">
-          <img
-            src="/images/icons/icon-calender.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "calender",
-      tooltip: "Calender",
-    },
-    {
-      label: (
-        <div id="activity">
-          <img
-            src="/images/icons/icon-activity.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "activity",
-      tooltip: "Activity",
-    },
-    {
-      label: (
-        <div id="graph">
-          <img
-            src="/images/icons/icon-graph.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "graph",
-      tooltip: "Graph",
-    },
-  ];
-
-  const justifyTemplate = (option: any) => {
-    return <i className={option.icon}></i>;
-  };
-
-
-  const save = () => {
-    const pathName = window.location.pathname;
-    const newPath = pathName.split('/').slice(0, -1).join('/') + '/create';
-
-    router.push(newPath);
-
-
-
-    // switch (pathParts[3]) {
-    //   case "model":
-    //     dispatch(showFieldsPopup());
-    //     break;
-    //   case "module":
-    //     dispatch(showModulePopup());
-    //     break;
-    // }
-  };
-
-  const toggleMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (menu.current) {
-      menu.current.toggle(e);
-    }
-  };
-
-
-
-  return (
-    <>
-      <div
-        className="flex justify-content-between align-items-center px-5 relative lg:static"
-        style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
-      >
-        <div className="flex align-items-center">
-          {/* <i className="pi pi-users" style={{backgroundColor:"#1D6CBC"}}></i> */}
-          {/* <img src="/images/icons/icon-users.svg" />
-                <span className="listHead ml-2">Employees</span> */}
-          <div className="">
-            {/* <SplitButton
-              label="Add"
-              icon="pi pi-plus"
-              onClick={save}
-              model={items}
-              severity="info"
-              className="small-splitbutton"
-            /> */}
-            {pathname.includes('all') &&
-              <HeaderDynamicTitles />
-            }
-          </div>
-        </div>
-        {/* <GlobalSearch /> */}
-        <div className="flex align-items-center">
-
-          {/* <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} /> */}
-
-          <div>
-            {/* <Menu model={items} popup ref={menu} /> */}
-            {pathname == "/admin/address-master/states" &&
-              <FilterMenu></FilterMenu>
-
-            }
-            {/* <Button
-              icon="pi pi-cog"
-              className="transparent-background"
-              onClick={toggleMenu}
-              aria-haspopup
-              aria-controls="popup_menu"
-            /> */}
-          </div>
-        </div>
-        <div className="flex align-items-center">
-          {/* <div>
-            {contextMenuOptions.map((option) => (
-              <Tooltip
-                key={option.value}
-                target={`#${option.value}`}
-                content={option.tooltip}
-                className="custom-tooltip"
-              />
-            ))}
-            <SelectButton
-              value={value}
-              onChange={(e) => setValue(e.value)}
-              options={contextMenuOptions}
-              className="custom-select-button"
-            />
-          </div> */}
-        </div>
-      </div>
-      {/* <CreateModule></CreateModule> */}
-    </>
-  );
-};
-export default ListingHeader;

package/src/components/layout/Loader.tsx

@@ -1,16 +0,0 @@
-"use client";
-import React from "react";
-
-const Loader = () => {
-  return (
-    <div className="d-flex justify-content-center center-loader">
-      <div className="lds-ellipsis">
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </div>
-  );
-};
-
-export default Loader;

package/src/components/layout/UserSidebar.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-
-const UserSidebar = () => {
-  const pathname = usePathname();
-
-  const menuItem = [
-    {
-      name: "Update Profile",
-      url: "/me/update",
-      icon: "fas fa-user",
-    },
-    {
-      name: "Upload Avatar",
-      url: "/me/upload_avatar",
-      icon: "fas fa-user-circle",
-    },
-    {
-      name: "Update Password",
-      url: "/me/update_password",
-      icon: "fas fa-lock",
-    },
-  ];
-
-  const [activeMenuItem, setActiveMenuItem] = useState(pathname);
-
-  const handleMenuItemClick = (menuItem: string) => {
-    setActiveMenuItem(menuItem);
-  };
-
-  return (
-    <div className="list-group mt-5 pl-4">
-      {menuItem.map((menuItem, index) => (
-        <Link
-          key={index}
-          href={menuItem.url}
-          className={`fw-bold list-group-item list-group-item-action ${
-            activeMenuItem === menuItem.url ? "active" : ""
-          }`}
-          onClick={() => handleMenuItemClick(menuItem.url)}
-          aria-current={activeMenuItem === menuItem.url ? "true" : "false"}
-        >
-          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-export default UserSidebar;

package/src/components/layout/context/layoutcontext.tsx

@@ -1,52 +0,0 @@
-'use client';
-import React, { useState, createContext } from 'react';
-import { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '@/types';
-export const LayoutContext = createContext({} as LayoutContextProps);
-
-export const LayoutProvider = ({ children }: ChildContainerProps) => {
-    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
-        inputStyle: 'outlined',
-        colorScheme: 'light',
-        theme: 'solid-light-purple',
-        scale: 14,
-        authLayout: 'Center'
-    });
-
-    const [layoutState, setLayoutState] = useState<LayoutState>({
-        overlayMenuActive: false,
-        profileSidebarVisible: false,
-        configSidebarVisible: false,
-        staticMenuMobileActive: false,
-        menuHoverActive: false
-    });
-
-    const onMenuToggle = () => {
-
-        if (isDesktop()) {
-            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));
-        } else {
-            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));
-        }
-    };
-
-    const showProfileSidebar = () => {
-        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));
-    };
-
- 
-
-    const isDesktop = () => {
-        return window.innerWidth > 991;
-    };
-
-    const value: LayoutContextProps = {
-        layoutConfig,
-        setLayoutConfig,
-        layoutState,
-        setLayoutState,
-        onMenuToggle,
-        showProfileSidebar
-    };
-
-    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
-};