dtd/es/date-picker/RangePicker.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _extends from"babel-runtime/helpers/extends";import _defineProperty from"babel-runtime/helpers/defineProperty";import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import _slicedToArray from"babel-runtime/helpers/slicedToArray";import*as React from"react";import*as moment from"moment";import RangeCalendar from"../calendarbase/RangeCalendar";import RcDatePicker from"../calendarbase/Picker";import classNames from"classnames";import Icon from"../icon";import warning from"../_util/warning";import callMoment from"../_util/callMoment";function getShowDateFromValue(e){var a=_slicedToArray(e,2),t=a[0],n=a[1];if(t||n)return[t,n&&n.isSame(t,"month")?n.clone().add(1,"month"):n]}function formatValue(e,a){return e&&e.format(a)||""}function pickerValueAdapter(e){if(e)return Array.isArray(e)?e:[e,e.clone().add(1,"month")]}function isEmptyArray(e){return!!Array.isArray(e)&&(0===e.length||e.every(function(e){return!e}))}function fixLocale(e,a){a&&e&&0!==e.length&&(e[0]&&e[0].locale(a),e[1]&&e[1].locale(a))}var RangePicker=function(e){function a(e){_classCallCheck(this,a);var t=_possibleConstructorReturn(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,e));t.clearSelection=function(e){e.preventDefault(),e.stopPropagation(),t.setState({value:[]}),t.handleChange([])},t.clearHoverValue=function(){return t.setState({hoverValue:[]})},t.handleChange=function(e){var a=t.props;"value"in a||t.setState(function(a){var t=a.showDate;return{value:e,showDate:getShowDateFromValue(e)||t}}),a.onChange(e,[formatValue(e[0],a.format),formatValue(e[1],a.format)])},t.handleOpenChange=function(e){"open"in t.props||t.setState({open:e}),!1===e&&t.clearHoverValue();var a=t.props.onOpenChange;a&&a(e)},t.handleShowDateChange=function(e){return t.setState({showDate:e})},t.handleHoverChange=function(e){return t.setState({hoverValue:e})},t.handleRangeMouseLeave=function(){t.state.open&&t.clearHoverValue()},t.handleCalendarInputSelect=function(e){e[0]&&t.setState(function(a){var t=a.showDate;return{value:e,showDate:getShowDateFromValue(e)||t}})},t.handleRangeClick=function(e){"function"==typeof e&&(e=e()),t.setValue(e,!0);var a=t.props.onOk;a&&a(e)},t.savePicker=function(e){t.picker=e},t.renderFooter=function(){var e=t.props,a=e.prefixCls,n=e.ranges,r=e.renderExtraFooter;if(!n&&!r)return null;var o=r?React.createElement("div",{className:a+"-footer-extra",key:"extra"},r.apply(void 0,arguments)):null,l=Object.keys(n||{}).map(function(e){var a=n[e];return React.createElement("a",{key:e,onClick:function(){return t.handleRangeClick(a)},onMouseEnter:function(){return t.setState({hoverValue:a})},onMouseLeave:t.handleRangeMouseLeave},e)});return[React.createElement("div",{className:a+"-footer-extra "+a+"-range-quick-selector",key:"range"},l),o]};var n=e.value||e.defaultValue||[];if(n[0]&&!moment.isMoment(n[0])||n[1]&&!moment.isMoment(n[1]))throw new Error("The value/defaultValue of RangePicker must be a moment object array after `dtd@2.0`, see: #");var r=!n||isEmptyArray(n)?e.defaultPickerValue:n;return t.state={value:n,showDate:pickerValueAdapter(r||callMoment(moment)),open:e.open,hoverValue:[]},t}return _inherits(a,e),_createClass(a,[{key:"componentWillReceiveProps",value:function(e){if("value"in e){var a=this.state,t=e.value||[];this.setState({value:t,showDate:getShowDateFromValue(t)||a.showDate})}"open"in e&&this.setState({open:e.open})}},{key:"setValue",value:function(e,a){this.handleChange(e),!a&&this.props.showTime||"open"in this.props||this.setState({open:!1})}},{key:"focus",value:function(){this.picker.focus()}},{key:"blur",value:function(){this.picker.blur()}},{key:"render",value:function(){var e,a=this,t=this.state,n=this.props,r=t.value,o=t.showDate,l=t.hoverValue,i=t.open,s=n.prefixCls,c=n.popupStyle,u=n.style,h=n.disabledDate,p=n.disabledTime,m=n.showTime,d=n.showToday,f=n.ranges,v=n.onOk,g=n.locale,C=n.localeCode,k=n.format,b=n.dateRender,y=n.onCalendarChange;fixLocale(r,C),fixLocale(o,C),warning(!("onOK"in n),"It should be `RangePicker[onOk]`, instead of `onOK`!");var R=classNames((_defineProperty(e={},s+"-time",m),_defineProperty(e,s+"-range-with-ranges",f),e)),w={onChange:this.handleChange},P={onOk:this.handleChange};n.timePicker?w.onChange=function(e){return a.handleChange(e)}:P={},"mode"in n&&(P.mode=n.mode);var S="placeholder"in n?n.placeholder[0]:g.lang.rangePlaceholder[0],V="placeholder"in n?n.placeholder[1]:g.lang.rangePlaceholder[1],_=React.createElement(RangeCalendar,_extends({},P,{onChange:y,format:k,prefixCls:s,className:R,renderFooter:this.renderFooter,timePicker:n.timePicker,disabledDate:h,disabledTime:p,dateInputPlaceholder:[S,V],locale:g.lang,onOk:v,dateRender:b,value:o,onValueChange:this.handleShowDateChange,hoverValue:l,onHoverChange:this.handleHoverChange,onPanelChange:n.onPanelChange,showToday:d,onInputSelect:this.handleCalendarInputSelect})),x={};n.showTime&&(x.width=u&&u.width||350);var D=!n.disabled&&n.allowClear&&r&&(r[0]||r[1])?React.createElement(Icon,{type:"close-circle",className:s+"-picker-clear",onClick:this.clearSelection}):null;return React.createElement("span",{ref:this.savePicker,id:n.id,className:classNames(n.className,n.pickerClass),style:_extends({},u,x),tabIndex:n.disabled?-1:0,onFocus:n.onFocus,onBlur:n.onBlur},React.createElement(RcDatePicker,_extends({},n,w,{calendar:_,value:r,open:i,onOpenChange:this.handleOpenChange,prefixCls:s+"-picker-container",style:c}),function(e){var a=e.value,t=a[0],r=a[1];return React.createElement("span",{className:n.pickerInputClass},React.createElement("input",{disabled:n.disabled,readOnly:!0,value:t&&t.format(n.format)||"",placeholder:S,className:s+"-range-picker-input",tabIndex:-1}),React.createElement("span",{className:s+"-range-picker-separator"}," ~ "),React.createElement("input",{disabled:n.disabled,readOnly:!0,value:r&&r.format(n.format)||"",placeholder:V,className:s+"-range-picker-input",tabIndex:-1}),D,React.createElement("span",{className:s+"-picker-icon"}))}))}}]),a}(React.Component);export default RangePicker;RangePicker.defaultProps={prefixCls:"dt-calendar",allowClear:!0,showToday:!1};