From 1fbcf75695f5a288321eec2751ae8d0800ed0454 Mon Sep 17 00:00:00 2001
From: maxin <48519459+nnmax@users.noreply.github.com>
Date: Fri, 25 Feb 2022 16:39:00 +0800
Subject: [PATCH] feat(static-date-picker): hide non-current month's dates
 (#1863)

* fix(date-range-picker): each select will trigger  onSelect

* feat(static-date-picker): hide non-current month's dates

Co-authored-by: maxin <maxin@growingio.com>
---
 src/date-range-picker/Picker.tsx        |  2 +-
 src/static-date-picker/DatePicker.tsx   | 63 ++++++++++++++++++++++---
 src/static-date-picker/style/index.less |  9 ++--
 3 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/date-range-picker/Picker.tsx b/src/date-range-picker/Picker.tsx
index f60313ddd4..ec456c9c9c 100644
--- a/src/date-range-picker/Picker.tsx
+++ b/src/date-range-picker/Picker.tsx
@@ -56,9 +56,9 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
 
   const handleOnSelect = (currentValue: [NullableDate, NullableDate], index: number) => {
     setControlledValue(currentValue);
+    onSelect?.(currentValue, formatDates(currentValue, formatString));
     if (index) {
       setVisible(false);
-      onSelect?.(currentValue, formatDates(currentValue, formatString));
     }
   };
 
diff --git a/src/static-date-picker/DatePicker.tsx b/src/static-date-picker/DatePicker.tsx
index 0d34ad559b..bf14a0f9cf 100644
--- a/src/static-date-picker/DatePicker.tsx
+++ b/src/static-date-picker/DatePicker.tsx
@@ -1,24 +1,73 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from 'react';
-import { useLocale, usePrefixCls } from '@gio-design/utils';
+import React, { useLayoutEffect, useRef } from 'react';
+import { useControlledState, useLocale, usePrefixCls } from '@gio-design/utils';
 import { LeftDoubleOutlined, LeftOutlined, RightOutlined, RightDoubleOutlined } from '@gio-design/icons';
 import PickerPanel from 'rc-picker/lib/PickerPanel';
 import generateDateFns from 'rc-picker/lib/generate/dateFns';
 import { Locale } from 'rc-picker/lib/interface';
+import { isEqual } from 'date-fns';
 import defaultLocale from './locales/zh-CN';
 import { StaticDatePickerProps } from './interfaces';
 
-function DatePicker({ viewDate, ...restProps }: StaticDatePickerProps) {
+const OmittedCell: React.FC = () => {
+  const spanRef = useRef<HTMLSpanElement>(null);
+  useLayoutEffect(() => {
+    // Remove title prop
+    if (spanRef.current) {
+      const parent = spanRef.current.parentElement;
+      if (parent?.hasAttribute('title')) {
+        parent.removeAttribute('title');
+      }
+    }
+  }, []);
+  return <span ref={spanRef} />;
+};
+
+const DatePicker: React.FC<StaticDatePickerProps> = ({
+  viewDate: viewDateProp,
+  disabledDate: disabledDateProp,
+  ...restProps
+}) => {
   const locale = useLocale<Locale>('DatePicker') || defaultLocale;
+  const [viewDate, setViewDate] = useControlledState(viewDateProp, new Date());
+
+  const prefixCls = usePrefixCls('picker');
+
+  const isSameYearAndDay = (currentDate: Date) =>
+    isEqual(
+      new Date(currentDate.getFullYear(), currentDate.getMonth()),
+      new Date(viewDate.getFullYear(), viewDate.getMonth())
+    );
+
+  const omitOtherDate = (currentDate: Date) => {
+    if (isSameYearAndDay(currentDate)) {
+      return <div className={`${prefixCls}-cell-inner`}>{currentDate.getDate()}</div>;
+    }
+    return <OmittedCell />;
+  };
+
+  const disabledDate = (currentDate: Date) => {
+    if (!isSameYearAndDay(currentDate)) {
+      return true;
+    }
+    if (typeof disabledDateProp === 'function') {
+      return disabledDateProp(currentDate);
+    }
+    return false;
+  };
+
   return (
     <PickerPanel<Date>
       data-testid="static-date-picker"
+      dateRender={omitOtherDate}
+      disabledDate={disabledDate}
       {...restProps}
       pickerValue={viewDate}
+      onPickerValueChange={(date) => setViewDate(date)}
       locale={locale}
-      prefixCls={usePrefixCls('picker')}
+      prefixCls={prefixCls}
       picker="date"
       generateConfig={generateDateFns}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       superPrevIcon={<LeftDoubleOutlined />}
       prevIcon={<LeftOutlined />}
@@ -26,6 +75,8 @@ function DatePicker({ viewDate, ...restProps }: StaticDatePickerProps) {
       superNextIcon={<RightDoubleOutlined />}
     />
   );
-}
+};
+
+DatePicker.displayName = 'DatePicker';
 
 export default DatePicker;
diff --git a/src/static-date-picker/style/index.less b/src/static-date-picker/style/index.less
index e75d20e511..ea60e108c9 100644
--- a/src/static-date-picker/style/index.less
+++ b/src/static-date-picker/style/index.less
@@ -126,9 +126,12 @@
   &-cell {
     box-sizing: border-box;
     padding: 4px 0;
-    cursor: pointer;
 
-    &::before {
+    &:not(&-disabled) {
+      cursor: pointer;
+    }
+
+    &:not(&-disabled)::before {
       position: absolute;
       right: 0;
       left: 0;
@@ -184,7 +187,7 @@
       background: @blue-3;
     }
 
-    &-disabled {
+    &-in-view&-disabled {
       color: @gray-3;
       cursor: not-allowed;