office-ui-fabric-react/lib/components/TextField/TextFieldPage.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { TextFieldBasicExample } from './examples/TextField.Basic.Example';
import { TextFieldBorderlessExample } from './examples/TextField.Borderless.Example';
import { TextFieldCustomRenderExample } from './examples/TextField.CustomRender.Example';
import { TextFieldErrorMessageExample } from './examples/TextField.ErrorMessage.Example';
import { TextFieldIconExample } from './examples/TextField.Icon.Example';
import { TextFieldMultilineExample } from './examples/TextField.Multiline.Example';
import { TextFieldPlaceholderExample } from './examples/TextField.Placeholder.Example';
import { TextFieldPrefixExample } from './examples/TextField.Prefix.Example';
import { TextFieldPrefixAndSuffixExample } from './examples/TextField.PrefixAndSuffix.Example';
import { TextFieldStatus } from './TextField.checklist';
import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example';
import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example';
import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example';
import { TextFieldOnRenderDescriptionExample } from './examples/TextField.OnRenderDescription.Example';
var TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx');
var TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx');
var TextFieldCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx');
var TextFieldErrorMessageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx');
var TextFieldIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx');
var TextFieldMultilineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx');
var TextFieldPlaceholderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx');
var TextFieldPrefixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx');
var TextFieldPrefixAndSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx');
var TextFieldSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx');
var TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx');
var TextFieldAutoCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx');
var TextFieldOnRenderDescriptionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx');
var TextFieldPage = /** @class */ (function (_super) {
    tslib_1.__extends(TextFieldPage, _super);
    function TextFieldPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    TextFieldPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'TextField', componentName: 'TextFieldExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/TextField', exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Default TextField with Label', code: TextFieldBasicExampleCode },
                    React.createElement(TextFieldBasicExample, null)),
                React.createElement(ExampleCard, { title: 'TextField with Placeholder', code: TextFieldPlaceholderExampleCode },
                    React.createElement(TextFieldPlaceholderExample, null)),
                React.createElement(ExampleCard, { title: 'Multiline TextField', code: TextFieldMultilineExampleCode },
                    React.createElement(TextFieldMultilineExample, null)),
                React.createElement(ExampleCard, { title: 'Underlined TextField', code: TextFieldUnderlinedExampleCode },
                    React.createElement(TextFieldUnderlinedExample, null)),
                React.createElement(ExampleCard, { title: 'Borderless TextField', code: TextFieldBorderlessExampleCode },
                    React.createElement(TextFieldBorderlessExample, null)),
                React.createElement(ExampleCard, { title: 'TextField with browser AutoComplete', code: TextFieldAutoCompleteExampleCode },
                    React.createElement(TextFieldAutoCompleteExample, null))), implementationExampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Textfield with a prefix', code: TextFieldPrefixExampleCode },
                    React.createElement(TextFieldPrefixExample, null)),
                React.createElement(ExampleCard, { title: 'Textfield with a suffix', code: TextFieldSuffixExampleCode },
                    React.createElement(TextFieldSuffixExample, null)),
                React.createElement(ExampleCard, { title: 'Textfield with a prefix and a suffix', code: TextFieldPrefixAndSuffixExampleCode },
                    React.createElement(TextFieldPrefixAndSuffixExample, null)),
                React.createElement(ExampleCard, { title: 'TextField with an icon', code: TextFieldIconExampleCode },
                    React.createElement(TextFieldIconExample, null)),
                React.createElement(ExampleCard, { title: 'TextField with custom Label', code: TextFieldCustomRenderExampleCode },
                    React.createElement(TextFieldCustomRenderExample, null)),
                React.createElement(ExampleCard, { title: 'TextField with custom description', code: TextFieldOnRenderDescriptionExampleCode },
                    React.createElement(TextFieldOnRenderDescriptionExample, null)),
                React.createElement(ExampleCard, { title: 'TextField error message variations', code: TextFieldErrorMessageExampleCode },
                    React.createElement(TextFieldErrorMessageExample, null))), allowNativeProps: true, nativePropsElement: ['input', 'textarea'], propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts')
                ] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, TextFieldStatus)) }));
    };
    return TextFieldPage;
}(React.Component));
export { TextFieldPage };
//# sourceMappingURL=TextFieldPage.js.map