diff --git a/packages/theme/src/services/modal/index.en-US.md b/packages/theme/src/services/modal/index.en-US.md index 18ce61aa2..7459168aa 100644 --- a/packages/theme/src/services/modal/index.en-US.md +++ b/packages/theme/src/services/modal/index.en-US.md @@ -8,6 +8,8 @@ type: Service Based on the `NzModalService` package, it solves some known issues: - More friendly handling callbacks +- Default Button Focus +- Responsive Width ## Usage diff --git a/packages/theme/src/services/modal/index.zh-CN.md b/packages/theme/src/services/modal/index.zh-CN.md index 51fa72ede..82d15b752 100644 --- a/packages/theme/src/services/modal/index.zh-CN.md +++ b/packages/theme/src/services/modal/index.zh-CN.md @@ -8,6 +8,8 @@ type: Service 基于 `NzModalService` 封装,它解决一些已知问题: - 更友好的处理回调 +- 按钮默认焦点 +- 响应式宽度 ## 用法 diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts index c2fca011c..b8bebf8f7 100644 --- a/packages/theme/src/services/modal/modal.helper.ts +++ b/packages/theme/src/services/modal/modal.helper.ts @@ -1,11 +1,11 @@ import { DragDrop, DragRef } from '@angular/cdk/drag-drop'; import { DOCUMENT } from '@angular/common'; import { Injectable, TemplateRef, Type, inject } from '@angular/core'; -import { Observable, Observer, filter, take } from 'rxjs'; +import { Observable, Observer, delay, filter, take, tap } from 'rxjs'; import { deepMerge } from '@delon/util/other'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal'; +import { ModalOptions, NzModalRef, NzModalService } from 'ng-zorro-antd/modal'; const CLS_DRAG = 'MODAL-DRAG'; @@ -26,6 +26,11 @@ export interface ModalHelperOptions { * 是否强制使用 `nzData` 传递参数,若为 `false` 表示参数会直接映射到组件实例中,其他值只能通过 `NZ_MODAL_DATA` 的方式来获取参数,默认:`false` */ useNzData?: boolean; + + /** + * 设置焦点按钮 + */ + focus?: 'ok' | 'cancel'; } export interface ModalHelperDragOptions { @@ -76,20 +81,21 @@ export class ModalHelper { * this.nzModalRef.destroy(); */ create( - comp: TemplateRef | Type, - params?: NzSafeAny, + comp?: TemplateRef | Type | 'confirm' | 'info' | 'success' | 'error' | 'warning', + params?: NzSafeAny | ModalHelperOptions | null, options?: ModalHelperOptions ): Observable { + const isBuildIn = typeof comp === 'string'; options = deepMerge( { size: 'lg', exact: true, includeTabs: false }, - options + isBuildIn && arguments.length === 2 ? params : options ); return new Observable((observer: Observer) => { - const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions; + const { size, includeTabs, modalOptions, drag, useNzData, focus } = options as ModalHelperOptions; let cls: string[] = []; let width = ''; if (size) { @@ -118,25 +124,46 @@ export class ModalHelper { }; cls.push(CLS_DRAG, dragWrapCls); } - const subject = this.srv.create({ + const mth = isBuildIn ? this.srv[comp] : this.srv.create; + const subject: NzModalRef = mth.call(this.srv, { nzWrapClassName: cls.join(' '), - nzContent: comp, + nzContent: isBuildIn ? undefined : comp, nzWidth: width ? width : undefined, nzFooter: null, nzData: params, ...modalOptions - }); + } as ModalOptions); // 保留 nzComponentParams 原有风格,但依然可以通过 @Inject(NZ_MODAL_DATA) 获取 - if (useNzData !== true) { + if (subject.componentInstance != null && useNzData !== true) { Object.assign(subject.componentInstance, params); } subject.afterOpen .pipe( take(1), - filter(() => dragOptions != null) + tap(() => { + if (dragOptions != null) { + dragRef = this.createDragRef(dragOptions, `.${dragWrapCls}`); + } + }), + filter(() => focus != null), + delay(modalOptions?.nzNoAnimation ? 10 : 241) ) .subscribe(() => { - dragRef = this.createDragRef(dragOptions!!, `.${dragWrapCls}`); + const btns = subject + .getElement() + .querySelector('.ant-modal-confirm-btns, .modal-footer') + ?.querySelectorAll('.ant-btn'); + const btnSize = btns?.length ?? 0; + let el: HTMLButtonElement | null = null; + if (btnSize === 1) { + el = btns![0]; + } else if (btnSize > 1) { + el = btns![focus === 'ok' ? 1 : 0]; + } + if (el != null) { + el.focus(); + el.dataset.focused = focus; + } }); subject.afterClose.pipe(take(1)).subscribe((res: NzSafeAny) => { if (options!.exact === true) { diff --git a/packages/theme/src/services/modal/modal.spec.ts b/packages/theme/src/services/modal/modal.spec.ts index 9f0188c55..fc5fc4de6 100644 --- a/packages/theme/src/services/modal/modal.spec.ts +++ b/packages/theme/src/services/modal/modal.spec.ts @@ -6,7 +6,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NZ_MODAL_DATA, NzModalModule, NzModalRef } from 'ng-zorro-antd/modal'; import { AlainThemeModule } from '../../theme.module'; -import { ModalHelper } from './modal.helper'; +import { ModalHelper, ModalHelperOptions } from './modal.helper'; describe('theme: ModalHelper', () => { let modal: ModalHelper; @@ -25,8 +25,7 @@ describe('theme: ModalHelper', () => { }); afterEach(() => { - const a = document.querySelector('nz-modal'); - if (a) a.remove(); + document.querySelector('nz-modal')?.remove(); }); describe('#create', () => { @@ -106,6 +105,34 @@ describe('theme: ModalHelper', () => { expect(handle?.classList).toContain('handle'); })); }); + describe('#focus', () => { + it('should be focus ok button', fakeAsync(() => { + modal.create('confirm', {}, { focus: 'ok', modalOptions: { nzNoAnimation: true } }).subscribe(); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + const btn = document.querySelector('[data-focused="ok"]'); + expect(btn != null).toBe(true); + expect(btn?.classList).toContain('ant-btn-primary'); + })); + it('should be focus cancel button', fakeAsync(() => { + modal.create('confirm', {}, { focus: 'cancel', modalOptions: { nzNoAnimation: true } }).subscribe(); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + const btn = document.querySelector('[data-focused="cancel"]'); + expect(btn != null).toBe(true); + expect(btn?.classList).not.toContain('ant-btn-primary'); + })); + }); + it('should argument length is 2', fakeAsync(() => { + modal.create('info', { size: '23%' } as ModalHelperOptions).subscribe(); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + const width = document.querySelector('.ant-modal')?.style.width; + expect(width).toBe('23%'); + })); }); describe('#createStatic', () => {