ant-design/components/date-picker/WeekPicker.tsx

159 lines
4.1 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import * as moment from 'moment';
import { polyfill } from 'react-lifecycles-compat';
import Calendar from 'rc-calendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
2018-03-09 15:04:21 +08:00
import interopDefault from '../_util/interopDefault';
2017-11-21 21:09:24 +08:00
function formatValue(value: moment.Moment | null, format: string): string {
return (value && value.format(format)) || '';
}
class WeekPicker extends React.Component<any, any> {
static defaultProps = {
2018-03-01 17:24:06 +08:00
format: 'gggg-wo',
allowClear: true,
};
static getDerivedStateFromProps(nextProps: any) {
if ('value' in nextProps) {
return { value: nextProps.value };
}
return null;
}
private input: any;
2017-11-21 21:09:24 +08:00
constructor(props: any) {
super(props);
const value = props.value || props.defaultValue;
2018-03-09 15:04:21 +08:00
if (value && !interopDefault(moment).isMoment(value)) {
throw new Error(
'The value/defaultValue of DatePicker or MonthPicker must be ' +
'a moment object after `antd@2.0`, see: https://u.ant.design/date-picker-value',
);
}
this.state = {
value,
};
}
2017-11-21 21:09:24 +08:00
weekDateRender = (current: any) => {
const selectedValue = this.state.value;
const { prefixCls } = this.props;
if (selectedValue &&
2018-03-29 18:03:14 +08:00
current.year() === selectedValue.year() &&
current.week() === selectedValue.week()) {
return (
<div className={`${prefixCls}-selected-day`}>
<div className={`${prefixCls}-date`}>
{current.date()}
</div>
</div>
);
}
return (
<div className={`${prefixCls}-date`}>
{current.date()}
</div>
);
}
2017-11-21 21:09:24 +08:00
handleChange = (value: moment.Moment | null) => {
if (!('value' in this.props)) {
this.setState({ value });
}
this.props.onChange(value, formatValue(value, this.props.format));
}
2017-11-21 21:09:24 +08:00
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
e.stopPropagation();
this.handleChange(null);
}
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
saveInput = (node: any) => {
this.input = node;
}
render() {
const {
prefixCls, className, disabled, pickerClass, popupStyle,
pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
2018-03-29 18:03:14 +08:00
style, onFocus, onBlur,
} = this.props;
const pickerValue = this.state.value;
if (pickerValue && localeCode) {
pickerValue.locale(localeCode);
}
const placeholder = ('placeholder' in this.props)
? this.props.placeholder : locale.lang.placeholder;
const calendar = (
<Calendar
showWeekNumber
dateRender={this.weekDateRender}
prefixCls={prefixCls}
format={format}
locale={locale.lang}
showDateInput={false}
showToday={false}
disabledDate={disabledDate}
/>
);
const clearIcon = (!disabled && allowClear && this.state.value) ? (
<Icon
type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
) : null;
2017-11-21 21:09:24 +08:00
const input = ({ value }: { value: moment.Moment | undefined }) => {
return (
<span>
<input
ref={this.saveInput}
disabled={disabled}
readOnly
value={(value && value.format(format)) || ''}
placeholder={placeholder}
className={pickerInputClass}
2018-03-29 18:03:14 +08:00
onFocus={onFocus}
onBlur={onBlur}
style={style}
/>
{clearIcon}
2018-07-23 12:06:38 +08:00
<Icon type="calendar" className={`${prefixCls}-picker-icon`}/>
</span>
);
};
return (
<span className={classNames(className, pickerClass)} id={this.props.id}>
<RcDatePicker
{...this.props}
calendar={calendar}
prefixCls={`${prefixCls}-picker-container`}
value={pickerValue}
onChange={this.handleChange}
style={popupStyle}
>
{input}
</RcDatePicker>
</span>
);
}
}
polyfill(WeekPicker);
export default WeekPicker;