fix: date-picker style problem (#145)

Co-authored-by: zangguodong <[email protected]>
alauda · Aug 9, 2021 · c0c2f82 · c0c2f82
1 parent 5470edc
commit c0c2f82
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 8 deletions.
diff --git a/.changeset/date-picker-fix.md b/.changeset/date-picker-fix.md
@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: date-picker style problem
diff --git a/src/date-picker/date-picker/date-picker.component.ts b/src/date-picker/date-picker/date-picker.component.ts
@@ -21,14 +21,16 @@ import { DateNavRange, DisabledTimeFn } from '../date-picker.type';
   selector: 'aui-date-picker',
   templateUrl: './date-picker.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
+  // tslint:disable-next-line: validate-decorators
+  encapsulation: ViewEncapsulation.Emulated,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => DatePickerComponent),
       multi: true,
     },
   ],
+  styleUrls: ['./date-picker.style.scss'],
 })
 export class DatePickerComponent
   extends CommonFormControl<ConfigType, Dayjs>

diff --git a/src/date-picker/date-picker/date-picker.style.scss b/src/date-picker/date-picker/date-picker.style.scss
@@ -0,0 +1,4 @@
+:host {
+  display: inline-block;
+  width: 200px;
+}
diff --git a/src/date-picker/range-picker/range-picker.style.scss b/src/date-picker/range-picker/range-picker.style.scss
@@ -3,6 +3,8 @@
     max-width: none;
   }
 }
-aui-date-picker-trigger {
+
+:host {
   display: inline-block;
+  width: 260px;
 }
diff --git a/src/date-picker/trigger/trigger.component.ts b/src/date-picker/trigger/trigger.component.ts
@@ -18,7 +18,8 @@ const bem = buildBem('aui-date-picker-trigger');
 @Component({
   selector: 'aui-date-picker-trigger',
   templateUrl: './trigger.template.html',
-  encapsulation: ViewEncapsulation.None,
+  // tslint:disable-next-line: validate-decorators
+  encapsulation: ViewEncapsulation.Emulated,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./trigger.style.scss'],
 })

diff --git a/src/date-picker/trigger/trigger.style.scss b/src/date-picker/trigger/trigger.style.scss
@@ -2,6 +2,14 @@
 @import '../../theme/mixin';
 
 $block: aui-date-picker-trigger;
+
+$height-mapper: (
+  'medium': $height-medium,
+  'large': $height-large,
+  'small': $height-small,
+  'mini': $height-mini,
+);
+
 aui-range-picker,
 aui-date-picker {
   &.ng-invalid {
@@ -14,13 +22,18 @@ aui-date-picker {
   }
 }
 
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
 .#{$block} {
   &__container {
     display: flex;
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
-    width: 200px;
+    width: 100%;
     border: $input-border-width $input-border-style $input-border-color;
     position: relative;
     cursor: pointer;
@@ -29,13 +42,17 @@ aui-date-picker {
       border: none;
       @include view-readonly;
     }
+    // trigger有自己的border，隐藏了input的border，修正input由于border-box设定引起的高度差异
+    @each $name, $height in $height-mapper {
+      .aui-input--#{$name} {
+        height: $height - 2px;
+      }
+    }
+
     &.is-focus,
     &:hover {
       border-color: $color-primary;
     }
-    &.is-range {
-      width: 260px;
-    }
     &.is-disabled {
       input[readonly] {
         background: transparent;
@@ -65,6 +82,7 @@ aui-date-picker {
     font-size: $date-picker-icon-size;
     width: $date-picker-icon-size;
     height: $date-picker-icon-size;
+    line-height: 1em;
     .clear {
       @include clear-button;
     }

diff --git a/stories/date-picker/date-picker.stories.mdx b/stories/date-picker/date-picker.stories.mdx
@@ -47,12 +47,13 @@ import { DatePickerModule, DatePickerType, DateNavRange } from '@alauda/ui';
         Form value2: {{time2?.toDate()}}
         <br />
         <br />
-        disable until today
+        disable until now
         <aui-date-picker
           [type]="DatePickerType.Day"
           [(ngModel)]="time3"
           [showTime]="true"
           [disabledDate]="disableDateFn"
+          [disabledTime]="disableTimeToNow"
         ></aui-date-picker>
         Form value3: {{time3?.toDate()}}
         <br />
@@ -103,6 +104,18 @@ import { DatePickerModule, DatePickerType, DateNavRange } from '@alauda/ui';
               : 'year',
           );
         },
+        disableTimeToNow: function () {
+          const currentHour = dayjs().hour();
+          const currentMinute = dayjs().minute();
+          const currentSecond = dayjs().second();
+          return {
+            hours: () => Array.from({ length: currentHour }).map((_, i) => i),
+            minutes: () =>
+              Array.from({ length: currentMinute }).map((_, i) => i),
+            seconds: () =>
+              Array.from({ length: currentSecond }).map((_, i) => i),
+          };
+        },
         disabledTimeFn: function (date) {
           if (date?.isSame(dayjs(), 'date')) {
             return {
@@ -135,6 +148,7 @@ import { DatePickerModule, DatePickerType, DateNavRange } from '@alauda/ui';
         <aui-range-picker
           [(ngModel)]="range2"
           [showTime]="false"
+          [showFooter]="true"
         ></aui-range-picker>
         Form value: {{range2|json}}
         <br />