rc-calendar
Advanced tools
Comparing version 9.9.2 to 9.10.0
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -10,185 +12,55 @@ import KeyCode from 'rc-util/es/KeyCode'; | ||
import CalendarFooter from './calendar/CalendarFooter'; | ||
import CalendarMixin from './mixin/CalendarMixin'; | ||
import CommonMixin from './mixin/CommonMixin'; | ||
import { calendarMixinWrapper, calendarMixinPropTypes, calendarMixinDefaultProps, getNowByCurrentStateValue } from './mixin/CalendarMixin'; | ||
import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin'; | ||
import DateInput from './date/DateInput'; | ||
import { getTimeConfig, getTodayTime, syncTime } from './util'; | ||
import { goStartMonth, goEndMonth, goTime as _goTime } from './util/toTime'; | ||
import { goStartMonth, goEndMonth, goTime } from './util/toTime'; | ||
import moment from 'moment'; | ||
function noop() {} | ||
var Calendar = createReactClass({ | ||
displayName: 'Calendar', | ||
var Calendar = function (_React$Component) { | ||
_inherits(Calendar, _React$Component); | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
className: PropTypes.string, | ||
style: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
value: PropTypes.object, | ||
selectedValue: PropTypes.object, | ||
mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']), | ||
locale: PropTypes.object, | ||
showDateInput: PropTypes.bool, | ||
showWeekNumber: PropTypes.bool, | ||
showToday: PropTypes.bool, | ||
showOk: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
onOk: PropTypes.func, | ||
onKeyDown: PropTypes.func, | ||
timePicker: PropTypes.element, | ||
dateInputPlaceholder: PropTypes.any, | ||
onClear: PropTypes.func, | ||
onChange: PropTypes.func, | ||
onPanelChange: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
disabledTime: PropTypes.any, | ||
dateRender: PropTypes.func, | ||
renderFooter: PropTypes.func, | ||
renderSidebar: PropTypes.func, | ||
clearIcon: PropTypes.node | ||
}, | ||
function Calendar(props) { | ||
_classCallCheck(this, Calendar); | ||
mixins: [CommonMixin, CalendarMixin], | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
showToday: true, | ||
showDateInput: true, | ||
timePicker: null, | ||
onOk: noop, | ||
onPanelChange: noop | ||
_initialiseProps.call(_this); | ||
_this.state = { | ||
mode: _this.props.mode || 'date', | ||
value: props.value || props.defaultValue || moment(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
return { | ||
mode: this.props.mode || 'date' | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
if ('mode' in nextProps && this.state.mode !== nextProps.mode) { | ||
this.setState({ mode: nextProps.mode }); | ||
} | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
return undefined; | ||
} | ||
var keyCode = event.keyCode; | ||
// mac | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var disabledDate = this.props.disabledDate; | ||
var value = this.state.value; | ||
return _this; | ||
} | ||
switch (keyCode) { | ||
case KeyCode.DOWN: | ||
this.goTime(1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.UP: | ||
this.goTime(-1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.LEFT: | ||
if (ctrlKey) { | ||
this.goTime(-1, 'years'); | ||
} else { | ||
this.goTime(-1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.RIGHT: | ||
if (ctrlKey) { | ||
this.goTime(1, 'years'); | ||
} else { | ||
this.goTime(1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.HOME: | ||
this.setValue(goStartMonth(this.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.END: | ||
this.setValue(goEndMonth(this.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.PAGE_DOWN: | ||
this.goTime(1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.PAGE_UP: | ||
this.goTime(-1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.ENTER: | ||
if (!disabledDate || !disabledDate(value)) { | ||
this.onSelect(value, { | ||
source: 'keyboard' | ||
}); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
this.props.onKeyDown(event); | ||
return 1; | ||
Calendar.prototype.componentDidMount = function componentDidMount() { | ||
if (this.props.showDateInput) { | ||
this.saveFocusElement(DateInput.getInstance()); | ||
} | ||
}, | ||
onClear: function onClear() { | ||
this.onSelect(null); | ||
this.props.onClear(); | ||
}, | ||
onOk: function onOk() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
if (this.isAllowedDate(selectedValue)) { | ||
this.props.onOk(selectedValue); | ||
} | ||
}, | ||
onDateInputChange: function onDateInputChange(value) { | ||
this.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}, | ||
onDateTableSelect: function onDateTableSelect(value) { | ||
var timePicker = this.props.timePicker; | ||
var selectedValue = this.state.selectedValue; | ||
Calendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var value = nextProps.value, | ||
selectedValue = nextProps.selectedValue; | ||
if (!selectedValue && timePicker) { | ||
var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (timePickerDefaultValue) { | ||
syncTime(timePickerDefaultValue, value); | ||
} | ||
var newState = {}; | ||
if ('mode' in nextProps && state.mode !== nextProps.mode) { | ||
newState = { mode: nextProps.mode }; | ||
} | ||
this.onSelect(value); | ||
}, | ||
onToday: function onToday() { | ||
var value = this.state.value; | ||
if ('value' in nextProps) { | ||
newState.value = value || nextProps.defaultValue || getNowByCurrentStateValue(state.value); | ||
} | ||
if ('selectedValue' in nextProps) { | ||
newState.selectedValue = selectedValue; | ||
} | ||
var now = getTodayTime(value); | ||
this.onSelect(now, { | ||
source: 'todayButton' | ||
}); | ||
}, | ||
onPanelChange: function onPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
return newState; | ||
}; | ||
if (!('mode' in props)) { | ||
this.setState({ mode: mode }); | ||
} | ||
props.onPanelChange(value || state.value, mode); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
return ReactDOM.findDOMNode(this); | ||
}, | ||
openTimePicker: function openTimePicker() { | ||
this.onPanelChange(null, 'time'); | ||
}, | ||
closeTimePicker: function closeTimePicker() { | ||
this.onPanelChange(null, 'date'); | ||
}, | ||
goTime: function goTime(direction, unit) { | ||
this.setValue(_goTime(this.state.value, direction, unit)); | ||
}, | ||
render: function render() { | ||
Calendar.prototype.render = function render() { | ||
var props = this.props, | ||
@@ -246,3 +118,8 @@ state = this.state; | ||
}) : null; | ||
var children = [props.renderSidebar(), React.createElement( | ||
var children = []; | ||
if (props.renderSidebar) { | ||
children.push(props.renderSidebar()); | ||
} | ||
children.push(React.createElement( | ||
'div', | ||
@@ -253,3 +130,6 @@ { className: prefixCls + '-panel', key: 'panel' }, | ||
'div', | ||
{ className: prefixCls + '-date-panel' }, | ||
{ | ||
tabIndex: this.props.focusablePanel ? 0 : undefined, | ||
className: prefixCls + '-date-panel' | ||
}, | ||
React.createElement(CalendarHeader, { | ||
@@ -310,3 +190,3 @@ locale: locale, | ||
) | ||
)]; | ||
)); | ||
@@ -317,5 +197,188 @@ return this.renderRoot({ | ||
}); | ||
} | ||
}; | ||
return Calendar; | ||
}(React.Component); | ||
Calendar.propTypes = _extends({}, calendarMixinPropTypes, propType, { | ||
prefixCls: PropTypes.string, | ||
className: PropTypes.string, | ||
style: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
value: PropTypes.object, | ||
selectedValue: PropTypes.object, | ||
defaultSelectedValue: PropTypes.object, | ||
mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']), | ||
locale: PropTypes.object, | ||
showDateInput: PropTypes.bool, | ||
showWeekNumber: PropTypes.bool, | ||
showToday: PropTypes.bool, | ||
showOk: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
onOk: PropTypes.func, | ||
onKeyDown: PropTypes.func, | ||
timePicker: PropTypes.element, | ||
dateInputPlaceholder: PropTypes.any, | ||
onClear: PropTypes.func, | ||
onChange: PropTypes.func, | ||
onPanelChange: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
disabledTime: PropTypes.any, | ||
dateRender: PropTypes.func, | ||
renderFooter: PropTypes.func, | ||
renderSidebar: PropTypes.func, | ||
clearIcon: PropTypes.node, | ||
focusablePanel: PropTypes.bool | ||
}); | ||
Calendar.defaultProps = _extends({}, calendarMixinDefaultProps, defaultProp, { | ||
showToday: true, | ||
showDateInput: true, | ||
timePicker: null, | ||
onOk: noop, | ||
onPanelChange: noop, | ||
focusablePanel: true | ||
}); | ||
export default Calendar; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
if (!('mode' in props)) { | ||
_this2.setState({ mode: mode }); | ||
} | ||
props.onPanelChange(value || state.value, mode); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
return undefined; | ||
} | ||
var keyCode = event.keyCode; | ||
// mac | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var disabledDate = _this2.props.disabledDate; | ||
var value = _this2.state.value; | ||
switch (keyCode) { | ||
case KeyCode.DOWN: | ||
_this2.goTime(1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.UP: | ||
_this2.goTime(-1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.LEFT: | ||
if (ctrlKey) { | ||
_this2.goTime(-1, 'years'); | ||
} else { | ||
_this2.goTime(-1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.RIGHT: | ||
if (ctrlKey) { | ||
_this2.goTime(1, 'years'); | ||
} else { | ||
_this2.goTime(1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.HOME: | ||
_this2.setValue(goStartMonth(_this2.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.END: | ||
_this2.setValue(goEndMonth(_this2.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.PAGE_DOWN: | ||
_this2.goTime(1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.PAGE_UP: | ||
_this2.goTime(-1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case KeyCode.ENTER: | ||
if (!disabledDate || !disabledDate(value)) { | ||
_this2.onSelect(value, { | ||
source: 'keyboard' | ||
}); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
_this2.props.onKeyDown(event); | ||
return 1; | ||
} | ||
}; | ||
this.onClear = function () { | ||
_this2.onSelect(null); | ||
_this2.props.onClear(); | ||
}; | ||
this.onOk = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
if (_this2.isAllowedDate(selectedValue)) { | ||
_this2.props.onOk(selectedValue); | ||
} | ||
}; | ||
this.onDateInputChange = function (value) { | ||
_this2.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}; | ||
this.onDateInputChange = function (value) { | ||
_this2.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}; | ||
this.onDateTableSelect = function (value) { | ||
var timePicker = _this2.props.timePicker; | ||
var selectedValue = _this2.state.selectedValue; | ||
if (!selectedValue && timePicker) { | ||
var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (timePickerDefaultValue) { | ||
syncTime(timePickerDefaultValue, value); | ||
} | ||
} | ||
_this2.onSelect(value); | ||
}; | ||
this.onToday = function () { | ||
var value = _this2.state.value; | ||
var now = getTodayTime(value); | ||
_this2.onSelect(now, { | ||
source: 'todayButton' | ||
}); | ||
}; | ||
this.getRootDOMNode = function () { | ||
return ReactDOM.findDOMNode(_this2); | ||
}; | ||
this.openTimePicker = function () { | ||
_this2.onPanelChange(null, 'time'); | ||
}; | ||
this.closeTimePicker = function () { | ||
_this2.onPanelChange(null, 'date'); | ||
}; | ||
this.goTime = function (direction, unit) { | ||
_this2.setValue(goTime(_this2.state.value, direction, unit)); | ||
}; | ||
}; | ||
export default calendarMixinWrapper(commonMixinWrapper(Calendar)); |
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -12,26 +14,20 @@ import toFragment from 'rc-util/es/Children/mapSelf'; | ||
var CalendarFooter = createReactClass({ | ||
displayName: 'CalendarFooter', | ||
var CalendarFooter = function (_React$Component) { | ||
_inherits(CalendarFooter, _React$Component); | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
showDateInput: PropTypes.bool, | ||
disabledTime: PropTypes.any, | ||
timePicker: PropTypes.element, | ||
selectedValue: PropTypes.any, | ||
showOk: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
value: PropTypes.object, | ||
renderFooter: PropTypes.func, | ||
defaultValue: PropTypes.object, | ||
mode: PropTypes.string | ||
}, | ||
function CalendarFooter() { | ||
_classCallCheck(this, CalendarFooter); | ||
onSelect: function onSelect(value) { | ||
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); | ||
} | ||
CalendarFooter.prototype.onSelect = function onSelect(value) { | ||
this.props.onSelect(value); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
}; | ||
CalendarFooter.prototype.getRootDOMNode = function getRootDOMNode() { | ||
return ReactDOM.findDOMNode(this); | ||
}, | ||
render: function render() { | ||
}; | ||
CalendarFooter.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -46,3 +42,3 @@ var value = props.value, | ||
var footerEl = null; | ||
var extraFooter = renderFooter(mode); | ||
var extraFooter = renderFooter && renderFooter(mode); | ||
if (props.showToday || timePicker || extraFooter) { | ||
@@ -81,5 +77,20 @@ var _cx; | ||
return footerEl; | ||
} | ||
}); | ||
}; | ||
return CalendarFooter; | ||
}(React.Component); | ||
CalendarFooter.propTypes = { | ||
prefixCls: PropTypes.string, | ||
showDateInput: PropTypes.bool, | ||
disabledTime: PropTypes.any, | ||
timePicker: PropTypes.element, | ||
selectedValue: PropTypes.any, | ||
showOk: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
value: PropTypes.object, | ||
renderFooter: PropTypes.func, | ||
defaultValue: PropTypes.object, | ||
mode: PropTypes.string | ||
}; | ||
export default CalendarFooter; |
@@ -0,3 +1,5 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -25,119 +27,22 @@ import toFragment from 'rc-util/es/Children/mapSelf'; | ||
var CalendarHeader = createReactClass({ | ||
displayName: 'CalendarHeader', | ||
var CalendarHeader = function (_React$Component) { | ||
_inherits(CalendarHeader, _React$Component); | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
value: PropTypes.object, | ||
onValueChange: PropTypes.func, | ||
showTimePicker: PropTypes.bool, | ||
onPanelChange: PropTypes.func, | ||
locale: PropTypes.object, | ||
enablePrev: PropTypes.any, | ||
enableNext: PropTypes.any, | ||
disabledMonth: PropTypes.func, | ||
renderFooter: PropTypes.func | ||
}, | ||
function CalendarHeader(props) { | ||
_classCallCheck(this, CalendarHeader); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
enableNext: 1, | ||
enablePrev: 1, | ||
onPanelChange: function onPanelChange() {}, | ||
onValueChange: function onValueChange() {} | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
this.nextMonth = goMonth.bind(this, 1); | ||
this.previousMonth = goMonth.bind(this, -1); | ||
this.nextYear = goYear.bind(this, 1); | ||
this.previousYear = goYear.bind(this, -1); | ||
return { yearPanelReferer: null }; | ||
}, | ||
onMonthSelect: function onMonthSelect(value) { | ||
this.props.onPanelChange(value, 'date'); | ||
if (this.props.onMonthSelect) { | ||
this.props.onMonthSelect(value); | ||
} else { | ||
this.props.onValueChange(value); | ||
} | ||
}, | ||
onYearSelect: function onYearSelect(value) { | ||
var referer = this.state.yearPanelReferer; | ||
this.setState({ yearPanelReferer: null }); | ||
this.props.onPanelChange(value, referer); | ||
this.props.onValueChange(value); | ||
}, | ||
onDecadeSelect: function onDecadeSelect(value) { | ||
this.props.onPanelChange(value, 'year'); | ||
this.props.onValueChange(value); | ||
}, | ||
monthYearElement: function monthYearElement(showTimePicker) { | ||
var _this = this; | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
var props = this.props; | ||
var prefixCls = props.prefixCls; | ||
var locale = props.locale; | ||
var value = props.value; | ||
var localeData = value.localeData(); | ||
var monthBeforeYear = locale.monthBeforeYear; | ||
var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select'); | ||
var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : ''; | ||
var year = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-year-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : function () { | ||
return _this.showYearPanel('date'); | ||
}, | ||
title: showTimePicker ? null : locale.yearSelect | ||
}, | ||
value.format(locale.yearFormat) | ||
); | ||
var month = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-month-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : this.showMonthPanel, | ||
title: showTimePicker ? null : locale.monthSelect | ||
}, | ||
locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value) | ||
); | ||
var day = void 0; | ||
if (showTimePicker) { | ||
day = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-day-select' + timeClassName, | ||
role: 'button' | ||
}, | ||
value.format(locale.dayFormat) | ||
); | ||
} | ||
var my = []; | ||
if (monthBeforeYear) { | ||
my = [month, day, year]; | ||
} else { | ||
my = [year, month, day]; | ||
} | ||
return React.createElement( | ||
'span', | ||
{ className: selectClassName }, | ||
toFragment(my) | ||
); | ||
}, | ||
showMonthPanel: function showMonthPanel() { | ||
// null means that users' interaction doesn't change value | ||
this.props.onPanelChange(null, 'month'); | ||
}, | ||
showYearPanel: function showYearPanel(referer) { | ||
this.setState({ yearPanelReferer: referer }); | ||
this.props.onPanelChange(null, 'year'); | ||
}, | ||
showDecadePanel: function showDecadePanel() { | ||
this.props.onPanelChange(null, 'decade'); | ||
}, | ||
render: function render() { | ||
_initialiseProps.call(_this); | ||
_this.nextMonth = goMonth.bind(_this, 1); | ||
_this.previousMonth = goMonth.bind(_this, -1); | ||
_this.nextYear = goYear.bind(_this, 1); | ||
_this.previousYear = goYear.bind(_this, -1); | ||
_this.state = { yearPanelReferer: null }; | ||
return _this; | ||
} | ||
CalendarHeader.prototype.render = function render() { | ||
var _this2 = this; | ||
@@ -225,5 +130,121 @@ | ||
); | ||
} | ||
}); | ||
}; | ||
return CalendarHeader; | ||
}(React.Component); | ||
CalendarHeader.propTypes = { | ||
prefixCls: PropTypes.string, | ||
value: PropTypes.object, | ||
onValueChange: PropTypes.func, | ||
showTimePicker: PropTypes.bool, | ||
onPanelChange: PropTypes.func, | ||
locale: PropTypes.object, | ||
enablePrev: PropTypes.any, | ||
enableNext: PropTypes.any, | ||
disabledMonth: PropTypes.func, | ||
renderFooter: PropTypes.func, | ||
onMonthSelect: PropTypes.func | ||
}; | ||
CalendarHeader.defaultProps = { | ||
enableNext: 1, | ||
enablePrev: 1, | ||
onPanelChange: function onPanelChange() {}, | ||
onValueChange: function onValueChange() {} | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this3 = this; | ||
this.onMonthSelect = function (value) { | ||
_this3.props.onPanelChange(value, 'date'); | ||
if (_this3.props.onMonthSelect) { | ||
_this3.props.onMonthSelect(value); | ||
} else { | ||
_this3.props.onValueChange(value); | ||
} | ||
}; | ||
this.onYearSelect = function (value) { | ||
var referer = _this3.state.yearPanelReferer; | ||
_this3.setState({ yearPanelReferer: null }); | ||
_this3.props.onPanelChange(value, referer); | ||
_this3.props.onValueChange(value); | ||
}; | ||
this.onDecadeSelect = function (value) { | ||
_this3.props.onPanelChange(value, 'year'); | ||
_this3.props.onValueChange(value); | ||
}; | ||
this.monthYearElement = function (showTimePicker) { | ||
var props = _this3.props; | ||
var prefixCls = props.prefixCls; | ||
var locale = props.locale; | ||
var value = props.value; | ||
var localeData = value.localeData(); | ||
var monthBeforeYear = locale.monthBeforeYear; | ||
var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select'); | ||
var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : ''; | ||
var year = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-year-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : function () { | ||
return _this3.showYearPanel('date'); | ||
}, | ||
title: showTimePicker ? null : locale.yearSelect | ||
}, | ||
value.format(locale.yearFormat) | ||
); | ||
var month = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-month-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : _this3.showMonthPanel, | ||
title: showTimePicker ? null : locale.monthSelect | ||
}, | ||
locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value) | ||
); | ||
var day = void 0; | ||
if (showTimePicker) { | ||
day = React.createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-day-select' + timeClassName, | ||
role: 'button' | ||
}, | ||
value.format(locale.dayFormat) | ||
); | ||
} | ||
var my = []; | ||
if (monthBeforeYear) { | ||
my = [month, day, year]; | ||
} else { | ||
my = [year, month, day]; | ||
} | ||
return React.createElement( | ||
'span', | ||
{ className: selectClassName }, | ||
toFragment(my) | ||
); | ||
}; | ||
this.showMonthPanel = function () { | ||
// null means that users' interaction doesn't change value | ||
_this3.props.onPanelChange(null, 'month'); | ||
}; | ||
this.showYearPanel = function (referer) { | ||
_this3.setState({ yearPanelReferer: referer }); | ||
_this3.props.onPanelChange(null, 'year'); | ||
}; | ||
this.showDecadePanel = function () { | ||
_this3.props.onPanelChange(null, 'decade'); | ||
}; | ||
}; | ||
export default CalendarHeader; |
@@ -0,4 +1,6 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -8,49 +10,127 @@ import moment from 'moment'; | ||
var DateInput = createReactClass({ | ||
displayName: 'DateInput', | ||
var cachedSelectionStart = void 0; | ||
var cachedSelectionEnd = void 0; | ||
var dateInputInstance = void 0; | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
timePicker: PropTypes.object, | ||
value: PropTypes.object, | ||
disabledTime: PropTypes.any, | ||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), | ||
locale: PropTypes.object, | ||
disabledDate: PropTypes.func, | ||
onChange: PropTypes.func, | ||
onClear: PropTypes.func, | ||
placeholder: PropTypes.string, | ||
onSelect: PropTypes.func, | ||
selectedValue: PropTypes.object, | ||
clearIcon: PropTypes.node | ||
}, | ||
var DateInput = function (_React$Component) { | ||
_inherits(DateInput, _React$Component); | ||
getInitialState: function getInitialState() { | ||
var selectedValue = this.props.selectedValue; | ||
return { | ||
str: formatDate(selectedValue, this.props.format), | ||
function DateInput(props) { | ||
_classCallCheck(this, DateInput); | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var selectedValue = props.selectedValue; | ||
_this.state = { | ||
str: formatDate(selectedValue, _this.props.format), | ||
invalid: false, | ||
hasFocus: false | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
this.cachedSelectionStart = this.dateInputInstance.selectionStart; | ||
this.cachedSelectionEnd = this.dateInputInstance.selectionEnd; | ||
return _this; | ||
} | ||
DateInput.prototype.componentDidUpdate = function componentDidUpdate() { | ||
if (this.state.hasFocus && !this.state.invalid && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) { | ||
dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd); | ||
} | ||
}; | ||
DateInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
if (dateInputInstance) { | ||
cachedSelectionStart = dateInputInstance.selectionStart; | ||
cachedSelectionEnd = dateInputInstance.selectionEnd; | ||
} | ||
// when popup show, click body will call this, bug! | ||
var selectedValue = nextProps.selectedValue; | ||
if (!this.state.hasFocus) { | ||
this.setState({ | ||
if (!state.hasFocus) { | ||
newState = { | ||
str: formatDate(selectedValue, nextProps.format), | ||
invalid: false | ||
}); | ||
}; | ||
} | ||
}, | ||
componentDidUpdate: function componentDidUpdate() { | ||
if (this.state.hasFocus && !this.state.invalid && !(this.cachedSelectionStart === 0 && this.cachedSelectionEnd === 0)) { | ||
this.dateInputInstance.setSelectionRange(this.cachedSelectionStart, this.cachedSelectionEnd); | ||
} | ||
}, | ||
onInputChange: function onInputChange(event) { | ||
return newState; | ||
}; | ||
DateInput.getInstance = function getInstance() { | ||
return dateInputInstance; | ||
}; | ||
DateInput.prototype.render = function render() { | ||
var props = this.props; | ||
var _state = this.state, | ||
invalid = _state.invalid, | ||
str = _state.str; | ||
var locale = props.locale, | ||
prefixCls = props.prefixCls, | ||
placeholder = props.placeholder, | ||
clearIcon = props.clearIcon; | ||
var invalidClass = invalid ? prefixCls + '-input-invalid' : ''; | ||
return React.createElement( | ||
'div', | ||
{ className: prefixCls + '-input-wrap' }, | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-date-input-wrap' }, | ||
React.createElement('input', { | ||
ref: this.saveDateInput, | ||
className: prefixCls + '-input ' + invalidClass, | ||
value: str, | ||
disabled: props.disabled, | ||
placeholder: placeholder, | ||
onChange: this.onInputChange, | ||
onFocus: this.onFocus, | ||
onBlur: this.onBlur | ||
}) | ||
), | ||
props.showClear ? React.createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.onClear | ||
}, | ||
clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null | ||
); | ||
}; | ||
return DateInput; | ||
}(React.Component); | ||
DateInput.propTypes = { | ||
prefixCls: PropTypes.string, | ||
timePicker: PropTypes.object, | ||
value: PropTypes.object, | ||
disabledTime: PropTypes.any, | ||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), | ||
locale: PropTypes.object, | ||
disabledDate: PropTypes.func, | ||
onChange: PropTypes.func, | ||
onClear: PropTypes.func, | ||
placeholder: PropTypes.string, | ||
onSelect: PropTypes.func, | ||
selectedValue: PropTypes.object, | ||
clearIcon: PropTypes.node | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onClear = function () { | ||
_this2.setState({ | ||
str: '' | ||
}); | ||
_this2.props.onClear(null); | ||
}; | ||
this.onInputChange = function (event) { | ||
var str = event.target.value; | ||
var _props = this.props, | ||
var _props = _this2.props, | ||
disabledDate = _props.disabledDate, | ||
@@ -65,3 +145,3 @@ format = _props.format, | ||
onChange(null); | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: false, | ||
@@ -76,3 +156,3 @@ str: str | ||
if (!parsed.isValid()) { | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: true, | ||
@@ -84,7 +164,7 @@ str: str | ||
var value = this.props.value.clone(); | ||
var value = _this2.props.value.clone(); | ||
value.year(parsed.year()).month(parsed.month()).date(parsed.date()).hour(parsed.hour()).minute(parsed.minute()).second(parsed.second()); | ||
if (!value || disabledDate && disabledDate(value)) { | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: true, | ||
@@ -97,3 +177,3 @@ str: str | ||
if (selectedValue !== value || selectedValue && value && !selectedValue.isSame(value)) { | ||
this.setState({ | ||
_this2.setState({ | ||
str: str | ||
@@ -103,25 +183,10 @@ }); | ||
} | ||
}, | ||
onClear: function onClear() { | ||
this.setState({ | ||
str: '' | ||
}); | ||
this.props.onClear(null); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
return ReactDOM.findDOMNode(this); | ||
}, | ||
focus: function focus() { | ||
if (this.dateInputInstance) { | ||
this.dateInputInstance.focus(); | ||
} | ||
}, | ||
saveDateInput: function saveDateInput(dateInput) { | ||
this.dateInputInstance = dateInput; | ||
}, | ||
onFocus: function onFocus() { | ||
this.setState({ hasFocus: true }); | ||
}, | ||
onBlur: function onBlur() { | ||
this.setState(function (prevState, prevProps) { | ||
}; | ||
this.onFocus = function () { | ||
_this2.setState({ hasFocus: true }); | ||
}; | ||
this.onBlur = function () { | ||
_this2.setState(function (prevState, prevProps) { | ||
return { | ||
@@ -132,44 +197,19 @@ hasFocus: false, | ||
}); | ||
}, | ||
render: function render() { | ||
var props = this.props; | ||
var _state = this.state, | ||
invalid = _state.invalid, | ||
str = _state.str; | ||
var locale = props.locale, | ||
prefixCls = props.prefixCls, | ||
placeholder = props.placeholder, | ||
clearIcon = props.clearIcon; | ||
}; | ||
var invalidClass = invalid ? prefixCls + '-input-invalid' : ''; | ||
return React.createElement( | ||
'div', | ||
{ className: prefixCls + '-input-wrap' }, | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-date-input-wrap' }, | ||
React.createElement('input', { | ||
ref: this.saveDateInput, | ||
className: prefixCls + '-input ' + invalidClass, | ||
value: str, | ||
disabled: props.disabled, | ||
placeholder: placeholder, | ||
onChange: this.onInputChange, | ||
onFocus: this.onFocus, | ||
onBlur: this.onBlur | ||
}) | ||
), | ||
props.showClear ? React.createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.onClear | ||
}, | ||
clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null | ||
); | ||
} | ||
}); | ||
this.getRootDOMNode = function () { | ||
return ReactDOM.findDOMNode(_this2); | ||
}; | ||
this.focus = function () { | ||
if (dateInputInstance) { | ||
dateInputInstance.focus(); | ||
} | ||
}; | ||
this.saveDateInput = function (dateInput) { | ||
dateInputInstance = dateInput; | ||
}; | ||
}; | ||
export default DateInput; |
@@ -0,3 +1,5 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -30,22 +32,12 @@ import cx from 'classnames'; | ||
var DateTBody = createReactClass({ | ||
displayName: 'DateTBody', | ||
var DateTBody = function (_React$Component) { | ||
_inherits(DateTBody, _React$Component); | ||
propTypes: { | ||
contentRender: PropTypes.func, | ||
dateRender: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
prefixCls: PropTypes.string, | ||
selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), | ||
value: PropTypes.object, | ||
hoverValue: PropTypes.any, | ||
showWeekNumber: PropTypes.bool | ||
}, | ||
function DateTBody() { | ||
_classCallCheck(this, DateTBody); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
hoverValue: [] | ||
}; | ||
}, | ||
render: function render() { | ||
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); | ||
} | ||
DateTBody.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -259,5 +251,20 @@ var contentRender = props.contentRender, | ||
); | ||
} | ||
}); | ||
}; | ||
return DateTBody; | ||
}(React.Component); | ||
DateTBody.propTypes = { | ||
contentRender: PropTypes.func, | ||
dateRender: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
prefixCls: PropTypes.string, | ||
selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), | ||
value: PropTypes.object, | ||
hoverValue: PropTypes.any, | ||
showWeekNumber: PropTypes.bool | ||
}; | ||
DateTBody.defaultProps = { | ||
hoverValue: [] | ||
}; | ||
export default DateTBody; |
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
import DateTable from './date/DateTable'; | ||
import MonthTable from './month/MonthTable'; | ||
import CalendarMixin from './mixin/CalendarMixin'; | ||
import CommonMixin from './mixin/CommonMixin'; | ||
import { calendarMixinWrapper, calendarMixinPropTypes, calendarMixinDefaultProps, getNowByCurrentStateValue } from './mixin/CalendarMixin'; | ||
import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin'; | ||
import CalendarHeader from './full-calendar/CalendarHeader'; | ||
import moment from 'moment'; | ||
var FullCalendar = createReactClass({ | ||
displayName: 'FullCalendar', | ||
var FullCalendar = function (_React$Component) { | ||
_inherits(FullCalendar, _React$Component); | ||
propTypes: { | ||
defaultType: PropTypes.string, | ||
type: PropTypes.string, | ||
prefixCls: PropTypes.string, | ||
locale: PropTypes.object, | ||
onTypeChange: PropTypes.func, | ||
fullscreen: PropTypes.bool, | ||
monthCellRender: PropTypes.func, | ||
dateCellRender: PropTypes.func, | ||
showTypeSwitch: PropTypes.bool, | ||
Select: PropTypes.func.isRequired, | ||
headerComponents: PropTypes.array, | ||
headerComponent: PropTypes.object, // The whole header component | ||
headerRender: PropTypes.func, | ||
showHeader: PropTypes.bool, | ||
disabledDate: PropTypes.func | ||
}, | ||
mixins: [CommonMixin, CalendarMixin], | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
defaultType: 'date', | ||
fullscreen: false, | ||
showTypeSwitch: true, | ||
showHeader: true, | ||
onTypeChange: function onTypeChange() {} | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
function FullCalendar(props) { | ||
_classCallCheck(this, FullCalendar); | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var type = void 0; | ||
if ('type' in this.props) { | ||
type = this.props.type; | ||
if ('type' in props) { | ||
type = props.type; | ||
} else { | ||
type = this.props.defaultType; | ||
type = props.defaultType; | ||
} | ||
return { | ||
type: type | ||
_this.state = { | ||
type: type, | ||
value: props.value || props.defaultValue || moment(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
return _this; | ||
} | ||
FullCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
var value = nextProps.value, | ||
selectedValue = nextProps.selectedValue; | ||
if ('type' in nextProps) { | ||
this.setState({ | ||
newState = { | ||
type: nextProps.type | ||
}); | ||
}; | ||
} | ||
}, | ||
onMonthSelect: function onMonthSelect(value) { | ||
this.onSelect(value, { | ||
target: 'month' | ||
}); | ||
}, | ||
setType: function setType(type) { | ||
if (!('type' in this.props)) { | ||
this.setState({ | ||
type: type | ||
}); | ||
if ('value' in nextProps) { | ||
newState.value = value || nextProps.defaultValue || getNowByCurrentStateValue(state.value); | ||
} | ||
this.props.onTypeChange(type); | ||
}, | ||
render: function render() { | ||
if ('selectedValue' in nextProps) { | ||
newState.selectedValue = selectedValue; | ||
} | ||
return newState; | ||
}; | ||
FullCalendar.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -138,5 +126,55 @@ var locale = props.locale, | ||
}); | ||
} | ||
}; | ||
return FullCalendar; | ||
}(React.Component); | ||
FullCalendar.propTypes = _extends({}, calendarMixinPropTypes, propType, { | ||
defaultType: PropTypes.string, | ||
type: PropTypes.string, | ||
prefixCls: PropTypes.string, | ||
locale: PropTypes.object, | ||
onTypeChange: PropTypes.func, | ||
fullscreen: PropTypes.bool, | ||
monthCellRender: PropTypes.func, | ||
dateCellRender: PropTypes.func, | ||
showTypeSwitch: PropTypes.bool, | ||
Select: PropTypes.func.isRequired, | ||
headerComponents: PropTypes.array, | ||
headerComponent: PropTypes.object, // The whole header component | ||
headerRender: PropTypes.func, | ||
showHeader: PropTypes.bool, | ||
disabledDate: PropTypes.func, | ||
value: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
selectedValue: PropTypes.object, | ||
defaultSelectedValue: PropTypes.object | ||
}); | ||
FullCalendar.defaultProps = _extends({}, calendarMixinDefaultProps, defaultProp, { | ||
defaultType: 'date', | ||
fullscreen: false, | ||
showTypeSwitch: true, | ||
showHeader: true, | ||
onTypeChange: function onTypeChange() {} | ||
}); | ||
export default FullCalendar; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onMonthSelect = function (value) { | ||
_this2.onSelect(value, { | ||
target: 'month' | ||
}); | ||
}; | ||
this.setType = function (type) { | ||
if (!('type' in _this2.props)) { | ||
_this2.setState({ | ||
type: type | ||
}); | ||
} | ||
_this2.props.onTypeChange(type); | ||
}; | ||
}; | ||
export default calendarMixinWrapper(commonMixinWrapper(FullCalendar)); |
import Calendar from './Calendar'; | ||
import { polyfill } from 'react-lifecycles-compat'; | ||
polyfill(Calendar); | ||
export default Calendar; |
@@ -0,1 +1,4 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
@@ -5,11 +8,7 @@ import PropTypes from 'prop-types'; | ||
import moment from 'moment'; | ||
import { isAllowedDate as _isAllowedDate, getTodayTime } from '../util/index'; | ||
import { isAllowedDate, getTodayTime } from '../util/index'; | ||
function noop() {} | ||
function getNow() { | ||
return moment(); | ||
} | ||
function getNowByCurrentStateValue(value) { | ||
export function getNowByCurrentStateValue(value) { | ||
var ret = void 0; | ||
@@ -19,3 +18,3 @@ if (value) { | ||
} else { | ||
ret = getNow(); | ||
ret = moment(); | ||
} | ||
@@ -25,92 +24,81 @@ return ret; | ||
var CalendarMixin = { | ||
propTypes: { | ||
value: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
onKeyDown: PropTypes.func | ||
}, | ||
export var calendarMixinPropTypes = { | ||
value: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
onKeyDown: PropTypes.func | ||
}; | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
onKeyDown: noop | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
var value = props.value || props.defaultValue || getNow(); | ||
return { | ||
value: value, | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var value = nextProps.value; | ||
var selectedValue = nextProps.selectedValue; | ||
export var calendarMixinDefaultProps = { | ||
onKeyDown: noop | ||
}; | ||
if ('value' in nextProps) { | ||
value = value || nextProps.defaultValue || getNowByCurrentStateValue(this.state.value); | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if ('selectedValue' in nextProps) { | ||
this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
} | ||
}, | ||
onSelect: function onSelect(value, cause) { | ||
if (value) { | ||
this.setValue(value); | ||
} | ||
this.setSelectedValue(value, cause); | ||
}, | ||
renderRoot: function renderRoot(newProps) { | ||
var _className; | ||
export var calendarMixinWrapper = function calendarMixinWrapper(ComposeComponent) { | ||
var _class, _temp2; | ||
var props = this.props; | ||
var prefixCls = props.prefixCls; | ||
return _temp2 = _class = function (_ComposeComponent) { | ||
_inherits(_class, _ComposeComponent); | ||
var className = (_className = {}, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[props.className] = !!props.className, _className[newProps.className] = !!newProps.className, _className); | ||
function _class() { | ||
var _temp, _this, _ret; | ||
return React.createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: '' + classnames(className), | ||
style: this.props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
newProps.children | ||
); | ||
}, | ||
setSelectedValue: function setSelectedValue(selectedValue, cause) { | ||
// if (this.isAllowedDate(selectedValue)) { | ||
if (!('selectedValue' in this.props)) { | ||
this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
_classCallCheck(this, _class); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _ComposeComponent.call.apply(_ComposeComponent, [this].concat(args))), _this), _this.onSelect = function (value, cause) { | ||
if (value) { | ||
_this.setValue(value); | ||
} | ||
_this.setSelectedValue(value, cause); | ||
}, _this.renderRoot = function (newProps) { | ||
var _className; | ||
var props = _this.props; | ||
var prefixCls = props.prefixCls; | ||
var className = (_className = {}, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[props.className] = !!props.className, _className[newProps.className] = !!newProps.className, _className); | ||
return React.createElement( | ||
'div', | ||
{ | ||
ref: _this.saveRoot, | ||
className: '' + classnames(className), | ||
style: _this.props.style, | ||
tabIndex: '0', | ||
onKeyDown: _this.onKeyDown | ||
}, | ||
newProps.children | ||
); | ||
}, _this.setSelectedValue = function (selectedValue, cause) { | ||
// if (this.isAllowedDate(selectedValue)) { | ||
if (!('selectedValue' in _this.props)) { | ||
_this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
} | ||
if (_this.props.onSelect) { | ||
_this.props.onSelect(selectedValue, cause); | ||
} | ||
// } | ||
}, _this.setValue = function (value) { | ||
var originalValue = _this.state.value; | ||
if (!('value' in _this.props)) { | ||
_this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (originalValue && value && !originalValue.isSame(value) || !originalValue && value || originalValue && !value) { | ||
_this.props.onChange(value); | ||
} | ||
}, _this.isAllowedDate = function (value) { | ||
var disabledDate = _this.props.disabledDate; | ||
var disabledTime = _this.props.disabledTime; | ||
return isAllowedDate(value, disabledDate, disabledTime); | ||
}, _temp), _possibleConstructorReturn(_this, _ret); | ||
} | ||
this.props.onSelect(selectedValue, cause); | ||
// } | ||
}, | ||
setValue: function setValue(value) { | ||
var originalValue = this.state.value; | ||
if (!('value' in this.props)) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (originalValue && value && !originalValue.isSame(value) || !originalValue && value || originalValue && !value) { | ||
this.props.onChange(value); | ||
} | ||
}, | ||
isAllowedDate: function isAllowedDate(value) { | ||
var disabledDate = this.props.disabledDate; | ||
var disabledTime = this.props.disabledTime; | ||
return _isAllowedDate(value, disabledDate, disabledTime); | ||
} | ||
}; | ||
export default CalendarMixin; | ||
return _class; | ||
}(ComposeComponent), _class.displayName = 'CalendarMixinWrapper', _temp2; | ||
}; |
@@ -0,1 +1,4 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import PropTypes from 'prop-types'; | ||
@@ -6,58 +9,78 @@ import enUs from '../locale/en_US'; | ||
export default { | ||
propTypes: { | ||
className: PropTypes.string, | ||
locale: PropTypes.object, | ||
style: PropTypes.object, | ||
visible: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
prefixCls: PropTypes.string, | ||
onChange: PropTypes.func, | ||
onOk: PropTypes.func | ||
export var propType = { | ||
className: PropTypes.string, | ||
locale: PropTypes.object, | ||
style: PropTypes.object, | ||
visible: PropTypes.bool, | ||
onSelect: PropTypes.func, | ||
prefixCls: PropTypes.string, | ||
onChange: PropTypes.func, | ||
onOk: PropTypes.func | ||
}; | ||
export var defaultProp = { | ||
locale: enUs, | ||
style: {}, | ||
visible: true, | ||
prefixCls: 'rc-calendar', | ||
className: '', | ||
onSelect: noop, | ||
onChange: noop, | ||
onClear: noop, | ||
renderFooter: function renderFooter() { | ||
return null; | ||
}, | ||
renderSidebar: function renderSidebar() { | ||
return null; | ||
} | ||
}; | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
locale: enUs, | ||
style: {}, | ||
visible: true, | ||
prefixCls: 'rc-calendar', | ||
className: '', | ||
onSelect: noop, | ||
onChange: noop, | ||
onClear: noop, | ||
renderFooter: function renderFooter() { | ||
return null; | ||
}, | ||
renderSidebar: function renderSidebar() { | ||
return null; | ||
export var commonMixinWrapper = function commonMixinWrapper(ComposeComponent) { | ||
var _class, _temp2; | ||
return _temp2 = _class = function (_ComposeComponent) { | ||
_inherits(_class, _ComposeComponent); | ||
function _class() { | ||
var _temp, _this, _ret; | ||
_classCallCheck(this, _class); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _ComposeComponent.call.apply(_ComposeComponent, [this].concat(args))), _this), _this.getFormat = function () { | ||
var format = _this.props.format; | ||
var _this$props = _this.props, | ||
locale = _this$props.locale, | ||
timePicker = _this$props.timePicker; | ||
if (!format) { | ||
if (timePicker) { | ||
format = locale.dateTimeFormat; | ||
} else { | ||
format = locale.dateFormat; | ||
} | ||
} | ||
return format; | ||
}, _this.focus = function () { | ||
if (_this.focusElement) { | ||
_this.focusElement.focus(); | ||
} else if (_this.rootInstance) { | ||
_this.rootInstance.focus(); | ||
} | ||
}, _this.saveFocusElement = function (focusElement) { | ||
_this.focusElement = focusElement; | ||
}, _this.saveRoot = function (root) { | ||
_this.rootInstance = root; | ||
}, _temp), _possibleConstructorReturn(_this, _ret); | ||
} | ||
_class.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { | ||
return this.props.visible || nextProps.visible; | ||
}; | ||
}, | ||
shouldComponentUpdate: function shouldComponentUpdate(nextProps) { | ||
return this.props.visible || nextProps.visible; | ||
}, | ||
getFormat: function getFormat() { | ||
var format = this.props.format; | ||
var _props = this.props, | ||
locale = _props.locale, | ||
timePicker = _props.timePicker; | ||
if (!format) { | ||
if (timePicker) { | ||
format = locale.dateTimeFormat; | ||
} else { | ||
format = locale.dateFormat; | ||
} | ||
} | ||
return format; | ||
}, | ||
focus: function focus() { | ||
if (this.rootInstance) { | ||
this.rootInstance.focus(); | ||
} | ||
}, | ||
saveRoot: function saveRoot(root) { | ||
this.rootInstance = root; | ||
} | ||
return _class; | ||
}(ComposeComponent), _class.displayName = 'CommonMixinWrapper', _temp2; | ||
}; |
@@ -0,3 +1,5 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -14,51 +16,51 @@ import MonthTable from './MonthTable'; | ||
var MonthPanel = createReactClass({ | ||
displayName: 'MonthPanel', | ||
var MonthPanel = function (_React$Component) { | ||
_inherits(MonthPanel, _React$Component); | ||
propTypes: { | ||
onChange: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
onSelect: PropTypes.func, | ||
renderFooter: PropTypes.func | ||
}, | ||
function MonthPanel(props) { | ||
_classCallCheck(this, MonthPanel); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
onChange: noop, | ||
onSelect: noop | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
_this.setAndChangeValue = function (value) { | ||
_this.setValue(value); | ||
_this.props.onChange(value); | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
// bind methods | ||
this.nextYear = goYear.bind(this, 1); | ||
this.previousYear = goYear.bind(this, -1); | ||
this.prefixCls = props.rootPrefixCls + '-month-panel'; | ||
return { | ||
_this.setAndSelectValue = function (value) { | ||
_this.setValue(value); | ||
_this.props.onSelect(value); | ||
}; | ||
_this.setValue = function (value) { | ||
if (!('value' in _this.props)) { | ||
_this.setState({ | ||
value: value | ||
}); | ||
} | ||
}; | ||
_this.nextYear = goYear.bind(_this, 1); | ||
_this.previousYear = goYear.bind(_this, -1); | ||
_this.prefixCls = props.rootPrefixCls + '-month-panel'; | ||
_this.state = { | ||
value: props.value || props.defaultValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
return _this; | ||
} | ||
MonthPanel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { | ||
var newState = {}; | ||
if ('value' in nextProps) { | ||
this.setState({ | ||
newState = { | ||
value: nextProps.value | ||
}); | ||
}; | ||
} | ||
}, | ||
setAndChangeValue: function setAndChangeValue(value) { | ||
this.setValue(value); | ||
this.props.onChange(value); | ||
}, | ||
setAndSelectValue: function setAndSelectValue(value) { | ||
this.setValue(value); | ||
this.props.onSelect(value); | ||
}, | ||
setValue: function setValue(value) { | ||
if (!('value' in this.props)) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
}, | ||
render: function render() { | ||
return newState; | ||
}; | ||
MonthPanel.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -137,5 +139,20 @@ var value = this.state.value; | ||
); | ||
} | ||
}); | ||
}; | ||
return MonthPanel; | ||
}(React.Component); | ||
MonthPanel.propTypes = { | ||
onChange: PropTypes.func, | ||
disabledDate: PropTypes.func, | ||
onSelect: PropTypes.func, | ||
renderFooter: PropTypes.func, | ||
rootPrefixCls: PropTypes.string, | ||
value: PropTypes.object, | ||
defaultValue: PropTypes.object | ||
}; | ||
MonthPanel.defaultProps = { | ||
onChange: noop, | ||
onSelect: noop | ||
}; | ||
export default MonthPanel; |
@@ -0,3 +1,6 @@ | ||
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -7,70 +10,77 @@ import KeyCode from 'rc-util/es/KeyCode'; | ||
import CalendarFooter from './calendar/CalendarFooter'; | ||
import CalendarMixin from './mixin/CalendarMixin'; | ||
import CommonMixin from './mixin/CommonMixin'; | ||
import { calendarMixinWrapper, calendarMixinPropTypes, calendarMixinDefaultProps } from './mixin/CalendarMixin'; | ||
import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin'; | ||
import moment from 'moment'; | ||
var MonthCalendar = createReactClass({ | ||
displayName: 'MonthCalendar', | ||
var MonthCalendar = function (_React$Component) { | ||
_inherits(MonthCalendar, _React$Component); | ||
propTypes: { | ||
monthCellRender: PropTypes.func, | ||
dateCellRender: PropTypes.func | ||
}, | ||
mixins: [CommonMixin, CalendarMixin], | ||
function MonthCalendar(props) { | ||
_classCallCheck(this, MonthCalendar); | ||
getInitialState: function getInitialState() { | ||
return { mode: 'month' }; | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
var keyCode = event.keyCode; | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var stateValue = this.state.value; | ||
var disabledDate = this.props.disabledDate; | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
var value = stateValue; | ||
switch (keyCode) { | ||
case KeyCode.DOWN: | ||
value = stateValue.clone(); | ||
value.add(3, 'months'); | ||
break; | ||
case KeyCode.UP: | ||
value = stateValue.clone(); | ||
value.add(-3, 'months'); | ||
break; | ||
case KeyCode.LEFT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(-1, 'years'); | ||
} else { | ||
value.add(-1, 'months'); | ||
} | ||
break; | ||
case KeyCode.RIGHT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(1, 'years'); | ||
} else { | ||
value.add(1, 'months'); | ||
} | ||
break; | ||
case KeyCode.ENTER: | ||
if (!disabledDate || !disabledDate(stateValue)) { | ||
this.onSelect(stateValue); | ||
} | ||
_this.onKeyDown = function (event) { | ||
var keyCode = event.keyCode; | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var stateValue = _this.state.value; | ||
var disabledDate = _this.props.disabledDate; | ||
var value = stateValue; | ||
switch (keyCode) { | ||
case KeyCode.DOWN: | ||
value = stateValue.clone(); | ||
value.add(3, 'months'); | ||
break; | ||
case KeyCode.UP: | ||
value = stateValue.clone(); | ||
value.add(-3, 'months'); | ||
break; | ||
case KeyCode.LEFT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(-1, 'years'); | ||
} else { | ||
value.add(-1, 'months'); | ||
} | ||
break; | ||
case KeyCode.RIGHT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(1, 'years'); | ||
} else { | ||
value.add(1, 'months'); | ||
} | ||
break; | ||
case KeyCode.ENTER: | ||
if (!disabledDate || !disabledDate(stateValue)) { | ||
_this.onSelect(stateValue); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
return undefined; | ||
} | ||
if (value !== stateValue) { | ||
_this.setValue(value); | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
return undefined; | ||
} | ||
if (value !== stateValue) { | ||
this.setValue(value); | ||
event.preventDefault(); | ||
return 1; | ||
} | ||
}, | ||
handlePanelChange: function handlePanelChange(_, mode) { | ||
if (mode !== 'date') { | ||
this.setState({ mode: mode }); | ||
} | ||
}, | ||
render: function render() { | ||
} | ||
}; | ||
_this.handlePanelChange = function (_, mode) { | ||
if (mode !== 'date') { | ||
_this.setState({ mode: mode }); | ||
} | ||
}; | ||
_this.state = { | ||
mode: 'month', | ||
value: props.value || props.defaultValue || moment(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
return _this; | ||
} | ||
MonthCalendar.prototype.render = function render() { | ||
var props = this.props, | ||
@@ -109,5 +119,19 @@ state = this.state; | ||
}); | ||
} | ||
}; | ||
return MonthCalendar; | ||
}(React.Component); | ||
MonthCalendar.propTypes = _extends({}, calendarMixinPropTypes, propType, { | ||
monthCellRender: PropTypes.func, | ||
dateCellRender: PropTypes.func, | ||
value: PropTypes.object, | ||
defaultValue: PropTypes.object, | ||
selectedValue: PropTypes.object, | ||
defaultSelectedValue: PropTypes.object, | ||
disabledDate: PropTypes.object | ||
}); | ||
MonthCalendar.defaultProps = _extends({}, defaultProp, calendarMixinDefaultProps); | ||
export default MonthCalendar; | ||
export default calendarMixinWrapper(commonMixinWrapper(MonthCalendar)); |
301
es/Picker.js
@@ -0,4 +1,6 @@ | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -16,37 +18,12 @@ import createChainedFunction from 'rc-util/es/createChainedFunction'; | ||
var Picker = createReactClass({ | ||
displayName: 'Picker', | ||
var Picker = function (_React$Component) { | ||
_inherits(Picker, _React$Component); | ||
propTypes: { | ||
animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
disabled: PropTypes.bool, | ||
transitionName: PropTypes.string, | ||
onChange: PropTypes.func, | ||
onOpenChange: PropTypes.func, | ||
children: PropTypes.func, | ||
getCalendarContainer: PropTypes.func, | ||
calendar: PropTypes.element, | ||
style: PropTypes.object, | ||
open: PropTypes.bool, | ||
defaultOpen: PropTypes.bool, | ||
prefixCls: PropTypes.string, | ||
placement: PropTypes.any, | ||
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
align: PropTypes.object | ||
}, | ||
function Picker(props) { | ||
_classCallCheck(this, Picker); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
prefixCls: 'rc-calendar-picker', | ||
style: {}, | ||
align: {}, | ||
placement: 'bottomLeft', | ||
defaultOpen: false, | ||
onChange: noop, | ||
onOpenChange: noop | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var open = void 0; | ||
@@ -59,24 +36,12 @@ if ('open' in props) { | ||
var value = props.value || props.defaultValue; | ||
this.saveCalendarRef = refFn.bind(this, 'calendarInstance'); | ||
return { | ||
_this.saveCalendarRef = refFn.bind(_this, 'calendarInstance'); | ||
_this.state = { | ||
open: open, | ||
value: value | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var value = nextProps.value, | ||
open = nextProps.open; | ||
return _this; | ||
} | ||
if ('value' in nextProps) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (open !== undefined) { | ||
this.setState({ | ||
open: open | ||
}); | ||
} | ||
}, | ||
componentDidUpdate: function componentDidUpdate(_, prevState) { | ||
Picker.prototype.componentDidUpdate = function componentDidUpdate(_, prevState) { | ||
if (!prevState.open && this.state.open) { | ||
@@ -86,89 +51,27 @@ // setTimeout is for making sure saveCalendarRef happen before focusCalendar | ||
} | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
}; | ||
Picker.prototype.componentWillUnmount = function componentWillUnmount() { | ||
clearTimeout(this.focusTimeout); | ||
}, | ||
onCalendarKeyDown: function onCalendarKeyDown(event) { | ||
if (event.keyCode === KeyCode.ESC) { | ||
event.stopPropagation(); | ||
this.close(this.focus); | ||
} | ||
}, | ||
onCalendarSelect: function onCalendarSelect(value) { | ||
var cause = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
}; | ||
var props = this.props; | ||
if (!('value' in props)) { | ||
this.setState({ | ||
Picker.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { | ||
var newState = {}; | ||
var value = nextProps.value, | ||
open = nextProps.open; | ||
if ('value' in nextProps) { | ||
newState = { | ||
value: value | ||
}); | ||
}; | ||
} | ||
if (cause.source === 'keyboard' || !props.calendar.props.timePicker && cause.source !== 'dateInput' || cause.source === 'todayButton') { | ||
this.close(this.focus); | ||
if (open !== undefined) { | ||
newState = { | ||
open: open | ||
}; | ||
} | ||
props.onChange(value); | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
if (event.keyCode === KeyCode.DOWN && !this.state.open) { | ||
this.open(); | ||
event.preventDefault(); | ||
} | ||
}, | ||
onCalendarOk: function onCalendarOk() { | ||
this.close(this.focus); | ||
}, | ||
onCalendarClear: function onCalendarClear() { | ||
this.close(this.focus); | ||
}, | ||
onVisibleChange: function onVisibleChange(open) { | ||
this.setOpen(open); | ||
}, | ||
getCalendarElement: function getCalendarElement() { | ||
var props = this.props; | ||
var state = this.state; | ||
var calendarProps = props.calendar.props; | ||
var value = state.value; | ||
return newState; | ||
}; | ||
var defaultValue = value; | ||
var extraProps = { | ||
ref: this.saveCalendarRef, | ||
defaultValue: defaultValue || calendarProps.defaultValue, | ||
selectedValue: value, | ||
onKeyDown: this.onCalendarKeyDown, | ||
onOk: createChainedFunction(calendarProps.onOk, this.onCalendarOk), | ||
onSelect: createChainedFunction(calendarProps.onSelect, this.onCalendarSelect), | ||
onClear: createChainedFunction(calendarProps.onClear, this.onCalendarClear) | ||
}; | ||
return React.cloneElement(props.calendar, extraProps); | ||
}, | ||
setOpen: function setOpen(open, callback) { | ||
var onOpenChange = this.props.onOpenChange; | ||
if (this.state.open !== open) { | ||
if (!('open' in this.props)) { | ||
this.setState({ | ||
open: open | ||
}, callback); | ||
} | ||
onOpenChange(open); | ||
} | ||
}, | ||
open: function open(callback) { | ||
this.setOpen(true, callback); | ||
}, | ||
close: function close(callback) { | ||
this.setOpen(false, callback); | ||
}, | ||
focus: function focus() { | ||
if (!this.state.open) { | ||
ReactDOM.findDOMNode(this).focus(); | ||
} | ||
}, | ||
focusCalendar: function focusCalendar() { | ||
if (this.state.open && !!this.calendarInstance) { | ||
this.calendarInstance.focus(); | ||
} | ||
}, | ||
render: function render() { | ||
Picker.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -207,5 +110,133 @@ var prefixCls = props.prefixCls, | ||
); | ||
} | ||
}); | ||
}; | ||
return Picker; | ||
}(React.Component); | ||
Picker.propTypes = { | ||
animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
disabled: PropTypes.bool, | ||
transitionName: PropTypes.string, | ||
onChange: PropTypes.func, | ||
onOpenChange: PropTypes.func, | ||
children: PropTypes.func, | ||
getCalendarContainer: PropTypes.func, | ||
calendar: PropTypes.element, | ||
style: PropTypes.object, | ||
open: PropTypes.bool, | ||
defaultOpen: PropTypes.bool, | ||
prefixCls: PropTypes.string, | ||
placement: PropTypes.any, | ||
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
align: PropTypes.object | ||
}; | ||
Picker.defaultProps = { | ||
prefixCls: 'rc-calendar-picker', | ||
style: {}, | ||
align: {}, | ||
placement: 'bottomLeft', | ||
defaultOpen: false, | ||
onChange: noop, | ||
onOpenChange: noop | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onCalendarKeyDown = function (event) { | ||
if (event.keyCode === KeyCode.ESC) { | ||
event.stopPropagation(); | ||
_this2.close(_this2.focus); | ||
} | ||
}; | ||
this.onCalendarSelect = function (value) { | ||
var cause = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
var props = _this2.props; | ||
if (!('value' in props)) { | ||
_this2.setState({ | ||
value: value | ||
}); | ||
} | ||
if (cause.source === 'keyboard' || !props.calendar.props.timePicker && cause.source !== 'dateInput' || cause.source === 'todayButton') { | ||
_this2.close(_this2.focus); | ||
} | ||
props.onChange(value); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.keyCode === KeyCode.DOWN && !_this2.state.open) { | ||
_this2.open(); | ||
event.preventDefault(); | ||
} | ||
}; | ||
this.onCalendarOk = function () { | ||
_this2.close(_this2.focus); | ||
}; | ||
this.onCalendarClear = function () { | ||
_this2.close(_this2.focus); | ||
}; | ||
this.onVisibleChange = function (open) { | ||
_this2.setOpen(open); | ||
}; | ||
this.getCalendarElement = function () { | ||
var props = _this2.props; | ||
var state = _this2.state; | ||
var calendarProps = props.calendar.props; | ||
var value = state.value; | ||
var defaultValue = value; | ||
var extraProps = { | ||
ref: _this2.saveCalendarRef, | ||
defaultValue: defaultValue || calendarProps.defaultValue, | ||
selectedValue: value, | ||
onKeyDown: _this2.onCalendarKeyDown, | ||
onOk: createChainedFunction(calendarProps.onOk, _this2.onCalendarOk), | ||
onSelect: createChainedFunction(calendarProps.onSelect, _this2.onCalendarSelect), | ||
onClear: createChainedFunction(calendarProps.onClear, _this2.onCalendarClear) | ||
}; | ||
return React.cloneElement(props.calendar, extraProps); | ||
}; | ||
this.setOpen = function (open, callback) { | ||
var onOpenChange = _this2.props.onOpenChange; | ||
if (_this2.state.open !== open) { | ||
if (!('open' in _this2.props)) { | ||
_this2.setState({ | ||
open: open | ||
}, callback); | ||
} | ||
onOpenChange(open); | ||
} | ||
}; | ||
this.open = function (callback) { | ||
_this2.setOpen(true, callback); | ||
}; | ||
this.close = function (callback) { | ||
_this2.setOpen(false, callback); | ||
}; | ||
this.focus = function () { | ||
if (!_this2.state.open) { | ||
ReactDOM.findDOMNode(_this2).focus(); | ||
} | ||
}; | ||
this.focusCalendar = function () { | ||
if (_this2.state.open && !!_this2.calendarInstance) { | ||
_this2.calendarInstance.focus(); | ||
} | ||
}; | ||
}; | ||
export default Picker; |
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -10,26 +12,12 @@ import CalendarHeader from '../calendar/CalendarHeader'; | ||
var CalendarPart = createReactClass({ | ||
displayName: 'CalendarPart', | ||
var CalendarPart = function (_React$Component) { | ||
_inherits(CalendarPart, _React$Component); | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
value: PropTypes.any, | ||
hoverValue: PropTypes.any, | ||
selectedValue: PropTypes.any, | ||
direction: PropTypes.any, | ||
locale: PropTypes.any, | ||
showDateInput: PropTypes.bool, | ||
showTimePicker: PropTypes.bool, | ||
format: PropTypes.any, | ||
placeholder: PropTypes.any, | ||
disabledDate: PropTypes.any, | ||
timePicker: PropTypes.any, | ||
disabledTime: PropTypes.any, | ||
onInputSelect: PropTypes.func, | ||
timePickerDisabledTime: PropTypes.object, | ||
enableNext: PropTypes.any, | ||
enablePrev: PropTypes.any, | ||
clearIcon: PropTypes.node | ||
}, | ||
render: function render() { | ||
function CalendarPart() { | ||
_classCallCheck(this, CalendarPart); | ||
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); | ||
} | ||
CalendarPart.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -131,5 +119,27 @@ var prefixCls = props.prefixCls, | ||
); | ||
} | ||
}); | ||
}; | ||
return CalendarPart; | ||
}(React.Component); | ||
CalendarPart.propTypes = { | ||
prefixCls: PropTypes.string, | ||
value: PropTypes.any, | ||
hoverValue: PropTypes.any, | ||
selectedValue: PropTypes.any, | ||
direction: PropTypes.any, | ||
locale: PropTypes.any, | ||
showDateInput: PropTypes.bool, | ||
showTimePicker: PropTypes.bool, | ||
format: PropTypes.any, | ||
placeholder: PropTypes.any, | ||
disabledDate: PropTypes.any, | ||
timePicker: PropTypes.any, | ||
disabledTime: PropTypes.any, | ||
onInputSelect: PropTypes.func, | ||
timePickerDisabledTime: PropTypes.object, | ||
enableNext: PropTypes.any, | ||
enablePrev: PropTypes.any, | ||
clearIcon: PropTypes.node | ||
}; | ||
export default CalendarPart; |
import _extends from 'babel-runtime/helpers/extends'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import PropTypes from 'prop-types'; | ||
@@ -12,3 +14,3 @@ import moment from 'moment'; | ||
import TimePickerButton from './calendar/TimePickerButton'; | ||
import CommonMixin from './mixin/CommonMixin'; | ||
import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin'; | ||
import { syncTime, getTodayTime, isAllowedDate } from './util'; | ||
@@ -78,56 +80,15 @@ import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime'; | ||
var RangeCalendar = createReactClass({ | ||
displayName: 'RangeCalendar', | ||
var RangeCalendar = function (_React$Component) { | ||
_inherits(RangeCalendar, _React$Component); | ||
propTypes: { | ||
prefixCls: PropTypes.string, | ||
dateInputPlaceholder: PropTypes.any, | ||
seperator: PropTypes.string, | ||
defaultValue: PropTypes.any, | ||
value: PropTypes.any, | ||
hoverValue: PropTypes.any, | ||
mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])), | ||
showDateInput: PropTypes.bool, | ||
timePicker: PropTypes.any, | ||
showOk: PropTypes.bool, | ||
showToday: PropTypes.bool, | ||
defaultSelectedValue: PropTypes.array, | ||
selectedValue: PropTypes.array, | ||
onOk: PropTypes.func, | ||
showClear: PropTypes.bool, | ||
locale: PropTypes.object, | ||
onChange: PropTypes.func, | ||
onSelect: PropTypes.func, | ||
onValueChange: PropTypes.func, | ||
onHoverChange: PropTypes.func, | ||
onPanelChange: PropTypes.func, | ||
format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), | ||
onClear: PropTypes.func, | ||
type: PropTypes.any, | ||
disabledDate: PropTypes.func, | ||
disabledTime: PropTypes.func, | ||
clearIcon: PropTypes.node | ||
}, | ||
function RangeCalendar(props) { | ||
_classCallCheck(this, RangeCalendar); | ||
mixins: [CommonMixin], | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
type: 'both', | ||
seperator: '~', | ||
defaultSelectedValue: [], | ||
onValueChange: noop, | ||
onHoverChange: noop, | ||
onPanelChange: noop, | ||
disabledTime: noop, | ||
onInputSelect: noop, | ||
showToday: true, | ||
showDateInput: true | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
_initialiseProps.call(_this); | ||
var selectedValue = props.selectedValue || props.defaultSelectedValue; | ||
var value = normalizeAnchor(props, 1); | ||
return { | ||
_this.state = { | ||
selectedValue: selectedValue, | ||
@@ -141,13 +102,12 @@ prevSelectedValue: selectedValue, | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var state = this.state; | ||
return _this; | ||
} | ||
RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
if ('value' in nextProps) { | ||
newState.value = normalizeAnchor(nextProps, 0); | ||
this.setState(newState); | ||
} | ||
if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) { | ||
this.setState({ hoverValue: nextProps.hoverValue }); | ||
newState.hoverValue = nextProps.hoverValue; | ||
} | ||
@@ -157,21 +117,236 @@ if ('selectedValue' in nextProps) { | ||
newState.prevSelectedValue = nextProps.selectedValue; | ||
this.setState(newState); | ||
} | ||
if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) { | ||
this.setState({ mode: nextProps.mode }); | ||
newState = { mode: nextProps.mode }; | ||
} | ||
}, | ||
onDatePanelEnter: function onDatePanelEnter() { | ||
if (this.hasSelectedValue()) { | ||
this.fireHoverValueChange(this.state.selectedValue.concat()); | ||
return newState; | ||
}; | ||
// get disabled hours for second picker | ||
RangeCalendar.prototype.render = function render() { | ||
var _className, _classnames; | ||
var props = this.props, | ||
state = this.state; | ||
var prefixCls = props.prefixCls, | ||
dateInputPlaceholder = props.dateInputPlaceholder, | ||
seperator = props.seperator, | ||
timePicker = props.timePicker, | ||
showOk = props.showOk, | ||
locale = props.locale, | ||
showClear = props.showClear, | ||
showToday = props.showToday, | ||
type = props.type, | ||
clearIcon = props.clearIcon; | ||
var hoverValue = state.hoverValue, | ||
selectedValue = state.selectedValue, | ||
mode = state.mode, | ||
showTimePicker = state.showTimePicker; | ||
var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className); | ||
var classes = classnames(className); | ||
var newProps = { | ||
selectedValue: state.selectedValue, | ||
onSelect: this.onSelect, | ||
onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined | ||
}; | ||
var placeholder1 = void 0; | ||
var placeholder2 = void 0; | ||
if (dateInputPlaceholder) { | ||
if (Array.isArray(dateInputPlaceholder)) { | ||
placeholder1 = dateInputPlaceholder[0]; | ||
placeholder2 = dateInputPlaceholder[1]; | ||
} else { | ||
placeholder1 = placeholder2 = dateInputPlaceholder; | ||
} | ||
} | ||
}, | ||
onDatePanelLeave: function onDatePanelLeave() { | ||
if (this.hasSelectedValue()) { | ||
this.fireHoverValueChange([]); | ||
var showOkButton = showOk === true || showOk !== false && !!timePicker; | ||
var cls = classnames((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames)); | ||
var startValue = this.getStartValue(); | ||
var endValue = this.getEndValue(); | ||
var todayTime = getTodayTime(startValue); | ||
var thisMonth = todayTime.month(); | ||
var thisYear = todayTime.year(); | ||
var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth; | ||
var nextMonthOfStart = startValue.clone().add(1, 'months'); | ||
var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month(); | ||
// console.warn('Render:', selectedValue.map(t => t.format('YYYY-MM-DD')).join(', ')); | ||
// console.log('start:', startValue.format('YYYY-MM-DD')); | ||
// console.log('end:', endValue.format('YYYY-MM-DD')); | ||
var extraFooter = props.renderFooter(); | ||
return React.createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: classes, | ||
style: props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
props.renderSidebar(), | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-panel' }, | ||
showClear && selectedValue[0] && selectedValue[1] ? React.createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.clear | ||
}, | ||
clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null, | ||
React.createElement( | ||
'div', | ||
{ | ||
className: prefixCls + '-date-panel', | ||
onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined, | ||
onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined | ||
}, | ||
React.createElement(CalendarPart, _extends({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'left', | ||
disabledTime: this.disabledStartTime, | ||
disabledMonth: this.disabledStartMonth, | ||
format: this.getFormat(), | ||
value: startValue, | ||
mode: mode[0], | ||
placeholder: placeholder1, | ||
onInputSelect: this.onStartInputSelect, | ||
onValueChange: this.onStartValueChange, | ||
onPanelChange: this.onStartPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
enablePrev: true, | ||
enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]), | ||
clearIcon: clearIcon | ||
})), | ||
React.createElement( | ||
'span', | ||
{ className: prefixCls + '-range-middle' }, | ||
seperator | ||
), | ||
React.createElement(CalendarPart, _extends({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'right', | ||
format: this.getFormat(), | ||
timePickerDisabledTime: this.getEndDisableTime(), | ||
placeholder: placeholder2, | ||
value: endValue, | ||
mode: mode[1], | ||
onInputSelect: this.onEndInputSelect, | ||
onValueChange: this.onEndValueChange, | ||
onPanelChange: this.onEndPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
disabledTime: this.disabledEndTime, | ||
disabledMonth: this.disabledEndMonth, | ||
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]), | ||
enableNext: true, | ||
clearIcon: clearIcon | ||
})) | ||
), | ||
React.createElement( | ||
'div', | ||
{ className: cls }, | ||
showToday || props.timePicker || showOkButton || extraFooter ? React.createElement( | ||
'div', | ||
{ className: prefixCls + '-footer-btn' }, | ||
extraFooter, | ||
showToday ? React.createElement(TodayButton, _extends({}, props, { | ||
disabled: isTodayInView, | ||
value: state.value[0], | ||
onToday: this.onToday, | ||
text: locale.backToToday | ||
})) : null, | ||
props.timePicker ? React.createElement(TimePickerButton, _extends({}, props, { | ||
showTimePicker: showTimePicker, | ||
onOpenTimePicker: this.onOpenTimePicker, | ||
onCloseTimePicker: this.onCloseTimePicker, | ||
timePickerDisabled: !this.hasSelectedValue() || hoverValue.length | ||
})) : null, | ||
showOkButton ? React.createElement(OkButton, _extends({}, props, { | ||
onOk: this.onOk, | ||
okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length | ||
})) : null | ||
) : null | ||
) | ||
) | ||
); | ||
}; | ||
return RangeCalendar; | ||
}(React.Component); | ||
RangeCalendar.propTypes = _extends({}, propType, { | ||
prefixCls: PropTypes.string, | ||
dateInputPlaceholder: PropTypes.any, | ||
seperator: PropTypes.string, | ||
defaultValue: PropTypes.any, | ||
value: PropTypes.any, | ||
hoverValue: PropTypes.any, | ||
mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])), | ||
showDateInput: PropTypes.bool, | ||
timePicker: PropTypes.any, | ||
showOk: PropTypes.bool, | ||
showToday: PropTypes.bool, | ||
defaultSelectedValue: PropTypes.array, | ||
selectedValue: PropTypes.array, | ||
onOk: PropTypes.func, | ||
showClear: PropTypes.bool, | ||
locale: PropTypes.object, | ||
onChange: PropTypes.func, | ||
onSelect: PropTypes.func, | ||
onValueChange: PropTypes.func, | ||
onHoverChange: PropTypes.func, | ||
onPanelChange: PropTypes.func, | ||
format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), | ||
onClear: PropTypes.func, | ||
type: PropTypes.any, | ||
disabledDate: PropTypes.func, | ||
disabledTime: PropTypes.func, | ||
clearIcon: PropTypes.node, | ||
onKeyDown: PropTypes.func | ||
}); | ||
RangeCalendar.defaultProps = _extends({}, defaultProp, { | ||
type: 'both', | ||
seperator: '~', | ||
defaultSelectedValue: [], | ||
onValueChange: noop, | ||
onHoverChange: noop, | ||
onPanelChange: noop, | ||
disabledTime: noop, | ||
onInputSelect: noop, | ||
showToday: true, | ||
showDateInput: true | ||
}); | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onDatePanelEnter = function () { | ||
if (_this2.hasSelectedValue()) { | ||
_this2.fireHoverValueChange(_this2.state.selectedValue.concat()); | ||
} | ||
}, | ||
onSelect: function onSelect(value) { | ||
var type = this.props.type; | ||
var _state = this.state, | ||
}; | ||
this.onDatePanelLeave = function () { | ||
if (_this2.hasSelectedValue()) { | ||
_this2.fireHoverValueChange([]); | ||
} | ||
}; | ||
this.onSelect = function (value) { | ||
var type = _this2.props.type; | ||
var _state = _this2.state, | ||
selectedValue = _state.selectedValue, | ||
@@ -186,3 +361,3 @@ prevSelectedValue = _state.prevSelectedValue, | ||
nextSelectedValue = [value]; | ||
} else if (this.compare(firstSelectedValue, value) < 0) { | ||
} else if (_this2.compare(firstSelectedValue, value) < 0) { | ||
syncTime(prevSelectedValue[1], value); | ||
@@ -198,7 +373,7 @@ nextSelectedValue = [firstSelectedValue, value]; | ||
var endValue = selectedValue[1]; | ||
nextSelectedValue = endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value]; | ||
nextSelectedValue = endValue && _this2.compare(endValue, value) > 0 ? [value, endValue] : [value]; | ||
} else { | ||
// type === 'end' | ||
var startValue = selectedValue[0]; | ||
if (startValue && this.compare(startValue, value) <= 0) { | ||
if (startValue && _this2.compare(startValue, value) <= 0) { | ||
syncTime(prevSelectedValue[1], value); | ||
@@ -212,7 +387,6 @@ nextSelectedValue = [startValue, value]; | ||
this.fireSelectValueChange(nextSelectedValue); | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
var _this = this; | ||
_this2.fireSelectValueChange(nextSelectedValue); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
@@ -226,3 +400,3 @@ return; | ||
var _state2 = this.state, | ||
var _state2 = _this2.state, | ||
selectedValue = _state2.selectedValue, | ||
@@ -232,3 +406,3 @@ hoverValue = _state2.hoverValue, | ||
value = _state2.value; | ||
var _props = this.props, | ||
var _props = _this2.props, | ||
onKeyDown = _props.onKeyDown, | ||
@@ -249,3 +423,3 @@ disabledDate = _props.disabledDate; | ||
nextHoverValue = [nextHoverTime]; | ||
_this.fireHoverValueChange(nextHoverValue); | ||
_this2.fireHoverValueChange(nextHoverValue); | ||
} else { | ||
@@ -255,7 +429,7 @@ if (hoverValue.length === 1) { | ||
nextHoverTime = func(currentHoverTime); | ||
nextHoverValue = _this.onDayHover(nextHoverTime); | ||
nextHoverValue = _this2.onDayHover(nextHoverTime); | ||
} else { | ||
currentHoverTime = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0]; | ||
nextHoverTime = func(currentHoverTime); | ||
nextHoverValue = _this.onDayHover(nextHoverTime); | ||
nextHoverValue = _this2.onDayHover(nextHoverTime); | ||
} | ||
@@ -276,3 +450,3 @@ } | ||
} | ||
_this.fireValueChange(newValue); | ||
_this2.fireValueChange(newValue); | ||
} | ||
@@ -291,3 +465,3 @@ } else if (nextHoverValue.length === 1) { | ||
_newValue[oriValueIndex] = nextHoverTime.clone(); | ||
_this.fireValueChange(_newValue); | ||
_this2.fireValueChange(_newValue); | ||
} | ||
@@ -367,3 +541,3 @@ } | ||
if (lastValue && (!disabledDate || !disabledDate(lastValue))) { | ||
this.onSelect(lastValue); | ||
_this2.onSelect(lastValue); | ||
} | ||
@@ -378,50 +552,56 @@ event.preventDefault(); | ||
} | ||
}, | ||
onDayHover: function onDayHover(value) { | ||
}; | ||
this.onDayHover = function (value) { | ||
var hoverValue = []; | ||
var _state3 = this.state, | ||
var _state3 = _this2.state, | ||
selectedValue = _state3.selectedValue, | ||
firstSelectedValue = _state3.firstSelectedValue; | ||
var type = this.props.type; | ||
var type = _this2.props.type; | ||
if (type === 'start' && selectedValue[1]) { | ||
hoverValue = this.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value]; | ||
hoverValue = _this2.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value]; | ||
} else if (type === 'end' && selectedValue[0]) { | ||
hoverValue = this.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : []; | ||
hoverValue = _this2.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : []; | ||
} else { | ||
if (!firstSelectedValue) { | ||
if (this.state.hoverValue.length) { | ||
this.setState({ hoverValue: [] }); | ||
if (_this2.state.hoverValue.length) { | ||
_this2.setState({ hoverValue: [] }); | ||
} | ||
return hoverValue; | ||
} | ||
hoverValue = this.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value]; | ||
hoverValue = _this2.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value]; | ||
} | ||
this.fireHoverValueChange(hoverValue); | ||
_this2.fireHoverValueChange(hoverValue); | ||
return hoverValue; | ||
}, | ||
onToday: function onToday() { | ||
var startValue = getTodayTime(this.state.value[0]); | ||
}; | ||
this.onToday = function () { | ||
var startValue = getTodayTime(_this2.state.value[0]); | ||
var endValue = startValue.clone().add(1, 'months'); | ||
this.setState({ value: [startValue, endValue] }); | ||
}, | ||
onOpenTimePicker: function onOpenTimePicker() { | ||
this.setState({ | ||
_this2.setState({ value: [startValue, endValue] }); | ||
}; | ||
this.onOpenTimePicker = function () { | ||
_this2.setState({ | ||
showTimePicker: true | ||
}); | ||
}, | ||
onCloseTimePicker: function onCloseTimePicker() { | ||
this.setState({ | ||
}; | ||
this.onCloseTimePicker = function () { | ||
_this2.setState({ | ||
showTimePicker: false | ||
}); | ||
}, | ||
onOk: function onOk() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
if (this.isAllowedDateAndTime(selectedValue)) { | ||
this.props.onOk(this.state.selectedValue); | ||
this.onOk = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
if (_this2.isAllowedDateAndTime(selectedValue)) { | ||
_this2.props.onOk(_this2.state.selectedValue); | ||
} | ||
}, | ||
onStartInputSelect: function onStartInputSelect() { | ||
}; | ||
this.onStartInputSelect = function () { | ||
for (var _len = arguments.length, oargs = Array(_len), _key = 0; _key < _len; _key++) { | ||
@@ -432,5 +612,6 @@ oargs[_key] = arguments[_key]; | ||
var args = ['left'].concat(oargs); | ||
return onInputSelect.apply(this, args); | ||
}, | ||
onEndInputSelect: function onEndInputSelect() { | ||
return onInputSelect.apply(_this2, args); | ||
}; | ||
this.onEndInputSelect = function () { | ||
for (var _len2 = arguments.length, oargs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
@@ -441,21 +622,24 @@ oargs[_key2] = arguments[_key2]; | ||
var args = ['right'].concat(oargs); | ||
return onInputSelect.apply(this, args); | ||
}, | ||
onStartValueChange: function onStartValueChange(leftValue) { | ||
var value = [].concat(this.state.value); | ||
return onInputSelect.apply(_this2, args); | ||
}; | ||
this.onStartValueChange = function (leftValue) { | ||
var value = [].concat(_this2.state.value); | ||
value[0] = leftValue; | ||
return this.fireValueChange(value); | ||
}, | ||
onEndValueChange: function onEndValueChange(rightValue) { | ||
var value = [].concat(this.state.value); | ||
return _this2.fireValueChange(value); | ||
}; | ||
this.onEndValueChange = function (rightValue) { | ||
var value = [].concat(_this2.state.value); | ||
value[1] = rightValue; | ||
return this.fireValueChange(value); | ||
}, | ||
onStartPanelChange: function onStartPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
return _this2.fireValueChange(value); | ||
}; | ||
this.onStartPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
var newMode = [mode, state.mode[1]]; | ||
if (!('mode' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
mode: newMode | ||
@@ -466,10 +650,11 @@ }); | ||
props.onPanelChange(newValue, newMode); | ||
}, | ||
onEndPanelChange: function onEndPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
}; | ||
this.onEndPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
var newMode = [state.mode[0], mode]; | ||
if (!('mode' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
mode: newMode | ||
@@ -480,18 +665,20 @@ }); | ||
props.onPanelChange(newValue, newMode); | ||
}, | ||
getStartValue: function getStartValue() { | ||
var value = this.state.value[0]; | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
this.getStartValue = function () { | ||
var value = _this2.state.value[0]; | ||
var selectedValue = _this2.state.selectedValue; | ||
// keep selectedTime when select date | ||
if (selectedValue[0] && this.props.timePicker) { | ||
if (selectedValue[0] && _this2.props.timePicker) { | ||
value = value.clone(); | ||
syncTime(selectedValue[0], value); | ||
} | ||
if (this.state.showTimePicker && selectedValue[0]) { | ||
if (_this2.state.showTimePicker && selectedValue[0]) { | ||
return selectedValue[0]; | ||
} | ||
return value; | ||
}, | ||
getEndValue: function getEndValue() { | ||
var _state4 = this.state, | ||
}; | ||
this.getEndValue = function () { | ||
var _state4 = _this2.state, | ||
value = _state4.value, | ||
@@ -503,17 +690,16 @@ selectedValue = _state4.selectedValue, | ||
// keep selectedTime when select date | ||
if (selectedValue[1] && this.props.timePicker) { | ||
if (selectedValue[1] && _this2.props.timePicker) { | ||
syncTime(selectedValue[1], endValue); | ||
} | ||
if (showTimePicker) { | ||
return selectedValue[1] ? selectedValue[1] : this.getStartValue(); | ||
return selectedValue[1] ? selectedValue[1] : _this2.getStartValue(); | ||
} | ||
return endValue; | ||
}, | ||
}; | ||
// get disabled hours for second picker | ||
getEndDisableTime: function getEndDisableTime() { | ||
var _state5 = this.state, | ||
this.getEndDisableTime = function () { | ||
var _state5 = _this2.state, | ||
selectedValue = _state5.selectedValue, | ||
value = _state5.value; | ||
var disabledTime = this.props.disabledTime; | ||
var disabledTime = _this2.props.disabledTime; | ||
@@ -556,24 +742,29 @@ var userSettingDisabledTime = disabledTime(selectedValue, 'end') || {}; | ||
return userSettingDisabledTime; | ||
}, | ||
isAllowedDateAndTime: function isAllowedDateAndTime(selectedValue) { | ||
return isAllowedDate(selectedValue[0], this.props.disabledDate, this.disabledStartTime) && isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime); | ||
}, | ||
isMonthYearPanelShow: function isMonthYearPanelShow(mode) { | ||
}; | ||
this.isAllowedDateAndTime = function (selectedValue) { | ||
return isAllowedDate(selectedValue[0], _this2.props.disabledDate, _this2.disabledStartTime) && isAllowedDate(selectedValue[1], _this2.props.disabledDate, _this2.disabledEndTime); | ||
}; | ||
this.isMonthYearPanelShow = function (mode) { | ||
return ['month', 'year', 'decade'].indexOf(mode) > -1; | ||
}, | ||
hasSelectedValue: function hasSelectedValue() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
this.hasSelectedValue = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
return !!selectedValue[1] && !!selectedValue[0]; | ||
}, | ||
compare: function compare(v1, v2) { | ||
if (this.props.timePicker) { | ||
}; | ||
this.compare = function (v1, v2) { | ||
if (_this2.props.timePicker) { | ||
return v1.diff(v2); | ||
} | ||
return v1.diff(v2, 'days'); | ||
}, | ||
fireSelectValueChange: function fireSelectValueChange(selectedValue, direct) { | ||
var timePicker = this.props.timePicker; | ||
var prevSelectedValue = this.state.prevSelectedValue; | ||
}; | ||
this.fireSelectValueChange = function (selectedValue, direct) { | ||
var timePicker = _this2.props.timePicker; | ||
var prevSelectedValue = _this2.state.prevSelectedValue; | ||
if (timePicker && timePicker.props.defaultValue) { | ||
@@ -589,4 +780,4 @@ var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (!('selectedValue' in this.props)) { | ||
this.setState({ | ||
if (!('selectedValue' in _this2.props)) { | ||
_this2.setState({ | ||
selectedValue: selectedValue | ||
@@ -597,6 +788,6 @@ }); | ||
// 尚未选择过时间,直接输入的话 | ||
if (!this.state.selectedValue[0] || !this.state.selectedValue[1]) { | ||
if (!_this2.state.selectedValue[0] || !_this2.state.selectedValue[1]) { | ||
var startValue = selectedValue[0] || moment(); | ||
var endValue = selectedValue[1] || startValue.clone().add(1, 'months'); | ||
this.setState({ | ||
_this2.setState({ | ||
selectedValue: selectedValue, | ||
@@ -608,19 +799,20 @@ value: getValueFromSelectedValue([startValue, endValue]) | ||
if (selectedValue[0] && !selectedValue[1]) { | ||
this.setState({ firstSelectedValue: selectedValue[0] }); | ||
this.fireHoverValueChange(selectedValue.concat()); | ||
_this2.setState({ firstSelectedValue: selectedValue[0] }); | ||
_this2.fireHoverValueChange(selectedValue.concat()); | ||
} | ||
this.props.onChange(selectedValue); | ||
_this2.props.onChange(selectedValue); | ||
if (direct || selectedValue[0] && selectedValue[1]) { | ||
this.setState({ | ||
_this2.setState({ | ||
prevSelectedValue: selectedValue, | ||
firstSelectedValue: null | ||
}); | ||
this.fireHoverValueChange([]); | ||
this.props.onSelect(selectedValue); | ||
_this2.fireHoverValueChange([]); | ||
_this2.props.onSelect(selectedValue); | ||
} | ||
}, | ||
fireValueChange: function fireValueChange(value) { | ||
var props = this.props; | ||
}; | ||
this.fireValueChange = function (value) { | ||
var props = _this2.props; | ||
if (!('value' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
value: value | ||
@@ -630,191 +822,38 @@ }); | ||
props.onValueChange(value); | ||
}, | ||
fireHoverValueChange: function fireHoverValueChange(hoverValue) { | ||
var props = this.props; | ||
}; | ||
this.fireHoverValueChange = function (hoverValue) { | ||
var props = _this2.props; | ||
if (!('hoverValue' in props)) { | ||
this.setState({ hoverValue: hoverValue }); | ||
_this2.setState({ hoverValue: hoverValue }); | ||
} | ||
props.onHoverChange(hoverValue); | ||
}, | ||
clear: function clear() { | ||
this.fireSelectValueChange([], true); | ||
this.props.onClear(); | ||
}, | ||
disabledStartTime: function disabledStartTime(time) { | ||
return this.props.disabledTime(time, 'start'); | ||
}, | ||
disabledEndTime: function disabledEndTime(time) { | ||
return this.props.disabledTime(time, 'end'); | ||
}, | ||
disabledStartMonth: function disabledStartMonth(month) { | ||
var value = this.state.value; | ||
}; | ||
return month.isSameOrAfter(value[1], 'month'); | ||
}, | ||
disabledEndMonth: function disabledEndMonth(month) { | ||
var value = this.state.value; | ||
this.clear = function () { | ||
_this2.fireSelectValueChange([], true); | ||
_this2.props.onClear(); | ||
}; | ||
return month.isSameOrBefore(value[0], 'month'); | ||
}, | ||
render: function render() { | ||
var _className, _classnames; | ||
this.disabledStartTime = function (time) { | ||
return _this2.props.disabledTime(time, 'start'); | ||
}; | ||
var props = this.props, | ||
state = this.state; | ||
var prefixCls = props.prefixCls, | ||
dateInputPlaceholder = props.dateInputPlaceholder, | ||
seperator = props.seperator, | ||
timePicker = props.timePicker, | ||
showOk = props.showOk, | ||
locale = props.locale, | ||
showClear = props.showClear, | ||
showToday = props.showToday, | ||
type = props.type, | ||
clearIcon = props.clearIcon; | ||
var hoverValue = state.hoverValue, | ||
selectedValue = state.selectedValue, | ||
mode = state.mode, | ||
showTimePicker = state.showTimePicker; | ||
this.disabledEndTime = function (time) { | ||
return _this2.props.disabledTime(time, 'end'); | ||
}; | ||
var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className); | ||
var classes = classnames(className); | ||
var newProps = { | ||
selectedValue: state.selectedValue, | ||
onSelect: this.onSelect, | ||
onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined | ||
}; | ||
this.disabledStartMonth = function (month) { | ||
var value = _this2.state.value; | ||
var placeholder1 = void 0; | ||
var placeholder2 = void 0; | ||
return month.isSameOrAfter(value[1], 'month'); | ||
}; | ||
if (dateInputPlaceholder) { | ||
if (Array.isArray(dateInputPlaceholder)) { | ||
placeholder1 = dateInputPlaceholder[0]; | ||
placeholder2 = dateInputPlaceholder[1]; | ||
} else { | ||
placeholder1 = placeholder2 = dateInputPlaceholder; | ||
} | ||
} | ||
var showOkButton = showOk === true || showOk !== false && !!timePicker; | ||
var cls = classnames((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames)); | ||
this.disabledEndMonth = function (month) { | ||
var value = _this2.state.value; | ||
var startValue = this.getStartValue(); | ||
var endValue = this.getEndValue(); | ||
var todayTime = getTodayTime(startValue); | ||
var thisMonth = todayTime.month(); | ||
var thisYear = todayTime.year(); | ||
var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth; | ||
var nextMonthOfStart = startValue.clone().add(1, 'months'); | ||
var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month(); | ||
return month.isSameOrBefore(value[0], 'month'); | ||
}; | ||
}; | ||
// console.warn('Render:', selectedValue.map(t => t.format('YYYY-MM-DD')).join(', ')); | ||
// console.log('start:', startValue.format('YYYY-MM-DD')); | ||
// console.log('end:', endValue.format('YYYY-MM-DD')); | ||
var extraFooter = props.renderFooter(); | ||
return React.createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: classes, | ||
style: props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
props.renderSidebar(), | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-panel' }, | ||
showClear && selectedValue[0] && selectedValue[1] ? React.createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.clear | ||
}, | ||
clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null, | ||
React.createElement( | ||
'div', | ||
{ | ||
className: prefixCls + '-date-panel', | ||
onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined, | ||
onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined | ||
}, | ||
React.createElement(CalendarPart, _extends({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'left', | ||
disabledTime: this.disabledStartTime, | ||
disabledMonth: this.disabledStartMonth, | ||
format: this.getFormat(), | ||
value: startValue, | ||
mode: mode[0], | ||
placeholder: placeholder1, | ||
onInputSelect: this.onStartInputSelect, | ||
onValueChange: this.onStartValueChange, | ||
onPanelChange: this.onStartPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
enablePrev: true, | ||
enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]), | ||
clearIcon: clearIcon | ||
})), | ||
React.createElement( | ||
'span', | ||
{ className: prefixCls + '-range-middle' }, | ||
seperator | ||
), | ||
React.createElement(CalendarPart, _extends({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'right', | ||
format: this.getFormat(), | ||
timePickerDisabledTime: this.getEndDisableTime(), | ||
placeholder: placeholder2, | ||
value: endValue, | ||
mode: mode[1], | ||
onInputSelect: this.onEndInputSelect, | ||
onValueChange: this.onEndValueChange, | ||
onPanelChange: this.onEndPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
disabledTime: this.disabledEndTime, | ||
disabledMonth: this.disabledEndMonth, | ||
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]), | ||
enableNext: true, | ||
clearIcon: clearIcon | ||
})) | ||
), | ||
React.createElement( | ||
'div', | ||
{ className: cls }, | ||
showToday || props.timePicker || showOkButton || extraFooter ? React.createElement( | ||
'div', | ||
{ className: prefixCls + '-footer-btn' }, | ||
extraFooter, | ||
showToday ? React.createElement(TodayButton, _extends({}, props, { | ||
disabled: isTodayInView, | ||
value: state.value[0], | ||
onToday: this.onToday, | ||
text: locale.backToToday | ||
})) : null, | ||
props.timePicker ? React.createElement(TimePickerButton, _extends({}, props, { | ||
showTimePicker: showTimePicker, | ||
onOpenTimePicker: this.onOpenTimePicker, | ||
onCloseTimePicker: this.onCloseTimePicker, | ||
timePickerDisabled: !this.hasSelectedValue() || hoverValue.length | ||
})) : null, | ||
showOkButton ? React.createElement(OkButton, _extends({}, props, { | ||
onOk: this.onOk, | ||
okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length | ||
})) : null | ||
) : null | ||
) | ||
) | ||
); | ||
} | ||
}); | ||
export default RangeCalendar; | ||
export default commonMixinWrapper(RangeCalendar); |
# History | ||
---- | ||
## 9.10.0 / 2019-01-02 | ||
- add `focusablePanel` prop. | ||
## 9.9.0 / 2018-12-23 | ||
@@ -5,0 +9,0 @@ |
@@ -32,4 +32,4 @@ // Type definitions for rc-calendar 9.6 | ||
onPanelChange?: (date: Moment, mode: Mode) => void; | ||
disabledDate?: (current: Moment) => boolean; | ||
disabledTime?: (current: Moment) => object; | ||
disabledDate?: (current: Moment | undefined) => boolean; | ||
disabledTime?: (current: Moment | undefined) => object; | ||
dateRender?: (current: Moment, value: Moment) => React.ReactNode; | ||
@@ -36,0 +36,0 @@ renderFooter?: () => React.ReactNode; |
@@ -9,2 +9,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -18,6 +30,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -45,8 +53,4 @@ | ||
var _CalendarMixin2 = _interopRequireDefault(_CalendarMixin); | ||
var _CommonMixin = require('./mixin/CommonMixin'); | ||
var _CommonMixin2 = _interopRequireDefault(_CommonMixin); | ||
var _DateInput = require('./date/DateInput'); | ||
@@ -60,2 +64,6 @@ | ||
var _moment = require('moment'); | ||
var _moment2 = _interopRequireDefault(_moment); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
@@ -65,177 +73,46 @@ | ||
var Calendar = (0, _createReactClass2['default'])({ | ||
displayName: 'Calendar', | ||
var Calendar = function (_React$Component) { | ||
(0, _inherits3['default'])(Calendar, _React$Component); | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
className: _propTypes2['default'].string, | ||
style: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
value: _propTypes2['default'].object, | ||
selectedValue: _propTypes2['default'].object, | ||
mode: _propTypes2['default'].oneOf(['time', 'date', 'month', 'year', 'decade']), | ||
locale: _propTypes2['default'].object, | ||
showDateInput: _propTypes2['default'].bool, | ||
showWeekNumber: _propTypes2['default'].bool, | ||
showToday: _propTypes2['default'].bool, | ||
showOk: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
onOk: _propTypes2['default'].func, | ||
onKeyDown: _propTypes2['default'].func, | ||
timePicker: _propTypes2['default'].element, | ||
dateInputPlaceholder: _propTypes2['default'].any, | ||
onClear: _propTypes2['default'].func, | ||
onChange: _propTypes2['default'].func, | ||
onPanelChange: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
disabledTime: _propTypes2['default'].any, | ||
dateRender: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func, | ||
renderSidebar: _propTypes2['default'].func, | ||
clearIcon: _propTypes2['default'].node | ||
}, | ||
function Calendar(props) { | ||
(0, _classCallCheck3['default'])(this, Calendar); | ||
mixins: [_CommonMixin2['default'], _CalendarMixin2['default']], | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
showToday: true, | ||
showDateInput: true, | ||
timePicker: null, | ||
onOk: noop, | ||
onPanelChange: noop | ||
_initialiseProps.call(_this); | ||
_this.state = { | ||
mode: _this.props.mode || 'date', | ||
value: props.value || props.defaultValue || (0, _moment2['default'])(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
return { | ||
mode: this.props.mode || 'date' | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
if ('mode' in nextProps && this.state.mode !== nextProps.mode) { | ||
this.setState({ mode: nextProps.mode }); | ||
} | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
return undefined; | ||
} | ||
var keyCode = event.keyCode; | ||
// mac | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var disabledDate = this.props.disabledDate; | ||
var value = this.state.value; | ||
return _this; | ||
} | ||
switch (keyCode) { | ||
case _KeyCode2['default'].DOWN: | ||
this.goTime(1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].UP: | ||
this.goTime(-1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].LEFT: | ||
if (ctrlKey) { | ||
this.goTime(-1, 'years'); | ||
} else { | ||
this.goTime(-1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].RIGHT: | ||
if (ctrlKey) { | ||
this.goTime(1, 'years'); | ||
} else { | ||
this.goTime(1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].HOME: | ||
this.setValue((0, _toTime.goStartMonth)(this.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].END: | ||
this.setValue((0, _toTime.goEndMonth)(this.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].PAGE_DOWN: | ||
this.goTime(1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].PAGE_UP: | ||
this.goTime(-1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].ENTER: | ||
if (!disabledDate || !disabledDate(value)) { | ||
this.onSelect(value, { | ||
source: 'keyboard' | ||
}); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
this.props.onKeyDown(event); | ||
return 1; | ||
Calendar.prototype.componentDidMount = function componentDidMount() { | ||
if (this.props.showDateInput) { | ||
this.saveFocusElement(_DateInput2['default'].getInstance()); | ||
} | ||
}, | ||
onClear: function onClear() { | ||
this.onSelect(null); | ||
this.props.onClear(); | ||
}, | ||
onOk: function onOk() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
if (this.isAllowedDate(selectedValue)) { | ||
this.props.onOk(selectedValue); | ||
} | ||
}, | ||
onDateInputChange: function onDateInputChange(value) { | ||
this.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}, | ||
onDateTableSelect: function onDateTableSelect(value) { | ||
var timePicker = this.props.timePicker; | ||
var selectedValue = this.state.selectedValue; | ||
Calendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var value = nextProps.value, | ||
selectedValue = nextProps.selectedValue; | ||
if (!selectedValue && timePicker) { | ||
var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (timePickerDefaultValue) { | ||
(0, _util.syncTime)(timePickerDefaultValue, value); | ||
} | ||
var newState = {}; | ||
if ('mode' in nextProps && state.mode !== nextProps.mode) { | ||
newState = { mode: nextProps.mode }; | ||
} | ||
this.onSelect(value); | ||
}, | ||
onToday: function onToday() { | ||
var value = this.state.value; | ||
if ('value' in nextProps) { | ||
newState.value = value || nextProps.defaultValue || (0, _CalendarMixin.getNowByCurrentStateValue)(state.value); | ||
} | ||
if ('selectedValue' in nextProps) { | ||
newState.selectedValue = selectedValue; | ||
} | ||
var now = (0, _util.getTodayTime)(value); | ||
this.onSelect(now, { | ||
source: 'todayButton' | ||
}); | ||
}, | ||
onPanelChange: function onPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
return newState; | ||
}; | ||
if (!('mode' in props)) { | ||
this.setState({ mode: mode }); | ||
} | ||
props.onPanelChange(value || state.value, mode); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
return _reactDom2['default'].findDOMNode(this); | ||
}, | ||
openTimePicker: function openTimePicker() { | ||
this.onPanelChange(null, 'time'); | ||
}, | ||
closeTimePicker: function closeTimePicker() { | ||
this.onPanelChange(null, 'date'); | ||
}, | ||
goTime: function goTime(direction, unit) { | ||
this.setValue((0, _toTime.goTime)(this.state.value, direction, unit)); | ||
}, | ||
render: function render() { | ||
Calendar.prototype.render = function render() { | ||
var props = this.props, | ||
@@ -293,3 +170,8 @@ state = this.state; | ||
}) : null; | ||
var children = [props.renderSidebar(), _react2['default'].createElement( | ||
var children = []; | ||
if (props.renderSidebar) { | ||
children.push(props.renderSidebar()); | ||
} | ||
children.push(_react2['default'].createElement( | ||
'div', | ||
@@ -300,3 +182,6 @@ { className: prefixCls + '-panel', key: 'panel' }, | ||
'div', | ||
{ className: prefixCls + '-date-panel' }, | ||
{ | ||
tabIndex: this.props.focusablePanel ? 0 : undefined, | ||
className: prefixCls + '-date-panel' | ||
}, | ||
_react2['default'].createElement(_CalendarHeader2['default'], { | ||
@@ -357,3 +242,3 @@ locale: locale, | ||
) | ||
)]; | ||
)); | ||
@@ -364,6 +249,189 @@ return this.renderRoot({ | ||
}); | ||
} | ||
}; | ||
return Calendar; | ||
}(_react2['default'].Component); | ||
Calendar.propTypes = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinPropTypes, _CommonMixin.propType, { | ||
prefixCls: _propTypes2['default'].string, | ||
className: _propTypes2['default'].string, | ||
style: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
value: _propTypes2['default'].object, | ||
selectedValue: _propTypes2['default'].object, | ||
defaultSelectedValue: _propTypes2['default'].object, | ||
mode: _propTypes2['default'].oneOf(['time', 'date', 'month', 'year', 'decade']), | ||
locale: _propTypes2['default'].object, | ||
showDateInput: _propTypes2['default'].bool, | ||
showWeekNumber: _propTypes2['default'].bool, | ||
showToday: _propTypes2['default'].bool, | ||
showOk: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
onOk: _propTypes2['default'].func, | ||
onKeyDown: _propTypes2['default'].func, | ||
timePicker: _propTypes2['default'].element, | ||
dateInputPlaceholder: _propTypes2['default'].any, | ||
onClear: _propTypes2['default'].func, | ||
onChange: _propTypes2['default'].func, | ||
onPanelChange: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
disabledTime: _propTypes2['default'].any, | ||
dateRender: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func, | ||
renderSidebar: _propTypes2['default'].func, | ||
clearIcon: _propTypes2['default'].node, | ||
focusablePanel: _propTypes2['default'].bool | ||
}); | ||
Calendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinDefaultProps, _CommonMixin.defaultProp, { | ||
showToday: true, | ||
showDateInput: true, | ||
timePicker: null, | ||
onOk: noop, | ||
onPanelChange: noop, | ||
focusablePanel: true | ||
}); | ||
exports['default'] = Calendar; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
if (!('mode' in props)) { | ||
_this2.setState({ mode: mode }); | ||
} | ||
props.onPanelChange(value || state.value, mode); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
return undefined; | ||
} | ||
var keyCode = event.keyCode; | ||
// mac | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var disabledDate = _this2.props.disabledDate; | ||
var value = _this2.state.value; | ||
switch (keyCode) { | ||
case _KeyCode2['default'].DOWN: | ||
_this2.goTime(1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].UP: | ||
_this2.goTime(-1, 'weeks'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].LEFT: | ||
if (ctrlKey) { | ||
_this2.goTime(-1, 'years'); | ||
} else { | ||
_this2.goTime(-1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].RIGHT: | ||
if (ctrlKey) { | ||
_this2.goTime(1, 'years'); | ||
} else { | ||
_this2.goTime(1, 'days'); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].HOME: | ||
_this2.setValue((0, _toTime.goStartMonth)(_this2.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].END: | ||
_this2.setValue((0, _toTime.goEndMonth)(_this2.state.value)); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].PAGE_DOWN: | ||
_this2.goTime(1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].PAGE_UP: | ||
_this2.goTime(-1, 'month'); | ||
event.preventDefault(); | ||
return 1; | ||
case _KeyCode2['default'].ENTER: | ||
if (!disabledDate || !disabledDate(value)) { | ||
_this2.onSelect(value, { | ||
source: 'keyboard' | ||
}); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
_this2.props.onKeyDown(event); | ||
return 1; | ||
} | ||
}; | ||
this.onClear = function () { | ||
_this2.onSelect(null); | ||
_this2.props.onClear(); | ||
}; | ||
this.onOk = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
if (_this2.isAllowedDate(selectedValue)) { | ||
_this2.props.onOk(selectedValue); | ||
} | ||
}; | ||
this.onDateInputChange = function (value) { | ||
_this2.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}; | ||
this.onDateInputChange = function (value) { | ||
_this2.onSelect(value, { | ||
source: 'dateInput' | ||
}); | ||
}; | ||
this.onDateTableSelect = function (value) { | ||
var timePicker = _this2.props.timePicker; | ||
var selectedValue = _this2.state.selectedValue; | ||
if (!selectedValue && timePicker) { | ||
var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (timePickerDefaultValue) { | ||
(0, _util.syncTime)(timePickerDefaultValue, value); | ||
} | ||
} | ||
_this2.onSelect(value); | ||
}; | ||
this.onToday = function () { | ||
var value = _this2.state.value; | ||
var now = (0, _util.getTodayTime)(value); | ||
_this2.onSelect(now, { | ||
source: 'todayButton' | ||
}); | ||
}; | ||
this.getRootDOMNode = function () { | ||
return _reactDom2['default'].findDOMNode(_this2); | ||
}; | ||
this.openTimePicker = function () { | ||
_this2.onPanelChange(null, 'time'); | ||
}; | ||
this.closeTimePicker = function () { | ||
_this2.onPanelChange(null, 'date'); | ||
}; | ||
this.goTime = function (direction, unit) { | ||
_this2.setValue((0, _toTime.goTime)(_this2.state.value, direction, unit)); | ||
}; | ||
}; | ||
exports['default'] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(Calendar)); | ||
module.exports = exports['default']; |
@@ -9,2 +9,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -18,6 +30,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -49,26 +57,19 @@ | ||
var CalendarFooter = (0, _createReactClass2['default'])({ | ||
displayName: 'CalendarFooter', | ||
var CalendarFooter = function (_React$Component) { | ||
(0, _inherits3['default'])(CalendarFooter, _React$Component); | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
showDateInput: _propTypes2['default'].bool, | ||
disabledTime: _propTypes2['default'].any, | ||
timePicker: _propTypes2['default'].element, | ||
selectedValue: _propTypes2['default'].any, | ||
showOk: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
value: _propTypes2['default'].object, | ||
renderFooter: _propTypes2['default'].func, | ||
defaultValue: _propTypes2['default'].object, | ||
mode: _propTypes2['default'].string | ||
}, | ||
function CalendarFooter() { | ||
(0, _classCallCheck3['default'])(this, CalendarFooter); | ||
return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments)); | ||
} | ||
onSelect: function onSelect(value) { | ||
CalendarFooter.prototype.onSelect = function onSelect(value) { | ||
this.props.onSelect(value); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
}; | ||
CalendarFooter.prototype.getRootDOMNode = function getRootDOMNode() { | ||
return _reactDom2['default'].findDOMNode(this); | ||
}, | ||
render: function render() { | ||
}; | ||
CalendarFooter.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -83,3 +84,3 @@ var value = props.value, | ||
var footerEl = null; | ||
var extraFooter = renderFooter(mode); | ||
var extraFooter = renderFooter && renderFooter(mode); | ||
if (props.showToday || timePicker || extraFooter) { | ||
@@ -118,6 +119,21 @@ var _cx; | ||
return footerEl; | ||
} | ||
}); | ||
}; | ||
return CalendarFooter; | ||
}(_react2['default'].Component); | ||
CalendarFooter.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
showDateInput: _propTypes2['default'].bool, | ||
disabledTime: _propTypes2['default'].any, | ||
timePicker: _propTypes2['default'].element, | ||
selectedValue: _propTypes2['default'].any, | ||
showOk: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
value: _propTypes2['default'].object, | ||
renderFooter: _propTypes2['default'].func, | ||
defaultValue: _propTypes2['default'].object, | ||
mode: _propTypes2['default'].string | ||
}; | ||
exports['default'] = CalendarFooter; | ||
module.exports = exports['default']; |
@@ -5,2 +5,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -10,6 +22,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -53,119 +61,22 @@ | ||
var CalendarHeader = (0, _createReactClass2['default'])({ | ||
displayName: 'CalendarHeader', | ||
var CalendarHeader = function (_React$Component) { | ||
(0, _inherits3['default'])(CalendarHeader, _React$Component); | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
value: _propTypes2['default'].object, | ||
onValueChange: _propTypes2['default'].func, | ||
showTimePicker: _propTypes2['default'].bool, | ||
onPanelChange: _propTypes2['default'].func, | ||
locale: _propTypes2['default'].object, | ||
enablePrev: _propTypes2['default'].any, | ||
enableNext: _propTypes2['default'].any, | ||
disabledMonth: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func | ||
}, | ||
function CalendarHeader(props) { | ||
(0, _classCallCheck3['default'])(this, CalendarHeader); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
enableNext: 1, | ||
enablePrev: 1, | ||
onPanelChange: function onPanelChange() {}, | ||
onValueChange: function onValueChange() {} | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
this.nextMonth = goMonth.bind(this, 1); | ||
this.previousMonth = goMonth.bind(this, -1); | ||
this.nextYear = goYear.bind(this, 1); | ||
this.previousYear = goYear.bind(this, -1); | ||
return { yearPanelReferer: null }; | ||
}, | ||
onMonthSelect: function onMonthSelect(value) { | ||
this.props.onPanelChange(value, 'date'); | ||
if (this.props.onMonthSelect) { | ||
this.props.onMonthSelect(value); | ||
} else { | ||
this.props.onValueChange(value); | ||
} | ||
}, | ||
onYearSelect: function onYearSelect(value) { | ||
var referer = this.state.yearPanelReferer; | ||
this.setState({ yearPanelReferer: null }); | ||
this.props.onPanelChange(value, referer); | ||
this.props.onValueChange(value); | ||
}, | ||
onDecadeSelect: function onDecadeSelect(value) { | ||
this.props.onPanelChange(value, 'year'); | ||
this.props.onValueChange(value); | ||
}, | ||
monthYearElement: function monthYearElement(showTimePicker) { | ||
var _this = this; | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
var props = this.props; | ||
var prefixCls = props.prefixCls; | ||
var locale = props.locale; | ||
var value = props.value; | ||
var localeData = value.localeData(); | ||
var monthBeforeYear = locale.monthBeforeYear; | ||
var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select'); | ||
var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : ''; | ||
var year = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-year-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : function () { | ||
return _this.showYearPanel('date'); | ||
}, | ||
title: showTimePicker ? null : locale.yearSelect | ||
}, | ||
value.format(locale.yearFormat) | ||
); | ||
var month = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-month-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : this.showMonthPanel, | ||
title: showTimePicker ? null : locale.monthSelect | ||
}, | ||
locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value) | ||
); | ||
var day = void 0; | ||
if (showTimePicker) { | ||
day = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-day-select' + timeClassName, | ||
role: 'button' | ||
}, | ||
value.format(locale.dayFormat) | ||
); | ||
} | ||
var my = []; | ||
if (monthBeforeYear) { | ||
my = [month, day, year]; | ||
} else { | ||
my = [year, month, day]; | ||
} | ||
return _react2['default'].createElement( | ||
'span', | ||
{ className: selectClassName }, | ||
(0, _mapSelf2['default'])(my) | ||
); | ||
}, | ||
showMonthPanel: function showMonthPanel() { | ||
// null means that users' interaction doesn't change value | ||
this.props.onPanelChange(null, 'month'); | ||
}, | ||
showYearPanel: function showYearPanel(referer) { | ||
this.setState({ yearPanelReferer: referer }); | ||
this.props.onPanelChange(null, 'year'); | ||
}, | ||
showDecadePanel: function showDecadePanel() { | ||
this.props.onPanelChange(null, 'decade'); | ||
}, | ||
render: function render() { | ||
_initialiseProps.call(_this); | ||
_this.nextMonth = goMonth.bind(_this, 1); | ||
_this.previousMonth = goMonth.bind(_this, -1); | ||
_this.nextYear = goYear.bind(_this, 1); | ||
_this.previousYear = goYear.bind(_this, -1); | ||
_this.state = { yearPanelReferer: null }; | ||
return _this; | ||
} | ||
CalendarHeader.prototype.render = function render() { | ||
var _this2 = this; | ||
@@ -253,6 +164,122 @@ | ||
); | ||
} | ||
}); | ||
}; | ||
return CalendarHeader; | ||
}(_react2['default'].Component); | ||
CalendarHeader.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
value: _propTypes2['default'].object, | ||
onValueChange: _propTypes2['default'].func, | ||
showTimePicker: _propTypes2['default'].bool, | ||
onPanelChange: _propTypes2['default'].func, | ||
locale: _propTypes2['default'].object, | ||
enablePrev: _propTypes2['default'].any, | ||
enableNext: _propTypes2['default'].any, | ||
disabledMonth: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func, | ||
onMonthSelect: _propTypes2['default'].func | ||
}; | ||
CalendarHeader.defaultProps = { | ||
enableNext: 1, | ||
enablePrev: 1, | ||
onPanelChange: function onPanelChange() {}, | ||
onValueChange: function onValueChange() {} | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this3 = this; | ||
this.onMonthSelect = function (value) { | ||
_this3.props.onPanelChange(value, 'date'); | ||
if (_this3.props.onMonthSelect) { | ||
_this3.props.onMonthSelect(value); | ||
} else { | ||
_this3.props.onValueChange(value); | ||
} | ||
}; | ||
this.onYearSelect = function (value) { | ||
var referer = _this3.state.yearPanelReferer; | ||
_this3.setState({ yearPanelReferer: null }); | ||
_this3.props.onPanelChange(value, referer); | ||
_this3.props.onValueChange(value); | ||
}; | ||
this.onDecadeSelect = function (value) { | ||
_this3.props.onPanelChange(value, 'year'); | ||
_this3.props.onValueChange(value); | ||
}; | ||
this.monthYearElement = function (showTimePicker) { | ||
var props = _this3.props; | ||
var prefixCls = props.prefixCls; | ||
var locale = props.locale; | ||
var value = props.value; | ||
var localeData = value.localeData(); | ||
var monthBeforeYear = locale.monthBeforeYear; | ||
var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select'); | ||
var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : ''; | ||
var year = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-year-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : function () { | ||
return _this3.showYearPanel('date'); | ||
}, | ||
title: showTimePicker ? null : locale.yearSelect | ||
}, | ||
value.format(locale.yearFormat) | ||
); | ||
var month = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-month-select' + timeClassName, | ||
role: 'button', | ||
onClick: showTimePicker ? null : _this3.showMonthPanel, | ||
title: showTimePicker ? null : locale.monthSelect | ||
}, | ||
locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value) | ||
); | ||
var day = void 0; | ||
if (showTimePicker) { | ||
day = _react2['default'].createElement( | ||
'a', | ||
{ | ||
className: prefixCls + '-day-select' + timeClassName, | ||
role: 'button' | ||
}, | ||
value.format(locale.dayFormat) | ||
); | ||
} | ||
var my = []; | ||
if (monthBeforeYear) { | ||
my = [month, day, year]; | ||
} else { | ||
my = [year, month, day]; | ||
} | ||
return _react2['default'].createElement( | ||
'span', | ||
{ className: selectClassName }, | ||
(0, _mapSelf2['default'])(my) | ||
); | ||
}; | ||
this.showMonthPanel = function () { | ||
// null means that users' interaction doesn't change value | ||
_this3.props.onPanelChange(null, 'month'); | ||
}; | ||
this.showYearPanel = function (referer) { | ||
_this3.setState({ yearPanelReferer: referer }); | ||
_this3.props.onPanelChange(null, 'year'); | ||
}; | ||
this.showDecadePanel = function () { | ||
_this3.props.onPanelChange(null, 'decade'); | ||
}; | ||
}; | ||
exports['default'] = CalendarHeader; | ||
module.exports = exports['default']; |
@@ -5,2 +5,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -14,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -31,49 +39,127 @@ | ||
var DateInput = (0, _createReactClass2['default'])({ | ||
displayName: 'DateInput', | ||
var cachedSelectionStart = void 0; | ||
var cachedSelectionEnd = void 0; | ||
var dateInputInstance = void 0; | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
timePicker: _propTypes2['default'].object, | ||
value: _propTypes2['default'].object, | ||
disabledTime: _propTypes2['default'].any, | ||
format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]), | ||
locale: _propTypes2['default'].object, | ||
disabledDate: _propTypes2['default'].func, | ||
onChange: _propTypes2['default'].func, | ||
onClear: _propTypes2['default'].func, | ||
placeholder: _propTypes2['default'].string, | ||
onSelect: _propTypes2['default'].func, | ||
selectedValue: _propTypes2['default'].object, | ||
clearIcon: _propTypes2['default'].node | ||
}, | ||
var DateInput = function (_React$Component) { | ||
(0, _inherits3['default'])(DateInput, _React$Component); | ||
getInitialState: function getInitialState() { | ||
var selectedValue = this.props.selectedValue; | ||
return { | ||
str: (0, _util.formatDate)(selectedValue, this.props.format), | ||
function DateInput(props) { | ||
(0, _classCallCheck3['default'])(this, DateInput); | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var selectedValue = props.selectedValue; | ||
_this.state = { | ||
str: (0, _util.formatDate)(selectedValue, _this.props.format), | ||
invalid: false, | ||
hasFocus: false | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
this.cachedSelectionStart = this.dateInputInstance.selectionStart; | ||
this.cachedSelectionEnd = this.dateInputInstance.selectionEnd; | ||
return _this; | ||
} | ||
DateInput.prototype.componentDidUpdate = function componentDidUpdate() { | ||
if (this.state.hasFocus && !this.state.invalid && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) { | ||
dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd); | ||
} | ||
}; | ||
DateInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
if (dateInputInstance) { | ||
cachedSelectionStart = dateInputInstance.selectionStart; | ||
cachedSelectionEnd = dateInputInstance.selectionEnd; | ||
} | ||
// when popup show, click body will call this, bug! | ||
var selectedValue = nextProps.selectedValue; | ||
if (!this.state.hasFocus) { | ||
this.setState({ | ||
if (!state.hasFocus) { | ||
newState = { | ||
str: (0, _util.formatDate)(selectedValue, nextProps.format), | ||
invalid: false | ||
}); | ||
}; | ||
} | ||
}, | ||
componentDidUpdate: function componentDidUpdate() { | ||
if (this.state.hasFocus && !this.state.invalid && !(this.cachedSelectionStart === 0 && this.cachedSelectionEnd === 0)) { | ||
this.dateInputInstance.setSelectionRange(this.cachedSelectionStart, this.cachedSelectionEnd); | ||
} | ||
}, | ||
onInputChange: function onInputChange(event) { | ||
return newState; | ||
}; | ||
DateInput.getInstance = function getInstance() { | ||
return dateInputInstance; | ||
}; | ||
DateInput.prototype.render = function render() { | ||
var props = this.props; | ||
var _state = this.state, | ||
invalid = _state.invalid, | ||
str = _state.str; | ||
var locale = props.locale, | ||
prefixCls = props.prefixCls, | ||
placeholder = props.placeholder, | ||
clearIcon = props.clearIcon; | ||
var invalidClass = invalid ? prefixCls + '-input-invalid' : ''; | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-input-wrap' }, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-date-input-wrap' }, | ||
_react2['default'].createElement('input', { | ||
ref: this.saveDateInput, | ||
className: prefixCls + '-input ' + invalidClass, | ||
value: str, | ||
disabled: props.disabled, | ||
placeholder: placeholder, | ||
onChange: this.onInputChange, | ||
onFocus: this.onFocus, | ||
onBlur: this.onBlur | ||
}) | ||
), | ||
props.showClear ? _react2['default'].createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.onClear | ||
}, | ||
clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null | ||
); | ||
}; | ||
return DateInput; | ||
}(_react2['default'].Component); | ||
DateInput.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
timePicker: _propTypes2['default'].object, | ||
value: _propTypes2['default'].object, | ||
disabledTime: _propTypes2['default'].any, | ||
format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]), | ||
locale: _propTypes2['default'].object, | ||
disabledDate: _propTypes2['default'].func, | ||
onChange: _propTypes2['default'].func, | ||
onClear: _propTypes2['default'].func, | ||
placeholder: _propTypes2['default'].string, | ||
onSelect: _propTypes2['default'].func, | ||
selectedValue: _propTypes2['default'].object, | ||
clearIcon: _propTypes2['default'].node | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onClear = function () { | ||
_this2.setState({ | ||
str: '' | ||
}); | ||
_this2.props.onClear(null); | ||
}; | ||
this.onInputChange = function (event) { | ||
var str = event.target.value; | ||
var _props = this.props, | ||
var _props = _this2.props, | ||
disabledDate = _props.disabledDate, | ||
@@ -88,3 +174,3 @@ format = _props.format, | ||
onChange(null); | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: false, | ||
@@ -99,3 +185,3 @@ str: str | ||
if (!parsed.isValid()) { | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: true, | ||
@@ -107,7 +193,7 @@ str: str | ||
var value = this.props.value.clone(); | ||
var value = _this2.props.value.clone(); | ||
value.year(parsed.year()).month(parsed.month()).date(parsed.date()).hour(parsed.hour()).minute(parsed.minute()).second(parsed.second()); | ||
if (!value || disabledDate && disabledDate(value)) { | ||
this.setState({ | ||
_this2.setState({ | ||
invalid: true, | ||
@@ -120,3 +206,3 @@ str: str | ||
if (selectedValue !== value || selectedValue && value && !selectedValue.isSame(value)) { | ||
this.setState({ | ||
_this2.setState({ | ||
str: str | ||
@@ -126,25 +212,10 @@ }); | ||
} | ||
}, | ||
onClear: function onClear() { | ||
this.setState({ | ||
str: '' | ||
}); | ||
this.props.onClear(null); | ||
}, | ||
getRootDOMNode: function getRootDOMNode() { | ||
return _reactDom2['default'].findDOMNode(this); | ||
}, | ||
focus: function focus() { | ||
if (this.dateInputInstance) { | ||
this.dateInputInstance.focus(); | ||
} | ||
}, | ||
saveDateInput: function saveDateInput(dateInput) { | ||
this.dateInputInstance = dateInput; | ||
}, | ||
onFocus: function onFocus() { | ||
this.setState({ hasFocus: true }); | ||
}, | ||
onBlur: function onBlur() { | ||
this.setState(function (prevState, prevProps) { | ||
}; | ||
this.onFocus = function () { | ||
_this2.setState({ hasFocus: true }); | ||
}; | ||
this.onBlur = function () { | ||
_this2.setState(function (prevState, prevProps) { | ||
return { | ||
@@ -155,45 +226,20 @@ hasFocus: false, | ||
}); | ||
}, | ||
render: function render() { | ||
var props = this.props; | ||
var _state = this.state, | ||
invalid = _state.invalid, | ||
str = _state.str; | ||
var locale = props.locale, | ||
prefixCls = props.prefixCls, | ||
placeholder = props.placeholder, | ||
clearIcon = props.clearIcon; | ||
}; | ||
var invalidClass = invalid ? prefixCls + '-input-invalid' : ''; | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-input-wrap' }, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-date-input-wrap' }, | ||
_react2['default'].createElement('input', { | ||
ref: this.saveDateInput, | ||
className: prefixCls + '-input ' + invalidClass, | ||
value: str, | ||
disabled: props.disabled, | ||
placeholder: placeholder, | ||
onChange: this.onInputChange, | ||
onFocus: this.onFocus, | ||
onBlur: this.onBlur | ||
}) | ||
), | ||
props.showClear ? _react2['default'].createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.onClear | ||
}, | ||
clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null | ||
); | ||
} | ||
}); | ||
this.getRootDOMNode = function () { | ||
return _reactDom2['default'].findDOMNode(_this2); | ||
}; | ||
this.focus = function () { | ||
if (dateInputInstance) { | ||
dateInputInstance.focus(); | ||
} | ||
}; | ||
this.saveDateInput = function (dateInput) { | ||
dateInputInstance = dateInput; | ||
}; | ||
}; | ||
exports['default'] = DateInput; | ||
module.exports = exports['default']; |
@@ -5,2 +5,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -10,6 +22,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -53,22 +61,11 @@ | ||
var DateTBody = (0, _createReactClass2['default'])({ | ||
displayName: 'DateTBody', | ||
var DateTBody = function (_React$Component) { | ||
(0, _inherits3['default'])(DateTBody, _React$Component); | ||
propTypes: { | ||
contentRender: _propTypes2['default'].func, | ||
dateRender: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
prefixCls: _propTypes2['default'].string, | ||
selectedValue: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]), | ||
value: _propTypes2['default'].object, | ||
hoverValue: _propTypes2['default'].any, | ||
showWeekNumber: _propTypes2['default'].bool | ||
}, | ||
function DateTBody() { | ||
(0, _classCallCheck3['default'])(this, DateTBody); | ||
return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments)); | ||
} | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
hoverValue: [] | ||
}; | ||
}, | ||
render: function render() { | ||
DateTBody.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -282,6 +279,21 @@ var contentRender = props.contentRender, | ||
); | ||
} | ||
}); | ||
}; | ||
return DateTBody; | ||
}(_react2['default'].Component); | ||
DateTBody.propTypes = { | ||
contentRender: _propTypes2['default'].func, | ||
dateRender: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
prefixCls: _propTypes2['default'].string, | ||
selectedValue: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]), | ||
value: _propTypes2['default'].object, | ||
hoverValue: _propTypes2['default'].any, | ||
showWeekNumber: _propTypes2['default'].bool | ||
}; | ||
DateTBody.defaultProps = { | ||
hoverValue: [] | ||
}; | ||
exports['default'] = DateTBody; | ||
module.exports = exports['default']; |
@@ -9,2 +9,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -14,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -33,8 +41,4 @@ | ||
var _CalendarMixin2 = _interopRequireDefault(_CalendarMixin); | ||
var _CommonMixin = require('./mixin/CommonMixin'); | ||
var _CommonMixin2 = _interopRequireDefault(_CommonMixin); | ||
var _CalendarHeader = require('./full-calendar/CalendarHeader'); | ||
@@ -44,66 +48,55 @@ | ||
var _moment = require('moment'); | ||
var _moment2 = _interopRequireDefault(_moment); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
var FullCalendar = (0, _createReactClass2['default'])({ | ||
displayName: 'FullCalendar', | ||
var FullCalendar = function (_React$Component) { | ||
(0, _inherits3['default'])(FullCalendar, _React$Component); | ||
propTypes: { | ||
defaultType: _propTypes2['default'].string, | ||
type: _propTypes2['default'].string, | ||
prefixCls: _propTypes2['default'].string, | ||
locale: _propTypes2['default'].object, | ||
onTypeChange: _propTypes2['default'].func, | ||
fullscreen: _propTypes2['default'].bool, | ||
monthCellRender: _propTypes2['default'].func, | ||
dateCellRender: _propTypes2['default'].func, | ||
showTypeSwitch: _propTypes2['default'].bool, | ||
Select: _propTypes2['default'].func.isRequired, | ||
headerComponents: _propTypes2['default'].array, | ||
headerComponent: _propTypes2['default'].object, // The whole header component | ||
headerRender: _propTypes2['default'].func, | ||
showHeader: _propTypes2['default'].bool, | ||
disabledDate: _propTypes2['default'].func | ||
}, | ||
mixins: [_CommonMixin2['default'], _CalendarMixin2['default']], | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
defaultType: 'date', | ||
fullscreen: false, | ||
showTypeSwitch: true, | ||
showHeader: true, | ||
onTypeChange: function onTypeChange() {} | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
function FullCalendar(props) { | ||
(0, _classCallCheck3['default'])(this, FullCalendar); | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var type = void 0; | ||
if ('type' in this.props) { | ||
type = this.props.type; | ||
if ('type' in props) { | ||
type = props.type; | ||
} else { | ||
type = this.props.defaultType; | ||
type = props.defaultType; | ||
} | ||
return { | ||
type: type | ||
_this.state = { | ||
type: type, | ||
value: props.value || props.defaultValue || (0, _moment2['default'])(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
return _this; | ||
} | ||
FullCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
var value = nextProps.value, | ||
selectedValue = nextProps.selectedValue; | ||
if ('type' in nextProps) { | ||
this.setState({ | ||
newState = { | ||
type: nextProps.type | ||
}); | ||
}; | ||
} | ||
}, | ||
onMonthSelect: function onMonthSelect(value) { | ||
this.onSelect(value, { | ||
target: 'month' | ||
}); | ||
}, | ||
setType: function setType(type) { | ||
if (!('type' in this.props)) { | ||
this.setState({ | ||
type: type | ||
}); | ||
if ('value' in nextProps) { | ||
newState.value = value || nextProps.defaultValue || (0, _CalendarMixin.getNowByCurrentStateValue)(state.value); | ||
} | ||
this.props.onTypeChange(type); | ||
}, | ||
render: function render() { | ||
if ('selectedValue' in nextProps) { | ||
newState.selectedValue = selectedValue; | ||
} | ||
return newState; | ||
}; | ||
FullCalendar.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -174,6 +167,56 @@ var locale = props.locale, | ||
}); | ||
} | ||
}; | ||
return FullCalendar; | ||
}(_react2['default'].Component); | ||
FullCalendar.propTypes = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinPropTypes, _CommonMixin.propType, { | ||
defaultType: _propTypes2['default'].string, | ||
type: _propTypes2['default'].string, | ||
prefixCls: _propTypes2['default'].string, | ||
locale: _propTypes2['default'].object, | ||
onTypeChange: _propTypes2['default'].func, | ||
fullscreen: _propTypes2['default'].bool, | ||
monthCellRender: _propTypes2['default'].func, | ||
dateCellRender: _propTypes2['default'].func, | ||
showTypeSwitch: _propTypes2['default'].bool, | ||
Select: _propTypes2['default'].func.isRequired, | ||
headerComponents: _propTypes2['default'].array, | ||
headerComponent: _propTypes2['default'].object, // The whole header component | ||
headerRender: _propTypes2['default'].func, | ||
showHeader: _propTypes2['default'].bool, | ||
disabledDate: _propTypes2['default'].func, | ||
value: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
selectedValue: _propTypes2['default'].object, | ||
defaultSelectedValue: _propTypes2['default'].object | ||
}); | ||
FullCalendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinDefaultProps, _CommonMixin.defaultProp, { | ||
defaultType: 'date', | ||
fullscreen: false, | ||
showTypeSwitch: true, | ||
showHeader: true, | ||
onTypeChange: function onTypeChange() {} | ||
}); | ||
exports['default'] = FullCalendar; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onMonthSelect = function (value) { | ||
_this2.onSelect(value, { | ||
target: 'month' | ||
}); | ||
}; | ||
this.setType = function (type) { | ||
if (!('type' in _this2.props)) { | ||
_this2.setState({ | ||
type: type | ||
}); | ||
} | ||
_this2.props.onTypeChange(type); | ||
}; | ||
}; | ||
exports['default'] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(FullCalendar)); | ||
module.exports = exports['default']; |
@@ -9,5 +9,9 @@ 'use strict'; | ||
var _reactLifecyclesCompat = require('react-lifecycles-compat'); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
(0, _reactLifecyclesCompat.polyfill)(_Calendar2['default']); | ||
exports['default'] = _Calendar2['default']; | ||
module.exports = exports['default']; |
'use strict'; | ||
exports.__esModule = true; | ||
exports.calendarMixinWrapper = exports.calendarMixinDefaultProps = exports.calendarMixinPropTypes = undefined; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
exports.getNowByCurrentStateValue = getNowByCurrentStateValue; | ||
var _react = require('react'); | ||
@@ -27,6 +42,2 @@ | ||
function getNow() { | ||
return (0, _moment2['default'])(); | ||
} | ||
function getNowByCurrentStateValue(value) { | ||
@@ -37,3 +48,3 @@ var ret = void 0; | ||
} else { | ||
ret = getNow(); | ||
ret = (0, _moment2['default'])(); | ||
} | ||
@@ -43,93 +54,81 @@ return ret; | ||
var CalendarMixin = { | ||
propTypes: { | ||
value: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
onKeyDown: _propTypes2['default'].func | ||
}, | ||
var calendarMixinPropTypes = exports.calendarMixinPropTypes = { | ||
value: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
onKeyDown: _propTypes2['default'].func | ||
}; | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
onKeyDown: noop | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
var value = props.value || props.defaultValue || getNow(); | ||
return { | ||
value: value, | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var value = nextProps.value; | ||
var selectedValue = nextProps.selectedValue; | ||
var calendarMixinDefaultProps = exports.calendarMixinDefaultProps = { | ||
onKeyDown: noop | ||
}; | ||
if ('value' in nextProps) { | ||
value = value || nextProps.defaultValue || getNowByCurrentStateValue(this.state.value); | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if ('selectedValue' in nextProps) { | ||
this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
} | ||
}, | ||
onSelect: function onSelect(value, cause) { | ||
if (value) { | ||
this.setValue(value); | ||
} | ||
this.setSelectedValue(value, cause); | ||
}, | ||
renderRoot: function renderRoot(newProps) { | ||
var _className; | ||
var calendarMixinWrapper = exports.calendarMixinWrapper = function calendarMixinWrapper(ComposeComponent) { | ||
var _class, _temp2; | ||
var props = this.props; | ||
var prefixCls = props.prefixCls; | ||
return _temp2 = _class = function (_ComposeComponent) { | ||
(0, _inherits3['default'])(_class, _ComposeComponent); | ||
var className = (_className = {}, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[props.className] = !!props.className, _className[newProps.className] = !!newProps.className, _className); | ||
function _class() { | ||
var _temp, _this, _ret; | ||
return _react2['default'].createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: '' + (0, _classnames2['default'])(className), | ||
style: this.props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
newProps.children | ||
); | ||
}, | ||
setSelectedValue: function setSelectedValue(selectedValue, cause) { | ||
// if (this.isAllowedDate(selectedValue)) { | ||
if (!('selectedValue' in this.props)) { | ||
this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
(0, _classCallCheck3['default'])(this, _class); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, _ComposeComponent.call.apply(_ComposeComponent, [this].concat(args))), _this), _this.onSelect = function (value, cause) { | ||
if (value) { | ||
_this.setValue(value); | ||
} | ||
_this.setSelectedValue(value, cause); | ||
}, _this.renderRoot = function (newProps) { | ||
var _className; | ||
var props = _this.props; | ||
var prefixCls = props.prefixCls; | ||
var className = (_className = {}, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[props.className] = !!props.className, _className[newProps.className] = !!newProps.className, _className); | ||
return _react2['default'].createElement( | ||
'div', | ||
{ | ||
ref: _this.saveRoot, | ||
className: '' + (0, _classnames2['default'])(className), | ||
style: _this.props.style, | ||
tabIndex: '0', | ||
onKeyDown: _this.onKeyDown | ||
}, | ||
newProps.children | ||
); | ||
}, _this.setSelectedValue = function (selectedValue, cause) { | ||
// if (this.isAllowedDate(selectedValue)) { | ||
if (!('selectedValue' in _this.props)) { | ||
_this.setState({ | ||
selectedValue: selectedValue | ||
}); | ||
} | ||
if (_this.props.onSelect) { | ||
_this.props.onSelect(selectedValue, cause); | ||
} | ||
// } | ||
}, _this.setValue = function (value) { | ||
var originalValue = _this.state.value; | ||
if (!('value' in _this.props)) { | ||
_this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (originalValue && value && !originalValue.isSame(value) || !originalValue && value || originalValue && !value) { | ||
_this.props.onChange(value); | ||
} | ||
}, _this.isAllowedDate = function (value) { | ||
var disabledDate = _this.props.disabledDate; | ||
var disabledTime = _this.props.disabledTime; | ||
return (0, _index.isAllowedDate)(value, disabledDate, disabledTime); | ||
}, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret); | ||
} | ||
this.props.onSelect(selectedValue, cause); | ||
// } | ||
}, | ||
setValue: function setValue(value) { | ||
var originalValue = this.state.value; | ||
if (!('value' in this.props)) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (originalValue && value && !originalValue.isSame(value) || !originalValue && value || originalValue && !value) { | ||
this.props.onChange(value); | ||
} | ||
}, | ||
isAllowedDate: function isAllowedDate(value) { | ||
var disabledDate = this.props.disabledDate; | ||
var disabledTime = this.props.disabledTime; | ||
return (0, _index.isAllowedDate)(value, disabledDate, disabledTime); | ||
} | ||
}; | ||
exports['default'] = CalendarMixin; | ||
module.exports = exports['default']; | ||
return _class; | ||
}(ComposeComponent), _class.displayName = 'CalendarMixinWrapper', _temp2; | ||
}; |
'use strict'; | ||
exports.__esModule = true; | ||
exports.commonMixinWrapper = exports.defaultProp = exports.propType = undefined; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _propTypes = require('prop-types'); | ||
@@ -17,59 +30,78 @@ | ||
exports['default'] = { | ||
propTypes: { | ||
className: _propTypes2['default'].string, | ||
locale: _propTypes2['default'].object, | ||
style: _propTypes2['default'].object, | ||
visible: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
prefixCls: _propTypes2['default'].string, | ||
onChange: _propTypes2['default'].func, | ||
onOk: _propTypes2['default'].func | ||
var propType = exports.propType = { | ||
className: _propTypes2['default'].string, | ||
locale: _propTypes2['default'].object, | ||
style: _propTypes2['default'].object, | ||
visible: _propTypes2['default'].bool, | ||
onSelect: _propTypes2['default'].func, | ||
prefixCls: _propTypes2['default'].string, | ||
onChange: _propTypes2['default'].func, | ||
onOk: _propTypes2['default'].func | ||
}; | ||
var defaultProp = exports.defaultProp = { | ||
locale: _en_US2['default'], | ||
style: {}, | ||
visible: true, | ||
prefixCls: 'rc-calendar', | ||
className: '', | ||
onSelect: noop, | ||
onChange: noop, | ||
onClear: noop, | ||
renderFooter: function renderFooter() { | ||
return null; | ||
}, | ||
renderSidebar: function renderSidebar() { | ||
return null; | ||
} | ||
}; | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
locale: _en_US2['default'], | ||
style: {}, | ||
visible: true, | ||
prefixCls: 'rc-calendar', | ||
className: '', | ||
onSelect: noop, | ||
onChange: noop, | ||
onClear: noop, | ||
renderFooter: function renderFooter() { | ||
return null; | ||
}, | ||
renderSidebar: function renderSidebar() { | ||
return null; | ||
var commonMixinWrapper = exports.commonMixinWrapper = function commonMixinWrapper(ComposeComponent) { | ||
var _class, _temp2; | ||
return _temp2 = _class = function (_ComposeComponent) { | ||
(0, _inherits3['default'])(_class, _ComposeComponent); | ||
function _class() { | ||
var _temp, _this, _ret; | ||
(0, _classCallCheck3['default'])(this, _class); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, _ComposeComponent.call.apply(_ComposeComponent, [this].concat(args))), _this), _this.getFormat = function () { | ||
var format = _this.props.format; | ||
var _this$props = _this.props, | ||
locale = _this$props.locale, | ||
timePicker = _this$props.timePicker; | ||
if (!format) { | ||
if (timePicker) { | ||
format = locale.dateTimeFormat; | ||
} else { | ||
format = locale.dateFormat; | ||
} | ||
} | ||
return format; | ||
}, _this.focus = function () { | ||
if (_this.focusElement) { | ||
_this.focusElement.focus(); | ||
} else if (_this.rootInstance) { | ||
_this.rootInstance.focus(); | ||
} | ||
}, _this.saveFocusElement = function (focusElement) { | ||
_this.focusElement = focusElement; | ||
}, _this.saveRoot = function (root) { | ||
_this.rootInstance = root; | ||
}, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret); | ||
} | ||
_class.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { | ||
return this.props.visible || nextProps.visible; | ||
}; | ||
}, | ||
shouldComponentUpdate: function shouldComponentUpdate(nextProps) { | ||
return this.props.visible || nextProps.visible; | ||
}, | ||
getFormat: function getFormat() { | ||
var format = this.props.format; | ||
var _props = this.props, | ||
locale = _props.locale, | ||
timePicker = _props.timePicker; | ||
if (!format) { | ||
if (timePicker) { | ||
format = locale.dateTimeFormat; | ||
} else { | ||
format = locale.dateFormat; | ||
} | ||
} | ||
return format; | ||
}, | ||
focus: function focus() { | ||
if (this.rootInstance) { | ||
this.rootInstance.focus(); | ||
} | ||
}, | ||
saveRoot: function saveRoot(root) { | ||
this.rootInstance = root; | ||
} | ||
}; | ||
module.exports = exports['default']; | ||
return _class; | ||
}(ComposeComponent), _class.displayName = 'CommonMixinWrapper', _temp2; | ||
}; |
@@ -5,2 +5,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -10,6 +22,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -33,51 +41,51 @@ | ||
var MonthPanel = (0, _createReactClass2['default'])({ | ||
displayName: 'MonthPanel', | ||
var MonthPanel = function (_React$Component) { | ||
(0, _inherits3['default'])(MonthPanel, _React$Component); | ||
propTypes: { | ||
onChange: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
onSelect: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func | ||
}, | ||
function MonthPanel(props) { | ||
(0, _classCallCheck3['default'])(this, MonthPanel); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
onChange: noop, | ||
onSelect: noop | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
_this.setAndChangeValue = function (value) { | ||
_this.setValue(value); | ||
_this.props.onChange(value); | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
// bind methods | ||
this.nextYear = goYear.bind(this, 1); | ||
this.previousYear = goYear.bind(this, -1); | ||
this.prefixCls = props.rootPrefixCls + '-month-panel'; | ||
return { | ||
_this.setAndSelectValue = function (value) { | ||
_this.setValue(value); | ||
_this.props.onSelect(value); | ||
}; | ||
_this.setValue = function (value) { | ||
if (!('value' in _this.props)) { | ||
_this.setState({ | ||
value: value | ||
}); | ||
} | ||
}; | ||
_this.nextYear = goYear.bind(_this, 1); | ||
_this.previousYear = goYear.bind(_this, -1); | ||
_this.prefixCls = props.rootPrefixCls + '-month-panel'; | ||
_this.state = { | ||
value: props.value || props.defaultValue | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
return _this; | ||
} | ||
MonthPanel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { | ||
var newState = {}; | ||
if ('value' in nextProps) { | ||
this.setState({ | ||
newState = { | ||
value: nextProps.value | ||
}); | ||
}; | ||
} | ||
}, | ||
setAndChangeValue: function setAndChangeValue(value) { | ||
this.setValue(value); | ||
this.props.onChange(value); | ||
}, | ||
setAndSelectValue: function setAndSelectValue(value) { | ||
this.setValue(value); | ||
this.props.onSelect(value); | ||
}, | ||
setValue: function setValue(value) { | ||
if (!('value' in this.props)) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
}, | ||
render: function render() { | ||
return newState; | ||
}; | ||
MonthPanel.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -156,6 +164,21 @@ var value = this.state.value; | ||
); | ||
} | ||
}); | ||
}; | ||
return MonthPanel; | ||
}(_react2['default'].Component); | ||
MonthPanel.propTypes = { | ||
onChange: _propTypes2['default'].func, | ||
disabledDate: _propTypes2['default'].func, | ||
onSelect: _propTypes2['default'].func, | ||
renderFooter: _propTypes2['default'].func, | ||
rootPrefixCls: _propTypes2['default'].string, | ||
value: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object | ||
}; | ||
MonthPanel.defaultProps = { | ||
onChange: noop, | ||
onSelect: noop | ||
}; | ||
exports['default'] = MonthPanel; | ||
module.exports = exports['default']; |
@@ -5,2 +5,18 @@ 'use strict'; | ||
var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _extends3 = _interopRequireDefault(_extends2); | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -10,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -33,75 +45,81 @@ | ||
var _CalendarMixin2 = _interopRequireDefault(_CalendarMixin); | ||
var _CommonMixin = require('./mixin/CommonMixin'); | ||
var _CommonMixin2 = _interopRequireDefault(_CommonMixin); | ||
var _moment = require('moment'); | ||
var _moment2 = _interopRequireDefault(_moment); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
var MonthCalendar = (0, _createReactClass2['default'])({ | ||
displayName: 'MonthCalendar', | ||
var MonthCalendar = function (_React$Component) { | ||
(0, _inherits3['default'])(MonthCalendar, _React$Component); | ||
propTypes: { | ||
monthCellRender: _propTypes2['default'].func, | ||
dateCellRender: _propTypes2['default'].func | ||
}, | ||
mixins: [_CommonMixin2['default'], _CalendarMixin2['default']], | ||
function MonthCalendar(props) { | ||
(0, _classCallCheck3['default'])(this, MonthCalendar); | ||
getInitialState: function getInitialState() { | ||
return { mode: 'month' }; | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
var keyCode = event.keyCode; | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var stateValue = this.state.value; | ||
var disabledDate = this.props.disabledDate; | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
var value = stateValue; | ||
switch (keyCode) { | ||
case _KeyCode2['default'].DOWN: | ||
value = stateValue.clone(); | ||
value.add(3, 'months'); | ||
break; | ||
case _KeyCode2['default'].UP: | ||
value = stateValue.clone(); | ||
value.add(-3, 'months'); | ||
break; | ||
case _KeyCode2['default'].LEFT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(-1, 'years'); | ||
} else { | ||
value.add(-1, 'months'); | ||
} | ||
break; | ||
case _KeyCode2['default'].RIGHT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(1, 'years'); | ||
} else { | ||
value.add(1, 'months'); | ||
} | ||
break; | ||
case _KeyCode2['default'].ENTER: | ||
if (!disabledDate || !disabledDate(stateValue)) { | ||
this.onSelect(stateValue); | ||
} | ||
_this.onKeyDown = function (event) { | ||
var keyCode = event.keyCode; | ||
var ctrlKey = event.ctrlKey || event.metaKey; | ||
var stateValue = _this.state.value; | ||
var disabledDate = _this.props.disabledDate; | ||
var value = stateValue; | ||
switch (keyCode) { | ||
case _KeyCode2['default'].DOWN: | ||
value = stateValue.clone(); | ||
value.add(3, 'months'); | ||
break; | ||
case _KeyCode2['default'].UP: | ||
value = stateValue.clone(); | ||
value.add(-3, 'months'); | ||
break; | ||
case _KeyCode2['default'].LEFT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(-1, 'years'); | ||
} else { | ||
value.add(-1, 'months'); | ||
} | ||
break; | ||
case _KeyCode2['default'].RIGHT: | ||
value = stateValue.clone(); | ||
if (ctrlKey) { | ||
value.add(1, 'years'); | ||
} else { | ||
value.add(1, 'months'); | ||
} | ||
break; | ||
case _KeyCode2['default'].ENTER: | ||
if (!disabledDate || !disabledDate(stateValue)) { | ||
_this.onSelect(stateValue); | ||
} | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
return undefined; | ||
} | ||
if (value !== stateValue) { | ||
_this.setValue(value); | ||
event.preventDefault(); | ||
return 1; | ||
default: | ||
return undefined; | ||
} | ||
if (value !== stateValue) { | ||
this.setValue(value); | ||
event.preventDefault(); | ||
return 1; | ||
} | ||
}, | ||
handlePanelChange: function handlePanelChange(_, mode) { | ||
if (mode !== 'date') { | ||
this.setState({ mode: mode }); | ||
} | ||
}, | ||
render: function render() { | ||
} | ||
}; | ||
_this.handlePanelChange = function (_, mode) { | ||
if (mode !== 'date') { | ||
_this.setState({ mode: mode }); | ||
} | ||
}; | ||
_this.state = { | ||
mode: 'month', | ||
value: props.value || props.defaultValue || (0, _moment2['default'])(), | ||
selectedValue: props.selectedValue || props.defaultSelectedValue | ||
}; | ||
return _this; | ||
} | ||
MonthCalendar.prototype.render = function render() { | ||
var props = this.props, | ||
@@ -140,6 +158,18 @@ state = this.state; | ||
}); | ||
} | ||
}; | ||
return MonthCalendar; | ||
}(_react2['default'].Component); | ||
MonthCalendar.propTypes = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinPropTypes, _CommonMixin.propType, { | ||
monthCellRender: _propTypes2['default'].func, | ||
dateCellRender: _propTypes2['default'].func, | ||
value: _propTypes2['default'].object, | ||
defaultValue: _propTypes2['default'].object, | ||
selectedValue: _propTypes2['default'].object, | ||
defaultSelectedValue: _propTypes2['default'].object, | ||
disabledDate: _propTypes2['default'].object | ||
}); | ||
exports['default'] = MonthCalendar; | ||
MonthCalendar.defaultProps = (0, _extends3['default'])({}, _CommonMixin.defaultProp, _CalendarMixin.calendarMixinDefaultProps); | ||
exports['default'] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(MonthCalendar)); | ||
module.exports = exports['default']; |
@@ -5,2 +5,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -14,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -47,37 +55,12 @@ | ||
var Picker = (0, _createReactClass2['default'])({ | ||
displayName: 'Picker', | ||
var Picker = function (_React$Component) { | ||
(0, _inherits3['default'])(Picker, _React$Component); | ||
propTypes: { | ||
animation: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]), | ||
disabled: _propTypes2['default'].bool, | ||
transitionName: _propTypes2['default'].string, | ||
onChange: _propTypes2['default'].func, | ||
onOpenChange: _propTypes2['default'].func, | ||
children: _propTypes2['default'].func, | ||
getCalendarContainer: _propTypes2['default'].func, | ||
calendar: _propTypes2['default'].element, | ||
style: _propTypes2['default'].object, | ||
open: _propTypes2['default'].bool, | ||
defaultOpen: _propTypes2['default'].bool, | ||
prefixCls: _propTypes2['default'].string, | ||
placement: _propTypes2['default'].any, | ||
value: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].array]), | ||
defaultValue: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].array]), | ||
align: _propTypes2['default'].object | ||
}, | ||
function Picker(props) { | ||
(0, _classCallCheck3['default'])(this, Picker); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
prefixCls: 'rc-calendar-picker', | ||
style: {}, | ||
align: {}, | ||
placement: 'bottomLeft', | ||
defaultOpen: false, | ||
onChange: noop, | ||
onOpenChange: noop | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
_initialiseProps.call(_this); | ||
var open = void 0; | ||
@@ -90,24 +73,12 @@ if ('open' in props) { | ||
var value = props.value || props.defaultValue; | ||
this.saveCalendarRef = refFn.bind(this, 'calendarInstance'); | ||
return { | ||
_this.saveCalendarRef = refFn.bind(_this, 'calendarInstance'); | ||
_this.state = { | ||
open: open, | ||
value: value | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var value = nextProps.value, | ||
open = nextProps.open; | ||
return _this; | ||
} | ||
if ('value' in nextProps) { | ||
this.setState({ | ||
value: value | ||
}); | ||
} | ||
if (open !== undefined) { | ||
this.setState({ | ||
open: open | ||
}); | ||
} | ||
}, | ||
componentDidUpdate: function componentDidUpdate(_, prevState) { | ||
Picker.prototype.componentDidUpdate = function componentDidUpdate(_, prevState) { | ||
if (!prevState.open && this.state.open) { | ||
@@ -117,89 +88,27 @@ // setTimeout is for making sure saveCalendarRef happen before focusCalendar | ||
} | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
}; | ||
Picker.prototype.componentWillUnmount = function componentWillUnmount() { | ||
clearTimeout(this.focusTimeout); | ||
}, | ||
onCalendarKeyDown: function onCalendarKeyDown(event) { | ||
if (event.keyCode === _KeyCode2['default'].ESC) { | ||
event.stopPropagation(); | ||
this.close(this.focus); | ||
} | ||
}, | ||
onCalendarSelect: function onCalendarSelect(value) { | ||
var cause = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
}; | ||
var props = this.props; | ||
if (!('value' in props)) { | ||
this.setState({ | ||
Picker.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { | ||
var newState = {}; | ||
var value = nextProps.value, | ||
open = nextProps.open; | ||
if ('value' in nextProps) { | ||
newState = { | ||
value: value | ||
}); | ||
}; | ||
} | ||
if (cause.source === 'keyboard' || !props.calendar.props.timePicker && cause.source !== 'dateInput' || cause.source === 'todayButton') { | ||
this.close(this.focus); | ||
if (open !== undefined) { | ||
newState = { | ||
open: open | ||
}; | ||
} | ||
props.onChange(value); | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
if (event.keyCode === _KeyCode2['default'].DOWN && !this.state.open) { | ||
this.open(); | ||
event.preventDefault(); | ||
} | ||
}, | ||
onCalendarOk: function onCalendarOk() { | ||
this.close(this.focus); | ||
}, | ||
onCalendarClear: function onCalendarClear() { | ||
this.close(this.focus); | ||
}, | ||
onVisibleChange: function onVisibleChange(open) { | ||
this.setOpen(open); | ||
}, | ||
getCalendarElement: function getCalendarElement() { | ||
var props = this.props; | ||
var state = this.state; | ||
var calendarProps = props.calendar.props; | ||
var value = state.value; | ||
return newState; | ||
}; | ||
var defaultValue = value; | ||
var extraProps = { | ||
ref: this.saveCalendarRef, | ||
defaultValue: defaultValue || calendarProps.defaultValue, | ||
selectedValue: value, | ||
onKeyDown: this.onCalendarKeyDown, | ||
onOk: (0, _createChainedFunction2['default'])(calendarProps.onOk, this.onCalendarOk), | ||
onSelect: (0, _createChainedFunction2['default'])(calendarProps.onSelect, this.onCalendarSelect), | ||
onClear: (0, _createChainedFunction2['default'])(calendarProps.onClear, this.onCalendarClear) | ||
}; | ||
return _react2['default'].cloneElement(props.calendar, extraProps); | ||
}, | ||
setOpen: function setOpen(open, callback) { | ||
var onOpenChange = this.props.onOpenChange; | ||
if (this.state.open !== open) { | ||
if (!('open' in this.props)) { | ||
this.setState({ | ||
open: open | ||
}, callback); | ||
} | ||
onOpenChange(open); | ||
} | ||
}, | ||
open: function open(callback) { | ||
this.setOpen(true, callback); | ||
}, | ||
close: function close(callback) { | ||
this.setOpen(false, callback); | ||
}, | ||
focus: function focus() { | ||
if (!this.state.open) { | ||
_reactDom2['default'].findDOMNode(this).focus(); | ||
} | ||
}, | ||
focusCalendar: function focusCalendar() { | ||
if (this.state.open && !!this.calendarInstance) { | ||
this.calendarInstance.focus(); | ||
} | ||
}, | ||
render: function render() { | ||
Picker.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -238,6 +147,134 @@ var prefixCls = props.prefixCls, | ||
); | ||
} | ||
}); | ||
}; | ||
return Picker; | ||
}(_react2['default'].Component); | ||
Picker.propTypes = { | ||
animation: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]), | ||
disabled: _propTypes2['default'].bool, | ||
transitionName: _propTypes2['default'].string, | ||
onChange: _propTypes2['default'].func, | ||
onOpenChange: _propTypes2['default'].func, | ||
children: _propTypes2['default'].func, | ||
getCalendarContainer: _propTypes2['default'].func, | ||
calendar: _propTypes2['default'].element, | ||
style: _propTypes2['default'].object, | ||
open: _propTypes2['default'].bool, | ||
defaultOpen: _propTypes2['default'].bool, | ||
prefixCls: _propTypes2['default'].string, | ||
placement: _propTypes2['default'].any, | ||
value: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].array]), | ||
defaultValue: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].array]), | ||
align: _propTypes2['default'].object | ||
}; | ||
Picker.defaultProps = { | ||
prefixCls: 'rc-calendar-picker', | ||
style: {}, | ||
align: {}, | ||
placement: 'bottomLeft', | ||
defaultOpen: false, | ||
onChange: noop, | ||
onOpenChange: noop | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onCalendarKeyDown = function (event) { | ||
if (event.keyCode === _KeyCode2['default'].ESC) { | ||
event.stopPropagation(); | ||
_this2.close(_this2.focus); | ||
} | ||
}; | ||
this.onCalendarSelect = function (value) { | ||
var cause = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
var props = _this2.props; | ||
if (!('value' in props)) { | ||
_this2.setState({ | ||
value: value | ||
}); | ||
} | ||
if (cause.source === 'keyboard' || !props.calendar.props.timePicker && cause.source !== 'dateInput' || cause.source === 'todayButton') { | ||
_this2.close(_this2.focus); | ||
} | ||
props.onChange(value); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.keyCode === _KeyCode2['default'].DOWN && !_this2.state.open) { | ||
_this2.open(); | ||
event.preventDefault(); | ||
} | ||
}; | ||
this.onCalendarOk = function () { | ||
_this2.close(_this2.focus); | ||
}; | ||
this.onCalendarClear = function () { | ||
_this2.close(_this2.focus); | ||
}; | ||
this.onVisibleChange = function (open) { | ||
_this2.setOpen(open); | ||
}; | ||
this.getCalendarElement = function () { | ||
var props = _this2.props; | ||
var state = _this2.state; | ||
var calendarProps = props.calendar.props; | ||
var value = state.value; | ||
var defaultValue = value; | ||
var extraProps = { | ||
ref: _this2.saveCalendarRef, | ||
defaultValue: defaultValue || calendarProps.defaultValue, | ||
selectedValue: value, | ||
onKeyDown: _this2.onCalendarKeyDown, | ||
onOk: (0, _createChainedFunction2['default'])(calendarProps.onOk, _this2.onCalendarOk), | ||
onSelect: (0, _createChainedFunction2['default'])(calendarProps.onSelect, _this2.onCalendarSelect), | ||
onClear: (0, _createChainedFunction2['default'])(calendarProps.onClear, _this2.onCalendarClear) | ||
}; | ||
return _react2['default'].cloneElement(props.calendar, extraProps); | ||
}; | ||
this.setOpen = function (open, callback) { | ||
var onOpenChange = _this2.props.onOpenChange; | ||
if (_this2.state.open !== open) { | ||
if (!('open' in _this2.props)) { | ||
_this2.setState({ | ||
open: open | ||
}, callback); | ||
} | ||
onOpenChange(open); | ||
} | ||
}; | ||
this.open = function (callback) { | ||
_this2.setOpen(true, callback); | ||
}; | ||
this.close = function (callback) { | ||
_this2.setOpen(false, callback); | ||
}; | ||
this.focus = function () { | ||
if (!_this2.state.open) { | ||
_reactDom2['default'].findDOMNode(_this2).focus(); | ||
} | ||
}; | ||
this.focusCalendar = function () { | ||
if (_this2.state.open && !!_this2.calendarInstance) { | ||
_this2.calendarInstance.focus(); | ||
} | ||
}; | ||
}; | ||
exports['default'] = Picker; | ||
module.exports = exports['default']; |
@@ -9,2 +9,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -14,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -39,26 +47,11 @@ | ||
var CalendarPart = (0, _createReactClass2['default'])({ | ||
displayName: 'CalendarPart', | ||
var CalendarPart = function (_React$Component) { | ||
(0, _inherits3['default'])(CalendarPart, _React$Component); | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
value: _propTypes2['default'].any, | ||
hoverValue: _propTypes2['default'].any, | ||
selectedValue: _propTypes2['default'].any, | ||
direction: _propTypes2['default'].any, | ||
locale: _propTypes2['default'].any, | ||
showDateInput: _propTypes2['default'].bool, | ||
showTimePicker: _propTypes2['default'].bool, | ||
format: _propTypes2['default'].any, | ||
placeholder: _propTypes2['default'].any, | ||
disabledDate: _propTypes2['default'].any, | ||
timePicker: _propTypes2['default'].any, | ||
disabledTime: _propTypes2['default'].any, | ||
onInputSelect: _propTypes2['default'].func, | ||
timePickerDisabledTime: _propTypes2['default'].object, | ||
enableNext: _propTypes2['default'].any, | ||
enablePrev: _propTypes2['default'].any, | ||
clearIcon: _propTypes2['default'].node | ||
}, | ||
render: function render() { | ||
function CalendarPart() { | ||
(0, _classCallCheck3['default'])(this, CalendarPart); | ||
return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments)); | ||
} | ||
CalendarPart.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -160,6 +153,28 @@ var prefixCls = props.prefixCls, | ||
); | ||
} | ||
}); | ||
}; | ||
return CalendarPart; | ||
}(_react2['default'].Component); | ||
CalendarPart.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
value: _propTypes2['default'].any, | ||
hoverValue: _propTypes2['default'].any, | ||
selectedValue: _propTypes2['default'].any, | ||
direction: _propTypes2['default'].any, | ||
locale: _propTypes2['default'].any, | ||
showDateInput: _propTypes2['default'].bool, | ||
showTimePicker: _propTypes2['default'].bool, | ||
format: _propTypes2['default'].any, | ||
placeholder: _propTypes2['default'].any, | ||
disabledDate: _propTypes2['default'].any, | ||
timePicker: _propTypes2['default'].any, | ||
disabledTime: _propTypes2['default'].any, | ||
onInputSelect: _propTypes2['default'].func, | ||
timePickerDisabledTime: _propTypes2['default'].object, | ||
enableNext: _propTypes2['default'].any, | ||
enablePrev: _propTypes2['default'].any, | ||
clearIcon: _propTypes2['default'].node | ||
}; | ||
exports['default'] = CalendarPart; | ||
module.exports = exports['default']; |
@@ -9,2 +9,14 @@ 'use strict'; | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _react = require('react'); | ||
@@ -14,6 +26,2 @@ | ||
var _createReactClass = require('create-react-class'); | ||
var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
var _propTypes = require('prop-types'); | ||
@@ -53,4 +61,2 @@ | ||
var _CommonMixin2 = _interopRequireDefault(_CommonMixin); | ||
var _util = require('./util'); | ||
@@ -123,56 +129,15 @@ | ||
var RangeCalendar = (0, _createReactClass2['default'])({ | ||
displayName: 'RangeCalendar', | ||
var RangeCalendar = function (_React$Component) { | ||
(0, _inherits3['default'])(RangeCalendar, _React$Component); | ||
propTypes: { | ||
prefixCls: _propTypes2['default'].string, | ||
dateInputPlaceholder: _propTypes2['default'].any, | ||
seperator: _propTypes2['default'].string, | ||
defaultValue: _propTypes2['default'].any, | ||
value: _propTypes2['default'].any, | ||
hoverValue: _propTypes2['default'].any, | ||
mode: _propTypes2['default'].arrayOf(_propTypes2['default'].oneOf(['date', 'month', 'year', 'decade'])), | ||
showDateInput: _propTypes2['default'].bool, | ||
timePicker: _propTypes2['default'].any, | ||
showOk: _propTypes2['default'].bool, | ||
showToday: _propTypes2['default'].bool, | ||
defaultSelectedValue: _propTypes2['default'].array, | ||
selectedValue: _propTypes2['default'].array, | ||
onOk: _propTypes2['default'].func, | ||
showClear: _propTypes2['default'].bool, | ||
locale: _propTypes2['default'].object, | ||
onChange: _propTypes2['default'].func, | ||
onSelect: _propTypes2['default'].func, | ||
onValueChange: _propTypes2['default'].func, | ||
onHoverChange: _propTypes2['default'].func, | ||
onPanelChange: _propTypes2['default'].func, | ||
format: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].string]), | ||
onClear: _propTypes2['default'].func, | ||
type: _propTypes2['default'].any, | ||
disabledDate: _propTypes2['default'].func, | ||
disabledTime: _propTypes2['default'].func, | ||
clearIcon: _propTypes2['default'].node | ||
}, | ||
function RangeCalendar(props) { | ||
(0, _classCallCheck3['default'])(this, RangeCalendar); | ||
mixins: [_CommonMixin2['default']], | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props)); | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
type: 'both', | ||
seperator: '~', | ||
defaultSelectedValue: [], | ||
onValueChange: noop, | ||
onHoverChange: noop, | ||
onPanelChange: noop, | ||
disabledTime: noop, | ||
onInputSelect: noop, | ||
showToday: true, | ||
showDateInput: true | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
var props = this.props; | ||
_initialiseProps.call(_this); | ||
var selectedValue = props.selectedValue || props.defaultSelectedValue; | ||
var value = normalizeAnchor(props, 1); | ||
return { | ||
_this.state = { | ||
selectedValue: selectedValue, | ||
@@ -186,13 +151,12 @@ prevSelectedValue: selectedValue, | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
var state = this.state; | ||
return _this; | ||
} | ||
RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) { | ||
var newState = {}; | ||
if ('value' in nextProps) { | ||
newState.value = normalizeAnchor(nextProps, 0); | ||
this.setState(newState); | ||
} | ||
if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) { | ||
this.setState({ hoverValue: nextProps.hoverValue }); | ||
newState.hoverValue = nextProps.hoverValue; | ||
} | ||
@@ -202,21 +166,236 @@ if ('selectedValue' in nextProps) { | ||
newState.prevSelectedValue = nextProps.selectedValue; | ||
this.setState(newState); | ||
} | ||
if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) { | ||
this.setState({ mode: nextProps.mode }); | ||
newState = { mode: nextProps.mode }; | ||
} | ||
}, | ||
onDatePanelEnter: function onDatePanelEnter() { | ||
if (this.hasSelectedValue()) { | ||
this.fireHoverValueChange(this.state.selectedValue.concat()); | ||
return newState; | ||
}; | ||
// get disabled hours for second picker | ||
RangeCalendar.prototype.render = function render() { | ||
var _className, _classnames; | ||
var props = this.props, | ||
state = this.state; | ||
var prefixCls = props.prefixCls, | ||
dateInputPlaceholder = props.dateInputPlaceholder, | ||
seperator = props.seperator, | ||
timePicker = props.timePicker, | ||
showOk = props.showOk, | ||
locale = props.locale, | ||
showClear = props.showClear, | ||
showToday = props.showToday, | ||
type = props.type, | ||
clearIcon = props.clearIcon; | ||
var hoverValue = state.hoverValue, | ||
selectedValue = state.selectedValue, | ||
mode = state.mode, | ||
showTimePicker = state.showTimePicker; | ||
var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className); | ||
var classes = (0, _classnames3['default'])(className); | ||
var newProps = { | ||
selectedValue: state.selectedValue, | ||
onSelect: this.onSelect, | ||
onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined | ||
}; | ||
var placeholder1 = void 0; | ||
var placeholder2 = void 0; | ||
if (dateInputPlaceholder) { | ||
if (Array.isArray(dateInputPlaceholder)) { | ||
placeholder1 = dateInputPlaceholder[0]; | ||
placeholder2 = dateInputPlaceholder[1]; | ||
} else { | ||
placeholder1 = placeholder2 = dateInputPlaceholder; | ||
} | ||
} | ||
}, | ||
onDatePanelLeave: function onDatePanelLeave() { | ||
if (this.hasSelectedValue()) { | ||
this.fireHoverValueChange([]); | ||
var showOkButton = showOk === true || showOk !== false && !!timePicker; | ||
var cls = (0, _classnames3['default'])((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames)); | ||
var startValue = this.getStartValue(); | ||
var endValue = this.getEndValue(); | ||
var todayTime = (0, _util.getTodayTime)(startValue); | ||
var thisMonth = todayTime.month(); | ||
var thisYear = todayTime.year(); | ||
var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth; | ||
var nextMonthOfStart = startValue.clone().add(1, 'months'); | ||
var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month(); | ||
// console.warn('Render:', selectedValue.map(t => t.format('YYYY-MM-DD')).join(', ')); | ||
// console.log('start:', startValue.format('YYYY-MM-DD')); | ||
// console.log('end:', endValue.format('YYYY-MM-DD')); | ||
var extraFooter = props.renderFooter(); | ||
return _react2['default'].createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: classes, | ||
style: props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
props.renderSidebar(), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-panel' }, | ||
showClear && selectedValue[0] && selectedValue[1] ? _react2['default'].createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.clear | ||
}, | ||
clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null, | ||
_react2['default'].createElement( | ||
'div', | ||
{ | ||
className: prefixCls + '-date-panel', | ||
onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined, | ||
onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined | ||
}, | ||
_react2['default'].createElement(_CalendarPart2['default'], (0, _extends3['default'])({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'left', | ||
disabledTime: this.disabledStartTime, | ||
disabledMonth: this.disabledStartMonth, | ||
format: this.getFormat(), | ||
value: startValue, | ||
mode: mode[0], | ||
placeholder: placeholder1, | ||
onInputSelect: this.onStartInputSelect, | ||
onValueChange: this.onStartValueChange, | ||
onPanelChange: this.onStartPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
enablePrev: true, | ||
enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]), | ||
clearIcon: clearIcon | ||
})), | ||
_react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-range-middle' }, | ||
seperator | ||
), | ||
_react2['default'].createElement(_CalendarPart2['default'], (0, _extends3['default'])({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'right', | ||
format: this.getFormat(), | ||
timePickerDisabledTime: this.getEndDisableTime(), | ||
placeholder: placeholder2, | ||
value: endValue, | ||
mode: mode[1], | ||
onInputSelect: this.onEndInputSelect, | ||
onValueChange: this.onEndValueChange, | ||
onPanelChange: this.onEndPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
disabledTime: this.disabledEndTime, | ||
disabledMonth: this.disabledEndMonth, | ||
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]), | ||
enableNext: true, | ||
clearIcon: clearIcon | ||
})) | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: cls }, | ||
showToday || props.timePicker || showOkButton || extraFooter ? _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-footer-btn' }, | ||
extraFooter, | ||
showToday ? _react2['default'].createElement(_TodayButton2['default'], (0, _extends3['default'])({}, props, { | ||
disabled: isTodayInView, | ||
value: state.value[0], | ||
onToday: this.onToday, | ||
text: locale.backToToday | ||
})) : null, | ||
props.timePicker ? _react2['default'].createElement(_TimePickerButton2['default'], (0, _extends3['default'])({}, props, { | ||
showTimePicker: showTimePicker, | ||
onOpenTimePicker: this.onOpenTimePicker, | ||
onCloseTimePicker: this.onCloseTimePicker, | ||
timePickerDisabled: !this.hasSelectedValue() || hoverValue.length | ||
})) : null, | ||
showOkButton ? _react2['default'].createElement(_OkButton2['default'], (0, _extends3['default'])({}, props, { | ||
onOk: this.onOk, | ||
okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length | ||
})) : null | ||
) : null | ||
) | ||
) | ||
); | ||
}; | ||
return RangeCalendar; | ||
}(_react2['default'].Component); | ||
RangeCalendar.propTypes = (0, _extends3['default'])({}, _CommonMixin.propType, { | ||
prefixCls: _propTypes2['default'].string, | ||
dateInputPlaceholder: _propTypes2['default'].any, | ||
seperator: _propTypes2['default'].string, | ||
defaultValue: _propTypes2['default'].any, | ||
value: _propTypes2['default'].any, | ||
hoverValue: _propTypes2['default'].any, | ||
mode: _propTypes2['default'].arrayOf(_propTypes2['default'].oneOf(['date', 'month', 'year', 'decade'])), | ||
showDateInput: _propTypes2['default'].bool, | ||
timePicker: _propTypes2['default'].any, | ||
showOk: _propTypes2['default'].bool, | ||
showToday: _propTypes2['default'].bool, | ||
defaultSelectedValue: _propTypes2['default'].array, | ||
selectedValue: _propTypes2['default'].array, | ||
onOk: _propTypes2['default'].func, | ||
showClear: _propTypes2['default'].bool, | ||
locale: _propTypes2['default'].object, | ||
onChange: _propTypes2['default'].func, | ||
onSelect: _propTypes2['default'].func, | ||
onValueChange: _propTypes2['default'].func, | ||
onHoverChange: _propTypes2['default'].func, | ||
onPanelChange: _propTypes2['default'].func, | ||
format: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].string]), | ||
onClear: _propTypes2['default'].func, | ||
type: _propTypes2['default'].any, | ||
disabledDate: _propTypes2['default'].func, | ||
disabledTime: _propTypes2['default'].func, | ||
clearIcon: _propTypes2['default'].node, | ||
onKeyDown: _propTypes2['default'].func | ||
}); | ||
RangeCalendar.defaultProps = (0, _extends3['default'])({}, _CommonMixin.defaultProp, { | ||
type: 'both', | ||
seperator: '~', | ||
defaultSelectedValue: [], | ||
onValueChange: noop, | ||
onHoverChange: noop, | ||
onPanelChange: noop, | ||
disabledTime: noop, | ||
onInputSelect: noop, | ||
showToday: true, | ||
showDateInput: true | ||
}); | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onDatePanelEnter = function () { | ||
if (_this2.hasSelectedValue()) { | ||
_this2.fireHoverValueChange(_this2.state.selectedValue.concat()); | ||
} | ||
}, | ||
onSelect: function onSelect(value) { | ||
var type = this.props.type; | ||
var _state = this.state, | ||
}; | ||
this.onDatePanelLeave = function () { | ||
if (_this2.hasSelectedValue()) { | ||
_this2.fireHoverValueChange([]); | ||
} | ||
}; | ||
this.onSelect = function (value) { | ||
var type = _this2.props.type; | ||
var _state = _this2.state, | ||
selectedValue = _state.selectedValue, | ||
@@ -231,3 +410,3 @@ prevSelectedValue = _state.prevSelectedValue, | ||
nextSelectedValue = [value]; | ||
} else if (this.compare(firstSelectedValue, value) < 0) { | ||
} else if (_this2.compare(firstSelectedValue, value) < 0) { | ||
(0, _util.syncTime)(prevSelectedValue[1], value); | ||
@@ -243,7 +422,7 @@ nextSelectedValue = [firstSelectedValue, value]; | ||
var endValue = selectedValue[1]; | ||
nextSelectedValue = endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value]; | ||
nextSelectedValue = endValue && _this2.compare(endValue, value) > 0 ? [value, endValue] : [value]; | ||
} else { | ||
// type === 'end' | ||
var startValue = selectedValue[0]; | ||
if (startValue && this.compare(startValue, value) <= 0) { | ||
if (startValue && _this2.compare(startValue, value) <= 0) { | ||
(0, _util.syncTime)(prevSelectedValue[1], value); | ||
@@ -257,7 +436,6 @@ nextSelectedValue = [startValue, value]; | ||
this.fireSelectValueChange(nextSelectedValue); | ||
}, | ||
onKeyDown: function onKeyDown(event) { | ||
var _this = this; | ||
_this2.fireSelectValueChange(nextSelectedValue); | ||
}; | ||
this.onKeyDown = function (event) { | ||
if (event.target.nodeName.toLowerCase() === 'input') { | ||
@@ -271,3 +449,3 @@ return; | ||
var _state2 = this.state, | ||
var _state2 = _this2.state, | ||
selectedValue = _state2.selectedValue, | ||
@@ -277,3 +455,3 @@ hoverValue = _state2.hoverValue, | ||
value = _state2.value; | ||
var _props = this.props, | ||
var _props = _this2.props, | ||
onKeyDown = _props.onKeyDown, | ||
@@ -294,3 +472,3 @@ disabledDate = _props.disabledDate; | ||
nextHoverValue = [nextHoverTime]; | ||
_this.fireHoverValueChange(nextHoverValue); | ||
_this2.fireHoverValueChange(nextHoverValue); | ||
} else { | ||
@@ -300,7 +478,7 @@ if (hoverValue.length === 1) { | ||
nextHoverTime = func(currentHoverTime); | ||
nextHoverValue = _this.onDayHover(nextHoverTime); | ||
nextHoverValue = _this2.onDayHover(nextHoverTime); | ||
} else { | ||
currentHoverTime = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0]; | ||
nextHoverTime = func(currentHoverTime); | ||
nextHoverValue = _this.onDayHover(nextHoverTime); | ||
nextHoverValue = _this2.onDayHover(nextHoverTime); | ||
} | ||
@@ -321,3 +499,3 @@ } | ||
} | ||
_this.fireValueChange(newValue); | ||
_this2.fireValueChange(newValue); | ||
} | ||
@@ -336,3 +514,3 @@ } else if (nextHoverValue.length === 1) { | ||
_newValue[oriValueIndex] = nextHoverTime.clone(); | ||
_this.fireValueChange(_newValue); | ||
_this2.fireValueChange(_newValue); | ||
} | ||
@@ -412,3 +590,3 @@ } | ||
if (lastValue && (!disabledDate || !disabledDate(lastValue))) { | ||
this.onSelect(lastValue); | ||
_this2.onSelect(lastValue); | ||
} | ||
@@ -423,50 +601,56 @@ event.preventDefault(); | ||
} | ||
}, | ||
onDayHover: function onDayHover(value) { | ||
}; | ||
this.onDayHover = function (value) { | ||
var hoverValue = []; | ||
var _state3 = this.state, | ||
var _state3 = _this2.state, | ||
selectedValue = _state3.selectedValue, | ||
firstSelectedValue = _state3.firstSelectedValue; | ||
var type = this.props.type; | ||
var type = _this2.props.type; | ||
if (type === 'start' && selectedValue[1]) { | ||
hoverValue = this.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value]; | ||
hoverValue = _this2.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value]; | ||
} else if (type === 'end' && selectedValue[0]) { | ||
hoverValue = this.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : []; | ||
hoverValue = _this2.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : []; | ||
} else { | ||
if (!firstSelectedValue) { | ||
if (this.state.hoverValue.length) { | ||
this.setState({ hoverValue: [] }); | ||
if (_this2.state.hoverValue.length) { | ||
_this2.setState({ hoverValue: [] }); | ||
} | ||
return hoverValue; | ||
} | ||
hoverValue = this.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value]; | ||
hoverValue = _this2.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value]; | ||
} | ||
this.fireHoverValueChange(hoverValue); | ||
_this2.fireHoverValueChange(hoverValue); | ||
return hoverValue; | ||
}, | ||
onToday: function onToday() { | ||
var startValue = (0, _util.getTodayTime)(this.state.value[0]); | ||
}; | ||
this.onToday = function () { | ||
var startValue = (0, _util.getTodayTime)(_this2.state.value[0]); | ||
var endValue = startValue.clone().add(1, 'months'); | ||
this.setState({ value: [startValue, endValue] }); | ||
}, | ||
onOpenTimePicker: function onOpenTimePicker() { | ||
this.setState({ | ||
_this2.setState({ value: [startValue, endValue] }); | ||
}; | ||
this.onOpenTimePicker = function () { | ||
_this2.setState({ | ||
showTimePicker: true | ||
}); | ||
}, | ||
onCloseTimePicker: function onCloseTimePicker() { | ||
this.setState({ | ||
}; | ||
this.onCloseTimePicker = function () { | ||
_this2.setState({ | ||
showTimePicker: false | ||
}); | ||
}, | ||
onOk: function onOk() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
if (this.isAllowedDateAndTime(selectedValue)) { | ||
this.props.onOk(this.state.selectedValue); | ||
this.onOk = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
if (_this2.isAllowedDateAndTime(selectedValue)) { | ||
_this2.props.onOk(_this2.state.selectedValue); | ||
} | ||
}, | ||
onStartInputSelect: function onStartInputSelect() { | ||
}; | ||
this.onStartInputSelect = function () { | ||
for (var _len = arguments.length, oargs = Array(_len), _key = 0; _key < _len; _key++) { | ||
@@ -477,5 +661,6 @@ oargs[_key] = arguments[_key]; | ||
var args = ['left'].concat(oargs); | ||
return onInputSelect.apply(this, args); | ||
}, | ||
onEndInputSelect: function onEndInputSelect() { | ||
return onInputSelect.apply(_this2, args); | ||
}; | ||
this.onEndInputSelect = function () { | ||
for (var _len2 = arguments.length, oargs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
@@ -486,21 +671,24 @@ oargs[_key2] = arguments[_key2]; | ||
var args = ['right'].concat(oargs); | ||
return onInputSelect.apply(this, args); | ||
}, | ||
onStartValueChange: function onStartValueChange(leftValue) { | ||
var value = [].concat(this.state.value); | ||
return onInputSelect.apply(_this2, args); | ||
}; | ||
this.onStartValueChange = function (leftValue) { | ||
var value = [].concat(_this2.state.value); | ||
value[0] = leftValue; | ||
return this.fireValueChange(value); | ||
}, | ||
onEndValueChange: function onEndValueChange(rightValue) { | ||
var value = [].concat(this.state.value); | ||
return _this2.fireValueChange(value); | ||
}; | ||
this.onEndValueChange = function (rightValue) { | ||
var value = [].concat(_this2.state.value); | ||
value[1] = rightValue; | ||
return this.fireValueChange(value); | ||
}, | ||
onStartPanelChange: function onStartPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
return _this2.fireValueChange(value); | ||
}; | ||
this.onStartPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
var newMode = [mode, state.mode[1]]; | ||
if (!('mode' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
mode: newMode | ||
@@ -511,10 +699,11 @@ }); | ||
props.onPanelChange(newValue, newMode); | ||
}, | ||
onEndPanelChange: function onEndPanelChange(value, mode) { | ||
var props = this.props, | ||
state = this.state; | ||
}; | ||
this.onEndPanelChange = function (value, mode) { | ||
var props = _this2.props, | ||
state = _this2.state; | ||
var newMode = [state.mode[0], mode]; | ||
if (!('mode' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
mode: newMode | ||
@@ -525,18 +714,20 @@ }); | ||
props.onPanelChange(newValue, newMode); | ||
}, | ||
getStartValue: function getStartValue() { | ||
var value = this.state.value[0]; | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
this.getStartValue = function () { | ||
var value = _this2.state.value[0]; | ||
var selectedValue = _this2.state.selectedValue; | ||
// keep selectedTime when select date | ||
if (selectedValue[0] && this.props.timePicker) { | ||
if (selectedValue[0] && _this2.props.timePicker) { | ||
value = value.clone(); | ||
(0, _util.syncTime)(selectedValue[0], value); | ||
} | ||
if (this.state.showTimePicker && selectedValue[0]) { | ||
if (_this2.state.showTimePicker && selectedValue[0]) { | ||
return selectedValue[0]; | ||
} | ||
return value; | ||
}, | ||
getEndValue: function getEndValue() { | ||
var _state4 = this.state, | ||
}; | ||
this.getEndValue = function () { | ||
var _state4 = _this2.state, | ||
value = _state4.value, | ||
@@ -548,17 +739,16 @@ selectedValue = _state4.selectedValue, | ||
// keep selectedTime when select date | ||
if (selectedValue[1] && this.props.timePicker) { | ||
if (selectedValue[1] && _this2.props.timePicker) { | ||
(0, _util.syncTime)(selectedValue[1], endValue); | ||
} | ||
if (showTimePicker) { | ||
return selectedValue[1] ? selectedValue[1] : this.getStartValue(); | ||
return selectedValue[1] ? selectedValue[1] : _this2.getStartValue(); | ||
} | ||
return endValue; | ||
}, | ||
}; | ||
// get disabled hours for second picker | ||
getEndDisableTime: function getEndDisableTime() { | ||
var _state5 = this.state, | ||
this.getEndDisableTime = function () { | ||
var _state5 = _this2.state, | ||
selectedValue = _state5.selectedValue, | ||
value = _state5.value; | ||
var disabledTime = this.props.disabledTime; | ||
var disabledTime = _this2.props.disabledTime; | ||
@@ -601,24 +791,29 @@ var userSettingDisabledTime = disabledTime(selectedValue, 'end') || {}; | ||
return userSettingDisabledTime; | ||
}, | ||
isAllowedDateAndTime: function isAllowedDateAndTime(selectedValue) { | ||
return (0, _util.isAllowedDate)(selectedValue[0], this.props.disabledDate, this.disabledStartTime) && (0, _util.isAllowedDate)(selectedValue[1], this.props.disabledDate, this.disabledEndTime); | ||
}, | ||
isMonthYearPanelShow: function isMonthYearPanelShow(mode) { | ||
}; | ||
this.isAllowedDateAndTime = function (selectedValue) { | ||
return (0, _util.isAllowedDate)(selectedValue[0], _this2.props.disabledDate, _this2.disabledStartTime) && (0, _util.isAllowedDate)(selectedValue[1], _this2.props.disabledDate, _this2.disabledEndTime); | ||
}; | ||
this.isMonthYearPanelShow = function (mode) { | ||
return ['month', 'year', 'decade'].indexOf(mode) > -1; | ||
}, | ||
hasSelectedValue: function hasSelectedValue() { | ||
var selectedValue = this.state.selectedValue; | ||
}; | ||
this.hasSelectedValue = function () { | ||
var selectedValue = _this2.state.selectedValue; | ||
return !!selectedValue[1] && !!selectedValue[0]; | ||
}, | ||
compare: function compare(v1, v2) { | ||
if (this.props.timePicker) { | ||
}; | ||
this.compare = function (v1, v2) { | ||
if (_this2.props.timePicker) { | ||
return v1.diff(v2); | ||
} | ||
return v1.diff(v2, 'days'); | ||
}, | ||
fireSelectValueChange: function fireSelectValueChange(selectedValue, direct) { | ||
var timePicker = this.props.timePicker; | ||
var prevSelectedValue = this.state.prevSelectedValue; | ||
}; | ||
this.fireSelectValueChange = function (selectedValue, direct) { | ||
var timePicker = _this2.props.timePicker; | ||
var prevSelectedValue = _this2.state.prevSelectedValue; | ||
if (timePicker && timePicker.props.defaultValue) { | ||
@@ -634,4 +829,4 @@ var timePickerDefaultValue = timePicker.props.defaultValue; | ||
if (!('selectedValue' in this.props)) { | ||
this.setState({ | ||
if (!('selectedValue' in _this2.props)) { | ||
_this2.setState({ | ||
selectedValue: selectedValue | ||
@@ -642,6 +837,6 @@ }); | ||
// 尚未选择过时间,直接输入的话 | ||
if (!this.state.selectedValue[0] || !this.state.selectedValue[1]) { | ||
if (!_this2.state.selectedValue[0] || !_this2.state.selectedValue[1]) { | ||
var startValue = selectedValue[0] || (0, _moment2['default'])(); | ||
var endValue = selectedValue[1] || startValue.clone().add(1, 'months'); | ||
this.setState({ | ||
_this2.setState({ | ||
selectedValue: selectedValue, | ||
@@ -653,19 +848,20 @@ value: getValueFromSelectedValue([startValue, endValue]) | ||
if (selectedValue[0] && !selectedValue[1]) { | ||
this.setState({ firstSelectedValue: selectedValue[0] }); | ||
this.fireHoverValueChange(selectedValue.concat()); | ||
_this2.setState({ firstSelectedValue: selectedValue[0] }); | ||
_this2.fireHoverValueChange(selectedValue.concat()); | ||
} | ||
this.props.onChange(selectedValue); | ||
_this2.props.onChange(selectedValue); | ||
if (direct || selectedValue[0] && selectedValue[1]) { | ||
this.setState({ | ||
_this2.setState({ | ||
prevSelectedValue: selectedValue, | ||
firstSelectedValue: null | ||
}); | ||
this.fireHoverValueChange([]); | ||
this.props.onSelect(selectedValue); | ||
_this2.fireHoverValueChange([]); | ||
_this2.props.onSelect(selectedValue); | ||
} | ||
}, | ||
fireValueChange: function fireValueChange(value) { | ||
var props = this.props; | ||
}; | ||
this.fireValueChange = function (value) { | ||
var props = _this2.props; | ||
if (!('value' in props)) { | ||
this.setState({ | ||
_this2.setState({ | ||
value: value | ||
@@ -675,192 +871,39 @@ }); | ||
props.onValueChange(value); | ||
}, | ||
fireHoverValueChange: function fireHoverValueChange(hoverValue) { | ||
var props = this.props; | ||
}; | ||
this.fireHoverValueChange = function (hoverValue) { | ||
var props = _this2.props; | ||
if (!('hoverValue' in props)) { | ||
this.setState({ hoverValue: hoverValue }); | ||
_this2.setState({ hoverValue: hoverValue }); | ||
} | ||
props.onHoverChange(hoverValue); | ||
}, | ||
clear: function clear() { | ||
this.fireSelectValueChange([], true); | ||
this.props.onClear(); | ||
}, | ||
disabledStartTime: function disabledStartTime(time) { | ||
return this.props.disabledTime(time, 'start'); | ||
}, | ||
disabledEndTime: function disabledEndTime(time) { | ||
return this.props.disabledTime(time, 'end'); | ||
}, | ||
disabledStartMonth: function disabledStartMonth(month) { | ||
var value = this.state.value; | ||
}; | ||
return month.isSameOrAfter(value[1], 'month'); | ||
}, | ||
disabledEndMonth: function disabledEndMonth(month) { | ||
var value = this.state.value; | ||
this.clear = function () { | ||
_this2.fireSelectValueChange([], true); | ||
_this2.props.onClear(); | ||
}; | ||
return month.isSameOrBefore(value[0], 'month'); | ||
}, | ||
render: function render() { | ||
var _className, _classnames; | ||
this.disabledStartTime = function (time) { | ||
return _this2.props.disabledTime(time, 'start'); | ||
}; | ||
var props = this.props, | ||
state = this.state; | ||
var prefixCls = props.prefixCls, | ||
dateInputPlaceholder = props.dateInputPlaceholder, | ||
seperator = props.seperator, | ||
timePicker = props.timePicker, | ||
showOk = props.showOk, | ||
locale = props.locale, | ||
showClear = props.showClear, | ||
showToday = props.showToday, | ||
type = props.type, | ||
clearIcon = props.clearIcon; | ||
var hoverValue = state.hoverValue, | ||
selectedValue = state.selectedValue, | ||
mode = state.mode, | ||
showTimePicker = state.showTimePicker; | ||
this.disabledEndTime = function (time) { | ||
return _this2.props.disabledTime(time, 'end'); | ||
}; | ||
var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className); | ||
var classes = (0, _classnames3['default'])(className); | ||
var newProps = { | ||
selectedValue: state.selectedValue, | ||
onSelect: this.onSelect, | ||
onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined | ||
}; | ||
this.disabledStartMonth = function (month) { | ||
var value = _this2.state.value; | ||
var placeholder1 = void 0; | ||
var placeholder2 = void 0; | ||
return month.isSameOrAfter(value[1], 'month'); | ||
}; | ||
if (dateInputPlaceholder) { | ||
if (Array.isArray(dateInputPlaceholder)) { | ||
placeholder1 = dateInputPlaceholder[0]; | ||
placeholder2 = dateInputPlaceholder[1]; | ||
} else { | ||
placeholder1 = placeholder2 = dateInputPlaceholder; | ||
} | ||
} | ||
var showOkButton = showOk === true || showOk !== false && !!timePicker; | ||
var cls = (0, _classnames3['default'])((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames)); | ||
this.disabledEndMonth = function (month) { | ||
var value = _this2.state.value; | ||
var startValue = this.getStartValue(); | ||
var endValue = this.getEndValue(); | ||
var todayTime = (0, _util.getTodayTime)(startValue); | ||
var thisMonth = todayTime.month(); | ||
var thisYear = todayTime.year(); | ||
var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth; | ||
var nextMonthOfStart = startValue.clone().add(1, 'months'); | ||
var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month(); | ||
return month.isSameOrBefore(value[0], 'month'); | ||
}; | ||
}; | ||
// console.warn('Render:', selectedValue.map(t => t.format('YYYY-MM-DD')).join(', ')); | ||
// console.log('start:', startValue.format('YYYY-MM-DD')); | ||
// console.log('end:', endValue.format('YYYY-MM-DD')); | ||
var extraFooter = props.renderFooter(); | ||
return _react2['default'].createElement( | ||
'div', | ||
{ | ||
ref: this.saveRoot, | ||
className: classes, | ||
style: props.style, | ||
tabIndex: '0', | ||
onKeyDown: this.onKeyDown | ||
}, | ||
props.renderSidebar(), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-panel' }, | ||
showClear && selectedValue[0] && selectedValue[1] ? _react2['default'].createElement( | ||
'a', | ||
{ | ||
role: 'button', | ||
title: locale.clear, | ||
onClick: this.clear | ||
}, | ||
clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' }) | ||
) : null, | ||
_react2['default'].createElement( | ||
'div', | ||
{ | ||
className: prefixCls + '-date-panel', | ||
onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined, | ||
onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined | ||
}, | ||
_react2['default'].createElement(_CalendarPart2['default'], (0, _extends3['default'])({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'left', | ||
disabledTime: this.disabledStartTime, | ||
disabledMonth: this.disabledStartMonth, | ||
format: this.getFormat(), | ||
value: startValue, | ||
mode: mode[0], | ||
placeholder: placeholder1, | ||
onInputSelect: this.onStartInputSelect, | ||
onValueChange: this.onStartValueChange, | ||
onPanelChange: this.onStartPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
enablePrev: true, | ||
enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]), | ||
clearIcon: clearIcon | ||
})), | ||
_react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-range-middle' }, | ||
seperator | ||
), | ||
_react2['default'].createElement(_CalendarPart2['default'], (0, _extends3['default'])({}, props, newProps, { | ||
hoverValue: hoverValue, | ||
direction: 'right', | ||
format: this.getFormat(), | ||
timePickerDisabledTime: this.getEndDisableTime(), | ||
placeholder: placeholder2, | ||
value: endValue, | ||
mode: mode[1], | ||
onInputSelect: this.onEndInputSelect, | ||
onValueChange: this.onEndValueChange, | ||
onPanelChange: this.onEndPanelChange, | ||
showDateInput: this.props.showDateInput, | ||
timePicker: timePicker, | ||
showTimePicker: showTimePicker, | ||
disabledTime: this.disabledEndTime, | ||
disabledMonth: this.disabledEndMonth, | ||
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]), | ||
enableNext: true, | ||
clearIcon: clearIcon | ||
})) | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: cls }, | ||
showToday || props.timePicker || showOkButton || extraFooter ? _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-footer-btn' }, | ||
extraFooter, | ||
showToday ? _react2['default'].createElement(_TodayButton2['default'], (0, _extends3['default'])({}, props, { | ||
disabled: isTodayInView, | ||
value: state.value[0], | ||
onToday: this.onToday, | ||
text: locale.backToToday | ||
})) : null, | ||
props.timePicker ? _react2['default'].createElement(_TimePickerButton2['default'], (0, _extends3['default'])({}, props, { | ||
showTimePicker: showTimePicker, | ||
onOpenTimePicker: this.onOpenTimePicker, | ||
onCloseTimePicker: this.onCloseTimePicker, | ||
timePickerDisabled: !this.hasSelectedValue() || hoverValue.length | ||
})) : null, | ||
showOkButton ? _react2['default'].createElement(_OkButton2['default'], (0, _extends3['default'])({}, props, { | ||
onOk: this.onOk, | ||
okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length | ||
})) : null | ||
) : null | ||
) | ||
) | ||
); | ||
} | ||
}); | ||
exports['default'] = RangeCalendar; | ||
exports['default'] = (0, _CommonMixin.commonMixinWrapper)(RangeCalendar); | ||
module.exports = exports['default']; |
{ | ||
"name": "rc-calendar", | ||
"version": "9.9.2", | ||
"version": "9.10.0", | ||
"description": "React Calendar", | ||
@@ -83,4 +83,4 @@ "keywords": [ | ||
"rc-tools": "^7.0.3", | ||
"react": "^16.0.0", | ||
"react-dom": "^16.0.0", | ||
"react": "^16.5.2", | ||
"react-dom": "^16.5.2", | ||
"react-test-renderer": "^16.0.0", | ||
@@ -96,9 +96,9 @@ "tslint": "^5.9.1", | ||
"classnames": "2.x", | ||
"create-react-class": "^15.5.2", | ||
"moment": "2.x", | ||
"prop-types": "^15.5.8", | ||
"rc-trigger": "^2.2.0", | ||
"rc-util": "^4.1.1" | ||
"rc-util": "^4.1.1", | ||
"react-lifecycles-compat": "^3.0.4" | ||
}, | ||
"types": "index.d.ts" | ||
} |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
11
1474376
22608
- Removedcreate-react-class@^15.5.2
- Removedcreate-react-class@15.7.0(transitive)