Skip to content

Commit 752fa8b

Browse files
LKaysimeg
LKay
authored and
simeg
committed
Update typescript definitions (arqex#312)
* Update typescript definitions, remove old definitions fix tests * Change union typed event handler * Simplify handler type * Change versions of devDependencies libraries * Remove version caps * Remove accidentally added file
1 parent 7392ed2 commit 752fa8b

7 files changed

+181
-187
lines changed

‎DateTime.d.ts

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
// Type definitions for react-datetime
2+
// Project: https://github.com/YouCanBookMe/react-datetime
3+
// Definitions by: Ivan Verevkin <vereva@x-root.org>
4+
// Updates by: Aaron Spaulding <aaron@sachimp.com>,
5+
// Karol Janyst <http://github.com/LKay>
6+
7+
import { Component, ChangeEvent, FocusEvent, FocusEventHandler } from "react";
8+
import { Moment } from "moment";
9+
10+
export = ReactDatetimeClass;
11+
12+
declare namespace ReactDatetimeClass {
13+
/*
14+
The view mode can be any of the following strings.
15+
*/
16+
export type ViewMode = "years" | "months" | "days" | "time";
17+
18+
export interface TimeConstraint {
19+
min: number;
20+
max: number;
21+
step: number;
22+
}
23+
24+
export interface TimeConstraints {
25+
hours?: TimeConstraint;
26+
minutes?: TimeConstraint;
27+
seconds?: TimeConstraint;
28+
milliseconds?: TimeConstraint;
29+
}
30+
31+
type EventOrValueHandler<Event> = (event: Event | Moment | string) => void;
32+
33+
export interface DatetimepickerProps {
34+
/*
35+
Represents the selected date by the component, in order to use it as a controlled component.
36+
This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date.
37+
*/
38+
value?: Date;
39+
/*
40+
Represents the selected date for the component to use it as a uncontrolled component.
41+
This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date.
42+
*/
43+
defaultValue?: Date;
44+
/*
45+
Defines the format for the date. It accepts any moment.js date format.
46+
If true the date will be displayed using the defaults for the current locale.
47+
If false the datepicker is disabled and the component can be used as timepicker.
48+
*/
49+
dateFormat?: boolean|string;
50+
/*
51+
Defines the format for the time. It accepts any moment.js time format.
52+
If true the time will be displayed using the defaults for the current locale.
53+
If false the timepicker is disabled and the component can be used as datepicker.
54+
*/
55+
timeFormat?: boolean|string;
56+
/*
57+
Whether to show an input field to edit the date manually.
58+
*/
59+
input?: boolean;
60+
/*
61+
Whether to open or close the picker. If not set react-datetime will open the
62+
datepicker on input focus and close it on click outside.
63+
*/
64+
open?: boolean;
65+
/*
66+
Manually set the locale for the react-datetime instance.
67+
Moment.js locale needs to be loaded to be used, see i18n docs.
68+
*/
69+
locale?: string;
70+
/*
71+
Whether to interpret input times as UTC or the user's local timezone.
72+
*/
73+
utc?: boolean;
74+
/*
75+
Callback trigger when the date changes. The callback receives the selected `moment` object as
76+
only parameter, if the date in the input is valid. If the date in the input is not valid, the
77+
callback receives the value of the input (a string).
78+
*/
79+
onChange?: EventOrValueHandler<ChangeEvent<any>>;
80+
/*
81+
Callback trigger for when the user opens the datepicker.
82+
*/
83+
onFocus?: FocusEventHandler<any>;
84+
/*
85+
Callback trigger for when the user clicks outside of the input, simulating a regular onBlur.
86+
The callback receives the selected `moment` object as only parameter, if the date in the input
87+
is valid. If the date in the input is not valid, the callback receives the value of the
88+
input (a string).
89+
*/
90+
onBlur?: EventOrValueHandler<FocusEvent<any>>;
91+
/*
92+
The default view to display when the picker is shown. ('years', 'months', 'days', 'time')
93+
*/
94+
viewMode?: ViewMode|number;
95+
/*
96+
Extra class names for the component markup.
97+
*/
98+
className?: string;
99+
/*
100+
Defines additional attributes for the input element of the component.
101+
*/
102+
inputProps?: React.HTMLProps<HTMLInputElement>;
103+
/*
104+
Define the dates that can be selected. The function receives (currentDate, selectedDate)
105+
and should return a true or false whether the currentDate is valid or not. See selectable dates.
106+
*/
107+
isValidDate?: (currentDate: any, selectedDate: any) => boolean;
108+
/*
109+
Customize the way that the days are shown in the day picker. The accepted function has
110+
the selectedDate, the current date and the default calculated props for the cell,
111+
and must return a React component. See appearance customization
112+
*/
113+
renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element;
114+
/*
115+
Customize the way that the months are shown in the month picker.
116+
The accepted function has the selectedDate, the current date and the default calculated
117+
props for the cell, the month and the year to be shown, and must return a
118+
React component. See appearance customization
119+
*/
120+
renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element;
121+
/*
122+
Customize the way that the years are shown in the year picker.
123+
The accepted function has the selectedDate, the current date and the default calculated
124+
props for the cell, the year to be shown, and must return a React component.
125+
See appearance customization
126+
*/
127+
renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element;
128+
/*
129+
Whether to use moment's strict parsing when parsing input.
130+
*/
131+
strictParsing?: boolean;
132+
/*
133+
When true, once the day has been selected, the react-datetime will be automatically closed.
134+
*/
135+
closeOnSelect?: boolean;
136+
/*
137+
Allow to add some constraints to the time selector. It accepts an object with the format
138+
{hours:{ min: 9, max: 15, step:2}} so the hours can't be lower than 9 or higher than 15, and
139+
it will change adding or subtracting 2 hours everytime the buttons are clicked. The constraints
140+
can be added to the hours, minutes, seconds and milliseconds.
141+
*/
142+
timeConstraints?: TimeConstraints;
143+
/*
144+
When true, keep the picker open when click event is triggered outside of component. When false,
145+
close it.
146+
*/
147+
disableOnClickOutside?: boolean;
148+
}
149+
150+
export interface DatetimepickerState {
151+
updateOn: string;
152+
inputFormat: string;
153+
viewDate: Moment;
154+
selectedDate: Moment;
155+
inputValue: string;
156+
open: boolean;
157+
}
158+
}
159+
160+
declare class ReactDatetimeClass extends Component<ReactDatetimeClass.DatetimepickerProps, ReactDatetimeClass.DatetimepickerState> {}

‎package.json

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88
"url": "https://github.com/YouCanBookMe/react-datetime"
99
},
1010
"main": "./DateTime.js",
11+
"typings": "./DateTime.d.ts",
1112
"files": [
1213
"DateTime.js",
13-
"react-datetime.d.ts",
14-
"typings/index.d.ts",
14+
"DateTime.d.ts",
1515
"src",
1616
"css",
1717
"dist"
1818
],
19-
"types": "./typings/index.d.ts",
2019
"scripts": {
2120
"build:mac": "./node_modules/.bin/gulp",
2221
"build:win": "./node_modules/.bin/gulp.cmd",
@@ -43,7 +42,6 @@
4342
"react-dom": ">=0.13"
4443
},
4544
"devDependencies": {
46-
"@types/react": "^0.14.49",
4745
"babel-core": "^6.22.1",
4846
"babel-jest": "^18.0.0",
4947
"babel-loader": "^6.2.1",
@@ -63,7 +61,6 @@
6361
"jest-cli": "^18.1.0",
6462
"jsdom": "^7.0.2",
6563
"mocha": "^3.2.0",
66-
"moment": ">=2.16.0",
6764
"pre-commit": "^1.1.3",
6865
"react": ">=0.13",
6966
"react-addons-test-utils": ">=0.13",
@@ -76,7 +73,8 @@
7673
"webpack-stream": "^3.2.0"
7774
},
7875
"dependencies": {
79-
"create-react-class": "^15.5.2",
76+
"@types/react": ">=0.13",
77+
"moment": "2.16.x",
8078
"object-assign": "^3.0.0",
8179
"prop-types": "^15.5.7",
8280
"react-onclickoutside": "^5.9.0"

‎react-datetime.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// Definitions by: Ivan Verevkin <vereva@x-root.org>
44

55
// These are the typings for Typescript 1.8
6-
// for Typescrip 2.0+ see typings/index.d.ts
6+
// for Typescrip 2.0+ see DateTime.d.ts
77

88
//// <reference path="../moment/moment-node.d.ts" />
99

‎tests/datetime.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -934,23 +934,23 @@ describe('Datetime', () => {
934934
});
935935

936936
it('when selecting month', () => {
937-
const date = new Date(2000, 0, 15, 2, 2, 2, 2),
937+
const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
938938
onChangeFn = jest.fn(),
939939
component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY-MM', onChange: onChangeFn });
940940

941941
utils.clickNthMonth(component, 2);
942942
expect(onChangeFn).toHaveBeenCalledTimes(1);
943-
expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T01:02:02.002Z');
943+
expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T02:02:02.002Z');
944944
});
945945

946946
it('when selecting year', () => {
947-
const date = new Date(2000, 0, 15, 2, 2, 2, 2),
947+
const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
948948
onChangeFn = jest.fn(),
949949
component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY', onChange: onChangeFn });
950950

951951
utils.clickNthYear(component, 2);
952952
expect(onChangeFn).toHaveBeenCalledTimes(1);
953-
expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T01:02:02.002Z');
953+
expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T02:02:02.002Z');
954954
});
955955

956956
it('when selecting time', () => {

0 commit comments

Comments
 (0)