From 1ec5bbb66f8c13896616b89dfaf5a859b055a887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=80=E8=AF=BA?= <chentao.ct@alibaba-inc.com>
Date: Thu, 12 Nov 2015 23:51:38 +0800
Subject: [PATCH] fix details

---
 components/calendar/Header.jsx       |  8 ++++----
 components/calendar/demo/basic.md    |  9 +++++++--
 components/calendar/index.jsx        | 10 ++++++++--
 components/calendar/index.md         |  2 ++
 style/components/calendar/index.less | 22 ++++++++++------------
 5 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx
index 387b6392be..0136890ac6 100644
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@@ -7,7 +7,7 @@ function noop() {}
 
 class Header extends Component {
   getYearSelectElement(year) {
-    const {yearSelectOffset, yearSelectTotal, locale, prefixCls} = this.props;
+    const {yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen} = this.props;
     const start = year - yearSelectOffset;
     const end = start + yearSelectTotal;
     const suffix = locale.year === '年' ? '年' : '';
@@ -18,7 +18,7 @@ class Header extends Component {
     }
     return (
       <Select
-        size="small"
+        size={ fullscreen ? null : 'small' }
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-year-select`}
         onChange={this.onYearChange.bind(this)}
@@ -30,7 +30,7 @@ class Header extends Component {
   getMonthSelectElement(month) {
     const props = this.props;
     const months = props.locale.format.months;
-    const {prefixCls} = props;
+    const {prefixCls, fullscreen} = props;
     const options = [];
 
     for (let index = 0; index < 12; index++) {
@@ -39,7 +39,7 @@ class Header extends Component {
 
     return (
       <Select
-        size="small"
+        size={ fullscreen ? null : 'small' }
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-month-select`}
         value={String(month)}
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index 263c0eccae..01a250532f 100644
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -36,9 +36,14 @@ function getDateData(value) {
   return listData;
 
 }
-
+function onChange(value) {
+  console.log('change');
+}
+function onSelect(value) {
+  console.log('select');
+}
 
 ReactDOM.render(
-  <Calendar getDateData={getDateData} type="date" />
+  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}><Calendar getDateData={getDateData} onChange={onChange} onSelect={onSelect} type="date" /></div>
 , document.getElementById('components-calendar-demo-basic'));
 ````
diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index 934baa1e9c..b0b29ccb90 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -74,13 +74,16 @@ class NoticeCalendar extends Component {
     );
   }
   setValue(value) {
-    this.setState({ value });
+    if (this.state.value !== value) {
+      this.setState({ value });
+      this.props.onChange(value);
+    }
   }
   setType(type) {
     this.setState({ type });
   }
   onSelect(value) {
-    this.setValue(value);
+    this.setState({ value });
     if (this.state.type === 'month') {
       this.setState({ type: 'date' });
     }
@@ -98,6 +101,7 @@ class NoticeCalendar extends Component {
     return (
       <div className={prefixCls + '-wrapper' + (className ? ' ' + className : '') + (fullscreen ? ' ' + prefixCls + '-wrapper-fullscreen' : '' )} style={style}>
         <Header
+          fullscreen={fullscreen}
           type={type}
           value={value}
           locale={locale}
@@ -129,6 +133,7 @@ NoticeCalendar.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   onSelect: PropTypes.func,
+  onChange: PropTypes.func,
 };
 NoticeCalendar.defaultProps = {
   locale: CalendarLocale,
@@ -137,6 +142,7 @@ NoticeCalendar.defaultProps = {
   fullscreen: false,
   prefixCls: PREFIX_CLS,
   onSelect: noop,
+  onChange: noop,
   type: 'date',
 };
 
diff --git a/components/calendar/index.md b/components/calendar/index.md
index 9b2ceca6b4..14b5f12258 100644
--- a/components/calendar/index.md
+++ b/components/calendar/index.md
@@ -28,3 +28,5 @@
 | fullscreenDateCellRendar  | 自定义渲染日期单元格(全屏)    | function   | 无           |
 | monthCellRendar       | 自定义渲染月单元格 | function   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| onChange | 日期改变 | bool | 无 |
+| onSelect | 选择日期 | bool | 无 |
diff --git a/style/components/calendar/index.less b/style/components/calendar/index.less
index fa1ca62979..5facd38912 100644
--- a/style/components/calendar/index.less
+++ b/style/components/calendar/index.less
@@ -3,20 +3,14 @@
 .@{notice-calendar-prefix-cls}-wrapper {
 
   position: relative;
-  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
-  width: 282px;
-  border: 1px solid @legend-border-color;
   list-style: none;
   font-size: 12px;
   text-align: left;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 0 1px 3px @legend-border-color;
   line-height: 1.5;
 
   .@{notice-calendar-prefix-cls} {
     &-month-select {
-      margin-left: 4px;
+      margin-left: 5px;
     }
 
     &-header {
@@ -199,15 +193,18 @@
   
 
   &-fullscreen {
-    width: auto;
-    border: none;
-    box-shadow: none;
-    
     .@{notice-calendar-prefix-cls} {
       border-top: none;
       &-table {
         table-layout: fixed;
       }
+      &-header {
+        label.ant-radio-button {
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+
       &-fullscreen-month,
       &-fullscreen-date {
         margin: 0 4px;
@@ -225,7 +222,8 @@
       }
       
       &-column-header {
-        text-align: right; padding-right: 12px;
+        text-align: right;
+        padding-right: 12px;
       }
       &-cell {
         padding: 0;