feat(Calendar): support 0.x YearCellRender

alibaba-fusion · Apr 26, 2019 · 1ee70af · 1ee70af
1 parent c2d7db2
commit 1ee70af
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 1 deletion.
diff --git a/src/calendar/calendar.jsx b/src/calendar/calendar.jsx
@@ -81,6 +81,7 @@ class Calendar extends Component {
          * @returns {ReactNode}
          */
         monthCellRender: PropTypes.func,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         /**
          * 不可选择的日期
          * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
@@ -215,6 +216,7 @@ class Calendar extends Component {
             locale,
             dateCellRender,
             monthCellRender,
+            yearCellRender,
             disabledDate,
             ...others
         } = this.props;
@@ -272,6 +274,7 @@ class Calendar extends Component {
             locale,
             dateCellRender,
             monthCellRender,
+            yearCellRender,
             disabledDate,
             momentLocale: localeData,
             today: this.today,

diff --git a/src/calendar/range-calendar.jsx b/src/calendar/range-calendar.jsx
@@ -80,6 +80,13 @@ class RangeCalendar extends React.Component {
          * 自定义日期单元格渲染
          */
         dateCellRender: PropTypes.func,
+        /**
+         * 自定义月份渲染函数
+         * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
+         * @returns {ReactNode}
+         */
+        monthCellRender: PropTypes.func,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         locale: PropTypes.object,
         className: PropTypes.string,
     };
@@ -214,6 +221,8 @@ class RangeCalendar extends React.Component {
             prefix,
             rtl,
             dateCellRender,
+            monthCellRender,
+            yearCellRender,
             className,
             format,
             locale,
@@ -269,6 +278,8 @@ class RangeCalendar extends React.Component {
             today: this.today,
             disabledDate,
             dateCellRender,
+            monthCellRender,
+            yearCellRender,
             changeMode: this.changeMode,
             changeVisibleMonth: this.changeVisibleMonth,
         };

diff --git a/src/calendar/table/year-table.jsx b/src/calendar/table/year-table.jsx
@@ -22,6 +22,7 @@ class YearTable extends React.PureComponent {
             disabledDate,
             goPrevDecade,
             goNextDecade,
+            yearCellRender,
         } = this.props;
         const currentYear = today.year();
         const selectedYear = value ? value.year() : null;
@@ -53,13 +54,14 @@ class YearTable extends React.PureComponent {
                     content = <Icon type="arrow-right" size="xs" />;
                 } else {
                     year = startYear + counter++;
-                    content = year;
                     title = year;
                     const yearDate = visibleMonth.clone().year(year);
                     isDisabled = isDisabledDate(yearDate, disabledDate, 'year');
 
                     !isDisabled &&
                         (onClick = this.onYearCellClick.bind(this, yearDate));
+
+                    content = yearCellRender ? yearCellRender(yearDate) : year;
                 }
 
                 const isSelected = year === selectedYear;

diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
@@ -157,6 +157,7 @@ export default class DatePicker extends Component {
          * @returns {ReactNode}
          */
         monthCellRender: PropTypes.func,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         /**
          * 日期输入框的 aria-label 属性
          */
@@ -472,6 +473,7 @@ export default class DatePicker extends Component {
             inputProps,
             dateCellRender,
             monthCellRender,
+            yearCellRender,
             dateInputAriaLabel,
             timeInputAriaLabel,
             ...others
@@ -546,6 +548,7 @@ export default class DatePicker extends Component {
                 format={this.format}
                 dateCellRender={dateCellRender}
                 monthCellRender={monthCellRender}
+                yearCellRender={yearCellRender}
                 onSelect={this.onSelectCalendarPanel}
                 defaultVisibleMonth={defaultVisibleMonth}
                 onVisibleMonthChange={onVisibleMonthChange}

diff --git a/src/date-picker/month-picker.jsx b/src/date-picker/month-picker.jsx
@@ -126,6 +126,7 @@ class MonthPicker extends Component {
          * @returns {ReactNode}
          */
         monthCellRender: PropTypes.func,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         /**
          * 日期输入框的 aria-label 属性
          */
@@ -321,6 +322,7 @@ class MonthPicker extends Component {
             className,
             inputProps,
             monthCellRender,
+            yearCellRender,
             dateInputAriaLabel,
             ...others
         } = this.props;
@@ -380,6 +382,7 @@ class MonthPicker extends Component {
                 shape="panel"
                 modes={['month', 'year']}
                 monthCellRender={monthCellRender}
+                yearCellRender={yearCellRender}
                 value={value}
                 onSelect={this.onSelectCalendarPanel}
                 defaultVisibleMonth={defaultVisibleYear}

diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
@@ -171,6 +171,13 @@ export default class RangePicker extends Component {
          * 自定义日期单元格渲染
          */
         dateCellRender: PropTypes.func,
+        /**
+         * 自定义月份渲染函数
+         * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
+         * @returns {ReactNode}
+         */
+        monthCellRender: PropTypes.func,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         /**
          * 开始日期输入框的 aria-label 属性
          */
@@ -682,6 +689,8 @@ export default class RangePicker extends Component {
             locale,
             inputProps,
             dateCellRender,
+            monthCellRender,
+            yearCellRender,
             startDateInputAriaLabel,
             startTimeInputAriaLabel,
             endDateInputAriaLabel,
@@ -773,6 +782,8 @@ export default class RangePicker extends Component {
             <RangeCalendar
                 showOtherMonth
                 dateCellRender={dateCellRender}
+                monthCellRender={monthCellRender}
+                yearCellRender={yearCellRender}
                 format={this.format}
                 defaultVisibleMonth={defaultVisibleMonth}
                 onVisibleMonthChange={onVisibleMonthChange}

diff --git a/src/date-picker/year-picker.jsx b/src/date-picker/year-picker.jsx
@@ -115,6 +115,7 @@ class YearPicker extends Component {
          * 输入框其他属性
          */
         inputProps: PropTypes.object,
+        yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
         /**
          * 日期输入框的 aria-label 属性
          */
@@ -310,6 +311,7 @@ class YearPicker extends Component {
             className,
             inputProps,
             dateInputAriaLabel,
+            yearCellRender,
             ...others
         } = this.props;
 
@@ -367,6 +369,7 @@ class YearPicker extends Component {
                 shape="panel"
                 modes={['year']}
                 value={value}
+                yearCellRender={yearCellRender}
                 onSelect={this.onSelectCalendarPanel}
                 disabledDate={disabledDate}
             />