office-ui-fabric-react/lib-commonjs/components/TextField/examples/TextField.ErrorMessage.Example.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var es6_promise_1 = require("es6-promise");
var React = require("react");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
var NumberTextField_1 = require("./NumberTextField");
require("./TextField.Examples.scss");
var TextFieldErrorMessageExample = /** @class */ (function (_super) {
    tslib_1.__extends(TextFieldErrorMessageExample, _super);
    function TextFieldErrorMessageExample(props) {
        var _this = _super.call(this, props) || this;
        _this._getErrorMessage = _this._getErrorMessage.bind(_this);
        _this._getErrorMessagePromise = _this._getErrorMessagePromise.bind(_this);
        return _this;
    }
    TextFieldErrorMessageExample.prototype.render = function () {
        return (React.createElement("div", { className: "docs-TextFieldErrorExample" },
            React.createElement(TextField_1.TextField, { label: "TextField with a string-based validator. Hint: the length of the input string must be less than 3.", onGetErrorMessage: this._getErrorMessage }),
            React.createElement(TextField_1.TextField, { label: "TextField with a Promise-based validator. Hint: the length of the input string must be less than 3.", onGetErrorMessage: this._getErrorMessagePromise }),
            React.createElement(TextField_1.TextField, { label: "TextField with a string-based validator. Hint: the length of the input string must be less than 3.", value: "It should show an error message under this error message on render.", onGetErrorMessage: this._getErrorMessage }),
            React.createElement(TextField_1.TextField, { label: "TextField with a string-based validator. Hint: the length of the input string must be less than 3.", value: "It will run validation only on input change and not on render.", onGetErrorMessage: this._getErrorMessage, validateOnLoad: false }),
            React.createElement(TextField_1.TextField, { label: "TextField with a Promise-based validator. Hint: the length of the input string must be less than 3.", value: "It should show an error message under this error message 5 seconds after render.", onGetErrorMessage: this._getErrorMessagePromise }),
            React.createElement(TextField_1.TextField, { label: "TextField has both description and error message.", value: "It should show description and error message on render at the same time.", description: "This field has description and error message both under the input box.", onGetErrorMessage: this._getErrorMessage }),
            React.createElement(TextField_1.TextField, { label: "TextField with a string-based validator. Hint: the length of the input string must be less than 3.", placeholder: "Validation will start after users stop typing for 2 seconds.", onGetErrorMessage: this._getErrorMessage, deferredValidationTime: 2000 }),
            React.createElement(TextField_1.TextField, { label: "TextField that validates only on focus and blur. Hint: the length of the input string must be less than 3.", placeholder: "Validation will start only on input focus and blur", onGetErrorMessage: this._getErrorMessage, validateOnFocusIn: true, validateOnFocusOut: true }),
            React.createElement(TextField_1.TextField, { label: "TextField that validates only on blur. Hint: the length of the input string must be less than 3.", placeholder: "Validation will start only on input blur.", onGetErrorMessage: this._getErrorMessage, validateOnFocusOut: true }),
            React.createElement(TextField_1.TextField, { label: "Underlined TextField", underlined: true, onGetErrorMessage: this._getErrorMessage }),
            React.createElement(TextField_1.TextField, { label: "TextField that uses the errorMessage property to set an error state.", placeholder: "This field always has an error.", errorMessage: "This is a statically set error message." }),
            React.createElement(NumberTextField_1.NumberTextField, { label: "Number TextField with valid initial value", initialValue: "100" }),
            React.createElement(NumberTextField_1.NumberTextField, { label: "Number TextField with invalid initial value", initialValue: "Not a number" })));
    };
    TextFieldErrorMessageExample.prototype._getErrorMessage = function (value) {
        return value.length < 3 ? '' : "The length of the input value should less than 3, actual is " + value.length + ".";
    };
    TextFieldErrorMessageExample.prototype._getErrorMessagePromise = function (value) {
        var _this = this;
        return new es6_promise_1.Promise(function (resolve) {
            // resolve the promise after 3 second.
            setTimeout(function () { return resolve(_this._getErrorMessage(value)); }, 5000);
        });
    };
    return TextFieldErrorMessageExample;
}(React.Component));
exports.TextFieldErrorMessageExample = TextFieldErrorMessageExample;
//# sourceMappingURL=TextField.ErrorMessage.Example.js.map