Refactored various React components to use ES6 syntax and to match the style guide without any errors or warnings

1 files changed, 80 insertions, 0 deletions

diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
new file mode 100644
index 000000000..fb9522afb
--- /dev/null
+++ b/web/react/components/popover_list_members.jsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class PopoverListMembers extends React.Component {
+    componentDidMount() {
+        const originalLeave = $.fn.popover.Constructor.prototype.leave;
+        $.fn.popover.Constructor.prototype.leave = function onLeave(obj) {
+            let selfObj;
+            if (obj instanceof this.constructor) {
+                selfObj = obj;
+            } else {
+                selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data(`bs.${this.type}`);
+            }
+            originalLeave.call(this, obj);
+
+            if (obj.currentTarget && selfObj.$tip) {
+                selfObj.$tip.one('mouseenter', function onMouseEnter() {
+                    clearTimeout(selfObj.timeout);
+                    selfObj.$tip.one('mouseleave', function onMouseLeave() {
+                        $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj);
+                    });
+                });
+            }
+        };
+
+        $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true});
+        $('body').on('click', function onClick(e) {
+            if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) {
+                $('#member_popover').popover('hide');
+            }
+        });
+    }
+    render() {
+        let popoverHtml = '';
+        const members = this.props.members;
+        let count;
+        if (members.length > 20) {
+            count = '20+';
+        } else {
+            count = members.length || '-';
+        }
+
+        if (members) {
+            members.sort(function compareByLocal(a, b) {
+                return a.username.localeCompare(b.username);
+            });
+
+            members.forEach(function addMemberElement(m) {
+                popoverHtml += `<div class='text--nowrap'>${m.username}</div>`;
+            });
+        }
+
+        return (
+            <div
+                id='member_popover'
+                data-toggle='popover'
+                data-content={popoverHtml}
+                data-original-title='Members'
+            >
+                <div
+                    id='member_tooltip'
+                    data-placement='left'
+                    data-toggle='tooltip'
+                    title='View Channel Members'
+                >
+                    {count}
+                    <span
+                        className='glyphicon glyphicon-user'
+                        aria-hidden='true'
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+PopoverListMembers.propTypes = {
+    members: React.PropTypes.array.isRequired,
+    channelId: React.PropTypes.string.isRequired
+};