Skip to content

Commit 4e8de40

Browse files
kamyarkamyar
committed
move types
1 parent cceccc3 commit 4e8de40

File tree

14 files changed

+226
-119
lines changed

14 files changed

+226
-119
lines changed

‎src/components/Calendar/index.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import coreStyles from '../../styles';
3131
import { ariaLabelsShape } from '../../accessibility';
3232
import { ExtendedDateRange, Preview, Styles } from '../DayCell/types';
3333
import { AriaLabelsShape, CalendarDirection, ChangeDateMode, Scroll } from './types';
34-
import { DateRange, DisplayMode } from '../../utilsTypes';
34+
import { DateOptions, DateRange, DisplayMode } from '../../utilsTypes';
3535

3636
const DEFAULT_PROPS: CalendarProps = {
3737
showMonthArrow: true,
@@ -65,12 +65,6 @@ const DEFAULT_PROPS: CalendarProps = {
6565
fixedHeight: false,
6666
};
6767

68-
69-
interface DateOptions {
70-
locale?: Locale
71-
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
72-
}
73-
7468
export interface CalendarProps extends MonthProps {
7569
locale: Locale
7670
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
@@ -116,7 +110,8 @@ class Calendar extends PureComponent<CalendarProps, CalendarState> {
116110
list: ReactList | null = null
117111
defaultProps: CalendarProps = DEFAULT_PROPS
118112

119-
constructor(props: CalendarProps, context) {
113+
// FIXME
114+
constructor(props: CalendarProps, context: any) {
120115
super(props, context);
121116
this.dateOptions = { locale: props.locale };
122117
if (props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = props.weekStartsOn;
@@ -185,18 +180,20 @@ class Calendar extends PureComponent<CalendarProps, CalendarState> {
185180
const newFocus = calcFocusDate(this.state.focusedDate, newProps);
186181
this.focusToDate(newFocus, newProps);
187182
};
188-
updatePreview = (val: Date) => {
183+
184+
updatePreview = (val: Date ) => {
189185
if (!val) {
190186
this.setState({ preview: null });
191187
return;
192188
}
193-
const preview = {
189+
const preview: Preview = {
194190
startDate: val,
195191
endDate: val,
196192
color: this.props.color,
197193
};
198194
this.setState({ preview });
199195
};
196+
200197
componentDidMount() {
201198
if (this.props.scroll.enabled) {
202199
// prevent react-list's initial render focus problem
@@ -451,7 +448,7 @@ class Calendar extends PureComponent<CalendarProps, CalendarState> {
451448
endDate: date,
452449
};
453450
if (displayMode !== 'dateRange' || isSameDay(newRange.startDate, date)) {
454-
this.setState({ drag: { status: false, range: {} } }, () => onChange && onChange(date));
451+
this.setState({ drag: { status: false, range: {} } }, () => onChange?.(date));
455452
} else {
456453
this.setState({ drag: { status: false, range: {} } }, () => {
457454
updateRange?.(newRange);

‎src/components/DateInput/index.js‎ renamed to ‎src/components/DateInput/index.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,33 @@ import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
44
import { format, parse, isValid, isEqual } from 'date-fns';
5+
import { DateOptions } from '../../utilsTypes';
6+
7+
interface DateInputProps {
8+
value: number | Date // ???
9+
onChange: (value: Date) => void
10+
className: string
11+
placeholder: string
12+
readOnly: boolean
13+
disabled: boolean
14+
onFocus: React.FocusEventHandler<HTMLInputElement>
15+
dateDisplayFormat: string
16+
dateOptions: DateOptions
17+
// FIXME
18+
ariaLabel: any
19+
}
20+
21+
interface DateInputState {
22+
changed: boolean
23+
invalid: boolean
24+
value: string
25+
}
526

6-
class DateInput extends PureComponent {
7-
constructor(props, context) {
27+
class DateInput extends PureComponent<DateInputProps, DateInputState> {
28+
static propTypes = {}
29+
static defaultProps = {}
30+
// FIXME: context
31+
constructor(props: DateInputProps, context: any) {
832
super(props, context);
933

1034
this.state = {
@@ -14,22 +38,22 @@ class DateInput extends PureComponent {
1438
};
1539
}
1640

17-
componentDidUpdate(prevProps) {
41+
componentDidUpdate(prevProps: DateInputProps) {
1842
const { value } = prevProps;
1943

2044
if (!isEqual(value, this.props.value)) {
2145
this.setState({ value: this.formatDate(this.props) });
2246
}
2347
}
2448

25-
formatDate({ value, dateDisplayFormat, dateOptions }) {
49+
formatDate({ value, dateDisplayFormat, dateOptions }: { value: number | Date, dateDisplayFormat: string, dateOptions: object}) {
2650
if (value && isValid(value)) {
2751
return format(value, dateDisplayFormat, dateOptions);
2852
}
2953
return '';
3054
}
3155

32-
update(value) {
56+
update(value: string) {
3357
const { invalid, changed } = this.state;
3458

3559
if (invalid || !changed || !value) {

‎src/components/DateRange/index.tsx‎

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,34 @@ import { findNextRangeIndex, generateStyles } from '../../utils';
66
import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns';
77
import classnames from 'classnames';
88
import coreStyles from '../../styles';
9-
import { Styles } from '../DayCell/types';
109
import { DisplayMode, DateRange as DateRangeObject } from '../../utilsTypes';
10+
import { Preview, Styles } from '../DayCell/types';
11+
import { InputRange } from '../../defaultRangesTypes';
1112

1213

13-
interface DateRangeProps extends CalendarProps {
14+
export interface DateRangeProps extends Omit<CalendarProps, 'onChange'> {
1415
focusedRange: number[]
1516
initialFocusedRange: number[]
1617
moveRangeOnFirstSelection: boolean
1718
retainEndDateOnFirstSelection: boolean
19+
className: string
20+
onChange: (ranges: [{ [key: string]: DateRangeObject }]) => void
21+
ranges: DateRangeObject[]
1822
}
1923

2024
interface DateRangeState {
21-
preview: null
25+
preview: Preview | null
2226
focusedRange: number[]
2327
}
2428

2529
class DateRange extends Component<DateRangeProps, DateRangeState> {
26-
public static propTypes = {};
30+
static propTypes = {};
2731
static defaultProps = {}
2832
styles: Styles
2933
calendar: Calendar | null = null
3034

31-
constructor(props: DateRangeProps, context) {
35+
// FIXME: context
36+
constructor(props: DateRangeProps, context: any) {
3237
super(props, context);
3338
this.state = {
3439
focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0],
@@ -37,7 +42,7 @@ class DateRange extends Component<DateRangeProps, DateRangeState> {
3742
this.styles = generateStyles([coreStyles, props.classNames]);
3843
}
3944

40-
calcNewSelection = (value: Date | DateRangeObject, isSingleValue = true) => {
45+
calcNewSelection = (value: Date | DateRangeObject, isSingleValue = true): Preview | undefined => {
4146
const focusedRange = this.props.focusedRange || this.state.focusedRange;
4247
const {
4348
ranges,
@@ -49,34 +54,35 @@ class DateRange extends Component<DateRangeProps, DateRangeState> {
4954
} = this.props;
5055
const focusedRangeIndex = focusedRange[0];
5156
const selectedRange = ranges[focusedRangeIndex];
52-
if (!selectedRange || !onChange) return {};
57+
if (!selectedRange || !onChange) return undefined
5358
let { startDate, endDate } = selectedRange;
5459
const now = new Date();
5560
let nextFocusRange;
61+
// FIXME: get rid of isSingleValue
5662
if (!isSingleValue) {
57-
startDate = value.startDate;
58-
endDate = value.endDate;
63+
startDate = (value as DateRangeObject).startDate;
64+
endDate = (value as DateRangeObject).endDate;
5965
} else if (focusedRange[1] === 0) {
6066
// startDate selection
6167
const dayOffset = differenceInCalendarDays(endDate || now, startDate);
6268
const calculateEndDate = () => {
6369
if (moveRangeOnFirstSelection) {
64-
return addDays(value, dayOffset);
70+
return addDays(value as Date, dayOffset);
6571
}
6672
if (retainEndDateOnFirstSelection) {
67-
if (!endDate || isBefore(value, endDate)) {
73+
if (!endDate || isBefore(value as Date, endDate)) {
6874
return endDate;
6975
}
7076
return value;
7177
}
7278
return value || now;
7379
};
74-
startDate = value;
75-
endDate = calculateEndDate();
80+
startDate = value as Date;
81+
endDate = calculateEndDate() as Date;
7682
if (maxDate) endDate = min([endDate, maxDate]);
7783
nextFocusRange = [focusedRange[0], 1];
7884
} else {
79-
endDate = value;
85+
endDate = value as Date;
8086
}
8187

8288
// reverse dates if startDate before endDate
@@ -106,13 +112,11 @@ class DateRange extends Component<DateRangeProps, DateRangeState> {
106112
nextFocusRange = [nextFocusRangeIndex, 0];
107113
}
108114
return {
109-
wasValid: !(inValidDatesWithinRange.length > 0),
110115
range: { startDate, endDate },
111-
nextFocusRange: nextFocusRange,
112-
};
116+
} as Preview;
113117
};
114118

115-
setSelection = (value: Date | DateRange, isSingleValue: boolean) => {
119+
setSelection = (value: Date | DateRangeObject, isSingleValue: boolean) => {
116120
const { onChange, ranges, onRangeFocusChange } = this.props;
117121
const focusedRange = this.props.focusedRange || this.state.focusedRange;
118122
const focusedRangeIndex = focusedRange[0];
@@ -135,30 +139,32 @@ class DateRange extends Component<DateRangeProps, DateRangeState> {
135139
this.setState({ focusedRange });
136140
this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange);
137141
};
138-
updatePreview = (val) => {
142+
143+
updatePreview = (val?: Preview) => {
139144
if (!val) {
140145
this.setState({ preview: null });
141146
return;
142147
}
143148
const { rangeColors, ranges } = this.props;
144149
const focusedRange = this.props.focusedRange || this.state.focusedRange;
145150
const color = ranges[focusedRange[0]]?.color || rangeColors[focusedRange[0]] || this.props.color;
146-
this.setState({ preview: { ...val.range, color } });
151+
this.setState({ preview: { ...val.range, color } as Preview });
147152
};
153+
148154
render() {
149155
return (
150156
<Calendar
157+
{...this.props}
151158
focusedRange={this.state.focusedRange}
152159
onRangeFocusChange={this.handleRangeFocusChange}
153160
preview={this.state.preview}
154161
onPreviewChange={value => {
155-
this.updatePreview(value ? this.calcNewSelection(value) : null);
162+
this.updatePreview(value ? this.calcNewSelection(value) : undefined);
156163
}}
157-
{...this.props}
158164
displayMode={DisplayMode.DATE_RANGE}
159-
className={classnames(this.styles.dateRangeWrapper, this.props.className)}
160-
onChange={this.setSelection}
161-
updateRange={val => this.setSelection(val, false)}
165+
classNames={classnames(this.styles.dateRangeWrapper, this.props.className)}
166+
onChange={(val) => this.setSelection(val as Date, true)}
167+
updateRange={(val) => this.setSelection(val as DateRangeObject, false)}
162168
ref={target => {
163169
this.calendar = target;
164170
}}

‎src/components/DateRangePicker/index.js‎ renamed to ‎src/components/DateRangePicker/index.tsx‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import DateRange from '../DateRange';
4-
import DefinedRange from '../DefinedRange';
3+
import DateRange, { DateRangeProps } from '../DateRange';
4+
import DefinedRange, { DefinedRangeProps } from '../DefinedRange';
55
import { findNextRangeIndex, generateStyles } from '../../utils';
66
import classnames from 'classnames';
77
import coreStyles from '../../styles';
8+
import { DateRange as DateRangeObject } from '../../utilsTypes';
9+
import { Preview, Styles } from '../DayCell/types';
810

9-
class DateRangePicker extends Component {
10-
constructor(props) {
11+
12+
interface DateRangePickerProps extends DateRangeProps, DefinedRangeProps {
13+
classNames: string[]
14+
ranges: DateRangeObject[]
15+
className: string
16+
styles: Styles
17+
}
18+
19+
interface DateRangePickerState {
20+
focusedRange: number[]
21+
}
22+
23+
24+
class DateRangePicker extends Component<DateRangePickerProps, DateRangePickerState> {
25+
static propTypes: any;
26+
static defaultProps: Styles;
27+
28+
styles: Styles;
29+
// FIXME
30+
dateRange?: DateRange | null;
31+
32+
constructor(props: DateRangePickerProps) {
1133
super(props);
1234
this.state = {
1335
focusedRange: [findNextRangeIndex(props.ranges), 0],
@@ -19,30 +41,25 @@ class DateRangePicker extends Component {
1941
return (
2042
<div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
2143
<DefinedRange
44+
{...this.props}
2245
focusedRange={focusedRange}
2346
onPreviewChange={value =>
24-
this.dateRange.updatePreview(
25-
value ? this.dateRange.calcNewSelection(value, typeof value === 'string') : null
47+
value && this.dateRange?.updatePreview(
48+
this.dateRange?.calcNewSelection(value, typeof value === 'string')
2649
)
2750
}
28-
{...this.props}
29-
range={this.props.ranges[focusedRange[0]]}
30-
className={undefined}
3151
/>
3252
<DateRange
53+
{...this.props}
3354
onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
3455
focusedRange={focusedRange}
35-
{...this.props}
3656
ref={t => (this.dateRange = t)}
37-
className={undefined}
3857
/>
3958
</div>
4059
);
4160
}
4261
}
4362

44-
DateRangePicker.defaultProps = {};
45-
4663
DateRangePicker.propTypes = {
4764
...DateRange.propTypes,
4865
...DefinedRange.propTypes,

0 commit comments

Comments
 (0)