feat: drawer add divider (#260)

Co-authored-by: Yongping <ypzhao@alauda.io>
alauda · Jan 19, 2022 · a9a18b3 · a9a18b3
1 parent 26e2845
commit a9a18b3
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 9 deletions.
diff --git a/.changeset/thick-scissors-report.md b/.changeset/thick-scissors-report.md
@@ -0,0 +1,5 @@
+---
+'@alauda/ui': patch
+---
+
+drawer add divider
diff --git a/src/drawer/component/drawer-ref.ts b/src/drawer/component/drawer-ref.ts
@@ -26,4 +26,5 @@ export abstract class DrawerRef<T = ComponentType<any>, R = any> {
   abstract mask?: boolean;
   abstract maskClosable?: boolean;
   abstract width?: number;
+  abstract divider?: boolean;
 }
diff --git a/src/drawer/component/drawer.component.scss b/src/drawer/component/drawer.component.scss
@@ -1,7 +1,9 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
-.aui-drawer-mask {
+$drawer: aui-drawer;
+
+.#{$drawer}-mask {
   position: absolute;
   top: 0;
   left: 0;
@@ -15,7 +17,7 @@
   }
 }
 
-.aui-drawer {
+.#{$drawer} {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -37,11 +39,17 @@
   }
 
   &__header {
-    margin: 20px 20px -4px 20px;
-    padding-bottom: 16px;
+    margin: 20px 20px 0 20px;
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid get-color(n-8);
+  }
+
+  &.hasDivider {
+    .#{$drawer}__header {
+      margin: 20px 20px -4px 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid get-color(n-8);
+    }
   }
 
   &__title {

diff --git a/src/drawer/component/drawer.component.ts b/src/drawer/component/drawer.component.ts
@@ -98,6 +98,9 @@ export class DrawerComponent<
   @Input()
   maskClosable: boolean;
 
+  @Input()
+  divider = true;
+
   private _value = SIZE_MAPPER[DrawerSize.Medium];
   @Input()
   set width(value: number) {
@@ -111,6 +114,7 @@ export class DrawerComponent<
   get drawerClasses(): Record<string, boolean> {
     return {
       'aui-drawer': true,
+      hasDivider: this.divider,
       ...(!this.drawerClass ? null : { [this.drawerClass]: true }),
     };
   }

diff --git a/src/drawer/drawer.service.ts b/src/drawer/drawer.service.ts
@@ -5,14 +5,23 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { DrawerComponent } from './component/drawer.component';
+import { DrawerSize } from './public-api';
 
-interface DrawerOptions<T = any, D = any> {
+export interface DrawerOptions<T = any, D = any> {
   title?: string | TemplateRef<unknown>;
   width?: number;
   content?: ComponentType<T> | TemplateRef<T>;
   contentParams?: D;
   footer?: string | TemplateRef<unknown>;
-  offsetY?: number;
+  offsetY?: string;
+  divider?: boolean;
+  drawerClass?: string;
+  size?: DrawerSize;
+  visible?: boolean;
+  hideOnClickOutside?: boolean;
+  showClose?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
 }
 @Injectable()
 export class DrawerService {

diff --git a/stories/drawer/index.ts b/stories/drawer/index.ts
@@ -4,6 +4,7 @@ import {
   DrawerRef,
   DrawerService,
   InputModule,
+  SwitchModule,
 } from '@alauda/ui';
 import { Component, Input, TemplateRef } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -12,7 +13,13 @@ import { storiesOf } from '@storybook/angular';
 storiesOf('Drawer', module)
   .add('drawer', () => ({
     moduleMetadata: {
-      imports: [ButtonModule, DrawerModule, InputModule, FormsModule],
+      imports: [
+        ButtonModule,
+        DrawerModule,
+        InputModule,
+        FormsModule,
+        SwitchModule,
+      ],
       declarations: [DemoComponent],
     },
     component: DemoComponent,
@@ -52,7 +59,16 @@ storiesOf('Drawer', module)
       offsetY:
       <aui-number-input [step]="20" [(ngModel)]="offsetY"></aui-number-input>
     </div>
-    <aui-drawer [offsetY]="offsetY" [visible]="visible" (close)="close()">
+    <div>
+      divider:
+      <aui-switch [(ngModel)]="divider"></aui-switch>
+    </div>
+    <aui-drawer
+      [divider]="divider"
+      [offsetY]="offsetY + 'px'"
+      [visible]="visible"
+      (close)="close()"
+    >
       <div *auiDrawerHeader>header</div>
       <ng-container *auiDrawerContent> content </ng-container>
       <div *auiDrawerFooter>footer</div>
@@ -62,6 +78,7 @@ storiesOf('Drawer', module)
 class DemoComponent {
   offsetY = 0;
   visible = false;
+  divider = true;
   open() {
     this.visible = true;
   }