diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index 20cf2e1513..bcaee40549 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -1,193 +1,193 @@ -// Type definitions for react-big-calendar 0.17.0 +// Type definitions for react-big-calendar 0.18 // Project: https://github.com/intljusticemission/react-big-calendar -// Definitions by: Piotr Witek +// Definitions by: Piotr Witek // Austin Turner +// Krzysztof Bezrąk // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 -declare module 'react-big-calendar' { - import * as React from 'react'; +import * as React from 'react'; - export type stringOrDate = string | Date; - export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda'; - export type Navigate = 'PREV' | 'NEXT' | 'TODAY' | 'DATE'; - export interface Format { - /** - * Format for the day of the month heading in the Month view. - * e.g. "01", "02", "03", etc - */ - dateFormat?: string, +export type stringOrDate = string | Date; +export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda'; +export type Navigate = 'PREV' | 'NEXT' | 'TODAY' | 'DATE'; +export interface Format { + /** + * Format for the day of the month heading in the Month view. + * e.g. "01", "02", "03", etc + */ + dateFormat?: string; - /** - * A day of the week format for Week and Day headings, - * e.g. "Wed 01/04" - * - */ - dayFormat?: string, + /** + * A day of the week format for Week and Day headings, + * e.g. "Wed 01/04" + * + */ + dayFormat?: string; - /** - * Week day name format for the Month week day headings, - * e.g: "Sun", "Mon", "Tue", etc - * - */ - weekdayFormat?: string, + /** + * Week day name format for the Month week day headings, + * e.g: "Sun", "Mon", "Tue", etc + * + */ + weekdayFormat?: string; - /** - * The timestamp cell formats in Week and Time views, e.g. "4:00 AM" - */ - timeGutterFormat?: string, + /** + * The timestamp cell formats in Week and Time views, e.g. "4:00 AM" + */ + timeGutterFormat?: string; - /** - * Toolbar header format for the Month view, e.g "2015 April" - * - */ - monthHeaderFormat?: string, + /** + * Toolbar header format for the Month view, e.g "2015 April" + * + */ + monthHeaderFormat?: string; - /** - * Toolbar header format for the Week views, e.g. "Mar 29 - Apr 04" - */ - dayRangeHeaderFormat?: string, + /** + * Toolbar header format for the Week views, e.g. "Mar 29 - Apr 04" + */ + dayRangeHeaderFormat?: string; - /** - * Toolbar header format for the Day view, e.g. "Wednesday Apr 01" - */ - dayHeaderFormat?: string, + /** + * Toolbar header format for the Day view, e.g. "Wednesday Apr 01" + */ + dayHeaderFormat?: string; - /** - * Toolbar header format for the Agenda view, e.g. "4/1/2015 — 5/1/2015" - */ - agendaHeaderFormat?: string, + /** + * Toolbar header format for the Agenda view, e.g. "4/1/2015 — 5/1/2015" + */ + agendaHeaderFormat?: string; - /** - * A time range format for selecting time slots, e.g "8:00am — 2:00pm" - */ - selectRangeFormat?: string, + /** + * A time range format for selecting time slots, e.g "8:00am — 2:00pm" + */ + selectRangeFormat?: string; - agendaDateFormat?: string, - agendaTimeFormat?: string, - agendaTimeRangeFormat?: string, + agendaDateFormat?: string; + agendaTimeFormat?: string; + agendaTimeRangeFormat?: string; - /** - * Time range displayed on events. - */ - eventTimeRangeFormat?: string, + /** + * Time range displayed on events. + */ + eventTimeRangeFormat?: string; - /** - * An optional event time range for events that continue onto another day - */ - eventTimeRangeStartFormat?: string, + /** + * An optional event time range for events that continue onto another day + */ + eventTimeRangeStartFormat?: string; - /** - * An optional event time range for events that continue from another day - */ - eventTimeRangeEndFormat?: string, - } + /** + * An optional event time range for events that continue from another day + */ + eventTimeRangeEndFormat?: string; +} - export interface Components { - event?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - eventWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - dayWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - agenda?: { - date?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - time?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - event?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - }, - day?: { - header?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - event?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - }, - week?: { - header?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - event?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - }, - month?: { - header?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - dateHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - event?: React.SFC | React.Component | React.ComponentClass | JSX.Element, - }, - } +export interface Components { + event?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + eventWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + dayWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + agenda?: { + date?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + time?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + event?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + }; + day?: { + header?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + event?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + }; + week?: { + header?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + event?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + }; + month?: { + header?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + dateHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + event?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + }; +} - export interface Messages { - allDay?: string; - previous?: string; - next?: string; - today?: string; - month?: string; - week?: string; - day?: string; - agenda?: string; - date?: string; - time?: string; - event?: string; - showMore?: string; - } +export interface Messages { + date?: string; + time?: string; + event?: string; + allDay?: string; + week?: string; + work_week?: string; + day?: string; + month?: string; + previous?: string; + next?: string; + yesterday?: string; + tomorrow?: string; + today?: string; + agenda?: string; + showMore?: (count: number) => string; +} - interface BigCalendarProps extends React.Props { - date?: stringOrDate; - now?: Date; - view?: View; - events?: Object[]; - onNavigate?: (action: Navigate, newDate: Date) => void; - onView?: (view: View) => void; - onDrillDown?: (date: Date, view: View) => void; - onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[], action: 'select' | 'click' | 'doubleClick' }) => void; - onDoubleClickEvent?: (event: Object, e: React.SyntheticEvent) => void; - onSelectEvent?: (event: Object, e: React.SyntheticEvent) => void; - onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null; - selected?: any; - views?: View[] | { - month: boolean | React.SFC | React.Component, - week: boolean | React.SFC | React.Component, - myweek: boolean | React.SFC | React.Component, - }; - drilldownView?: View | null; - getDrilldownView?: ((targetDate: Date, currentViewName: View, configuredViewNames: View[]) => void) | null; - length?: number; - toolbar?: boolean; - popup?: boolean; - popupOffset?: number | { x: number, y: number }; - selectable?: boolean | 'ignoreEvents'; - longPressThreshold?: number; - step?: number; - timeslots?: number; - rtl?: boolean; - eventPropGetter?: (event: Object, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; - slotPropGetter?: (date: Date) => { className?: string, style?: Object }; - dayPropGetter?: (date: Date) => { className?: string, style?: Object }; - showMultiDayTimes?: boolean; - min?: stringOrDate; - max?: stringOrDate; - scrollToTime?: Date; - culture?: string; - formats?: Format; - components?: Components; - messages?: Messages; - titleAccessor?: string | ((event: any) => string); - allDayAccessor?: string | ((event: any) => boolean); - startAccessor?: string | ((event: any) => Date); - endAccessor?: string | ((event: any) => Date); - resourceAccessor?: string | ((event: any) => any); - resources?: any[]; - resourceIdAccessor?: string | ((event: any) => any); - resourceTitleAccessor?: string | ((event: any) => string); - defaultView?: View; - defaultDate?: Date; - className?: string; - elementProps?: React.HTMLAttributes; - } +export interface BigCalendarProps extends React.Props { + date?: stringOrDate; + now?: Date; + view?: View; + events?: object[]; + onNavigate?: (newDate: Date, action: Navigate) => void; + onView?: (view: View) => void; + onDrillDown?: (date: Date, view: View) => void; + onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[], action: 'select' | 'click' | 'doubleClick' }) => void; + onDoubleClickEvent?: (event: object, e: React.SyntheticEvent) => void; + onSelectEvent?: (event: object, e: React.SyntheticEvent) => void; + onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null; + selected?: any; + views?: View[] | { + month: boolean | React.SFC | React.Component, + week: boolean | React.SFC | React.Component, + myweek: boolean | React.SFC | React.Component, + }; + drilldownView?: View | null; + getDrilldownView?: ((targetDate: Date, currentViewName: View, configuredViewNames: View[]) => void) | null; + length?: number; + toolbar?: boolean; + popup?: boolean; + popupOffset?: number | { x: number, y: number }; + selectable?: boolean | 'ignoreEvents'; + longPressThreshold?: number; + step?: number; + timeslots?: number; + rtl?: boolean; + eventPropGetter?: (event: object, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; + slotPropGetter?: (date: Date) => { className?: string, style?: object }; + dayPropGetter?: (date: Date) => { className?: string, style?: object }; + showMultiDayTimes?: boolean; + min?: stringOrDate; + max?: stringOrDate; + scrollToTime?: Date; + culture?: string; + formats?: Format; + components?: Components; + messages?: Messages; + titleAccessor?: string | ((event: any) => string); + allDayAccessor?: string | ((event: any) => boolean); + startAccessor?: string | ((event: any) => Date); + endAccessor?: string | ((event: any) => Date); + resourceAccessor?: string | ((event: any) => any); + resources?: any[]; + resourceIdAccessor?: string | ((event: any) => any); + resourceTitleAccessor?: string | ((event: any) => string); + defaultView?: View; + defaultDate?: Date; + className?: string; + elementProps?: React.HTMLAttributes; +} - class BigCalendar extends React.Component { - /** - * Setup the localizer by providing the moment Object - */ - static momentLocalizer(momentInstance: Object): void; - /** - * Setup the localizer by providing the globalize Object - */ - static globalizeLocalizer(globalizeInstance: Object): void; - } - - export default BigCalendar; +export default class BigCalendar extends React.Component { + /** + * Setup the localizer by providing the moment Object + */ + static momentLocalizer(momentInstance: object): void; + /** + * Setup the localizer by providing the globalize Object + */ + static globalizeLocalizer(globalizeInstance: object): void; } diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index 16ea44d859..dbb1753332 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import * as ReactDOMServer from "react-dom/server"; -import BigCalendar, { Navigate, View } from "react-big-calendar"; +import BigCalendar, { BigCalendarProps, Navigate, View } from "react-big-calendar"; // Don't want to add this as a dependency, because it is only used for tests. declare const moment: any; @@ -13,13 +13,13 @@ BigCalendar.momentLocalizer(moment); // http://intljusticemission.github.io/react-big-calendar/examples/index.html class CalendarEvent { - public title: string; - public allDay: boolean; - public start: Date; - public end: Date; - public desc: string; + title: string; + allDay: boolean; + start: Date; + end: Date; + desc: string; - public constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string) { + constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string) { this.title = _title; this.allDay = _allDay || false; this.start = _start; @@ -45,7 +45,7 @@ console.log('Test Results -> BasicExample', basicExampleHtml); // Full API Example Test - based on API Documentation // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api -class FullAPIExample extends React.Component { +class FullAPIExample extends React.Component { render() { return ( { date={new Date()} view={'day'} events={getEvents()} - onNavigate={(action: Navigate, newDate: Date) => { } } - onView={(view: View) => { } } + onNavigate={(newDate: Date, action: Navigate) => { }} + onView={(view: View) => { }} onSelectSlot={(slotInfo) => { const start = slotInfo.start; const end = slotInfo.end; const slots = slotInfo.slots; - } } - onSelectEvent={(event) => { } } + }} + onSelectEvent={(event) => { }} onSelecting={(slotInfo) => { const start = slotInfo.start; const end = slotInfo.end; return true; - } } + }} views={['day']} toolbar={true} popup={true} @@ -73,7 +73,7 @@ class FullAPIExample extends React.Component { selectable={true} step={20} rtl={true} - eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' }) } + eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })} titleAccessor={'title'} allDayAccessor={(event: any) => !!event.allDay} startAccessor={'start'} @@ -86,7 +86,7 @@ class FullAPIExample extends React.Component { timeslots={24} defaultView={'month'} className={'my-calendar'} - elementProps={{id: 'myCalendar'}} + elementProps={{ id: 'myCalendar' }} components={{ event: Event, agenda: { @@ -106,58 +106,58 @@ console.log('Test Results -> FullAPIExample', fullApiExampleHtml); // Test fixtures function getEvents(): CalendarEvent[] { - var events: CalendarEvent[] = [ + const events: CalendarEvent[] = [ new CalendarEvent('All Day Event', new Date(2015, 3, 0), new Date(2015, 3, 0), true), new CalendarEvent('Long Event', new Date(2015, 3, 7), new Date(2015, 3, 10)), new CalendarEvent('DTS STARTS', new Date(2016, 2, 13, 0, 0, 0), new Date(2016, 2, 20, 0, 0, 0)), new CalendarEvent('DTS ENDS', new Date(2016, 10, 6, 0, 0, 0), new Date(2016, 10, 13, 0, 0, 0)), new CalendarEvent('Some Event', new Date(2015, 3, 9, 0, 0, 0), new Date(2015, 3, 9, 0, 0, 0)), new CalendarEvent('Conference', new Date(2015, 3, 11), new Date(2015, 3, 13), undefined, 'Big conference for important people'), - new CalendarEvent('Meeting', new Date(2015, 3, 12, 10, 30, 0, 0),new Date(2015, 3, 12, 12, 30, 0, 0), undefined, 'Pre-meeting meeting, to prepare for the meeting'), - new CalendarEvent('Lunch', new Date(2015, 3, 12, 12, 0, 0, 0),new Date(2015, 3, 12, 13, 0, 0, 0), undefined, 'Power lunch'), - new CalendarEvent('Meeting', new Date(2015, 3, 12, 14, 0, 0, 0),new Date(2015, 3, 12, 15, 0, 0, 0)), - new CalendarEvent('Happy Hour', new Date(2015, 3, 12, 17, 0, 0, 0),new Date(2015, 3, 12, 17, 30, 0, 0),undefined,'Most important meal of the day'), - new CalendarEvent('Dinner', new Date(2015, 3, 12, 20, 0, 0, 0),new Date(2015, 3, 12, 21, 0, 0, 0)), - new CalendarEvent('Birthday Party', new Date(2015, 3, 13, 7, 0, 0),new Date(2015, 3, 13, 10, 30, 0)), + new CalendarEvent('Meeting', new Date(2015, 3, 12, 10, 30, 0, 0), new Date(2015, 3, 12, 12, 30, 0, 0), undefined, 'Pre-meeting meeting, to prepare for the meeting'), + new CalendarEvent('Lunch', new Date(2015, 3, 12, 12, 0, 0, 0), new Date(2015, 3, 12, 13, 0, 0, 0), undefined, 'Power lunch'), + new CalendarEvent('Meeting', new Date(2015, 3, 12, 14, 0, 0, 0), new Date(2015, 3, 12, 15, 0, 0, 0)), + new CalendarEvent('Happy Hour', new Date(2015, 3, 12, 17, 0, 0, 0), new Date(2015, 3, 12, 17, 30, 0, 0), undefined, 'Most important meal of the day'), + new CalendarEvent('Dinner', new Date(2015, 3, 12, 20, 0, 0, 0), new Date(2015, 3, 12, 21, 0, 0, 0)), + new CalendarEvent('Birthday Party', new Date(2015, 3, 13, 7, 0, 0), new Date(2015, 3, 13, 10, 30, 0)), ]; return events; +} + +class EventAgenda extends React.Component { + render() { + // const { label } = this.props; + return ( +
+
Calendar Events
+
+ ); + } +} + +const customDayPropGetter = (date: Date) => { + if (date.getDate() === 7 || date.getDate() === 15) + return { + className: 'special-day', + style: { + border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'), + }, + }; + else return {}; }; - class EventAgenda extends React.Component { - render() { - // const { label } = this.props; - return ( -
-
Calendar Events
-
- ); - } - } - - const customDayPropGetter = (date: Date) => { +const customSlotPropGetter = (date: Date) => { if (date.getDate() === 7 || date.getDate() === 15) - return { - className: 'special-day', - style: { - border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'), - }, - } - else return {} - } + return { + className: 'special-day', + }; + else return {}; +}; - const customSlotPropGetter = (date: Date) => { - if (date.getDate() === 7 || date.getDate() === 15) - return { - className: 'special-day', - } - else return {} - } - - function Event(event: any) { +function Event(event: any) { return ( - - {event.title} - {event.desc && ': ' + event.desc} - - ) - } + + {event.title} + {event.desc && ': ' + event.desc} + + ); +} diff --git a/types/react-big-calendar/tsconfig.json b/types/react-big-calendar/tsconfig.json index 1a28fe79ae..eddf55cc13 100644 --- a/types/react-big-calendar/tsconfig.json +++ b/types/react-big-calendar/tsconfig.json @@ -6,8 +6,8 @@ "dom" ], "noImplicitAny": true, - "noImplicitThis": false, - "strictNullChecks": false, + "noImplicitThis": true, + "strictNullChecks": true, "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ diff --git a/types/react-big-calendar/tslint.json b/types/react-big-calendar/tslint.json index a41bf5d19a..e60c15844f 100644 --- a/types/react-big-calendar/tslint.json +++ b/types/react-big-calendar/tslint.json @@ -1,79 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - "adjacent-overload-signatures": false, - "array-type": false, - "arrow-return-shorthand": false, - "ban-types": false, - "callable-types": false, - "comment-format": false, - "dt-header": false, - "eofline": false, - "export-just-namespace": false, - "import-spacing": false, - "interface-name": false, - "interface-over-type-literal": false, - "jsdoc-format": false, - "max-line-length": false, - "member-access": false, - "new-parens": false, - "no-any-union": false, - "no-boolean-literal-compare": false, - "no-conditional-assignment": false, - "no-consecutive-blank-lines": false, - "no-construct": false, - "no-declare-current-package": false, - "no-duplicate-imports": false, - "no-duplicate-variable": false, - "no-empty-interface": false, - "no-for-in-array": false, - "no-inferrable-types": false, - "no-internal-module": false, - "no-irregular-whitespace": false, - "no-mergeable-namespace": false, - "no-misused-new": false, - "no-namespace": false, - "no-object-literal-type-assertion": false, - "no-padding": false, - "no-redundant-jsdoc": false, - "no-redundant-jsdoc-2": false, - "no-redundant-undefined": false, - "no-reference-import": false, - "no-relative-import-in-test": false, - "no-self-import": false, - "no-single-declare-module": false, - "no-string-throw": false, - "no-unnecessary-callback-wrapper": false, - "no-unnecessary-class": false, - "no-unnecessary-generics": false, - "no-unnecessary-qualifier": false, - "no-unnecessary-type-assertion": false, - "no-useless-files": false, - "no-var-keyword": false, - "no-var-requires": false, - "no-void-expression": false, - "no-trailing-whitespace": false, - "object-literal-key-quotes": false, - "object-literal-shorthand": false, - "one-line": false, - "one-variable-per-declaration": false, - "only-arrow-functions": false, - "prefer-conditional-expression": false, - "prefer-const": false, - "prefer-declare-function": false, - "prefer-for-of": false, - "prefer-method-signature": false, - "prefer-template": false, - "radix": false, - "semicolon": false, - "space-before-function-paren": false, - "space-within-parens": false, - "strict-export-declare-modifiers": false, - "trim-file": false, - "triple-equals": false, - "typedef-whitespace": false, - "unified-signatures": false, - "void-return": false, - "whitespace": false - } -} + "extends": "dtslint/dt.json" +} \ No newline at end of file