1 |
|
2 |
|
3 |
|
4 |
|
5 | import YearPanel from "./rc-calendar/year/YearPanel";
|
6 | import { KeyCode } from 'tinper-bee-core';
|
7 | import zhCN from "./locale/zh_CN";
|
8 | import React, { Component } from "react";
|
9 | import ReactDOM from 'react-dom';
|
10 | import Picker from "./rc-calendar/Picker";
|
11 | import FormControl from "bee-form-control";
|
12 | import InputGroup from 'bee-input-group';
|
13 | import Icon from "bee-icon";
|
14 | import classnames from 'classnames';
|
15 | import moment from "moment";
|
16 | import omit from 'omit.js';
|
17 |
|
18 |
|
19 | Picker.prototype.componentDidUpdate = ()=>{}
|
20 |
|
21 | class YearPicker extends Component {
|
22 | constructor(props, context) {
|
23 | super(props, context);
|
24 |
|
25 | this.state = {
|
26 | type: "year",
|
27 | value: this.initValue(props) ,
|
28 | open: props.open||false,
|
29 | showClose: false
|
30 | };
|
31 | }
|
32 |
|
33 | initValue=(props)=>{
|
34 | let value = props.value || props.defaultValue;
|
35 | if(value){
|
36 | if(typeof value == 'string'){
|
37 | if(moment(value).isValid()){
|
38 | value = moment(value);
|
39 | }else{
|
40 | console.error('value is not in the correct format');
|
41 | value = ''
|
42 | }
|
43 | }else if(value.format&&value.isValid()){
|
44 | value = value;
|
45 | }else{
|
46 | console.error('value is not in the correct format');
|
47 | value = ''
|
48 | }
|
49 | }
|
50 | return value;
|
51 | }
|
52 | componentWillReceiveProps(nextProps) {
|
53 | if ("value" in nextProps) {
|
54 | this.setState({
|
55 | value: this.initValue(nextProps)
|
56 | });
|
57 | }
|
58 | if ("open" in nextProps) {
|
59 | this.setState({
|
60 | open: nextProps.open
|
61 | });
|
62 | }
|
63 | if ("renderIcon" in nextProps) {
|
64 | this.setState({
|
65 | renderIcon: nextProps.renderIcon
|
66 | });
|
67 | }
|
68 |
|
69 | }
|
70 |
|
71 | onChange = value => {
|
72 | this.setState({
|
73 | value
|
74 | });
|
75 | };
|
76 |
|
77 | inputFocus=()=>{
|
78 | const self = this;
|
79 | let input = document.querySelector('.rc-calendar-input');
|
80 | if(input){
|
81 | if(input.value){
|
82 | input.select()
|
83 | }else{
|
84 | input.focus()
|
85 | }
|
86 | input.onkeydown=(e)=>{
|
87 | if(e.keyCode == KeyCode.DELETE){
|
88 | input.value = '';
|
89 | self.props.onChange&&self.props.onChange('','');
|
90 | }else if(e.keyCode == KeyCode.ESC){
|
91 | self.setState({
|
92 | open:false
|
93 | });
|
94 | let v = self.state.value;
|
95 | self.props.onOpenChange&&self.props.onOpenChange(false,v, (v && v.format(self.props.format)) || '');
|
96 | ReactDOM.findDOMNode(self.outInput).focus();
|
97 | }
|
98 | }
|
99 | }
|
100 | }
|
101 | onOpenChange = open => {
|
102 | const self = this;
|
103 | this.setState({
|
104 | open
|
105 | });
|
106 | if(open){
|
107 | setTimeout(()=>{
|
108 | self.inputFocus()
|
109 | },200)
|
110 | }
|
111 | };
|
112 |
|
113 | handleChange = value => {
|
114 | const props = this.props;
|
115 | this.setState({
|
116 | value: value && Object.assign(value, {_type:'year'}) || value
|
117 | });
|
118 | props.onChange&&props.onChange(value, (value && value.format(props.format)) || '');
|
119 | }
|
120 | onMouseLeave = (e) => {
|
121 | this.setState({
|
122 | showClose: false
|
123 | })
|
124 | }
|
125 | onMouseEnter = (e) => {
|
126 | this.setState({
|
127 | showClose: true
|
128 | })
|
129 | }
|
130 | clear = (e) => {
|
131 | e.stopPropagation();
|
132 | this.setState({
|
133 | value: ''
|
134 | })
|
135 | this.props.onChange && this.props.onChange('', '');
|
136 | }
|
137 |
|
138 | onSelect=(value)=>{
|
139 | let { onSelect,format } = this.props;
|
140 | this.setState({
|
141 | open:false
|
142 | });
|
143 | onSelect&&onSelect(value,value?value.format(format):'');
|
144 | ReactDOM.findDOMNode(this.outInput).focus();
|
145 | }
|
146 |
|
147 | render() {
|
148 | let state = this.state;
|
149 | let props = this.props;
|
150 | const { showClose, ...others } = props;
|
151 | let value = state.value;
|
152 |
|
153 | const Calendar = <YearPanel
|
154 | prefixCls={'rc-calendar-picker'}
|
155 | rootPrefixCls={'rc-calendar'}
|
156 | {...props} focus={()=>{}}
|
157 | value={this.state.value}
|
158 | onSelect={this.onSelect}
|
159 | showDateInput={true}
|
160 | />;
|
161 | let classes = classnames(props.className, "datepicker-container");
|
162 | return (
|
163 | <div className={classes}
|
164 | {...omit(others, [
|
165 | 'closeIcon',
|
166 | 'renderIcon',
|
167 | 'disabled',
|
168 | 'format',
|
169 | 'locale',
|
170 | 'placeholder'
|
171 | ])}
|
172 | >
|
173 | <Picker
|
174 | animation="slide-up"
|
175 | {...props}
|
176 | onOpenChange={this.onOpenChange}
|
177 | onChange={this.handleChange}
|
178 | calendar={Calendar}
|
179 | prefixCls={'rc-calendar'}
|
180 | value={state.value}
|
181 | open={this.state.open}
|
182 | >
|
183 | {({ }) => {
|
184 | return (
|
185 | <InputGroup simple className="datepicker-input-group"
|
186 | onMouseEnter={this.onMouseEnter}
|
187 | onMouseLeave={this.onMouseLeave}
|
188 | >
|
189 | <FormControl
|
190 | ref = { ref => this.outInput = ref }
|
191 | placeholder={this.props.placeholder}
|
192 | className={this.props.className}
|
193 | disabled={props.disabled}
|
194 | readOnly
|
195 | value={(value && value.format(props.format)) || ""}
|
196 | />
|
197 | {
|
198 | showClose&&this.state.value&&this.state.showClose&&(!props.disabled)?(
|
199 | <InputGroup.Button shape="border"
|
200 | onClick={this.clear}>
|
201 | { props.closeIcon() }
|
202 | </InputGroup.Button>
|
203 | ):<InputGroup.Button shape="border">
|
204 | { props.renderIcon() }
|
205 | </InputGroup.Button>
|
206 | }
|
207 | </InputGroup>
|
208 | );
|
209 | }}
|
210 | </Picker>
|
211 | </div>
|
212 | );
|
213 | }
|
214 | }
|
215 |
|
216 |
|
217 | YearPicker.defaultProps = {
|
218 | closeIcon:()=><Icon type="uf-close-c"/>,
|
219 | renderIcon: () => <Icon type="uf-calendar" />,
|
220 | disabled:false,
|
221 | showClose:true,
|
222 | locale:zhCN,
|
223 | format:'YYYY',
|
224 | validatorFunc:()=>{
|
225 | return true;
|
226 | }
|
227 | }
|
228 |
|
229 | export default YearPicker;
|