Merge pull request #1888 from matrix-org/luke/instant-sticker-picker

Instant Sticker Picker

Author: lukebarnard1

res/css/views/rooms/_MessageComposer.scss

@@ -34,7 +34,7 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_MessageComposer_row div:last-child{
+.mx_MessageComposer_row > div:last-child{
     padding-right: 0;
 }
 

src/WidgetMessaging.js

@@ -94,6 +94,16 @@ export default class WidgetMessaging {
             });
     }
 
+    sendVisibility(visible) {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: "visibility",
+            visible,
+        })
+        .catch((error) => {
+            console.error("Failed to send visibility: ", error);
+        });
+    }
 
     start() {
         this.fromWidget.addEndpoint(this.widgetId, this.widgetUrl);

src/components/structures/ContextualMenu.js

@@ -26,9 +26,21 @@ import PropTypes from 'prop-types';
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
-module.exports = {
-    ContextualMenuContainerId: "mx_ContextualMenu_Container",
+const ContextualMenuContainerId = "mx_ContextualMenu_Container";
 
+function getOrCreateContainer() {
+    let container = document.getElementById(ContextualMenuContainerId);
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = ContextualMenuContainerId;
+        document.body.appendChild(container);
+    }
+
+    return container;
+}
+
+export default class ContextualMenu extends React.Component {
     propTypes: {
         top: PropTypes.number,
         bottom: PropTypes.number,
@@ -45,39 +57,18 @@ module.exports = {
         menuPaddingRight: PropTypes.number,
         menuPaddingBottom: PropTypes.number,
         menuPaddingLeft: PropTypes.number,
-    },
-
-    getOrCreateContainer: function() {
-        let container = document.getElementById(this.ContextualMenuContainerId);
-
-        if (!container) {
-            container = document.createElement("div");
-            container.id = this.ContextualMenuContainerId;
-            document.body.appendChild(container);
-        }
-
-        return container;
-    },
 
-    createMenu: function(Element, props) {
-        const self = this;
-
-        const closeMenu = function(...args) {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
-            if (props && props.onFinished) {
-                props.onFinished.apply(null, args);
-            }
-        };
-
-        // Close the menu on window resize
-        const windowResize = function() {
-            closeMenu();
-        };
+        // If true, insert an invisible screen-sized element behind the
+        // menu that when clicked will close it.
+        hasBackground: PropTypes.bool,
+    }
 
+    render() {
         const position = {};
         let chevronFace = null;
 
+        const props = this.props;
+
         if (props.top) {
             position.top = props.top;
         } else {
@@ -158,21 +149,40 @@ module.exports = {
             menuStyle["paddingRight"] = props.menuPaddingRight;
         }
 
+        const ElementClass = props.elementClass;
+
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
-        const menu = (
-            <div className={className} style={position}>
-                <div className={menuClasses} style={menuStyle}>
-                    { chevron }
-                    <Element {...props} onFinished={closeMenu} onResize={windowResize} />
-                </div>
-                <div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
-                <style>{ chevronCSS }</style>
+        return <div className={className} style={position}>
+            <div className={menuClasses} style={menuStyle}>
+                { chevron }
+                <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>
-        );
+            { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div> }
+            <style>{ chevronCSS }</style>
+        </div>;
+    }
+}
+
+export function createMenu(ElementClass, props) {
+    const closeMenu = function(...args) {
+        ReactDOM.unmountComponentAtNode(getOrCreateContainer());
+
+        if (props && props.onFinished) {
+            props.onFinished.apply(null, args);
+        }
+    };
+
+    // We only reference closeMenu once per call to createMenu
+    const menu = <ContextualMenu
+        {...props}
+        hasBackground={true}
+        elementClass={ElementClass}
+        closeMenu={closeMenu} // eslint-disable-line react/jsx-no-bind
+        windowResize={closeMenu} // eslint-disable-line react/jsx-no-bind
+    />;
 
-        ReactDOM.render(menu, this.getOrCreateContainer());
+    ReactDOM.render(menu, getOrCreateContainer());
 
-        return {close: closeMenu};
-    },
-};
+    return {close: closeMenu};
+}

src/components/views/elements/AppTile.js

@@ -169,6 +169,13 @@ export default class AppTile extends React.Component {
         this.dispatcherRef = dis.register(this._onWidgetAction);
     }
 
+    componentDidUpdate() {
+        // Allow parents to access widget messaging
+        if (this.props.collectWidgetMessaging) {
+            this.props.collectWidgetMessaging(this.widgetMessaging);
+        }
+    }
+
     componentWillUnmount() {
         // Widget action listeners
         dis.unregister(this.dispatcherRef);
@@ -357,6 +364,9 @@ export default class AppTile extends React.Component {
         if (!this.widgetMessaging) {
             this._onInitialLoad();
         }
+        if (this._exposeWidgetMessaging) {
+            this._exposeWidgetMessaging(this.widgetMessaging);
+        }
     }
 
     /**
@@ -394,6 +404,7 @@ export default class AppTile extends React.Component {
         }).catch((err) => {
             console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
         });
+
         this.setState({loading: false});
     }
 

src/components/views/elements/PersistedElement.js

@@ -0,0 +1,114 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+
+// Shamelessly ripped off Modal.js.  There's probably a better way
+// of doing reusable widgets like dialog boxes & menus where we go and
+// pass in a custom control as the actual body.
+
+const ContainerId = "mx_PersistedElement";
+
+function getOrCreateContainer() {
+    let container = document.getElementById(ContainerId);
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = ContainerId;
+        document.body.appendChild(container);
+    }
+
+    return container;
+}
+
+// Greater than that of the ContextualMenu
+const PE_Z_INDEX = 3000;
+
+/*
+ * Class of component that renders its children in a separate ReactDOM virtual tree
+ * in a container element appended to document.body.
+ *
+ * This prevents the children from being unmounted when the parent of PersistedElement
+ * unmounts, allowing them to persist.
+ *
+ * When PE is unmounted, it hides the children using CSS. When mounted or updated, the
+ * children are made visible and are positioned into a div that is given the same
+ * bounding rect as the parent of PE.
+ */
+export default class PersistedElement extends React.Component {
+    constructor() {
+        super();
+        this.collectChildContainer = this.collectChildContainer.bind(this);
+        this.collectChild = this.collectChild.bind(this);
+    }
+
+    collectChildContainer(ref) {
+        this.childContainer = ref;
+    }
+
+    collectChild(ref) {
+        this.child = ref;
+        this.updateChild();
+    }
+
+    componentDidMount() {
+        this.updateChild();
+    }
+
+    componentDidUpdate() {
+        this.updateChild();
+    }
+
+    componentWillUnmount() {
+        this.updateChildVisibility(this.child, false);
+    }
+
+    updateChild() {
+        this.updateChildPosition(this.child, this.childContainer);
+        this.updateChildVisibility(this.child, true);
+    }
+
+    updateChildVisibility(child, visible) {
+        if (!child) return;
+        child.style.display = visible ? 'block' : 'none';
+    }
+
+    updateChildPosition(child, parent) {
+        if (!child || !parent) return;
+
+        const parentRect = parent.getBoundingClientRect();
+        Object.assign(child.style, {
+            position: 'absolute',
+            top: parentRect.top + 'px',
+            left: parentRect.left + 'px',
+            width: parentRect.width + 'px',
+            height: parentRect.height + 'px',
+            zIndex: PE_Z_INDEX,
+        });
+    }
+
+    render() {
+        const content = <div ref={this.collectChild}>
+            {this.props.children}
+        </div>;
+
+        ReactDOM.render(content, getOrCreateContainer());
+
+        return <div ref={this.collectChildContainer}></div>;
+    }
+}
+