Skip to content

Commit

Permalink
feat(Calendar): add yearRange prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@myronliu347
myronliu347 committed Jun 6, 2019
1 parent 514846e commit 32a6f31
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 20 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 @@ -41,5 +41,6 @@ moment.locale('zh-cn');
| 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 | - |
| yearRange | Year Range，[START_YEAR, END_YEAR] \(only shape in ‘card’, 'fullscreen') | Array&lt;Number> | - |
| 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 | - |

29 changes: 15 additions & 14 deletions docs/calendar/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,18 @@ moment.locale('zh-cn');

### Calendar

| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------- |
| 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 | - |
| disabledDate | 不可选择的日期<br><br>**签名**:<br>Function(calendarDate: Object, view: String) => Boolean<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>_view_: {String} 当前视图类型，year: 年， month: 月, date: 日<br>**返回值**:<br>{Boolean} null<br> | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------- |
| 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 | - |
| yearRange | 年份范围，[START_YEAR, END_YEAR] \(只在shape 为 ‘card’, 'fullscreen' 下生效) | Array&lt;Number> | - |
| disabledDate | 不可选择的日期<br><br>**签名**:<br>Function(calendarDate: Object, view: String) => Boolean<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>_view_: {String} 当前视图类型，year: 年， month: 月, date: 日<br>**返回值**:<br>{Boolean} null<br> | Function | - |
9 changes: 7 additions & 2 deletions src/calendar/calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class Calendar extends Component {
onSelect: PropTypes.func,
/**
* 面板模式变化时的回调
* @param {Object} mode 对应面板模式 date month year
* @param {String} mode 对应面板模式 date month year
*/
onModeChange: PropTypes.func,
/**
Expand All @@ -89,6 +89,10 @@ class Calendar extends Component {
*/
monthCellRender: PropTypes.func,
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
/**
* 年份范围，[START_YEAR, END_YEAR] (只在shape 为 ‘card’, 'fullscreen' 下生效)
*/
yearRange: PropTypes.arrayOf(PropTypes.number),
/**
* 不可选择的日期
* @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
Expand Down Expand Up @@ -232,6 +236,7 @@ class Calendar extends Component {
monthCellRender,
yearCellRender,
disabledDate,
yearRange,
...others
} = this.props;
const state = this.state;
Expand Down Expand Up @@ -330,7 +335,7 @@ class Calendar extends Component {
{shape === 'panel' ? (
panelHeaders[state.mode]
) : (
<CardHeader {...headerProps} />
<CardHeader {...headerProps} yearRange={yearRange} />
)}
{tables[state.mode]}
</div>
Expand Down
13 changes: 9 additions & 4 deletions src/calendar/head/card-header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Radio from '../../radio';

class CardHeader extends React.PureComponent {
static propTypes = {
yearRange: PropTypes.arrayOf(PropTypes.number),
yearRangeOffset: PropTypes.number,
locale: PropTypes.object,
};
Expand All @@ -18,12 +19,16 @@ class CardHeader extends React.PureComponent {
};

getYearSelect(year) {
const { prefix, yearRangeOffset, locale } = this.props;
const startYear = year - yearRangeOffset;
const endYear = year + yearRangeOffset;
const { prefix, yearRangeOffset, yearRange = [], locale } = this.props;

let [startYear, endYear] = yearRange;
if (!startYear || !endYear) {
startYear = year - yearRangeOffset;
endYear = year + yearRangeOffset;
}

const options = [];
for (let i = startYear; i < endYear; i++) {
for (let i = startYear; i <= endYear; i++) {
options.push(
<Select.Option key={i} value={i}>
{i}
Expand Down

0 comments on commit 32a6f31

Please sign in to comment.