Skip to content

Commit

Permalink
feat(DatePicker): add disableChangeMode Prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@myronliu347
myronliu347 committed Dec 6, 2019
1 parent 68f235c commit cfcda01
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 34 deletions.
218 changes: 185 additions & 33 deletions src/calendar/head/range-panel-header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,66 @@
/* istanbul ignore file */
import React from 'react';
import Icon from '../../icon';
import Dropdown from '../../dropdown';
import SelectMenu from './menu';
import { getMonths, getYears } from '../utils';

/* eslint-disable */
class RangePanelHeader extends React.PureComponent {
static defaultProps = {
yearRangeOffset: 10,
};

selectContainerHandler = target => {
return target.parentNode;
};

onYearChange = (visibleMonth, year) => {
const { changeVisibleMonth } = this.props;
changeVisibleMonth(visibleMonth.clone().year(year), 'yearSelect');
};

changeVisibleMonth = (visibleMonth, month) => {
const { changeVisibleMonth } = this.props;
changeVisibleMonth(visibleMonth.clone().month(month), 'monthSelect');
};

render() {
const {
prefix,
startVisibleMonth,
endVisibleMonth,
yearRange = [],
yearRangeOffset,
momentLocale,
locale,
changeMode,
goNextMonth,
goNextYear,
goPrevMonth,
goPrevYear,
disableChangeMode,
} = this.props;

const localedMonths = momentLocale.months();
const startMonthLabel = localedMonths[startVisibleMonth.month()];
const endMonthLabel = localedMonths[endVisibleMonth.month()];
const startYearLable = startVisibleMonth.year();
const startYearLabel = startVisibleMonth.year();
const endYearLabel = endVisibleMonth.year();
const btnCls = `${prefix}calendar-btn`;

const months = getMonths(momentLocale);
const startYears = getYears(
yearRange,
yearRangeOffset,
startVisibleMonth.year()
);
const endYears = getYears(
yearRange,
yearRangeOffset,
endVisibleMonth.year()
);

return (
<div className={`${prefix}calendar-panel-header`}>
<button
Expand All @@ -42,40 +80,154 @@ class RangePanelHeader extends React.PureComponent {
<Icon type="arrow-left" />
</button>
<div className={`${prefix}calendar-panel-header-left`}>
<button
role="button"
title={startMonthLabel}
className={btnCls}
onClick={() => changeMode('month', 'start')}
>
{startMonthLabel}
</button>
<button
role="button"
title={startYearLable}
className={btnCls}
onClick={() => changeMode('year', 'start')}
>
{startYearLable}
</button>
{disableChangeMode ? (
<Dropdown
align="tc bc"
container={this.selectContainerHandler}
trigger={
<button
role="button"
className={btnCls}
title={startMonthLabel}
>
{startMonthLabel}
<Icon type="arrow-down" />
</button>
}
triggerType="click"
>
<SelectMenu
prefix={prefix}
value={startVisibleMonth.month()}
dataSource={months}
onChange={value =>
this.changeVisibleMonth(
startVisibleMonth,
value
)
}
/>
</Dropdown>
) : (
<button
role="button"
title={startMonthLabel}
className={btnCls}
onClick={() => changeMode('month', 'start')}
>
{startMonthLabel}
</button>
)}
{disableChangeMode ? (
<Dropdown
align="tc bc"
container={this.selectContainerHandler}
trigger={
<button
role="button"
className={btnCls}
title={startYearLabel}
>
{startYearLabel}
<Icon type="arrow-down" />
</button>
}
triggerType="click"
>
<SelectMenu
prefix={prefix}
value={startVisibleMonth.year()}
dataSource={startYears}
onChange={v =>
this.onYearChange(startVisibleMonth, v)
}
/>
</Dropdown>
) : (
<button
role="button"
title={startYearLabel}
className={btnCls}
onClick={() => changeMode('year', 'start')}
>
{startYearLabel}
</button>
)}
</div>
<div className={`${prefix}calendar-panel-header-right`}>
<button
role="button"
title={endMonthLabel}
className={btnCls}
onClick={() => changeMode('month', 'end')}
>
{endMonthLabel}
</button>
<button
role="button"
title={endYearLabel}
className={btnCls}
onClick={() => changeMode('year', 'end')}
>
{endYearLabel}
</button>
{disableChangeMode ? (
<Dropdown
align="tc bc"
container={this.selectContainerHandler}
trigger={
<button
role="button"
className={btnCls}
title={endMonthLabel}
>
{endMonthLabel}
<Icon type="arrow-down" />
</button>
}
triggerType="click"
>
<SelectMenu
prefix={prefix}
value={endVisibleMonth.month()}
dataSource={months}
onChange={value =>
this.changeVisibleMonth(
endVisibleMonth,
value
)
}
/>
</Dropdown>
) : (
<button
role="button"
title={endMonthLabel}
className={btnCls}
onClick={() => changeMode('month', 'end')}
>
{endMonthLabel}
</button>
)}
{disableChangeMode ? (
<Dropdown
align="tc bc"
container={this.selectContainerHandler}
trigger={
<button
role="button"
className={btnCls}
title={endYearLabel}
>
{endYearLabel}
<Icon type="arrow-down" />
</button>
}
triggerType="click"
>
<SelectMenu
prefix={prefix}
value={endVisibleMonth.year()}
dataSource={endYears}
onChange={v =>
this.onYearChange(endVisibleMonth, v)
}
/>
</Dropdown>
) : (
<button
role="button"
title={endYearLabel}
className={btnCls}
onClick={() => changeMode('year', 'end')}
>
{endYearLabel}
</button>
)}
</div>
<button
role="button"
Expand Down
9 changes: 9 additions & 0 deletions src/calendar/range-calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,11 @@ class RangeCalendar extends React.Component {
endValue: checkMomentObj,
// 面板模式
mode: PropTypes.oneOf(CALENDAR_MODES),
// 禁用更改面板模式，采用 dropdown 的方式切换显示日期 (暂不正式对外透出)
disableChangeMode: PropTypes.bool,
// 日期值的格式（用于日期title显示的格式）
format: PropTypes.string,
yearRange: PropTypes.arrayOf(PropTypes.number),
/**
* 是否显示非本月的日期
*/
Expand Down Expand Up @@ -96,6 +99,7 @@ class RangeCalendar extends React.Component {
prefix: 'next-',
rtl: false,
mode: CALENDAR_MODE_DATE,
disableChangeMode: false,
format: 'YYYY-MM-DD',
dateCellRender: value => value.date(),
onSelect: func.noop,
Expand Down Expand Up @@ -233,6 +237,8 @@ class RangeCalendar extends React.Component {
locale,
showOtherMonth,
disabledDate,
disableChangeMode,
yearRange,
...others
} = this.props;
const {
Expand Down Expand Up @@ -268,7 +274,10 @@ class RangeCalendar extends React.Component {
momentLocale: localeData,
startVisibleMonth,
endVisibleMonth,
changeVisibleMonth: this.changeVisibleMonth,
changeMode: this.changeMode,
yearRange,
disableChangeMode,
};

const tableProps = {
Expand Down
3 changes: 3 additions & 0 deletions src/date-picker/date-picker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ export default class DatePicker extends Component {
popupComponent: PropTypes.elementType,
popupContent: PropTypes.node,
disableChangeMode: PropTypes.bool,
yearRange: PropTypes.arrayOf(PropTypes.number),
};

static defaultProps = {
Expand Down Expand Up @@ -523,6 +524,7 @@ export default class DatePicker extends Component {
timeInputAriaLabel,
isPreview,
disableChangeMode,
yearRange,
...others
} = this.props;

Expand Down Expand Up @@ -607,6 +609,7 @@ export default class DatePicker extends Component {
onVisibleMonthChange={onVisibleMonthChange}
disabledDate={disabledDate}
disableChangeMode={disableChangeMode}
yearRange={yearRange}
/>
);

Expand Down
9 changes: 8 additions & 1 deletion src/date-picker/range-picker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,9 @@ export default class RangePicker extends Component {
* @param {Array<MomentObject, MomentObject>} value 日期区间
*/
renderPreview: PropTypes.func,
ranges: PropTypes.object,
disableChangeMode: PropTypes.bool,
yearRange: PropTypes.arrayOf(PropTypes.number),
ranges: PropTypes.object, // 兼容0.x版本
locale: PropTypes.object,
className: PropTypes.string,
name: PropTypes.string,
Expand All @@ -237,6 +239,7 @@ export default class RangePicker extends Component {
popupTriggerType: 'click',
popupAlign: 'tl tl',
locale: nextLocale.DatePicker,
disableChangeMode: false,
onChange: func.noop,
onOk: func.noop,
onVisibleChange: func.noop,
Expand Down Expand Up @@ -770,6 +773,8 @@ export default class RangePicker extends Component {
endDateInputAriaLabel,
endTimeInputAriaLabel,
isPreview,
disableChangeMode,
yearRange,
...others
} = this.props;

Expand Down Expand Up @@ -874,6 +879,8 @@ export default class RangePicker extends Component {
type === 'date' ? (
<RangeCalendar
{...shareCalendarProps}
yearRange={yearRange}
disableChangeMode={disableChangeMode}
disabledDate={disabledDate}
onSelect={this.onSelectCalendarPanel}
startValue={state.startValue}
Expand Down

0 comments on commit cfcda01

Please sign in to comment.