refactor(ui): consolidate ISidebarMethodOptions interface and remove …

…unused files (#4786)
dream-num · Mar 6, 2025 · 2ac6883 · 2ac6883
1 parent f66f931
commit 2ac6883
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 227 deletions.
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -135,8 +135,7 @@ export { ToolbarButton } from './views/components/ribbon/Button/ToolbarButton';
 export { useToolbarItemStatus } from './views/components/ribbon/hook';
 export { Ribbon } from './views/components/ribbon/Ribbon';
 export { ToolbarItem } from './views/components/ribbon/ToolbarItem';
-export { type ISidebarMethodOptions } from './views/components/sidebar/interface';
-export { Sidebar } from './views/components/sidebar/Sidebar';
+export { type ISidebarMethodOptions, Sidebar } from './views/components/sidebar/Sidebar';
 // #endregion
 
 // #region - all commands

diff --git a/packages/ui/src/services/sidebar/desktop-sidebar.service.ts b/packages/ui/src/services/sidebar/desktop-sidebar.service.ts
@@ -15,9 +15,8 @@
  */
 
 import type { IDisposable } from '@univerjs/core';
-import type { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
+import type { ISidebarMethodOptions } from '../../views/components/sidebar/Sidebar';
 import type { ISidebarService } from './sidebar.service';
-
 import { toDisposable } from '@univerjs/core';
 import { Subject } from 'rxjs';
 

diff --git a/packages/ui/src/services/sidebar/sidebar.service.ts b/packages/ui/src/services/sidebar/sidebar.service.ts
@@ -16,8 +16,7 @@
 
 import type { IDisposable } from '@univerjs/core';
 import type { Subject } from 'rxjs';
-import type { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
-
+import type { ISidebarMethodOptions } from '../../views/components/sidebar/Sidebar';
 import { createIdentifier } from '@univerjs/core';
 
 export interface ISidebarService {

diff --git a/packages/ui/src/views/components/popup/dom-popup.tsx b/packages/ui/src/views/components/popup/dom-popup.tsx
diff --git a/packages/ui/src/views/components/shortcut-panel/ShortcutPanel.tsx b/packages/ui/src/views/components/shortcut-panel/ShortcutPanel.tsx
@@ -85,7 +85,7 @@ export function ShortcutPanel() {
     }, [shortcutService, updateShortcuts]);
 
     return (
-        <ul className="univer-list-none univer-p-0 univer-text-gray-900">
+        <ul className="univer-m-0 univer-list-none univer-p-0 univer-text-gray-900">
             {shortcutItems.map((group) => (
                 <li key={group.name}>
                     <div className="univer-flex univer-h-10 univer-items-center univer-text-sm univer-font-semibold">
@@ -95,7 +95,6 @@ export function ShortcutPanel() {
                     <ul
                         className={`
                           univer-list-none univer-p-0
-                          [&>li:last]:univer-border-b-0
                           [&>li]:univer-border-0 [&>li]:univer-border-b [&>li]:univer-border-solid
                           [&>li]:univer-border-b-gray-200
                         `}
@@ -105,6 +104,7 @@ export function ShortcutPanel() {
                                 key={`${item.title}-${item.shortcut}`}
                                 className={`
                                   univer-flex univer-h-10 univer-items-center univer-justify-between univer-text-[13px]
+                                  last:univer-border-b-0
                                 `}
                             >
                                 <span className="univer-line-clamp-1">{item.title}</span>

diff --git a/packages/ui/src/views/components/sidebar/Sidebar.tsx b/packages/ui/src/views/components/sidebar/Sidebar.tsx
@@ -14,14 +14,29 @@
  * limitations under the License.
  */
 
-import type { ISidebarMethodOptions } from './interface';
+import type { CSSProperties } from 'react';
+import type { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 import { clsx } from '@univerjs/design';
 import { CloseSingle } from '@univerjs/icons';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { CustomLabel } from '../../../components/custom-label/CustomLabel';
 import { ISidebarService } from '../../../services/sidebar/sidebar.service';
 import { useDependency, useObservable } from '../../../utils/di';
-import styles from './index.module.less';
+
+export interface ISidebarMethodOptions {
+    id?: string;
+    header?: ICustomLabelProps;
+    children?: ICustomLabelProps;
+    bodyStyle?: CSSProperties;
+    footer?: ICustomLabelProps;
+
+    visible?: boolean;
+
+    width?: number | string;
+
+    onClose?: () => void;
+    onOpen?: () => void;
+}
 
 export function Sidebar() {
     const sidebarService = useDependency(ISidebarService);
@@ -76,10 +91,6 @@ export function Sidebar() {
         };
     }, [sidebarService]);
 
-    const _className = clsx(styles.sidebar, {
-        [styles.sidebarOpen]: options?.visible,
-    });
-
     const width = useMemo(() => {
         if (!options?.visible) return 0;
 
@@ -101,19 +112,46 @@ export function Sidebar() {
         options?.onClose?.();
     }
     return (
-        <section className={_className} style={{ width }}>
-            <section className={styles.sidebarContainer} ref={scrollRef}>
-                <header className={styles.sidebarHeader}>
+        <section
+            className={clsx('univer-relative univer-h-full univer-text-gray-800', {
+                'univer-w-96 univer-translate-x-0': options?.visible,
+                'univer-w-0 univer-translate-x-full': !options?.visible,
+            })}
+            style={{ width }}
+        >
+            <section
+                className={`
+                  univer-box-border univer-grid univer-h-0 univer-min-h-full univer-grid-rows-[auto_1fr_auto]
+                  univer-overflow-y-auto univer-border-0 univer-border-b univer-border-l univer-border-solid
+                  univer-border-gray-200 univer-bg-white univer-scrollbar-thin univer-scrollbar-track-gray-50
+                  univer-scrollbar-thumb-gray-300
+                `}
+                ref={scrollRef}
+            >
+                <header
+                    className={`
+                      univer-sticky univer-top-0 univer-z-10 univer-box-border univer-flex univer-items-center
+                      univer-justify-between univer-bg-white univer-p-4 univer-pb-2 univer-text-base univer-font-medium
+                    `}
+                >
                     {options?.header}
 
-                    <a className={styles.sidebarHeaderClose} onClick={handleClose}>
+                    <a className="univer-cursor-pointer univer-text-gray-500" onClick={handleClose}>
                         <CloseSingle />
                     </a>
                 </header>
 
-                <section className={clsx(styles.sidebarBody, 'univer-py-1')} style={options?.bodyStyle}>{options?.children}</section>
-
-                {options?.footer && <footer className={styles.sidebarFooter}>{options.footer}</footer>}
+                <section className="univer-box-border univer-px-4" style={options?.bodyStyle}>
+                    {options?.children}
+                </section>
+
+                {options?.footer && (
+                    <footer
+                        className="univer-sticky univer-bottom-0 univer-box-border univer-bg-white univer-p-4"
+                    >
+                        {options.footer}
+                    </footer>
+                )}
             </section>
         </section>
     );

diff --git a/packages/ui/src/views/components/sidebar/index.module.less b/packages/ui/src/views/components/sidebar/index.module.less
diff --git a/packages/ui/src/views/components/sidebar/interface.ts b/packages/ui/src/views/components/sidebar/interface.ts