feat(module:resizable): add nzDisabled property

components/resizable/demo/basic.ts

@@ -11,6 +11,7 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
       [nzMinWidth]="80"
       [nzMaxHeight]="200"
       [nzMinHeight]="80"
+      [nzDisabled]="disabled"
       [style.height.px]="height"
       [style.width.px]="width"
       (nzResize)="onResize($event)"
@@ -39,6 +40,7 @@ export class NzDemoResizableBasicComponent {
   width = 400;
   height = 200;
   id = -1;
+  disabled = false;
 
   onResize({ width, height }: NzResizeEvent): void {
     cancelAnimationFrame(this.id);

components/resizable/doc/index.en-US.md

@@ -62,6 +62,7 @@ interface NzResizeEvent {
 | [nzMinColumn] | Minimum Column | `number` | - |
 | [nzLockAspectRatio] | Lock the aspect ratio based on the initial size | `boolean` | `false` |
 | [nzPreview] | Enable preview when resizing | `boolean` | `false` |
+| [nzDisabled] | Disable resize | `boolean` | `false` |
 | (nzResize) | Calls when Resizing | `EventEmitter<NzResizeEvent>` | - |
 | (nzResizeStart) | Calls when resize start | `EventEmitter<NzResizeEvent>` | - |
 | (nzResizeEnd) | Calls when resize end | `EventEmitter<NzResizeEvent>` | - |

components/resizable/doc/index.zh-CN.md

@@ -61,6 +61,7 @@ interface NzResizeEvent {
 | [nzMinColumn] | 栅格最小列数 | `number` | - |
 | [nzLockAspectRatio] | 锁定宽高比 | `boolean` | `false` |
 | [nzPreview] | 开启预览 | `boolean` | `false` |
+| [nzDisabled] | 禁用 | `boolean` | `false` |
 | (nzResize) | 调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
 | (nzResizeStart) | 开始调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
 | (nzResizeEnd) | 结束调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |

components/resizable/resizable.directive.ts

@@ -29,6 +29,7 @@ export interface NzResizeEvent {
   host: {
     '[class.nz-resizable]': 'true',
     '[class.nz-resizable-resizing]': 'resizing',
+    '[class.nz-resizable-disabled]': 'nzDisabled',
     '(mouseenter)': 'onMouseenter()',
     '(mouseleave)': 'onMouseleave()'
   }
@@ -47,6 +48,7 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
   @Input() nzMinColumn: number = -1;
   @Input() @InputBoolean() nzLockAspectRatio: boolean = false;
   @Input() @InputBoolean() nzPreview: boolean = false;
+  @Input() @InputBoolean() nzDisabled: boolean = false;
   @Output() readonly nzResize = new EventEmitter<NzResizeEvent>();
   @Output() readonly nzResizeEnd = new EventEmitter<NzResizeEvent>();
   @Output() readonly nzResizeStart = new EventEmitter<NzResizeEvent>();
@@ -67,6 +69,9 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
     private ngZone: NgZone
   ) {
     this.nzResizableService.handleMouseDown$.pipe(takeUntil(this.destroy$)).subscribe(event => {
+      if (this.nzDisabled) {
+        return;
+      }
       this.resizing = true;
       this.nzResizableService.startResizing(event.mouseEvent);
       this.currentHandleEvent = event;

components/resizable/resizable.spec.ts

@@ -361,6 +361,30 @@ describe('resizable', () => {
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
       }));
     });
+
+    it('should disabled work', fakeAsync(() => {
+      testComponent.disabled = true;
+      fixture.detectChanges();
+      expect(resizableEle.classList).toContain(`nz-resizable-disabled`);
+      expect(testComponent.width).toBe(400);
+      const rect = resizableEle.getBoundingClientRect();
+      const handle = resizableEle.querySelector('.nz-resizable-handle-left') as HTMLElement;
+      mouseMoveTrigger(
+        handle,
+        {
+          x: rect.left,
+          y: rect.bottom
+        },
+        {
+          x: rect.left + 100,
+          y: rect.bottom
+        }
+      );
+      fixture.detectChanges();
+      tick(16);
+      fixture.detectChanges();
+      expect(testComponent.width).toBe(400);
+    }));
   });
 
   describe('customize', () => {

components/resizable/style/index.less

@@ -83,5 +83,13 @@
 
     }
   }
+
+  &-disabled {
+    .@{resizable-prefix-cls} {
+      &-handle {
+        pointer-events: none;
+      }
+    }
+  }
 }