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.

Dialog.web.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import AKButton from '@atlaskit/button';
  2. import AKButtonGroup from '@atlaskit/button-group';
  3. import ModalDialog from '@atlaskit/modal-dialog';
  4. import React from 'react';
  5. import { connect } from 'react-redux';
  6. import { translate } from '../../i18n';
  7. import AbstractDialog from './AbstractDialog';
  8. /**
  9. * Web dialog that uses atlaskit modal-dialog to display dialogs.
  10. */
  11. class Dialog extends AbstractDialog {
  12. /**
  13. * Web dialog component's property types.
  14. *
  15. * @static
  16. */
  17. static propTypes = {
  18. /**
  19. * This is the body of the dialog, the component children.
  20. */
  21. children: React.PropTypes.node,
  22. /**
  23. * Whether the dialog is modal. This means clicking on the blanket will
  24. * leave the dialog open. No cancel button.
  25. */
  26. isModal: React.PropTypes.bool,
  27. /**
  28. * Width of the dialog, can be:
  29. * - 'small' (400px), 'medium' (600px), 'large' (800px),
  30. * 'x-large' (968px)
  31. * - integer value for pixel width
  32. * - string value for percentage
  33. */
  34. width: React.PropTypes.string
  35. }
  36. /**
  37. * Implements React's {@link Component#render()}.
  38. *
  39. * @inheritdoc
  40. * @returns {ReactElement}
  41. */
  42. render() {
  43. return (
  44. <ModalDialog
  45. footer = { this._renderFooter() }
  46. header = { this._renderHeader() }
  47. isOpen = { true }
  48. onDialogDismissed = { this._onCancel }
  49. width = { this.props.width || 'medium' }>
  50. <div>
  51. <form
  52. id = 'modal-dialog-form'
  53. onSubmit = { this._onSubmit }>
  54. { this.props.children }
  55. </form>
  56. </div>
  57. </ModalDialog>);
  58. }
  59. /**
  60. * Render cancel button.
  61. *
  62. * @returns {*} The cancel button if enabled and dialog is not modal.
  63. * @private
  64. */
  65. _renderCancelButton() {
  66. if (this.props.cancelDisabled || this.props.isModal) {
  67. return null;
  68. }
  69. return (
  70. <AKButton
  71. appearance = 'subtle'
  72. id = 'modal-dialog-cancel-button'
  73. onClick = { this._onCancel }>
  74. { this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') }
  75. </AKButton>
  76. );
  77. }
  78. /**
  79. * Render component in dialog footer.
  80. *
  81. * @returns {ReactElement}
  82. * @private
  83. */
  84. _renderFooter() {
  85. return (
  86. <footer>
  87. <AKButtonGroup>
  88. { this._renderCancelButton() }
  89. { this._renderOKButton() }
  90. </AKButtonGroup>
  91. </footer>
  92. );
  93. }
  94. /**
  95. * Render component in dialog header.
  96. *
  97. * @returns {ReactElement}
  98. * @private
  99. */
  100. _renderHeader() {
  101. const { t } = this.props;
  102. return (
  103. <header>
  104. <h2>
  105. { t(this.props.titleKey) }
  106. </h2>
  107. </header>
  108. );
  109. }
  110. /**
  111. * Render ok button.
  112. *
  113. * @returns {*} The ok button if enabled.
  114. * @private
  115. */
  116. _renderOKButton() {
  117. if (this.props.submitDisabled) {
  118. return null;
  119. }
  120. return (
  121. <AKButton
  122. appearance = 'primary'
  123. form = 'modal-dialog-form'
  124. id = 'modal-dialog-ok-button'
  125. onClick = { this._onSubmit }>
  126. { this.props.t(this.props.okTitleKey || 'dialog.Ok') }
  127. </AKButton>
  128. );
  129. }
  130. /**
  131. * Dispatches action to hide the dialog.
  132. *
  133. * @returns {void}
  134. */
  135. _onCancel() {
  136. if (this.props.isModal) {
  137. return;
  138. }
  139. super._onCancel();
  140. }
  141. }
  142. export default translate(connect()(Dialog));