From 62c09209430e74fb0863cd998497f6ef1c475342 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Wed, 2 Mar 2016 16:10:14 -0500
Subject: Fixed max height for all modals using FilteredUserLists

---
 web/react/components/channel_invite_modal.jsx  | 28 +++++++-------------
 web/react/components/channel_members_modal.jsx | 23 +++++-----------
 web/react/components/filtered_user_list.jsx    | 12 +++++++--
 web/react/components/member_list_team.jsx      |  5 ++++
 web/react/components/more_direct_channels.jsx  | 23 +++++-----------
 web/react/components/team_members_modal.jsx    | 36 +++++---------------------
 6 files changed, 44 insertions(+), 83 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx
index f0c8a9030..6c8d51abb 100644
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -25,7 +25,9 @@ export default class ChannelInviteModal extends React.Component {
         this.createInviteButton = this.createInviteButton.bind(this);
 
         // the state gets populated when the modal is shown
-        this.state = {};
+        this.state = {
+            loading: true
+        };
     }
     shouldComponentUpdate(nextProps, nextState) {
         if (!this.props.show && !nextProps.show) {
@@ -79,20 +81,6 @@ export default class ChannelInviteModal extends React.Component {
             loading: false
         };
     }
-    onShow() {
-        // TODO ugh
-        /*if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
-        }*/
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.onShow();
-        }
-    }
     componentWillReceiveProps(nextProps) {
         if (!this.props.show && nextProps.show) {
             ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
@@ -152,8 +140,14 @@ export default class ChannelInviteModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
+            let maxHeight = 1000;
+            if (Utils.windowHeight() <= 1200) {
+                maxHeight = Utils.windowHeight() - 300;
+            }
+
             content = (
                 <FilteredUserList
+                    style={{maxHeight}}
                     users={this.state.nonmembers}
                     actions={[this.createInviteButton]}
                 />
@@ -175,9 +169,7 @@ export default class ChannelInviteModal extends React.Component {
                         <span className='name'>{this.props.channel.display_name}</span>
                     </Modal.Title>
                 </Modal.Header>
-                <Modal.Body
-                    ref='modalBody'
-                >
+                <Modal.Body>
                     {inviteError}
                     {content}
                 </Modal.Body>
diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx
index 51f36a4f2..688ab7dd2 100644
--- a/web/react/components/channel_members_modal.jsx
+++ b/web/react/components/channel_members_modal.jsx
@@ -75,17 +75,6 @@ export default class ChannelMembersModal extends React.Component {
             loading: false
         };
     }
-    onShow() {
-        // TODO ugh
-        if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.onShow();
-        }
-    }
     componentWillReceiveProps(nextProps) {
         if (!this.props.show && nextProps.show) {
             ChannelStore.addExtraInfoChangeListener(this.onChange);
@@ -148,17 +137,18 @@ export default class ChannelMembersModal extends React.Component {
         );
     }
     render() {
-        var maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         let content;
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
+            let maxHeight = 1000;
+            if (Utils.windowHeight() <= 1200) {
+                maxHeight = Utils.windowHeight() - 300;
+            }
+
             content = (
                 <FilteredUserList
+                    style={{maxHeight}}
                     users={this.state.memberList}
                     actions={[this.createRemoveMemberButton]}
                 />
@@ -197,7 +187,6 @@ export default class ChannelMembersModal extends React.Component {
                     </Modal.Header>
                     <Modal.Body
                         ref='modalBody'
-                        style={{maxHeight}}
                     >
                         {content}
                     </Modal.Body>
diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx
index 7099f99af..ffd6ebf53 100644
--- a/web/react/components/filtered_user_list.jsx
+++ b/web/react/components/filtered_user_list.jsx
@@ -27,6 +27,10 @@ class FilteredUserList extends React.Component {
         };
     }
 
+    componentDidMount() {
+        $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
+    }
+
     componentDidUpdate(prevProps, prevState) {
         if (prevState.filter !== this.state.filter) {
             $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
@@ -86,7 +90,10 @@ class FilteredUserList extends React.Component {
         }
 
         return (
-            <div>
+            <div
+                className='filtered-user-list'
+                style={this.props.style}
+            >
                 <div className='filter-row'>
                     <div className='col-sm-6'>
                         <input
@@ -122,7 +129,8 @@ FilteredUserList.defaultProps = {
 FilteredUserList.propTypes = {
     intl: intlShape.isRequired,
     users: React.PropTypes.arrayOf(React.PropTypes.object),
-    actions: React.PropTypes.arrayOf(React.PropTypes.func)
+    actions: React.PropTypes.arrayOf(React.PropTypes.func),
+    style: React.PropTypes.object
 };
 
 export default injectIntl(FilteredUserList);
diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx
index 0787bf8d8..cfd5359b7 100644
--- a/web/react/components/member_list_team.jsx
+++ b/web/react/components/member_list_team.jsx
@@ -47,9 +47,14 @@ export default class MemberListTeam extends React.Component {
     render() {
         return (
             <FilteredUserList
+                style={this.props.style}
                 users={this.state.users}
                 actions={[TeamMembersDropdown]}
             />
         );
     }
 }
+
+MemberListTeam.propTypes = {
+    style: React.PropTypes.object
+};
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index c85b5e9c5..0814ac1b3 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -48,23 +48,6 @@ export default class MoreDirectChannels extends React.Component {
         UserStore.removeChangeListener(this.handleUserChange);
     }
 
-    componentDidUpdate(prevProps) {
-        if (!prevProps.show && this.props.show) {
-            this.onShow();
-        }
-    }
-
-    onShow() {
-        // TODO ugh
-        /*if (Utils.isMobile()) {
-            $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 250);
-        } else {
-            console.log(ReactDOM.findDOMNode(this.refs.modal));
-            console.log($(ReactDOM.findDOMNode(this.refs.modal)));
-            $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 300);
-        }*/
-    }
-
     handleHide() {
         if (this.props.onModalDismissed) {
             this.props.onModalDismissed();
@@ -121,6 +104,11 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     render() {
+        let maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
         return (
             <Modal
                 dialogClassName='more-modal more-direct-channels'
@@ -137,6 +125,7 @@ export default class MoreDirectChannels extends React.Component {
                 </Modal.Header>
                 <Modal.Body>
                     <FilteredUserList
+                        style={{maxHeight}}
                         users={this.state.users}
                         actions={[this.createJoinDirectChannelButton]}
                     />
diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx
index dfd48b614..9bdb16438 100644
--- a/web/react/components/team_members_modal.jsx
+++ b/web/react/components/team_members_modal.jsx
@@ -3,43 +3,21 @@
 
 import MemberListTeam from './member_list_team.jsx';
 import TeamStore from '../stores/team_store.jsx';
+import * as Utils from '../utils/utils.jsx';
 
 import {FormattedMessage} from 'mm-intl';
 
 const Modal = ReactBootstrap.Modal;
 
 export default class TeamMembersModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.onShow = this.onShow.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.show) {
-            this.onShow();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.onShow();
-        }
-    }
-
-    onShow() {
-        // TODO ugh
-        /*if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
-        }*/
-    }
-
     render() {
         const team = TeamStore.getCurrent();
 
+        let maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
         return (
             <Modal
                 dialogClassName='more-modal'
@@ -56,7 +34,7 @@ export default class TeamMembersModal extends React.Component {
                     />
                 </Modal.Header>
                 <Modal.Body>
-                    <MemberListTeam/>
+                    <MemberListTeam style={{maxHeight}}/>
                 </Modal.Body>
                 <Modal.Footer>
                     <button
-- 
cgit v1.2.3-1-g7c22