Skip to content

Commit

Permalink
feat(Calendar): add onModeChange
Browse files Browse the repository at this point in the history
  • Loading branch information
@myronliu347
myronliu347 committed Jun 6, 2019
1 parent 26f73a3 commit 514846e
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 3 deletions.
1 change: 1 addition & 0 deletions docs/calendar/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ moment.locale('zh-cn');
| showOtherMonth | Show dates of other month in current date | Boolean | true |
| defaultVisibleMonth | Default visible month of panel<br><br>**signature**:<br>Function() => void | Function | - |
| onSelect | Callback when select a date <br><br>**signature**:<br>Function(value: Object) => void<br>**parameter**:<br>_value_: {Object} date object | Function | func.noop |
| onModeChange | Callback when change mode <br><br>**签名**:<br>Function(mode: string) => void<br>**参数**:<br>_mode_: {string} mode type: date month year | Function | func.noop |
| dateCellRender | Render function for date cell<br><br>**signature**:<br>Function(value: Object) => ReactNode<br>**parameter**:<br>_value_: {Object} date object<br>**return**:<br>{ReactNode} null<br> | Function | (value) => value.date() |
| monthCellRender | Render function for month cell<br><br>**signature**:<br>Function(calendarDate: Object) => ReactNode<br>**parameter**:<br>_calendarDate_: {Object} current date object<br>**return**:<br>{ReactNode} null<br> | Function | - |
| disabledDate | Function to disable dates <br><br>**signature**:<br>Function(calendarDate: Object) => Boolean<br>**parameter**:<br>_calendarDate_: {Object} current date object<br>_view_: {Enum} current view type: 'year', 'month', 'date' <br>**return**:<br>{Boolean} null<br> | Function | - |
Expand Down
2 changes: 2 additions & 0 deletions docs/calendar/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@ moment.locale('zh-cn');
| defaultValue | 默认选中的日期（moment 对象） | custom | - |
| shape | 展现形态<br><br>**可选值**:<br>'card', 'fullscreen', 'panel' | Enum | 'fullscreen' |
| value | 选中的日期值 (moment 对象) | custom | - |
| mode | 面板模式<br><br>**可选值**:<br>'date', 'month', 'year' | Enum | - |
| showOtherMonth | 是否展示非本月的日期 | Boolean | true |
| defaultVisibleMonth | 默认展示的月份<br><br>**签名**:<br>Function() => void | Function | - |
| onSelect | 选择日期单元格时的回调<br><br>**签名**:<br>Function(value: Object) => void<br>**参数**:<br>_value_: {Object} 对应的日期值 (moment 对象) | Function | func.noop |
| onModeChange | 面板模式变化时的回调<br><br>**签名**:<br>Function(mode: String) => void<br>**参数**:<br>_mode_: {String} 对应面板模式 date month year | Function | func.noop |
| onVisibleMonthChange | 展现的月份变化时的回调<br><br>**签名**:<br>Function(value: Object, reason: String) => void<br>**参数**:<br>_value_: {Object} 显示的月份 (moment 对象)<br>_reason_: {String} 触发月份改变原因 | Function | func.noop |
| dateCellRender | 自定义日期渲染函数<br><br>**签名**:<br>Function(value: Object) => ReactNode<br>**参数**:<br>_value_: {Object} 日期值（moment对象）<br>**返回值**:<br>{ReactNode} null<br> | Function | value => value.date() |
| monthCellRender | 自定义月份渲染函数<br><br>**签名**:<br>Function(calendarDate: Object) => ReactNode<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>**返回值**:<br>{ReactNode} null<br> | Function | - |
Expand Down
13 changes: 11 additions & 2 deletions src/calendar/calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@ class Calendar extends Component {
* 选中的日期值 (moment 对象)
*/
value: checkMomentObj,
// 面板模式
mode: PropTypes.oneOf(CALENDAR_MODES),
/**
* 面板模式
*/
mode: PropTypes.oneOf(CALENDAR_MODES), // 生成 API 文档需要手动改回 ['date', 'month', 'year']
// 面板可变化的模式列表，仅初始化时接收一次
modes: PropTypes.array,
// 日期值的格式（用于日期title显示的格式）
Expand All @@ -59,6 +61,11 @@ class Calendar extends Component {
* @param {Object} value 对应的日期值 (moment 对象)
*/
onSelect: PropTypes.func,
/**
* 面板模式变化时的回调
* @param {Object} mode 对应面板模式 date month year
*/
onModeChange: PropTypes.func,
/**
* 展现的月份变化时的回调
* @param {Object} value 显示的月份 (moment 对象)
Expand Down Expand Up @@ -103,6 +110,7 @@ class Calendar extends Component {
format: 'YYYY-MM-DD',
onSelect: func.noop,
onVisibleMonthChange: func.noop,
onModeChange: func.noop,
dateCellRender: value => value.date(),
locale: nextLocale.Calendar,
showOtherMonth: true,
Expand Down Expand Up @@ -165,6 +173,7 @@ class Calendar extends Component {
nextMode !== this.state.mode
) {
this.setState({ mode: nextMode });
this.props.onModeChange(nextMode);
}
};

Expand Down
6 changes: 5 additions & 1 deletion test/calendar/index-spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import sinon from 'sinon';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import assert from 'power-assert';
Expand Down Expand Up @@ -154,13 +155,16 @@ describe('Calendar', () => {

describe('action', () => {
it('should change mode', () => {
wrapper = mount(<Calendar />);
const onModeChange = sinon.spy();

wrapper = mount(<Calendar onModeChange={onModeChange} />);
wrapper
.find('.next-radio-wrapper input')
.at(1)
.simulate('change', { target: { checked: true } });
assert(wrapper.find('td').length === 12);
assert(wrapper.find('td[title="1月"]').length === 1);
assert(onModeChange.calledOnce);
});

it('should change panel mode to month', () => {
Expand Down

0 comments on commit 514846e

Please sign in to comment.