import * as tslib_1 from "tslib";
import * as React from 'react';
import { ComponentPage, ExampleCard, PropertiesTableSet, PageMarkdown } from '@uifabric/example-app-base';
import { DateRangeType, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar';
import { CalendarButtonExample } from './examples/Calendar.Button.Example';
import { CalendarInlineExample } from './examples/Calendar.Inline.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { CalendarStatus } from './Calendar.checklist';
import { addMonths, addYears } from '../../utilities/dateMath/DateMath';
var CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx');
var CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx');
var CalendarPage = /** @class */ (function (_super) {
    tslib_1.__extends(CalendarPage, _super);
    function CalendarPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CalendarPage.prototype.render = function () {
        var today = new Date(Date.now());
        return (React.createElement(ComponentPage, { title: "Calendar", componentName: "CalendarExample", componentUrl: "https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Calendar", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Inline Calendar", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with overlayed month picker when header is clicked", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
                React.createElement(ExampleCard, { title: "Inline Calendar with month picker", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with week selection", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Week, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with month selection", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Month, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with week numbers", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showWeekNumbers: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with 6 weeks display by default", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showSixWeeksByDefault: true })),
                React.createElement(ExampleCard, { title: "Inline Calendar with month picker and no day picker", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Month, autoNavigateOnSelection: false, showGoToToday: true, highlightCurrentMonth: false, highlightSelectedMonth: true, isDayPickerVisible: false })),
                React.createElement(ExampleCard, { title: "Inline Calendar with date boundary (minDate, maxDate)", code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Day, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: false, minDate: addMonths(today, -1), maxDate: addYears(today, 1) })),
                React.createElement(ExampleCard, { title: "Calendar with selectableDays = [Tuesday, Wednesday, Friday, Saturday] provided, first day of week = Monday", code: CalendarButtonExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.WorkWeek, firstDayOfWeek: DayOfWeek.Monday, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, workWeekDays: [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday] })),
                React.createElement(ExampleCard, { title: "Calendar launched from a button", code: CalendarButtonExampleCode },
                    React.createElement(CalendarButtonExample, { highlightCurrentMonth: true })),
                React.createElement(ExampleCard, { title: "Month picker launched from a button", code: CalendarButtonExampleCode },
                    React.createElement(CalendarButtonExample, { isDayPickerVisible: false, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Month Picker' })),
                React.createElement(ExampleCard, { title: "Calendar with overlayed month picker launched from a button", code: CalendarButtonExampleCode },
                    React.createElement(CalendarButtonExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Overlayed Day Picker and Month Picker' }))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [require('!raw-loader!office-ui-fabric-react/src/components/Calendar/Calendar.types.ts')] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, CalendarStatus)) }));
    };
    return CalendarPage;
}(React.Component));
export { CalendarPage };
//# sourceMappingURL=CalendarPage.js.map