@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/src/components/menu/Menu.tsx

@@ -1,312 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreInput,
-  ReqoreMenuDivider,
-  ReqoreMenuItem,
-  ReqoreMenuSection,
-} from '@qoretechnologies/reqore';
-import ReqoreMenu, { IReqoreMenuProps } from '@qoretechnologies/reqore/dist/components/Menu';
-import { IReqoreMenuDividerProps } from '@qoretechnologies/reqore/dist/components/Menu/divider';
-import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/Menu/item';
-import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
-import { map, reduce, size } from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { useReqraftStorage } from '../../hooks/useStorage/useStorage';
-
-export interface IReqraftMenuItem extends IReqoreMenuItemProps {
-  submenu?: TReqraftMenuItem[];
-  activePaths?: string[];
-  to?: string;
-  href?: string;
-}
-
-export type TReqraftMenuItem = IReqraftMenuItem | ({ divider: true } & IReqoreMenuDividerProps);
-export type TReqraftMenu = TReqraftMenuItem[];
-
-export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resizable'>> {
-  hidden?: boolean;
-  onHideClick?: () => void;
-
-  defaultQuery?: string;
-  onQueryChange?: (query: string) => void;
-
-  menu: TReqraftMenu;
-  inputFocusShortcut?: string;
-  path?: string;
-
-  resizable?: boolean;
-  onResizeChange?: (width: number) => void;
-  defaultWidth?: number;
-  activeItemIntent?: TReqoreIntent;
-
-  topChildren?: React.ReactNode;
-  bottomChildren?: React.ReactNode;
-}
-
-export const ReqraftMenuItemsSection = styled.div``;
-
-const StyledMenuBottomShadow = styled.div<{ $visible: boolean }>`
-  height: 48px;
-  margin-top: -48px;
-  flex-shrink: 0;
-  pointer-events: none;
-  position: relative;
-  z-index: 1;
-  box-shadow: inset 0 -32px 28px -16px rgba(0, 0, 0, 0.95);
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
-  transition: opacity 0.15s ease;
-`;
-
-export const ReqraftMenuItem = ({
-  path,
-  isCollapsed,
-  activeIntent = 'info',
-  ...props
-}: TReqraftMenuItem & { path?: string; isCollapsed?: boolean; activeIntent?: TReqoreIntent }) => {
-  if ('divider' in props) {
-    return <ReqoreMenuDivider {...props} />;
-  }
-
-  const isActive = useMemo(
-    () =>
-      props.activePaths?.some(
-        (activePath) => activePath === path || path?.startsWith(`${activePath}/`)
-      ),
-    [path]
-  );
-
-  if (props.submenu) {
-    const { submenu, ...menuData } = props;
-
-    return (
-      <ReqoreMenuSection
-        label={menuData.label}
-        icon={menuData.icon}
-        isCollapsed={isCollapsed && !isActive}
-        verticalPadding='big'
-        {...menuData}
-      >
-        {map(submenu, (submenuData, submenuId) => (
-          <ReqraftMenuItem
-            key={submenuId}
-            {...submenuData}
-            path={path}
-            activeIntent={activeIntent}
-          />
-        ))}
-      </ReqoreMenuSection>
-    );
-  }
-
-  return (
-    <ReqoreMenuItem
-      customTheme={{ main: '#050505' }}
-      verticalPadding='big'
-      effect={
-        isActive ?
-          {
-            gradient: {
-              colors: {
-                0: `${activeIntent}:darken:3:0.4`,
-                65: 'main',
-                100: 'main',
-              },
-            },
-          }
-        : undefined
-      }
-      leftIconColor={isActive ? `${activeIntent}:lighten:10` : undefined}
-      {...props}
-    />
-  );
-};
-
-export const ReqraftMenu = ({
-  defaultQuery,
-  defaultWidth = 250,
-  inputFocusShortcut = '/',
-  hidden,
-  menu,
-  onQueryChange,
-  onResizeChange,
-  onHideClick,
-  resizable,
-  path,
-  activeItemIntent,
-  topChildren,
-  bottomChildren,
-  ...rest
-}: IReqraftMenuProps) => {
-  const [query, setQuery] = useState<string>(defaultQuery);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const [canScrollDown, setCanScrollDown] = useState<boolean>(false);
-
-  const [isSidebarOpen, update] = useReqraftStorage<boolean>('sidebar-open', true, false);
-  const [sidebarSize, updateSidebarSize] = useReqraftStorage<number>(
-    'sidebar-size',
-    defaultWidth,
-    false
-  );
-
-  useEffect(() => {
-    if (defaultQuery) {
-      setQuery(defaultQuery);
-    }
-  }, [defaultQuery]);
-
-  const handleQueryChange = (newQuery: string) => {
-    setQuery(newQuery);
-    onQueryChange?.(newQuery);
-  };
-
-  const updateScrollState = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) {
-      return;
-    }
-    setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
-  }, []);
-
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) {
-      return undefined;
-    }
-
-    updateScrollState();
-    el.addEventListener('scroll', updateScrollState, { passive: true });
-
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(el);
-    Array.from(el.children).forEach((child) => resizeObserver.observe(child));
-
-    return () => {
-      el.removeEventListener('scroll', updateScrollState);
-      resizeObserver.disconnect();
-    };
-  }, [updateScrollState, query]);
-
-  const handleWidthChange = (newWidth: number) => {
-    updateSidebarSize(newWidth);
-    onResizeChange?.(newWidth);
-  };
-
-  const filteredMenu: TReqraftMenu = useMemo<TReqraftMenu>(() => {
-    if (!query) {
-      return menu;
-    }
-
-    const filterItems = (items: TReqraftMenu): TReqraftMenu => {
-      return reduce(
-        items,
-        (acc, item) => {
-          if ('divider' in item) {
-            return acc;
-          }
-
-          if (item.submenu) {
-            const submenu = filterItems(item.submenu);
-            const hasChildMatch = size(submenu);
-
-            if (hasChildMatch) {
-              acc.push({
-                ...item,
-                submenu,
-              });
-
-              return acc;
-            }
-          }
-
-          if (item.label.toString().toLowerCase().includes(query.toLowerCase())) {
-            acc.push(item);
-          }
-
-          return acc;
-        },
-        []
-      );
-    };
-
-    return filterItems(menu);
-  }, [menu, query]);
-
-  if (hidden) {
-    return null;
-  }
-
-  return (
-    <ReqoreMenu
-      width='250px'
-      minimal
-      position='left'
-      resizable={{
-        enable: { right: resizable, left: false },
-        minWidth: '250px',
-        maxWidth: '350px',
-        onResizeStop: (_e, _direction, _ref, d) => {
-          handleWidthChange(sidebarSize + d.width);
-        },
-        size: {
-          width: `${sidebarSize}px`,
-          height: '100%',
-        },
-      }}
-      rounded={false}
-      style={{ overflowY: 'hidden' }}
-      effect={{ gradient: { direction: 'to bottom', colors: { 0: '#15031b', 100: '#000000' } } }}
-      {...rest}
-    >
-      {topChildren}
-      <ReqoreControlGroup>
-        <ReqoreInput
-          icon='Search2Line'
-          minimal={false}
-          flat={false}
-          placeholder={`Filter menu "${inputFocusShortcut}"`}
-          intent={query ? 'info' : undefined}
-          leftIconProps={{ size: 'small' }}
-          iconColor={query ? 'info' : 'muted'}
-          pill
-          value={query}
-          onClearClick={() => handleQueryChange('')}
-          onChange={(e: any) => handleQueryChange(e.target.value)}
-          focusRules={{
-            shortcut: inputFocusShortcut,
-            type: 'keypress',
-            clearOnFocus: true,
-            doNotInsertShortcut: true,
-          }}
-        />
-        <ReqoreButton
-          icon='SideBarLine'
-          fixed
-          minimal={false}
-          onClick={() => {
-            update(!isSidebarOpen);
-            onHideClick?.();
-          }}
-        />
-      </ReqoreControlGroup>
-      <ReqoreControlGroup
-        vertical
-        ref={scrollRef}
-        style={{ overflowY: 'auto', overflowX: 'hidden', flex: '1 auto', minHeight: 0 }}
-      >
-        {map(filteredMenu, (menuData, menuId) => (
-          <ReqraftMenuItem
-            key={menuId}
-            {...menuData}
-            path={path}
-            isCollapsed={!query && !!(menuData as IReqraftMenuItem).submenu}
-            activeIntent={activeItemIntent}
-          />
-        ))}
-      </ReqoreControlGroup>
-      {bottomChildren && <StyledMenuBottomShadow $visible={canScrollDown} />}
-      {bottomChildren}
-    </ReqoreMenu>
-  );
-};