feat(AsideHeader): preventUserRemoving prop for menu item and callbacks for AsideHeader (#314)

* feat: add preventUserRemoving prop for menu item and  add callbacks for aside header

Author: jenshenJ

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -42,7 +42,7 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
                 <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
             ) : null}
             <span className={b('text')}>{item.title}</span>
-            {editMode && (
+            {editMode && !item.preventUserRemoving && (
                 <Button
                     onClick={onPinButtonClick}
                     view={item.hidden ? 'flat-secondary' : 'flat-action'}

src/components/AllPagesPanel/AllPagesPanel.tsx

@@ -24,7 +24,8 @@ interface AllPagesPanelProps {
 
 export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
     const {startEditIcon, onEditModeChanged, className} = props;
-    const {menuItems, onMenuItemsChanged} = useAsideHeaderInnerContext();
+    const {menuItems, onMenuItemsChanged, editMenuProps} = useAsideHeaderInnerContext();
+
     const menuItemsRef = useRef(menuItems);
     menuItemsRef.current = menuItems;
 
@@ -37,7 +38,11 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
 
     useEffect(() => {
         onEditModeChanged?.(isEditMode);
-    }, [isEditMode, onEditModeChanged]);
+
+        if (isEditMode) {
+            editMenuProps?.onOpenEditMode?.();
+        }
+    }, [isEditMode, onEditModeChanged, editMenuProps]);
 
     const onItemClick = useCallback((item: ListItemData<MenuItem>) => {
         //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
@@ -54,6 +59,7 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
             const originItems = menuItemsRef.current.filter(
                 (menuItem) => menuItem.id !== ALL_PAGES_ID,
             );
+            editMenuProps?.onToggleMenuItem?.(changedItem);
             onMenuItemsChanged(
                 originItems.map((menuItem) => {
                     if (menuItem.id !== changedItem.id) {
@@ -63,7 +69,7 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
                 }),
             );
         },
-        [onMenuItemsChanged],
+        [onMenuItemsChanged, editMenuProps],
     );
 
     const itemRender = useCallback(
@@ -81,14 +87,15 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
         if (!onMenuItemsChanged) {
             return;
         }
+        editMenuProps?.onResetSettingsToDefault?.();
         const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
         onMenuItemsChanged(
             originItems.map((item) => ({
                 ...item,
                 hidden: false,
             })),
         );
-    }, [onMenuItemsChanged]);
+    }, [onMenuItemsChanged, editMenuProps]);
     return (
         <Flex className={b(null, className)} gap="5" direction="column">
             <Flex gap="4" alignItems="center" justifyContent="space-between">

src/components/AsideHeader/types.tsx

@@ -18,6 +18,12 @@ export interface LayoutProps {
     topAlert?: AsideHeaderTopAlertProps;
 }
 
+export interface EditMenuProps {
+    onOpenEditMode?: () => void;
+    onToggleMenuItem?: (changedItem: MenuItem) => void;
+    onResetSettingsToDefault?: () => void;
+}
+
 export interface AsideHeaderGeneralProps extends QAProps {
     logo?: LogoProps;
     multipleTooltip?: boolean;
@@ -35,6 +41,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
         compact: boolean;
         asideRef: React.RefObject<HTMLDivElement>;
     }) => React.ReactNode;
+    editMenuProps?: EditMenuProps;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;

src/components/types.ts

@@ -39,6 +39,7 @@ export interface MenuItem extends QAProps {
             ref: React.RefObject<HTMLElement>;
         },
     ) => React.ReactNode;
+    preventUserRemoving?: boolean;
     rightAdornment?: React.ReactNode;
     type?: MenuItemType;
     afterMoreButton?: boolean;