From 319f00b0c070e163ee3ee72ba8121d7733e857cd Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 25 Nov 2019 14:02:11 +0800
Subject: [PATCH] update style

---
 assets/index.less                 | 14 +++++++++++++-
 examples/calendar.tsx             | 27 ++++++++++++++++++++++-----
 src/Picker.tsx                    |  2 ++
 src/PickerPanel.tsx               |  2 ++
 src/panels/DatePanel/DateBody.tsx | 10 +++++++---
 5 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 3372cd29b..619683ce1 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -23,7 +23,6 @@
   &-time-panel {
     display: flex;
     flex-direction: column;
-    width: 250px;
 
     // Header
     &-header {
@@ -85,6 +84,14 @@
     }
   }
 
+  // ================== Year & Month Panel ==================
+  &-year-panel,
+  &-month-panel {
+    &-cell-inner {
+      width: 100px;
+    }
+  }
+
   // ====================== Week Panel ======================
   &-week-panel {
     &-row {
@@ -101,6 +108,11 @@
       }
     }
 
+    &-cell,
+    &-cell-inner {
+      width: 20px;
+    }
+
     &-cell-week {
       font-size: 12px;
       color: #999;
diff --git a/examples/calendar.tsx b/examples/calendar.tsx
index ad7a769b7..a190bfb82 100644
--- a/examples/calendar.tsx
+++ b/examples/calendar.tsx
@@ -1,12 +1,29 @@
 import React from 'react';
-import moment, { Moment } from 'moment';
+import { Moment } from 'moment';
+import Picker from '../src/Picker';
 import PickerPanel from '../src/PickerPanel';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';
 import '../assets/index.less';
 
+function dateRender(date: Moment) {
+  return <div style={{ width: 80, height: 80 }}>{date.date()}</div>;
+}
+
 export default () => (
-    <div>
-      <PickerPanel locale={zhCN} generateConfig={momentGenerateConfig} />
-    </div>
-  );
+  <div>
+    <PickerPanel<Moment>
+      locale={zhCN}
+      generateConfig={momentGenerateConfig}
+      dateRender={dateRender}
+    />
+
+    <br />
+
+    <Picker<Moment>
+      locale={zhCN}
+      generateConfig={momentGenerateConfig}
+      dateRender={dateRender}
+    />
+  </div>
+);
diff --git a/src/Picker.tsx b/src/Picker.tsx
index 257009b4a..3a77d2b34 100644
--- a/src/Picker.tsx
+++ b/src/Picker.tsx
@@ -9,6 +9,7 @@ import { isEqual } from './utils/dateUtil';
 import { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { SharedTimeProps } from './panels/TimePanel';
+import { DateRender } from './panels/DatePanel/DateBody';
 
 export interface PickerProps<DateType> {
   prefixCls?: string;
@@ -27,6 +28,7 @@ export interface PickerProps<DateType> {
   format?: string | string[];
   mode?: PanelMode;
   clearIcon?: React.ReactNode;
+  dateRender?: DateRender<DateType>;
   onChange?: (value: DateType | null, dateString: string) => void;
   onOpenChange?: (open: boolean) => void;
 
diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx
index 71758abac..da50a7536 100644
--- a/src/PickerPanel.tsx
+++ b/src/PickerPanel.tsx
@@ -14,6 +14,7 @@ import { GenerateConfig } from './generate';
 import { Locale, PanelMode, PanelRefProps, GetNextMode } from './interface';
 import { isEqual } from './utils/dateUtil';
 import PanelContext from './PanelContext';
+import { DateRender } from './panels/DatePanel/DateBody';
 
 export interface PickerPanelProps<DateType> {
   className?: string;
@@ -27,6 +28,7 @@ export interface PickerPanelProps<DateType> {
   mode?: PanelMode;
   showTime?: boolean | SharedTimeProps;
   tabIndex?: number;
+  dateRender?: DateRender<DateType>;
   onSelect?: (value: DateType) => void;
   onChange?: (value: DateType) => void;
   onPanelChange?: (value: DateType, mode: PanelMode) => void;
diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx
index 911011c7c..8f8395d45 100644
--- a/src/panels/DatePanel/DateBody.tsx
+++ b/src/panels/DatePanel/DateBody.tsx
@@ -103,9 +103,13 @@ function DateBody<DateType>({
             ),
           })}
         >
-          <div className={`${datePrefixCls}-inner`}>
-            {generateConfig.getDate(currentDate)}
-          </div>
+          {dateRender ? (
+            dateRender(currentDate, today)
+          ) : (
+            <div className={`${datePrefixCls}-inner`}>
+              {generateConfig.getDate(currentDate)}
+            </div>
+          )}
         </td>,
       );
     }