fix(ui:menu): remove the use of the debug interface

In fact, the difference between the test environment and the production environment is indistinguishable.

Author: xiejay97

commitlint.config.js

@@ -35,5 +35,7 @@ module.exports = {
   rules: {
     'type-enum': [2, 'always', types],
     'scope-enum': getScopesRule,
+    'body-max-length': [0],
+    'body-max-line-length': [0],
   },
 };

packages/site/src/app/components/sidebar/Sidebar.tsx

@@ -37,9 +37,9 @@ export function AppSidebar() {
     <nav className="app-sidebar">
       <DMenu dActive={activeId} onActiveChange={handleActiveChange}>
         {menu.map((group) => (
-          <DMenuGroup key={group.title} dTitle={t(`menu-group.${group.title}`)}>
+          <DMenuGroup key={group.title} dId={group.title} dTitle={t(`menu-group.${group.title}`)}>
             {group.children.map((child) => (
-              <DMenuItem key={child.title} onClick={() => navigate(child.to, { replace: true })}>
+              <DMenuItem key={child.title} dId={child.title} onClick={() => navigate(child.to, { replace: true })}>
                 {child.title}
                 {i18n.language !== 'en-US' && <span className="app-sidebar__subtitle">{t(`menu.${child.title}`)}</span>}
               </DMenuItem>

packages/ui/src/components/menu/Menu.tsx

@@ -4,10 +4,10 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 
 import { useDPrefixConfig, useDComponentConfig, useManualOrAutoState } from '../../hooks';
-import { getClassName, getComponentName } from '../../utils';
+import { getClassName } from '../../utils';
 import { DCollapseTransition } from '../_transition';
 import { DTrigger } from '../_trigger';
-import { generateChildren, isMenuComponent } from './utils';
+import { generateChildren } from './utils';
 
 enableMapSet();
 
@@ -34,6 +34,8 @@ export interface DMenuProps extends React.HTMLAttributes<HTMLElement> {
   dMode?: 'horizontal' | 'vertical' | 'popup' | 'icon';
   dExpandOne?: boolean;
   dExpandTrigger?: 'hover' | 'click';
+  dHeader?: React.ReactNode;
+  dFooter?: React.ReactNode;
   onActiveChange?: (id: string) => void;
   onExpandsChange?: (ids: string[]) => void;
 }
@@ -46,6 +48,8 @@ export function DMenu(props: DMenuProps) {
     dMode = 'vertical',
     dExpandOne = false,
     dExpandTrigger,
+    dHeader,
+    dFooter,
     onActiveChange,
     onExpandsChange,
     className,
@@ -137,38 +141,28 @@ export function DMenu(props: DMenuProps) {
   const childs = useMemo(() => {
     const arr: string[] = [];
     const _childs = generateChildren(children).map((child, index) => {
-      if (isMenuComponent(child)) {
-        arr.push(child.props.__id);
-
-        let tabIndex = child.props.tabIndex;
-        if (index === 0) {
-          tabIndex = 0;
-        }
-
-        let __navMenu = undefined;
-        const componentName = getComponentName(child);
-        if (componentName === 'DMenuSub' || componentName === 'DMenuItem') {
-          __navMenu = true;
-        }
-
-        return React.cloneElement(child, {
-          ...child.props,
-          tabIndex,
-          __navMenu,
-          __onFocus: (id: string) => {
-            setFocusId((draft) => {
-              draft.add(id);
-            });
-          },
-          __onBlur: (id: string) => {
-            setFocusId((draft) => {
-              draft.delete(id);
-            });
-          },
-        });
+      arr.push(child.props.id);
+
+      let tabIndex = child.props.tabIndex;
+      if (index === 0) {
+        tabIndex = 0;
       }
 
-      return child;
+      return React.cloneElement(child, {
+        ...child.props,
+        tabIndex,
+        __navMenu: true,
+        __onFocus: (id: string) => {
+          setFocusId((draft) => {
+            draft.add(id);
+          });
+        },
+        __onBlur: (id: string) => {
+          setFocusId((draft) => {
+            draft.delete(id);
+          });
+        },
+      });
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     currentData.ids.set(Symbol('menu') as any, arr);
@@ -205,7 +199,9 @@ export function DMenu(props: DMenuProps) {
             aria-orientation={dMode === 'horizontal' ? 'horizontal' : 'vertical'}
             aria-activedescendant={Array.from(focusId)[0] ?? undefined}
           >
+            {dHeader}
             {childs}
+            {dFooter}
           </nav>
         </DTrigger>
       </DCollapseTransition>

packages/ui/src/components/menu/MenuGroup.tsx

@@ -4,21 +4,23 @@ import React, { useCallback, useMemo } from 'react';
 import { useDPrefixConfig, useDComponentConfig, useCustomContext } from '../../hooks';
 import { getClassName, toId } from '../../utils';
 import { DMenuContext } from './Menu';
-import { generateChildren, isMenuComponent } from './utils';
+import { generateChildren } from './utils';
 
 export interface DMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  dId: string;
   dTitle: React.ReactNode;
-  __id?: string;
   __level?: number;
+  __navMenu?: boolean;
   __onFocus?: (id: string) => void;
   __onBlur?: (id: string) => void;
 }
 
 export function DMenuGroup(props: DMenuGroupProps) {
   const {
+    dId,
     dTitle,
-    __id = '',
     __level = 0,
+    __navMenu = false,
     __onFocus,
     __onBlur,
     className,
@@ -56,17 +58,17 @@ export function DMenuGroup(props: DMenuGroupProps) {
   const handleFocus = useCallback(
     (e) => {
       onFocus?.(e);
-      __onFocus?.(`menu-group-${toId(__id)}`);
+      __onFocus?.(`menu-group-${toId(dId)}`);
     },
-    [__id, __onFocus, onFocus]
+    [__onFocus, dId, onFocus]
   );
 
   const handleBlur = useCallback(
     (e) => {
       onBlur?.(e);
-      __onBlur?.(`menu-group-${toId(__id)}`);
+      __onBlur?.(`menu-group-${toId(dId)}`);
     },
-    [__id, __onBlur, onBlur]
+    [__onBlur, onBlur, dId]
   );
   //#endregion
 
@@ -82,32 +84,28 @@ export function DMenuGroup(props: DMenuGroupProps) {
   const childs = useMemo(() => {
     const arr: string[] = [];
     const _childs = generateChildren(children, true).map((child) => {
-      if (isMenuComponent(child)) {
-        arr.push(child.props.__id);
-        return React.cloneElement(child, {
-          ...child.props,
-          __level: __level + 1,
-          __onFocus: (id: string) => {
-            __onFocus?.(id);
-          },
-          __onBlur: (id: string) => {
-            __onBlur?.(id);
-          },
-        });
-      }
-
-      return child;
+      arr.push(child.props.dId);
+      return React.cloneElement(child, {
+        ...child.props,
+        __level: __level + 1,
+        __onFocus: (id: string) => {
+          __onFocus?.(id);
+        },
+        __onBlur: (id: string) => {
+          __onBlur?.(id);
+        },
+      });
     });
-    _currentData?.ids.set(__id, arr);
+    _currentData?.ids.set(dId, arr);
     return _childs;
-  }, [__id, __level, __onFocus, __onBlur, _currentData, children]);
+  }, [__level, __onFocus, __onBlur, _currentData, dId, children]);
   //#endregion
 
   return (
     <>
       <div
         {...restProps}
-        id={`menu-group-${toId(__id)}`}
+        id={`menu-group-${toId(dId)}`}
         className={getClassName(className, `${dPrefix}menu-group`)}
         style={{
           ...style,

packages/ui/src/components/menu/MenuItem.tsx

@@ -8,9 +8,9 @@ import { DTooltip } from '../tooltip';
 import { DMenuContext } from './Menu';
 
 export interface DMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  dId: string;
   dIcon?: React.ReactNode;
   dDisabled?: boolean;
-  __id?: string;
   __level?: number;
   __navMenu?: boolean;
   __onFocus?: (id: string) => void;
@@ -19,9 +19,9 @@ export interface DMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
 
 export function DMenuItem(props: DMenuItemProps) {
   const {
+    dId,
     dIcon,
     dDisabled = false,
-    __id = '',
     __level = 0,
     __navMenu = false,
     __onFocus,
@@ -62,25 +62,25 @@ export function DMenuItem(props: DMenuItemProps) {
   const handleClick = useCallback(
     (e) => {
       onClick?.(e);
-      _onActiveChange?.(__id);
+      _onActiveChange?.(dId);
     },
-    [_onActiveChange, __id, onClick]
+    [_onActiveChange, dId, onClick]
   );
 
   const handleFocus = useCallback(
     (e) => {
       onFocus?.(e);
-      __onFocus?.(`menu-item-${toId(__id)}`);
+      __onFocus?.(`menu-item-${toId(dId)}`);
     },
-    [__id, __onFocus, onFocus]
+    [__onFocus, dId, onFocus]
   );
 
   const handleBlur = useCallback(
     (e) => {
       onBlur?.(e);
-      __onBlur?.(`menu-item-${toId(__id)}`);
+      __onBlur?.(`menu-item-${toId(dId)}`);
     },
-    [__id, __onBlur, onBlur]
+    [__onBlur, dId, onBlur]
   );
   //#endregion
 
@@ -89,9 +89,9 @@ export function DMenuItem(props: DMenuItemProps) {
       <DTooltip dTitle={_dMode === 'icon' && __navMenu && children} dPlacement="right">
         <li
           {...restProps}
-          id={`menu-item-${toId(__id)}`}
+          id={`menu-item-${toId(dId)}`}
           className={getClassName(className, `${dPrefix}menu-item`, {
-            'is-active': _activeId === __id,
+            'is-active': _activeId === dId,
             'is-horizontal': _dMode === 'horizontal' && __navMenu,
             'is-icon': _dMode === 'icon' && __navMenu,
           })}