Manual Reference Source

basic/ErrorMessage.js

  1. /**
  2. * Created by pawelposel on 12/11/2016.
  3. */
  4.  
  5. import PropTypes from 'prop-types';
  6.  
  7. import React, { Component } from 'react';
  8. import { Message } from 'semantic-ui-react';
  9.  
  10. /**
  11. * ErrorMessage is a component which uses [Message](https://react.semantic-ui.com/elements/message) component from Semantic-UI-React
  12. * to display error message.
  13. *
  14. * ## Access
  15. * `Stage.Basic.ErrorMessage`
  16. *
  17. * ## Usage
  18. * ### Single error message
  19. * ![ErrorMessage](manual/asset/ErrorMessage_0.png)
  20. * ```
  21. * <ErrorMessage header="Fatal error" error="File cannot be opened" />
  22. * ```
  23. *
  24. * ### List of error messages
  25. * ![ErrorMessage](manual/asset/ErrorMessage_1.png)
  26. * ```
  27. * <ErrorMessage header="Errors in the form"
  28. * error=["Please provide deployment name", "Please provide agent_private_key_path"] />
  29. * ```
  30. *
  31. */
  32. export default class ErrorMessage extends Component {
  33. constructor(props, context) {
  34. super(props, context);
  35.  
  36. this.state = {
  37. hidden: false
  38. };
  39.  
  40. this.visibilityTimeout = null;
  41. }
  42.  
  43. /**
  44. * propTypes
  45. *
  46. * @property {boolean} [autoHide=false] if set, then message will be hidden after visibility timeout
  47. * @property {string} [className=''] additional CSS classes to [Message](https://react.semantic-ui.com/elements/message) component
  48. * @property {object} [error=null] string, array or object containing error text message/messages
  49. * @property {string} [header='Error Occured'] header of error text message
  50. * @property {Function} [onDismiss=()=>{}] function called when either error message visibility timeout (see {@link ErrorMessage.MESSAGE_VISIBLE_TIMEOUT}) expires or user dismiss manually error message
  51. */
  52. static propTypes = {
  53. autoHide: PropTypes.bool,
  54. className: PropTypes.string,
  55. error: PropTypes.any,
  56. header: PropTypes.string,
  57. onDismiss: PropTypes.func
  58. };
  59.  
  60. static defaultProps = {
  61. autoHide: false,
  62. className: '',
  63. error: null,
  64. header: 'Error Occured',
  65. onDismiss: () => {}
  66. };
  67.  
  68. /**
  69. * Message visibility timeout
  70. */
  71. static MESSAGE_VISIBLE_TIMEOUT = 10000;
  72.  
  73. componentDidUpdate(prevProps) {
  74. if (!!this.props.error && !_.isEqual(this.props.error, prevProps.error)) {
  75. this.setState({ hidden: false });
  76. if (this.props.error) {
  77. this._setVisibilityTimeout(ErrorMessage.MESSAGE_VISIBLE_TIMEOUT);
  78. }
  79. }
  80. }
  81.  
  82. componentDidMount() {
  83. this._setVisibilityTimeout(ErrorMessage.MESSAGE_VISIBLE_TIMEOUT);
  84. }
  85.  
  86. componentWillUnmount() {
  87. clearTimeout(this.visibilityTimeout);
  88. }
  89.  
  90. _setVisibilityTimeout(timeout) {
  91. if (this.props.autoHide) {
  92. clearTimeout(this.visibilityTimeout);
  93. this.visibilityTimeout = setTimeout(() => {
  94. this._handleDismiss();
  95. }, timeout);
  96. }
  97. }
  98.  
  99. _handleDismiss() {
  100. this.setState({ hidden: true });
  101. this.props.onDismiss();
  102. }
  103.  
  104. render() {
  105. if (!this.props.error) {
  106. return null;
  107. }
  108.  
  109. let { error } = this.props;
  110. let { header } = this.props;
  111.  
  112. if (!_.isString(error) && !_.isArray(error)) {
  113. error = this.props.error.message;
  114.  
  115. if (!header) {
  116. header = this.props.error.header;
  117. }
  118. }
  119.  
  120. return (
  121. <Message
  122. error
  123. className={this.props.className}
  124. hidden={this.state.hidden}
  125. onDismiss={this._handleDismiss.bind(this)}
  126. >
  127. <Message.Header>{header}</Message.Header>
  128. {_.isArray(error) && !_.isEmpty(error) ? (
  129. <Message.List items={error} />
  130. ) : (
  131. <Message.Content>{error}</Message.Content>
  132. )}
  133. </Message>
  134. );
  135. }
  136. }