dtd
Version:
根据数梦工场视觉规范打造的组件库，感谢react-components和ant design
1 lines • 2.85 kB
JavaScript
import*as React from"react";import createReactClass from"create-react-class";import*as PropTypes from"prop-types";import MonthTable from"./MonthTable";import cx from"classnames";function goYear(e,t){t.stopPropagation();var a=this.state.value.clone();a.add(e,"year"),this.setAndChangeValue(a),this.setState({yearVisible:!1,moveIndex:0,currentYear:a.year()},function(){})}function noop(){}var MonthPanel=createReactClass({displayName:"MonthPanel",propTypes:{onChange:PropTypes.func,disabledDate:PropTypes.func,onSelect:PropTypes.func},getDefaultProps:function(){return{onChange:noop,onSelect:noop}},getInitialState:function(){var e=this.props;return this.nextYear=goYear.bind(this,1),this.previousYear=goYear.bind(this,-1),this.prefixCls=e.rootPrefixCls+"-month-panel",{value:e.value||e.defaultValue,currentYear:e.value?e.value.year():e.defaultValue.year(),moveIndex:0,yearVisible:!1}},componentWillReceiveProps:function(e){"value"in e&&this.setState({value:e.value})},setAndChangeValue:function(e){this.setValue(e),this.props.onChange(e)},setAndSelectValue:function(e){this.setValue(e),this.props.onSelect(e)},setValue:function(e){"value"in this.props||this.setState({value:e})},showYearSelect:function(){this.setState({yearVisible:!0})},changeYear:function(e){return goYear.bind(this,e)},handleWheel:function(e){e.preventDefault();var t=e.deltaY>0?1:-1;this.mouseWheel(t)},mouseWheel:function(e){var t=this.state.moveIndex,a=this.state.currentYear+e;this.setState({moveIndex:t+e,currentYear:a})},render:function(){var e=this.props,t=this.state.value,a=e.cellRender,n=e.contentRender,r=e.locale,s=t.year(),l=this.prefixCls,o=void 0,c=[],i=!1,u=this.state.currentYear,h=u-5,p=u+5;if(this.state.yearVisible)for(o=h;o>=h&&o<=p;o++)i=o==u,c.push(React.createElement("li",{key:o,className:cx(l+"-year",i?l+"-year-selected":null),onClick:this.changeYear(o-u+this.state.moveIndex)},o));var m=React.createElement("ul",{className:c.length&&l+"-year-dropdown",title:r.yearSelect,onWheel:this.handleWheel},c);return React.createElement("div",{className:l,style:e.style},React.createElement("div",null,React.createElement("div",{className:l+"-header"},React.createElement("a",{className:l+"-prev-year-btn",role:"button",onClick:this.previousYear,title:r.previousYear}),React.createElement("a",{className:l+"-year-select",role:"button",onClick:this.showYearSelect,title:r.yearSelect},React.createElement("span",{className:l+"-year-select-content"},s),React.createElement("span",{className:l+"-year-select-arrow"},"x"),m),React.createElement("a",{className:l+"-next-year-btn",role:"button",onClick:this.nextYear,title:r.nextYear})),React.createElement("div",{className:l+"-body"},React.createElement(MonthTable,{disabledDate:e.disabledDate,onSelect:this.setAndSelectValue,locale:r,value:t,cellRender:a,contentRender:n,prefixCls:l}))))}});export default MonthPanel;