import * as tslib_1 from "tslib";
import * as React from 'react';
import { ComponentPage, ExampleCard, PropertiesTableSet } from '@uifabric/example-app-base';
import { DateRangeType } 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', exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Inline Calendar', code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
                React.createElement(ExampleCard, { title: 'Inline Calendar with overlayed month picker when header is clicked', code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: 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: true, showGoToToday: true })),
                React.createElement(ExampleCard, { title: 'Inline Calendar with week selection', code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Week, autoNavigateOnSelection: true, showGoToToday: true, showNavigateButtons: true })),
                React.createElement(ExampleCard, { title: 'Inline Calendar with month selection', code: CalendarInlineExampleCode },
                    React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Month, autoNavigateOnSelection: 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: false, 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: false, 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: 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: true, showGoToToday: false, minDate: addMonths(today, -1), maxDate: addYears(today, 1) })),
                React.createElement(ExampleCard, { title: 'Calendar launched from a button', code: CalendarButtonExampleCode },
                    React.createElement(CalendarButtonExample, null)),
                React.createElement(ExampleCard, { title: 'Month picker launched from a button', code: CalendarButtonExampleCode },
                    React.createElement(CalendarButtonExample, { isDayPickerVisible: false, highlightCurrentMonth: 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: 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("div", null,
                React.createElement("p", null, "The calendar component allows a user to browse through a calendar and pick a date value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use the control as a single entity."),
                    React.createElement("li", null, "Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference)."),
                    React.createElement("li", null, "The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate."),
                    React.createElement("li", null, "When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px \u2013 wide). Plan your UI implementation accordingly."),
                    React.createElement("li", null, "The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar."),
                    React.createElement("li", null, "Don't attempt to force resize the control in any way."),
                    React.createElement("li", null, "Don't force the control to render one mode vs. the other (year or month/day)"),
                    React.createElement("li", null, "The flyout selector is a light dismiss control. Don't modify this behavior in any way."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, CalendarStatus)) }));
    };
    return CalendarPage;
}(React.Component));
export { CalendarPage };
//# sourceMappingURL=CalendarPage.js.map