dtd
Version:
根据数梦工场视觉规范打造的组件库，感谢react-components和ant design
1 lines • 4.49 kB
JavaScript
import*as React from"react";import createReactClass from"create-react-class";import*as PropTypes from"prop-types";import toFragment from"rc-util/es/Children/mapSelf";import MonthPanel from"../month/MonthPanel";import cx from"classnames";function goMonth(e){var t=this.props.value.clone();t.add(e,"months"),this.props.onValueChange(t),this.setState({monthVisible:!1,currentMonth:t.month()})}function goYear(e){var t=this.props.value.clone();t.add(e,"years"),this.props.onValueChange(t),this.setState({yearVisible:!1,monthVisible:!1,moveIndex:0,currentYear:t.year()})}function showIf(e,t){return e?t:null}var CalendarHeader=createReactClass({displayName:"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},getDefaultProps:function(){return{enableNext:1,enablePrev:1,onPanelChange:function(){},onValueChange:function(){}}},getInitialState:function(){return this.nextMonth=goMonth.bind(this,1),this.previousMonth=goMonth.bind(this,-1),this.nextYear=goYear.bind(this,1),this.previousYear=goYear.bind(this,-1),{currentYear:this.props.value.year(),currentMonth:this.props.value.month(),moveIndex:0,indexs:0,yearVisible:!1,monthVisible:!1}},onMonthSelect:function(e){this.props.onPanelChange(e,"date"),this.props.onMonthSelect?this.props.onMonthSelect(e):this.props.onValueChange(e)},changeYear:function(e){return goYear.bind(this,e)},changeMonth:function(e){return goMonth.bind(this,e)},monthYearElement:function(e){var t=this,n=void 0,a=void 0,o=this.props,r=o.prefixCls,l=o.locale,s=o.value,i=s.localeData(),h=l.monthBeforeYear,c=r+"-"+(h?"my-select":"ym-select"),m=React.createElement("a",{className:r+"-year-select",role:"button",onClick:e?null:function(){return t.showYearSelect()},title:l.yearSelect},s.format(l.yearFormat)),u=[],p=[],d=!1,f=this.state.currentYear,v=this.state.currentMonth,b=f-5,y=f+5;if(t.state.yearVisible)for(n=b;n>=b&&n<=y;n++)d=n==f,u.push(React.createElement("li",{key:n,className:cx(r+"-year",d?r+"-year-selected":null),onClick:e?null:t.changeYear(n-f+this.state.moveIndex)},n));var C=t.state.yearVisible&&React.createElement("ul",{className:r+"-year-dropdown",title:l.monthSelect,onWheel:this.handleWheel},u),x=React.createElement("a",{className:r+"-month-select",role:"button",onClick:e?null:this.showMonthSelect,title:l.monthSelect},i.monthsShort(s));if(t.state.monthVisible)for(a=0;a<12;a++)d=a==v,p.push(React.createElement("li",{key:a,className:cx(r+"-month",d?r+"-month-selected":null),onClick:e?null:t.changeMonth(a-v)},a+1));var M=t.state.monthVisible&&React.createElement("ul",{className:r+"-month-dropdown",title:l.monthSelect},p),g=void 0;e&&(g=React.createElement("a",{className:r+"-day-select",role:"button"},s.format(l.dayFormat)));var P=[];return P=h?[x,g,m,C,M]:[m,x,g,C,M],React.createElement("span",{className:c},toFragment(P))},showYearSelect:function(){this.setState({yearVisible:!0,monthVisible:!1})},showMonthSelect:function(){this.setState({yearVisible:!1,monthVisible:!0})},handleWheel:function(e){var t=this;e.preventDefault();var n=e.deltaY;this.setState({indexs:n>0?1:-1},function(){t.mouseWheel(t.state.indexs)})},mouseWheel:function(e){var t=this.state.moveIndex,n=this.state.currentYear+e;this.setState({moveIndex:t+e,currentYear:n})},render:function(){var e=this,t=this.props,n=t.prefixCls,a=t.locale,o=t.mode,r=t.value,l=t.showTimePicker,s=t.enableNext,i=t.enablePrev,h=t.disabledMonth,c=null;return"month"===o&&(c=React.createElement(MonthPanel,{locale:a,defaultValue:r,rootPrefixCls:n,onSelect:this.onMonthSelect,onYearPanelShow:function(){return e.showYearPanel("month")},disabledDate:h,cellRender:t.monthCellRender,contentRender:t.monthCellContentRender})),React.createElement("div",{className:n+"-header"},React.createElement("div",{style:{position:"relative"}},showIf(i&&!l,React.createElement("a",{className:n+"-prev-year-btn",role:"button",onClick:this.previousYear,title:a.previousYear})),showIf(i&&!l,React.createElement("a",{className:n+"-prev-month-btn",role:"button",onClick:this.previousMonth,title:a.previousMonth})),this.monthYearElement(l),showIf(s&&!l,React.createElement("a",{className:n+"-next-month-btn",onClick:this.nextMonth,title:a.nextMonth})),showIf(s&&!l,React.createElement("a",{className:n+"-next-year-btn",onClick:this.nextYear,title:a.nextYear}))),c)}});export default CalendarHeader;