fix(DatePicker, TimePicker): fix style (#1453)

Co-authored-by: ZhaoChen <ittisennsinn@gmail.com>
growingio · Nov 10, 2021 · 9991fad · 9991fad · vercel · Nov 10, 2021
1 parent 695e2dc
commit 9991fad
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 30 deletions.
diff --git a/src/date-range-picker/Picker.tsx b/src/date-range-picker/Picker.tsx
@@ -37,11 +37,13 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props: DateRange
   const prefixCls = usePrefixCls('date-range-picker-new');
   const overlayCls = classnames(`${prefixCls}-overlay`, overlayClassName);
 
+  const validValue = (val: [NullableDate, NullableDate]) => val?.filter((v) => !!v)?.length === 2;
+
   const [visible, setVisible] = useControlledState(popoverVisible, false);
 
-  const [controlledValue, setControlledValue] = useControlledState<[NullableDate, NullableDate] | undefined>(
-    value,
-    defaultValue
+  const [controlledValue, setControlledValue] = useControlledState<[NullableDate, NullableDate]>(
+    value as [NullableDate, NullableDate],
+    defaultValue as [NullableDate, NullableDate]
   );
 
   const handleVisibleChange = (current: boolean) => {
@@ -75,7 +77,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props: DateRange
         placeholder={placeholder}
         disabled={disabled}
         allowClear={allowClear}
-        value={controlledValue && formatDates(controlledValue)}
+        value={validValue(controlledValue) ? formatDates(controlledValue) : undefined}
         size={size}
         suffix={suffix}
         hidePrefix={hidePrefix}

diff --git a/src/static-date-picker/style/index.less b/src/static-date-picker/style/index.less
@@ -1,4 +1,6 @@
 @import '../../stylesheet/index.less';
+@import '../../stylesheet/mixin/index.less';
+@import '../../stylesheet/variables/index.less';
 
 @new-date-picker-prefix-cls: ~'@{component-prefix}-picker';
 @icon-prefix-cls: ~'@{component-prefix}-icon';
@@ -10,9 +12,9 @@
     height: 24px;
     .font(@weight: 500);
 
-    color: @palette-black-6;
+    color: @gray-5;
     line-height: 22px;
-    background: @palette-white;
+    background: @gray-0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -31,7 +33,7 @@
   &-panel {
     width: 280px;
     text-align: center;
-    background: @palette-white;
+    background: @gray-0;
     border-radius: 4px;
     filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1));
   }
@@ -53,13 +55,13 @@
       height: 24px;
       margin: 0 2px;
       padding: 4px;
-      background: @palette-white;
+      background: @gray-0;
       border: none;
       border-radius: 4px;
       cursor: pointer;
 
       .@{icon-prefix-cls} {
-        color: @palette-black-6;
+        color: @gray-5;
       }
     }
     &-super-prev-btn {
@@ -83,7 +85,7 @@
 
     &-view {
       flex-grow: 1;
-      color: @palette-black-6;
+      color: @gray-5;
       line-height: 24px;
       text-align: center;
       .font(@weight: 500);
@@ -93,7 +95,7 @@
   &-body {
     box-sizing: border-box;
     padding: 20px;
-    background: @palette-white;
+    background: @gray-0;
     border-radius: 0 0 4px 4px;
   }
   &-decade-panel > &-body {
@@ -113,7 +115,7 @@
     tr > th {
       .font();
       margin: 5px;
-      color: @palette-black-6;
+      color: @gray-5;
 
       line-height: 22px;
       text-align: center;
@@ -123,7 +125,6 @@
   &-cell {
     box-sizing: border-box;
     padding: 4px 0;
-    color: @palette-black-3;
     cursor: pointer;
 
     &::before {
@@ -152,15 +153,16 @@
     }
 
     &-in-view {
-      color: @palette-black-6;
+      color: @gray-5;
     }
 
     &-today {
       font-weight: 500;
     }
 
     &-in-view&-today {
-      color: @palette-blue-4;
+      color: @blue-3;
+      font-weight: 400;
     }
     &-in-view&-today &-inner::before {
       position: absolute;
@@ -169,16 +171,16 @@
       bottom: 0;
       left: 0;
       z-index: 1;
-      border: 1px solid @palette-blue-4;
+      border: 1px solid @blue-3;
       border-radius: 4px;
       content: '';
     }
 
     &-in-view&-selected {
-      color: @palette-white;
+      color: @gray-0;
     }
     &-in-view&-selected &-inner {
-      background: @palette-blue-4;
+      background: @blue-3;
     }
 
     &-disabled {
@@ -189,13 +191,6 @@
         background: @palette-gray-1;
       }
     }
-    &-disabled&-in-view,
-    &-disabled&-today {
-      color: @palette-black-3;
-    }
-    &-disabled&-today &-inner::before {
-      border-color: @palette-black-3;
-    }
   }
 
   &-date-panel &-cell::before {

diff --git a/src/static-date-range-picker/style/index.less b/src/static-date-range-picker/style/index.less
@@ -1,4 +1,6 @@
 @import '../../stylesheet/index.less';
+@import '../../stylesheet/mixin/index.less';
+@import '../../stylesheet/variables/index.less';
 
 @date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker';
 @picker-prefix-cls: ~'@{component-prefix}-picker';
@@ -24,7 +26,7 @@
   &-cell {
     &-in-view&-range-start,
     &-in-view&-range-end {
-      color: @palette-white;
+      color: @gray-0;
     }
     &-in-view&-range-start &-inner,
     &-in-view&-range-end &-inner {

diff --git a/src/static-time-picker/style/index.less b/src/static-time-picker/style/index.less
@@ -1,4 +1,6 @@
 @import '../../stylesheet/index.less';
+@import '../../stylesheet/mixin/index.less';
+@import '../../stylesheet/variables/index.less';
 
 @new-time-picker-prefix-cls: ~'@{component-prefix}-new-time-picker';
 
@@ -9,7 +11,7 @@
     width: fit-content;
     height: fit-content;
     padding-top: 4px;
-    background-color: @palette-white;
+    background-color: @gray-0;
     filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1));
   }
   &--three-columns {
@@ -44,11 +46,11 @@
     &-cell {
       margin-top: 4px;
       padding: 4px 12px;
-      color: @palette-black-6;
+      color: @gray-5;
       .font();
       line-height: 22px;
       list-style-type: none;
-      background-color: @palette-white;
+      background-color: @gray-0;
       border-radius: 4px;
       cursor: pointer;
 
@@ -58,7 +60,7 @@
 
       &-selected,
       &:active {
-        color: @palette-blue-5;
+        color: @blue-3;
         font-weight: 500;
         background-color: @palette-gray-1;
       }