From 9cdf820f7b154b312d5022fec20754141b0d8476 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Tue, 10 Nov 2015 10:27:10 -0500
Subject: Added ToggleModalButton component

---
 web/react/components/toggle_modal_button.jsx | 62 ++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 web/react/components/toggle_modal_button.jsx

(limited to 'web/react/components/toggle_modal_button.jsx')

diff --git a/web/react/components/toggle_modal_button.jsx b/web/react/components/toggle_modal_button.jsx
new file mode 100644
index 000000000..86ee439a5
--- /dev/null
+++ b/web/react/components/toggle_modal_button.jsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class ModalToggleButton extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+
+        this.state = {
+            show: false
+        };
+    }
+
+    show() {
+        this.setState({show: true});
+    }
+
+    hide() {
+        this.setState({show: false});
+    }
+
+    render() {
+        const {children, dialogType, dialogProps, ...props} = this.props;
+
+        // this assumes that all modals will have a show property and an onModalDismissed event
+        const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
+            show: this.state.show,
+            onModalDismissed: () => {
+                this.hide();
+
+                if (dialogProps.onModalDismissed) {
+                    dialogProps.onModalDismissed();
+                }
+            }
+        }));
+
+        return (
+            <div style={{display: 'inline'}}>
+                <a
+                    {...props}
+                    href='#'
+                    onClick={this.show}
+                >
+                    {children}
+                </a>
+                {dialog}
+            </div>
+        );
+    }
+}
+
+ModalToggleButton.propTypes = {
+    children: React.PropTypes.node.isRequired,
+    dialogType: React.PropTypes.func.isRequired,
+    dialogProps: React.PropTypes.object
+};
+
+ModalToggleButton.defaultProps = {
+    dialogProps: {}
+};
-- 
cgit v1.2.3-1-g7c22


From 590e7f903f3b911566465b2fb51ff68c273ded96 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Tue, 10 Nov 2015 11:54:43 -0500
Subject: Renamed onModalDismissed to onHide to keep it consistent with
 React-Bootstrap

---
 web/react/components/toggle_modal_button.jsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'web/react/components/toggle_modal_button.jsx')

diff --git a/web/react/components/toggle_modal_button.jsx b/web/react/components/toggle_modal_button.jsx
index 86ee439a5..51c8d1f20 100644
--- a/web/react/components/toggle_modal_button.jsx
+++ b/web/react/components/toggle_modal_button.jsx
@@ -24,29 +24,29 @@ export default class ModalToggleButton extends React.Component {
     render() {
         const {children, dialogType, dialogProps, ...props} = this.props;
 
-        // this assumes that all modals will have a show property and an onModalDismissed event
+        // this assumes that all modals will have a show property and an onHide event
         const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
             show: this.state.show,
-            onModalDismissed: () => {
+            onHide: () => {
                 this.hide();
 
-                if (dialogProps.onModalDismissed) {
-                    dialogProps.onModalDismissed();
+                if (dialogProps.onHide) {
+                    dialogProps.onHide();
                 }
             }
         }));
 
+        // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap
+        // renders modals at the top level of the DOM instead of where you specify in the virtual DOM
         return (
-            <div style={{display: 'inline'}}>
-                <a
-                    {...props}
-                    href='#'
-                    onClick={this.show}
-                >
-                    {children}
-                </a>
+            <a
+                {...props}
+                href='#'
+                onClick={this.show}
+            >
+                {children}
                 {dialog}
-            </div>
+            </a>
         );
     }
 }
-- 
cgit v1.2.3-1-g7c22