office-ui-fabric-react/lib/demo/pages/TextFieldPage/examples/TextField.ErrorMessage.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import 'es6-promise';\nimport * as React from 'react';\nimport {\n  TextField\n} from '../../../../index';\nimport { NumberTextField } from './NumberTextField';\n\nexport class TextFieldErrorMessageExample extends React.Component<{}, {}> {\n  public constructor(props: any) {\n    super(props);\n\n    this._getErrorMessage = this._getErrorMessage.bind(this);\n    this._getErrorMessagePromise = this._getErrorMessagePromise.bind(this);\n  }\n\n  public render() {\n    return (\n      <div>\n        <TextField\n          label='TextField with a string-based validator. Hint: the length of the input string must be less than 3.'\n          onGetErrorMessage={ this._getErrorMessage }\n        />\n        <TextField\n          label='TextField with a Promise-based validator. Hint: the length of the input string must be less than 3.'\n          onGetErrorMessage={ this._getErrorMessagePromise }\n        />\n        <TextField\n          label='TextField with a string-based validator. Hint: the length of the input string must be less than 3.'\n          value='It should show an error message under this error message on render.'\n          onGetErrorMessage={ this._getErrorMessage }\n        />\n        <TextField\n          label='TextField with a Promise-based validator. Hint: the length of the input string must be less than 3.'\n          value='It should show an error message under this error message 5 seconds after render.'\n          onGetErrorMessage={ this._getErrorMessagePromise }\n        />\n        <TextField\n          label='TextField has both description and error message.'\n          value='It should show description and error message on render at the same time.'\n          description='This field has description and error message both under the input box.'\n          onGetErrorMessage={ this._getErrorMessage }\n        />\n        <TextField\n          label='TextField with a string-based validator. Hint: the length of the input string must be less than 3.'\n          placeholder='Validation will start after users stop typing for 2 seconds.'\n          onGetErrorMessage={ this._getErrorMessage }\n          deferredValidationTime={ 2000 }\n        />\n        <NumberTextField\n          label='Number TextField with valid initial value'\n          initialValue='100'\n        />\n        <NumberTextField\n          label='Number TextField with invalid initial value'\n          initialValue='Not a number'\n        />\n      </div>\n    );\n  }\n\n  private _getErrorMessage(value: string): string {\n    return value.length < 3\n      ? ''\n      : `The length of the input value should less than 3, actual is ${value.length}.`;\n  }\n\n  private _getErrorMessagePromise(value: string): Promise<string> {\n    return new Promise((resolve) => {\n      // resolve the promise after 3 second.\n      setTimeout(() => resolve(this._getErrorMessage(value)), 5000);\n    });\n  }\n}\n";