Merge pull request #1971 from espressolocator/ui-bootstrap-modal

ui-bootstrap: Add a separate Modal component and refactor ModalTrigger to use it.

packages/vulcan-ui-bootstrap/lib/components/ui/Modal.jsx

@@ -0,0 +1,36 @@
+import { registerComponent } from 'meteor/vulcan:lib';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'react-bootstrap/lib/Modal'
+
+const BootstrapModal = ({ children, size, show, onHide, title, showCloseButton, footerContent, ...rest }) => {
+
+  const header = title ? <Modal.Header closeButton={showCloseButton}><Modal.Title>{title}</Modal.Title></Modal.Header> : showCloseButton ? <Modal.Header closeButton={showCloseButton}></Modal.Header> : null;
+  const footer = footerContent ? <Modal.Footer>{footerContent}</Modal.Footer> : null;
+  return (
+    <Modal bsSize={size} show={show} onHide={onHide} {...rest}>
+      {header}
+      <Modal.Body>
+        {children}
+      </Modal.Body>
+      {footer}
+    </Modal>
+  );
+};
+
+BootstrapModal.propTypes = {
+  size: PropTypes.string,
+  show: PropTypes.bool,
+  showCloseButton: PropTypes.bool,
+  onHide: PropTypes.func,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+}
+
+BootstrapModal.defaultProps = {
+  size: 'large',
+  show: false,
+  showCloseButton: true,
+}
+
+registerComponent('Modal', BootstrapModal);

packages/vulcan-ui-bootstrap/lib/components/ui/ModalTrigger.jsx

@@ -1,7 +1,6 @@
-import { registerComponent } from 'meteor/vulcan:lib';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/lib/Modal'
 
 class ModalTrigger extends PureComponent {
 
@@ -22,14 +21,6 @@ class ModalTrigger extends PureComponent {
     this.setState({modalIsOpen: false});
   }
 
-  renderHeader() {
-    return (
-      <Modal.Header closeButton>
-        <Modal.Title>{this.props.title}</Modal.Title>
-      </Modal.Header>
-    )
-  }
-
   render() {
 
     let triggerComponent = this.props.trigger || this.props.component;
@@ -39,20 +30,18 @@ class ModalTrigger extends PureComponent {
     return (
       <div className="modal-trigger">
         {triggerComponent}
-        <Modal
+        <Components.Modal
+          size={this.props.size}
           className={this.props.className}
-          bsSize={this.props.size}
           show={this.state.modalIsOpen}
           onHide={this.closeModal}
           dialogClassName={this.props.dialogClassName}
+          title={this.props.title}
         >
-          {this.props.title ? this.renderHeader() : null}
-          <Modal.Body>
-            {childrenComponent}
-          </Modal.Body>
-        </Modal>
+          {childrenComponent}
+        </Components.Modal>
       </div>
-    )
+    );
   }
 }
 
@@ -65,10 +54,6 @@ ModalTrigger.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 }
 
-ModalTrigger.defaultProps = {
-  size: 'large'
-}
-
 registerComponent('ModalTrigger', ModalTrigger);
 
 export default ModalTrigger;

packages/vulcan-ui-bootstrap/lib/components/ui/TooltipTrigger.jsx

@@ -9,7 +9,7 @@ import { registerComponent } from 'meteor/vulcan:core';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 
-const TooltipTrigger = ({ children, trigger, placement = 'top', rest }) => {
+const TooltipTrigger = ({ children, trigger, placement = 'top', ...rest }) => {
   const tooltip = <Tooltip id="tooltip">{children}</Tooltip>;
 
   return (

packages/vulcan-ui-bootstrap/lib/modules/components.js

@@ -14,6 +14,7 @@ import '../components/forms/FormControl.jsx'; // note: only used by old accounts
 
 import '../components/ui/Button.jsx';
 import '../components/ui/Alert.jsx';
+import '../components/ui/Modal.jsx';
 import '../components/ui/ModalTrigger.jsx';
 import '../components/ui/TooltipTrigger.jsx';
 import '../components/ui/Dropdown.jsx';