office-ui-fabric-react/lib/components/Button/ButtonPage.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet, PageMarkdown, } from '@uifabric/example-app-base';
import { ButtonStatus } from './Button.checklist';
import { ButtonDefaultExample } from './examples/Button.Default.Example';
import { ButtonContextualMenuExample } from './examples/Button.ContextualMenu.Example';
import { ButtonCompoundExample } from './examples/Button.Compound.Example';
import { ButtonActionExample } from './examples/Button.Action.Example';
import { ButtonCommandBarExample } from './examples/Button.CommandBar.Example';
import { ButtonIconExample } from './examples/Button.Icon.Example';
import { ButtonAnchorExample } from './examples/Button.Anchor.Example';
import { ButtonScreenReaderExample } from './examples/Button.ScreenReader.Example';
import { ButtonSwapExample } from './examples/Button.Swap.Example';
import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.Split.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import * as exampleStylesImport from '../../common/_exampleStyles.scss';
var exampleStyles = exampleStylesImport;
var ButtonDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx');
var ButtonCompoundExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx');
var ButtonActionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx');
var ButtonCommandBarExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx');
var ButtonIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx');
var ButtonAnchorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx');
var ButtonScreenReaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx');
var ButtonContextualMenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx');
var ButtonSwapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx');
var ButtonSplitExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx');
var ButtonPage = /** @class */ (function (_super) {
    tslib_1.__extends(ButtonPage, _super);
    function ButtonPage(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            areButtonsDisabled: false,
            areButtonsChecked: false
        };
        return _this;
    }
    ButtonPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'Button', componentName: 'ButtonExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Button', exampleCards: React.createElement("div", null,
                React.createElement(Checkbox, { className: exampleStyles.exampleCheckbox, label: 'Disable buttons', checked: this.state.areButtonsDisabled, onChange: this._onDisabledChanged.bind(this) }),
                React.createElement(Checkbox, { className: exampleStyles.exampleCheckbox, label: 'Mark as checked', checked: this.state.areButtonsChecked, onChange: this._onToggledChanged.bind(this) }),
                React.createElement(ExampleCard, { title: 'Default Button', code: ButtonDefaultExampleCode },
                    React.createElement(ButtonDefaultExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Compound Button', code: ButtonCompoundExampleCode },
                    React.createElement(ButtonCompoundExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Command Bar Button', code: ButtonCommandBarExampleCode },
                    React.createElement(ButtonCommandBarExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Split Button', code: ButtonSplitExampleCode },
                    React.createElement(ButtonSplitExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Icon Button', code: ButtonIconExampleCode },
                    React.createElement(ButtonIconExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Contextual Menu Button', code: ButtonContextualMenuExampleCode },
                    React.createElement(ButtonContextualMenuExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Action Button', code: ButtonActionExampleCode },
                    React.createElement(ButtonActionExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked }))), implementationExampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Button Like Anchor', code: ButtonAnchorExampleCode },
                    React.createElement(ButtonAnchorExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Button with Aria Description for Screen Reader', code: ButtonScreenReaderExampleCode },
                    React.createElement(ButtonScreenReaderExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Button Swap with Focus State', code: ButtonSwapExampleCode },
                    React.createElement(ButtonSwapExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(ExampleCard, { title: 'Custom Split Button', code: ButtonSplitExampleCode },
                    React.createElement(ButtonSplitCustomExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked }))), allowNativeProps: true, nativePropsElement: ['a', 'button'], propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts')
                ] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, ButtonStatus)) }));
    };
    ButtonPage.prototype._onDisabledChanged = function (ev, disabled) {
        this.setState({
            areButtonsDisabled: disabled
        });
    };
    ButtonPage.prototype._onToggledChanged = function (ev, toggled) {
        this.setState({
            areButtonsChecked: toggled
        });
    };
    return ButtonPage;
}(React.Component));
export { ButtonPage };
//# sourceMappingURL=ButtonPage.js.map