DefinitelyTyped/types/react-infinite-calendar/react-infinite-calendar-tests.tsx

77 lines
2.2 KiB
TypeScript

import * as React from 'react';
import ReactInfiniteCalendar, {
Calendar,
withRange,
withKeyboardSupport,
withMultipleDates,
withDateSelection
} from 'react-infinite-calendar';
const test: React.SFC = () => (
<ReactInfiniteCalendar
selected={new Date()}
width={500}
height={500}
min={new Date()}
max={new Date()}
minDate={new Date()}
maxDate={new Date()}
disabledDays={[0, 6]}
disabledDates={[new Date()]}
display="years"
displayOptions={{
hideYearsOnSelect: true,
layout: 'portrait',
overscanMonthCount: 2,
shouldHeaderAnimate: true,
showHeader: true,
showMonthsForYears: true,
showOverlay: true,
showTodayHelper: true,
showWeekdays: true,
todayHelperRowOffset: 4,
}}
locale={{
blank: 'Select a date...',
headerFormat: 'ddd, MMM Do',
todayLabel: {
long: 'Today',
},
weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
weekStartsOn: 0,
}}
theme={{
accentColor: '#448AFF',
floatingNav: {
background: 'rgba(56, 87, 138, 0.94)',
chevron: '#FFA726',
color: '#FFF',
},
headerColor: '#448AFF',
selectionColor: '#559FFF',
textColor: {
active: '#FFF',
default: '#333',
},
todayColor: '#FFA726',
weekdayColor: '#559FFF',
}}
className="className"
onSelect={() => {}}
onScroll={(scrollTop: number) => { console.log(scrollTop); }}
onScrollEnd={(scrollTop: number) => { console.log(scrollTop); }}
rowHeight={40}
autoFocus={false}
tabIndex={1}
interpolateSelection={(date: Date, selected: Date[]) => {
console.log(date, selected);
return [new Date()];
}}
/>
);
const testWithRange = withRange(Calendar);
const testWithDateSelection = withDateSelection(Calendar);
const testWithKeyboardSupport = withKeyboardSupport(Calendar);
const testWithMultipleDate = withMultipleDates(Calendar);