feat(layout): sidebar support thyDragMinWidth

atinc · Aug 30, 2023 · e7e0408 · e7e0408
1 parent 979ffc8
commit e7e0408
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/src/layout/examples/sidebar/sidebar.component.html b/src/layout/examples/sidebar/sidebar.component.html
@@ -64,11 +64,11 @@
 <thy-layout style="height: 100px">
   <thy-sidebar
     [thyDraggable]="true"
-    [thyCollapsedWidth]="100"
+    [thyDragMinWidth]="150"
     [thyDragMaxWidth]="700"
     class="p-2"
     (thyDragWidthChange)="dragWidthChange($event)">
-    Sidebar can drag to change width, with min width 100px and max width 700px
+    Sidebar can drag to change width, with min 150px and max 700px
   </thy-sidebar>
   <thy-content> Content </thy-content>
 </thy-layout>

diff --git a/src/layout/sidebar.component.ts b/src/layout/sidebar.component.ts
@@ -46,7 +46,7 @@ export type ThySidebarDirection = 'left' | 'right';
             *ngIf="thyDraggable"
             thyBounds="window"
             [thyMaxWidth]="thyDragMaxWidth"
-            [thyMinWidth]="thyCollapsedWidth"
+            [thyMinWidth]="dragMinWidth"
             (thyResize)="resizeHandler($event)"
             (thyResizeStart)="resizeStart()"
             (thyResizeEnd)="resizeEnd()"
@@ -186,6 +186,11 @@ export class ThySidebarComponent implements OnInit, OnDestroy {
      */
     @Input() @InputNumber() thyDragMaxWidth: number;
 
+    /**
+     * 拖拽的最小宽度
+     */
+    @Input() @InputNumber() thyDragMinWidth: number;
+
     /**
      * 展示收起的触发器自定义模板，默认显示展开收起的圆形图标，设置为 null 表示不展示触发元素，手动控制展开收起状态
      * @type null | undefined | TemplateRef<any>
@@ -277,6 +282,8 @@ export class ThySidebarComponent implements OnInit, OnDestroy {
 
     isResizable: boolean;
 
+    dragMinWidth: number;
+
     private hotkeySubscription: Subscription;
 
     constructor(
@@ -286,6 +293,8 @@ export class ThySidebarComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
+        this.dragMinWidth = this.thyDragMinWidth || this.thyCollapsedWidth;
+
         if (this.thyLayoutComponent) {
             this.thyLayoutComponent.hasSidebar = true;
         }

diff --git a/src/layout/test/sidebar.spec.ts b/src/layout/test/sidebar.spec.ts
@@ -26,6 +26,7 @@ const SIDEBAR_ISOLATED_CLASS = 'thy-layout-sidebar-isolated';
                 [thyHasBorderRight]="hasBorderRight"
                 [thyDraggable]="draggable"
                 [thyDragMaxWidth]="dragMaxWidth"
+                [thyDragMinWidth]="dragMinWidth"
                 [thyCollapsible]="collapsible"
                 [thyCollapsed]="isCollapsed"
                 [thyCollapsedWidth]="collapsibleWidth"
@@ -52,6 +53,7 @@ class ThyDemoLayoutSidebarBasicComponent {
     hasBorderLeft = true;
     hasBorderRight = true;
     draggable = false;
+    dragMinWidth: number;
     dragMaxWidth = 100;
     collapsible = false;
     collapsibleWidth = 0;
@@ -391,13 +393,10 @@ describe(`sidebar`, () => {
             testInstance.collapsibleWidth = 80;
             fixture.detectChanges();
             tick();
-            const resizableEle = fixture.debugElement.query(By.directive(ThyResizableDirective)).nativeElement as HTMLElement;
-            const rect = resizableEle.getBoundingClientRect();
-            const resizeHandleEl = resizableEle.querySelector('.sidebar-resize-handle') as HTMLElement;
-            dispatchMouseEvent(resizeHandleEl, 'mousedown');
-            dispatchMouseEvent(window.document, 'mousemove', rect.left - 120, rect.bottom);
-            dispatchMouseEvent(window.document, 'mouseup');
+            sidebarComponent.ngOnInit();
             fixture.detectChanges();
+
+            dragHandle(-120);
             expect(testInstance.isCollapsed).toEqual(true);
             flush();
         }));
@@ -407,18 +406,44 @@ describe(`sidebar`, () => {
             testInstance.dragMaxWidth = 100;
             testInstance.width = 20;
             fixture.detectChanges();
-            tick();
+
+            dragHandle(120);
+            expect(sidebarElement.style.width).toEqual('100px');
+        }));
+
+        it(`should set thyDragMinWidth successfully`, fakeAsync(() => {
+            testInstance.draggable = true;
+            testInstance.dragMinWidth = 50;
+            fixture.detectChanges();
+
+            sidebarComponent.ngOnInit();
+            fixture.detectChanges();
+
+            dragHandle(-200);
+            expect(sidebarElement.style.width).toEqual('50px');
+        }));
+
+        it(`should limit dragMinWidth to be thyCollapsedWidth when not set thyDragMinWidth`, fakeAsync(() => {
+            testInstance.draggable = true;
+            testInstance.collapsibleWidth = 20;
+            fixture.detectChanges();
+
+            sidebarComponent.ngOnInit();
+            fixture.detectChanges();
+
+            dragHandle(-250);
+            expect(sidebarElement.style.width).toEqual('20px');
+        }));
+
+        function dragHandle(distance: number) {
             const resizableEle = fixture.debugElement.query(By.directive(ThyResizableDirective)).nativeElement as HTMLElement;
             const rect = resizableEle.getBoundingClientRect();
             const resizeHandleEl = resizableEle.querySelector('.sidebar-resize-handle') as HTMLElement;
             dispatchMouseEvent(resizeHandleEl, 'mousedown');
-            dispatchMouseEvent(window.document, 'mousemove', rect.left + 120, rect.bottom);
+            dispatchMouseEvent(window.document, 'mousemove', rect.left + distance, rect.bottom);
             dispatchMouseEvent(window.document, 'mouseup');
             fixture.detectChanges();
-
-            expect(sidebarElement.style.width).toEqual('100px');
-            flush();
-        }));
+        }
     });
 
     describe('custom-sidebar', () => {