fix: add facade api for attach popup

dream-num · Jan 22, 2025 · 3adaedc · 3adaedc
1 parent 644640d
commit 3adaedc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts b/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts
@@ -373,7 +373,6 @@ export class SheetRenderController extends RxDisposable implements IRenderModule
                     height: columnHeaderHeight,
                 });
             }
-
         }));
     }
 

diff --git a/packages/sheets-ui/src/facade/f-range.ts b/packages/sheets-ui/src/facade/f-range.ts
@@ -80,12 +80,21 @@ interface IFRangeSheetsUIMixin {
      * @returns The disposable object to detach the popup, if the popup is not attached, return `null`.
      * @example
     ```
+        univerAPI.getComponentManager().register(
+            'myPopup',
+            () => React.createElement('div', {
+                style: {
+                    color: 'red',
+                    fontSize: '14px'
+                }
+            }, 'Custom Popup')
+        );
+
         let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
         let range = sheet.getRange(2, 2, 3, 3);
         univerAPI.getActiveWorkbook().setActiveRange(range);
         let disposable = range.attachPopup({
-        componentKey: 'univer.sheet.cell-alert',
-        extraProps: { alert: { type: 0, title: 'This is an Info', message: 'This is an info message' } },
+            componentKey: 'myPopup'
         });
     ```
      */
@@ -104,17 +113,27 @@ interface IFRangeSheetsUIMixin {
      */
     attachAlertPopup(alert: Omit<ICellAlert, 'location'>): IDisposable;
     /**
-     * Attach a DOM popup to the start cell of current range.
+     * Attach a DOM popup to the current range.
      * @param alert The alert to attach
      * @returns The disposable object to detach the alert.
      * @example
      * ```ts
         let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
         let range = sheet.getRange(2, 2, 3, 3);
         univerAPI.getActiveWorkbook().setActiveRange(range);
+
+        univerAPI.getComponentManager().register(
+            'myPopup',
+            () => React.createElement('div', {
+                style: {
+                    background: 'red',
+                    fontSize: '14px'
+                }
+            }, 'Custom Popup')
+        );
         let disposable = range.attachRangePopup({
-        componentKey: 'univer.sheet.single-dom-popup',
-        extraProps: { alert: { type: 0, title: 'This is an Info', message: 'This is an info message' } },
+            componentKey: 'myPopup',
+            direction: 'top' // 'vertical' | 'horizontal' | 'top' | 'right' | 'left' | 'bottom' | 'bottom-center' | 'top-center';
         });
      * ```
      */
@@ -224,7 +243,7 @@ class FRangeSheetsUIMixin extends FRange implements IFRangeSheetsUIMixin {
         });
      */
     override attachRangePopup(popup: IFCanvasPopup): Nullable<IDisposable> {
-        popup.direction = popup.direction ?? 'horizontal';
+        popup.direction = popup.direction ?? 'top-center';
         popup.extraProps = popup.extraProps ?? {};
         popup.offset = popup.offset ?? [0, 0];
 
@@ -261,7 +280,7 @@ class FRangeSheetsUIMixin extends FRange implements IFRangeSheetsUIMixin {
 FRange.extend(FRangeSheetsUIMixin);
 declare module '@univerjs/sheets/facade' {
     // eslint-disable-next-line ts/naming-convention
-    interface FRange extends IFRangeSheetsUIMixin {}
+    interface FRange extends IFRangeSheetsUIMixin { }
 }
 
 /**

diff --git a/packages/sheets-ui/src/services/canvas-pop-manager.service.ts b/packages/sheets-ui/src/services/canvas-pop-manager.service.ts
@@ -558,7 +558,6 @@ export class SheetCanvasPopManagerService extends Disposable {
         disposableCollection.add(positionObserverDisposable);
         disposableCollection.add(toDisposable(() => {
             this._globalPopupManagerService.removePopup(id);
-            // position$.complete();
             topLeftPos$.complete();
             rightBottomPos$.complete();
         }));

diff --git a/packages/ui/src/facade/f-univer.ts b/packages/ui/src/facade/f-univer.ts
@@ -146,7 +146,7 @@ export interface IFUniverUIMixin {
      * @param component
      * @example
      * ```ts
-     * univerAPI.registerComponent(() => React.createElement('h1', null, 'Custom Header'));
+     * univerAPI.registerComponent('my-comp', () => React.createElement('h1', null, 'Custom Header'));
      * ```
      */
     registerComponent(name: string, component: ComponentType, options?: IComponentOptions): IDisposable;

diff --git a/packages/ui/src/views/components/popup/RectPopup.tsx b/packages/ui/src/views/components/popup/RectPopup.tsx
@@ -39,7 +39,7 @@ export interface IRectPopupProps {
      */
     anchorRect$: Observable<IAbsolutePosition>;
     excludeRects?: RefObject<Nullable<IAbsolutePosition[]>>;
-    direction?: 'vertical' | 'horizontal' | 'left' | 'top' | 'right' | 'left' | 'bottom' | 'bottom-center' | 'top-center';
+    direction?: 'vertical' | 'horizontal' | 'top' | 'right' | 'left' | 'bottom' | 'bottom-center' | 'top-center';
 
     hidden?: boolean;
     // #region closing behavior
-Original file line number
+Diff line change
@@ Expand Up @@
                         height: columnHeaderHeight,
                     });
                 }
             }));
         }
@@ Expand Down @@