feat(dropdown): thyPopoverOptions support outsideClosable params (#3144)

atinc · Aug 14, 2024 · 3fa855b · 3fa855b
1 parent 4cc0ae2
commit 3fa855b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/src/dropdown/dropdown.directive.ts b/src/dropdown/dropdown.directive.ts
@@ -92,10 +92,10 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
     @Input() thyActiveClass: string = 'thy-dropdown-origin-active';
 
     /**
-     * 弹出框的参数，底层使用 Popover 组件, 默认为`{ placement: "bottomLeft", insideClosable: true, minWidth: "240px" }`
-     * @default { placement: "bottomLeft", insideClosable: true, minWidth: "240px" }
+     * 弹出框的参数，底层使用 Popover 组件, 默认为`{ placement: "bottomLeft", insideClosable: true, minWidth: "240px", outsideClosable: true }`
+     * @default { placement: "bottomLeft", insideClosable: true, minWidth: "240px", outsideClosable: true }
      */
-    @Input() thyPopoverOptions: Pick<ThyPopoverConfig, 'placement' | 'height' | 'insideClosable' | 'minWidth'>;
+    @Input() thyPopoverOptions: Pick<ThyPopoverConfig, 'placement' | 'height' | 'insideClosable' | 'minWidth' | 'outsideClosable'>;
 
     /**
      * 弹出框的显示位置，会覆盖 thyPopoverOptions 中的 placement，`top` | `topLeft` | `topRight` | `bottom` | `bottomLeft` | `bottomRight` | `left` | `leftTop` | `leftBottom` | `right` | `rightTop` | `rightBottom`
@@ -155,8 +155,8 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
             }
         }
 
-        const { placement, height, insideClosable, minWidth } = Object.assign(
-            { placement: 'bottomLeft', insideClosable: true },
+        const { placement, height, insideClosable, outsideClosable, minWidth } = Object.assign(
+            { placement: 'bottomLeft', insideClosable: true, outsideClosable: true },
             this.thyPopoverOptions
         );
         const config: ThyPopoverConfig = {
@@ -167,7 +167,7 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
             panelClass: this.thyPanelClass,
             placement: this.thyPlacement ? this.thyPlacement : placement,
             height,
-            outsideClosable: true,
+            outsideClosable,
             insideClosable: helpers.isUndefined(this.thyMenuInsideClosable) ? insideClosable : this.thyMenuInsideClosable,
             minWidth,
             originActiveClass: this.thyActiveClass

diff --git a/src/dropdown/examples/options/options.component.html b/src/dropdown/examples/options/options.component.html
@@ -1,4 +1,4 @@
-<form thyForm thyLayout="inline">
+<form thyForm>
   <thy-form-group thyLabelText="Placement">
     <thy-native-select [(ngModel)]="popoverOptions.placement" name="placement">
       <option value="top">top</option>
@@ -21,6 +21,9 @@
   <thy-form-group thyLabelText="MinWidth">
     <thy-input-number [(ngModel)]="popoverOptions.minWidth" name="min-width"></thy-input-number>
   </thy-form-group>
+  <thy-form-group class="align-items-center" thyLabelText="OutsideClosable">
+    <thy-switch class="dropdown-switch" [(ngModel)]="popoverOptions.outsideClosable" name="outsideClosable"></thy-switch>
+  </thy-form-group>
 </form>
 
 <button

diff --git a/src/dropdown/examples/options/options.component.ts b/src/dropdown/examples/options/options.component.ts
@@ -10,10 +10,12 @@ export class ThyDropdownOptionsExampleComponent {
         placement?: ThyPlacement;
         height?: string | number;
         minWidth?: string | number;
+        outsideClosable?: boolean;
     } = {
         placement: 'bottom',
         height: 108,
-        minWidth: '200px'
+        minWidth: '200px',
+        outsideClosable: true
     };
 
     placement: ThyPlacement = 'bottomRight';

diff --git a/src/dropdown/test/dropdown.spec.ts b/src/dropdown/test/dropdown.spec.ts
@@ -996,6 +996,7 @@ describe('dropdown options', () => {
                     placement: 'bottomLeft',
                     height: undefined,
                     insideClosable: true,
+                    outsideClosable: true,
                     hasBackdrop: false,
                     offset: 0,
                     originActiveClass: 'thy-dropdown-origin-active'
@@ -1074,6 +1075,18 @@ describe('dropdown options', () => {
             );
         });
 
+        it('should set outsideClosable', () => {
+            dropdown.thyPopoverOptions.outsideClosable = false;
+
+            expect(calledConfig).toBeUndefined();
+            dropdown.createOverlay();
+            expect(calledConfig).toEqual(
+                jasmine.objectContaining({
+                    outsideClosable: false
+                })
+            );
+        });
+
         it('should set panel class', () => {
             dropdown.thyPanelClass = 'test-dropdown-panel-class';