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

Reusable React components for building experiences for Office 365.

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