Update typescript definitions (#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 files deleted
1 files added
5 files modified
New file |
| | |
| | | // Type definitions for react-datetime |
| | | // Project: https://github.com/YouCanBookMe/react-datetime |
| | | // Definitions by: Ivan Verevkin <vereva@x-root.org> |
| | | // Updates by: Aaron Spaulding <aaron@sachimp.com>, |
| | | // Karol Janyst <http://github.com/LKay> |
| | | |
| | | import { Component, ChangeEvent, FocusEvent, FocusEventHandler } from "react"; |
| | | import { Moment } from "moment"; |
| | | |
| | | export = ReactDatetimeClass; |
| | | |
| | | declare namespace ReactDatetimeClass { |
| | | /* |
| | | The view mode can be any of the following strings. |
| | | */ |
| | | export type ViewMode = "years" | "months" | "days" | "time"; |
| | | |
| | | export interface TimeConstraint { |
| | | min: number; |
| | | max: number; |
| | | step: number; |
| | | } |
| | | |
| | | export interface TimeConstraints { |
| | | hours?: TimeConstraint; |
| | | minutes?: TimeConstraint; |
| | | seconds?: TimeConstraint; |
| | | milliseconds?: TimeConstraint; |
| | | } |
| | | |
| | | type EventOrValueHandler<Event> = (event: Event | Moment | string) => void; |
| | | |
| | | export interface DatetimepickerProps { |
| | | /* |
| | | Represents the selected date by the component, in order to use it as a controlled component. |
| | | This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
| | | */ |
| | | value?: Date; |
| | | /* |
| | | Represents the selected date for the component to use it as a uncontrolled component. |
| | | This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
| | | */ |
| | | defaultValue?: Date; |
| | | /* |
| | | Defines the format for the date. It accepts any moment.js date format. |
| | | If true the date will be displayed using the defaults for the current locale. |
| | | If false the datepicker is disabled and the component can be used as timepicker. |
| | | */ |
| | | dateFormat?: boolean|string; |
| | | /* |
| | | Defines the format for the time. It accepts any moment.js time format. |
| | | If true the time will be displayed using the defaults for the current locale. |
| | | If false the timepicker is disabled and the component can be used as datepicker. |
| | | */ |
| | | timeFormat?: boolean|string; |
| | | /* |
| | | Whether to show an input field to edit the date manually. |
| | | */ |
| | | input?: boolean; |
| | | /* |
| | | Whether to open or close the picker. If not set react-datetime will open the |
| | | datepicker on input focus and close it on click outside. |
| | | */ |
| | | open?: boolean; |
| | | /* |
| | | Manually set the locale for the react-datetime instance. |
| | | Moment.js locale needs to be loaded to be used, see i18n docs. |
| | | */ |
| | | locale?: string; |
| | | /* |
| | | Whether to interpret input times as UTC or the user's local timezone. |
| | | */ |
| | | utc?: boolean; |
| | | /* |
| | | Callback trigger when the date changes. The callback receives the selected `moment` object as |
| | | only parameter, if the date in the input is valid. If the date in the input is not valid, the |
| | | callback receives the value of the input (a string). |
| | | */ |
| | | onChange?: EventOrValueHandler<ChangeEvent<any>>; |
| | | /* |
| | | Callback trigger for when the user opens the datepicker. |
| | | */ |
| | | onFocus?: FocusEventHandler<any>; |
| | | /* |
| | | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. |
| | | The callback receives the selected `moment` object as only parameter, if the date in the input |
| | | is valid. If the date in the input is not valid, the callback receives the value of the |
| | | input (a string). |
| | | */ |
| | | onBlur?: EventOrValueHandler<FocusEvent<any>>; |
| | | /* |
| | | The default view to display when the picker is shown. ('years', 'months', 'days', 'time') |
| | | */ |
| | | viewMode?: ViewMode|number; |
| | | /* |
| | | Extra class names for the component markup. |
| | | */ |
| | | className?: string; |
| | | /* |
| | | Defines additional attributes for the input element of the component. |
| | | */ |
| | | inputProps?: React.HTMLProps<HTMLInputElement>; |
| | | /* |
| | | Define the dates that can be selected. The function receives (currentDate, selectedDate) |
| | | and should return a true or false whether the currentDate is valid or not. See selectable dates. |
| | | */ |
| | | isValidDate?: (currentDate: any, selectedDate: any) => boolean; |
| | | /* |
| | | Customize the way that the days are shown in the day picker. The accepted function has |
| | | the selectedDate, the current date and the default calculated props for the cell, |
| | | and must return a React component. See appearance customization |
| | | */ |
| | | renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element; |
| | | /* |
| | | Customize the way that the months are shown in the month picker. |
| | | The accepted function has the selectedDate, the current date and the default calculated |
| | | props for the cell, the month and the year to be shown, and must return a |
| | | React component. See appearance customization |
| | | */ |
| | | renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element; |
| | | /* |
| | | Customize the way that the years are shown in the year picker. |
| | | The accepted function has the selectedDate, the current date and the default calculated |
| | | props for the cell, the year to be shown, and must return a React component. |
| | | See appearance customization |
| | | */ |
| | | renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element; |
| | | /* |
| | | Whether to use moment's strict parsing when parsing input. |
| | | */ |
| | | strictParsing?: boolean; |
| | | /* |
| | | When true, once the day has been selected, the react-datetime will be automatically closed. |
| | | */ |
| | | closeOnSelect?: boolean; |
| | | /* |
| | | Allow to add some constraints to the time selector. It accepts an object with the format |
| | | {hours:{ min: 9, max: 15, step:2}} so the hours can't be lower than 9 or higher than 15, and |
| | | it will change adding or subtracting 2 hours everytime the buttons are clicked. The constraints |
| | | can be added to the hours, minutes, seconds and milliseconds. |
| | | */ |
| | | timeConstraints?: TimeConstraints; |
| | | /* |
| | | When true, keep the picker open when click event is triggered outside of component. When false, |
| | | close it. |
| | | */ |
| | | disableOnClickOutside?: boolean; |
| | | } |
| | | |
| | | export interface DatetimepickerState { |
| | | updateOn: string; |
| | | inputFormat: string; |
| | | viewDate: Moment; |
| | | selectedDate: Moment; |
| | | inputValue: string; |
| | | open: boolean; |
| | | } |
| | | } |
| | | |
| | | declare class ReactDatetimeClass extends Component<ReactDatetimeClass.DatetimepickerProps, ReactDatetimeClass.DatetimepickerState> {} |
| | |
| | | "url": "https://github.com/YouCanBookMe/react-datetime" |
| | | }, |
| | | "main": "./DateTime.js", |
| | | "typings": "./DateTime.d.ts", |
| | | "files": [ |
| | | "DateTime.js", |
| | | "react-datetime.d.ts", |
| | | "typings/index.d.ts", |
| | | "DateTime.d.ts", |
| | | "src", |
| | | "css", |
| | | "dist" |
| | | ], |
| | | "types": "./typings/index.d.ts", |
| | | "scripts": { |
| | | "build:mac": "./node_modules/.bin/gulp", |
| | | "build:win": "./node_modules/.bin/gulp.cmd", |
| | |
| | | "react-dom": ">=0.13" |
| | | }, |
| | | "devDependencies": { |
| | | "@types/react": "^0.14.49", |
| | | "babel-core": "^6.22.1", |
| | | "babel-jest": "^18.0.0", |
| | | "babel-loader": "^6.2.1", |
| | |
| | | "jest-cli": "^18.1.0", |
| | | "jsdom": "^7.0.2", |
| | | "mocha": "^3.2.0", |
| | | "moment": ">=2.16.0", |
| | | "pre-commit": "^1.1.3", |
| | | "react": ">=0.13", |
| | | "react-addons-test-utils": ">=0.13", |
| | |
| | | "webpack-stream": "^3.2.0" |
| | | }, |
| | | "dependencies": { |
| | | "create-react-class": "^15.5.2", |
| | | "@types/react": ">=0.13", |
| | | "moment": "2.16.x", |
| | | "object-assign": "^3.0.0", |
| | | "prop-types": "^15.5.7", |
| | | "react-onclickoutside": "^5.9.0" |
| | |
| | | // Definitions by: Ivan Verevkin <vereva@x-root.org> |
| | | |
| | | // These are the typings for Typescript 1.8 |
| | | // for Typescrip 2.0+ see typings/index.d.ts |
| | | // for Typescrip 2.0+ see DateTime.d.ts |
| | | |
| | | //// <reference path="../moment/moment-node.d.ts" /> |
| | | |
| | |
| | | }); |
| | | |
| | | it('when selecting month', () => { |
| | | const date = new Date(2000, 0, 15, 2, 2, 2, 2), |
| | | const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2), |
| | | onChangeFn = jest.fn(), |
| | | component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY-MM', onChange: onChangeFn }); |
| | | |
| | | utils.clickNthMonth(component, 2); |
| | | expect(onChangeFn).toHaveBeenCalledTimes(1); |
| | | expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T01:02:02.002Z'); |
| | | expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T02:02:02.002Z'); |
| | | }); |
| | | |
| | | it('when selecting year', () => { |
| | | const date = new Date(2000, 0, 15, 2, 2, 2, 2), |
| | | const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2), |
| | | onChangeFn = jest.fn(), |
| | | component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY', onChange: onChangeFn }); |
| | | |
| | | utils.clickNthYear(component, 2); |
| | | expect(onChangeFn).toHaveBeenCalledTimes(1); |
| | | expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T01:02:02.002Z'); |
| | | expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T02:02:02.002Z'); |
| | | }); |
| | | |
| | | it('when selecting time', () => { |
| | |
| | | import * as React from 'react'; |
| | | import { Moment } from 'moment'; |
| | | import * as ReactDatetime from 'react-datetime'; |
| | | import * as React from "react"; |
| | | import { Moment } from "moment"; |
| | | import * as ReactDatetime from "react-datetime"; |
| | | |
| | | /* |
| | | Test the datetime picker. |
| | |
| | | */ |
| | | |
| | | const TEST_CUSTOMIZABLE_COMPONENT_PROPS: JSX.Element = <ReactDatetime |
| | | renderDay={ (props, currentDate, selectedDate) => { |
| | | renderDay={ (props: any, currentDate: any, selectedDate: any) => { |
| | | return <td {...props}>{ '0' + currentDate.date() }</td>; |
| | | } } |
| | | renderMonth={ (props, month, year, selectedDate) => { |
| | | renderMonth={ (props: any, month: any, year: any, selectedDate: any) => { |
| | | return <td {...props}>{ month }</td>; |
| | | } } |
| | | renderYear={ (props, year, selectedDate) => { |
| | | renderYear={ (props: any, year: any, selectedDate: any) => { |
| | | return <td {...props}>{ year % 100 }</td>; |
| | | } } |
| | | />; |
| | |
| | | "strictNullChecks": false, |
| | | "types": [], |
| | | "noEmit": true, |
| | | "jsx": "react" |
| | | "jsx": "react", |
| | | "baseUrl": "../", |
| | | "paths": { |
| | | "react-datetime": ["./"] |
| | | } |
| | | }, |
| | | "files": [ |
| | | "index.d.ts", |
| | | "../DateTime.d.ts", |
| | | "react-datetime-tests.tsx" |
| | | ] |
| | | } |