feat: add extra footer to MonthCalendar (react-component#318)

* add extral footer to MonthCalendar ant-design/ant-design#8184 * update docs
amirhossein693 · Nov 20, 2017 · cae096e · cae096e
1 parent ed7d987
commit cae096e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -472,6 +472,12 @@ http://react-component.github.io/calendar/examples/index.html
           <td></td>
           <td>called when a date is changed inside calendar (next year/next month/keyboard)</td>
         </tr>
+        <tr>
+          <td>renderFooter</td>
+          <td>() => React.Node</td>
+          <td></td>
+          <td>extra footer</td>
+        </tr>
     </tbody>
 </table>
 

diff --git a/assets/index.less b/assets/index.less
@@ -8,7 +8,3 @@
 @import "index/DecadePanel";
 @import "common/RangeCalendar";
 @import "common/FullCalendar";
-
-.@{prefixClass}-month-calendar {
-  height: 308px;
-}
diff --git a/assets/index/MonthPanel.less b/assets/index/MonthPanel.less
@@ -119,8 +119,6 @@
   }
 }
 
-
-
 .@{prefixClass}-month-panel-selected-cell .@{prefixClass}-month-panel-month {
   background: #3fc7fa;
   color: #fff;
@@ -130,3 +128,8 @@
     color: #fff;
   }
 }
+
+.@{prefixClass}-month-header-wrap {
+  position: relative;
+  height: 308px;
+}
diff --git a/src/MonthCalendar.jsx b/src/MonthCalendar.jsx
@@ -3,6 +3,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import KeyCode from 'rc-util/lib/KeyCode';
 import CalendarHeader from './calendar/CalendarHeader';
+import CalendarFooter from './calendar/CalendarFooter';
 import CalendarMixin from './mixin/CalendarMixin';
 import CommonMixin from './mixin/CommonMixin';
 
@@ -74,18 +75,26 @@ const MonthCalendar = createReactClass({
     const { props, state } = this;
     const { mode, value } = state;
     const children = (
-      <CalendarHeader
-        prefixCls={props.prefixCls}
-        mode={mode}
-        value={value}
-        locale={props.locale}
-        disabledMonth={props.disabledDate}
-        monthCellRender={props.monthCellRender}
-        monthCellContentRender={props.monthCellContentRender}
-        onMonthSelect={this.onSelect}
-        onValueChange={this.setValue}
-        onPanelChange={this.handlePanelChange}
-      />
+      <div className={`${props.prefixCls}-month-calendar-content`}>
+        <div className={`${props.prefixCls}-month-header-wrap`}>
+          <CalendarHeader
+            prefixCls={props.prefixCls}
+            mode={mode}
+            value={value}
+            locale={props.locale}
+            disabledMonth={props.disabledDate}
+            monthCellRender={props.monthCellRender}
+            monthCellContentRender={props.monthCellContentRender}
+            onMonthSelect={this.onSelect}
+            onValueChange={this.setValue}
+            onPanelChange={this.handlePanelChange}
+          />
+        </div>
+        <CalendarFooter
+          prefixCls={props.prefixCls}
+          renderFooter={props.renderFooter}
+        />
+      </div>
     );
     return this.renderRoot({
       className: `${props.prefixCls}-month-calendar`,