You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractNotification.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. // @flow
  2. import { Component } from 'react';
  3. import { NOTIFICATION_TYPE } from '../constants';
  4. export type Props = {
  5. /**
  6. * Display appearance for the component, passed directly to the
  7. * notification.
  8. */
  9. appearance: string,
  10. /**
  11. * Whether or not the title and description should be concatenated.
  12. */
  13. concatText?: boolean,
  14. /**
  15. * Callback invoked when the custom button is clicked.
  16. */
  17. customActionHandler: Function[],
  18. /**
  19. * The text to display as button in the notification for the custom action.
  20. */
  21. customActionNameKey: string[],
  22. /**
  23. * The text to display in the body of the notification. If not passed
  24. * in, the passed in descriptionKey will be used.
  25. */
  26. defaultTitleKey: string,
  27. /**
  28. * A description string that can be used in addition to the prop
  29. * descriptionKey.
  30. */
  31. description: string,
  32. /**
  33. * The translation arguments that may be necessary for the description.
  34. */
  35. descriptionArguments: Object,
  36. /**
  37. * The translation key to use as the body of the notification.
  38. */
  39. descriptionKey: string,
  40. /**
  41. * Whether the support link should be hidden in the case of an error
  42. * message.
  43. */
  44. hideErrorSupportLink: boolean,
  45. /**
  46. * The type of icon to be displayed. If not passed in, the appearance
  47. * type will be used.
  48. */
  49. icon?: String,
  50. /**
  51. * Whether or not the dismiss button should be displayed.
  52. */
  53. isDismissAllowed: boolean,
  54. /**
  55. * Maximum lines of the description.
  56. */
  57. maxLines: ?number,
  58. /**
  59. * Callback invoked when the user clicks to dismiss the notification.
  60. */
  61. onDismissed: Function,
  62. /**
  63. * Invoked to obtain translated strings.
  64. */
  65. t: Function,
  66. /**
  67. * The text to display at the top of the notification. If not passed in,
  68. * the passed in titleKey will be used.
  69. */
  70. title: string,
  71. /**
  72. * The translation arguments that may be necessary for the title.
  73. */
  74. titleArguments: Object,
  75. /**
  76. * The translation key to display as the title of the notification if
  77. * no title is provided.
  78. */
  79. titleKey: string,
  80. /**
  81. * The unique identifier for the notification.
  82. */
  83. uid: string
  84. };
  85. /**
  86. * Abstract class for {@code Notification} component.
  87. *
  88. * @augments Component
  89. */
  90. export default class AbstractNotification<P: Props> extends Component<P> {
  91. /**
  92. * Default values for {@code Notification} component's properties.
  93. *
  94. * @static
  95. */
  96. static defaultProps = {
  97. appearance: NOTIFICATION_TYPE.NORMAL,
  98. isDismissAllowed: true
  99. };
  100. /**
  101. * Initializes a new {@code Notification} instance.
  102. *
  103. * @param {Object} props - The read-only properties with which the new
  104. * instance is to be initialized.
  105. */
  106. constructor(props: P) {
  107. super(props);
  108. // Bind event handler so it is only bound once for every instance.
  109. this._onDismissed = this._onDismissed.bind(this);
  110. }
  111. _getDescription: () => Array<string>;
  112. /**
  113. * Returns the description array to be displayed.
  114. *
  115. * @protected
  116. * @returns {Array<string>}
  117. */
  118. _getDescription() {
  119. const {
  120. description,
  121. descriptionArguments,
  122. descriptionKey,
  123. t
  124. } = this.props;
  125. const descriptionArray = [];
  126. descriptionKey
  127. && descriptionArray.push(t(descriptionKey, descriptionArguments));
  128. description && descriptionArray.push(description);
  129. return descriptionArray;
  130. }
  131. _getDescriptionKey: () => string;
  132. /**
  133. * Returns the description key that was used if any.
  134. *
  135. * @protected
  136. * @returns {string}
  137. */
  138. _getDescriptionKey() {
  139. return this.props.descriptionKey;
  140. }
  141. _onDismissed: () => void;
  142. /**
  143. * Callback to dismiss the notification.
  144. *
  145. * @private
  146. * @returns {void}
  147. */
  148. _onDismissed() {
  149. this.props.onDismissed(this.props.uid);
  150. }
  151. }