Fix feedback

Author: Ives van Hoorne

src/app/pages/Sandbox/Editor/Content/Header/FeedbackView.js

@@ -53,15 +53,14 @@ type Props = {
 export default class FeedbackView extends React.PureComponent {
   props: Props;
   state = {
-    open: false,
     message: '',
   };
 
   handleChange = e => this.setState({ message: e.target.value });
 
-  handleSend = () => {
+  handleSend = toggle => () => {
     if (this.state.message !== '') {
-      this.toggle();
+      toggle();
       this.props.sendMessage(this.state.message);
       this.setState({ message: '' });
     }
@@ -77,16 +76,18 @@ export default class FeedbackView extends React.PureComponent {
             Icon: FeedbackIcon,
           }}
         >
-          <MessageView>
-            <h3>Send feedback</h3>
-            <textarea
-              rows="5"
-              value={this.state.message}
-              placeholder="Ideas? Feedback? Thoughts? We'd love to hear them all!"
-              onChange={this.handleChange}
-            />
-            <Button onClick={this.handleSend}>Send</Button>
-          </MessageView>
+          {toggle => (
+            <MessageView>
+              <h3>Send feedback</h3>
+              <textarea
+                rows="5"
+                value={this.state.message}
+                placeholder="Ideas? Feedback? Thoughts? We'd love to hear them all!"
+                onChange={this.handleChange}
+              />
+              <Button onClick={this.handleSend(toggle)}>Send</Button>
+            </MessageView>
+          )}
         </HoverMenu>
       </Container>
     );

src/app/pages/Sandbox/Editor/Content/Header/HoverMenu.js

@@ -50,8 +50,10 @@ export default class HoverMenu extends React.PureComponent {
   }
 
   toggle = e => {
-    e.stopPropagation();
-    e.preventDefault();
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     this.setState({ open: !this.state.open });
   };
 
@@ -62,7 +64,7 @@ export default class HoverMenu extends React.PureComponent {
       <span>
         <HeaderComponent {...headerProps} onClick={this.toggle} />
         <div ref={this.setOnclickListener}>
-          {open && children}
+          {open && children(this.toggle)}
         </div>
       </span>
     );

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -182,58 +182,60 @@ export default class ShareView extends React.PureComponent {
             Icon: ShareIcon,
           }}
         >
-          <ShareOptions>
-            <h3>Share options</h3>
-            <Divider>
-              <Column>
-                <div>
-                  <h4>Default view</h4>
-                  <div
-                    style={{
-                      position: 'relative',
-                      height: '2rem',
-                      width: '200px',
-                      marginLeft: '-10px',
-                    }}
-                  >
-                    <ModeIcons
-                      showEditor={showEditor}
-                      showPreview={showPreview}
-                      setEditorView={this.setEditorView}
-                      setPreviewView={this.setPreviewView}
-                      setMixedView={this.setMixedView}
+          {() => (
+            <ShareOptions>
+              <h3>Share options</h3>
+              <Divider>
+                <Column>
+                  <div>
+                    <h4>Default view</h4>
+                    <div
+                      style={{
+                        position: 'relative',
+                        height: '2rem',
+                        width: '200px',
+                        marginLeft: '-10px',
+                      }}
+                    >
+                      <ModeIcons
+                        showEditor={showEditor}
+                        showPreview={showPreview}
+                        setEditorView={this.setEditorView}
+                        setPreviewView={this.setPreviewView}
+                        setMixedView={this.setMixedView}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h4>Default module</h4>
+
+                    <Files
+                      modules={sandbox.modules}
+                      directories={sandbox.directories}
+                      directoryId={null}
+                      currentModule={defaultModule}
+                      setCurrentModule={this.setDefaultModule}
                     />
                   </div>
-                </div>
-                <div>
-                  <h4>Default module</h4>
-
-                  <Files
-                    modules={sandbox.modules}
-                    directories={sandbox.directories}
-                    directoryId={null}
-                    currentModule={defaultModule}
-                    setCurrentModule={this.setDefaultModule}
-                  />
-                </div>
-              </Column>
-              <Column>
-                <Inputs>
-                  <LinkName>Editor url</LinkName>
-                  <input onFocus={this.select} value={this.getEditorUrl()} />
-                  <LinkName>Fullscreen url</LinkName>
-                  <input onFocus={this.select} value={this.getEmbedUrl()} />
-                  {/*<LinkName>Embed url (Medium/Embedly)</LinkName>
+                </Column>
+                <Column>
+                  <Inputs>
+                    <LinkName>Editor url</LinkName>
+                    <input onFocus={this.select} value={this.getEditorUrl()} />
+                    <LinkName>Fullscreen url</LinkName>
+                    <input onFocus={this.select} value={this.getEmbedUrl()} />
+                    {/*<LinkName>Embed url (Medium/Embedly)</LinkName>
                   <input onFocus={this.select} value={this.getEmbedUrl()} />*/}
-                  <LinkName>iframe</LinkName>
-                  <textarea
-                    onFocus={this.select}
-                    value={this.getIframeScript()}
-                  />
-                </Inputs>
-              </Column>
-            </Divider>
-          </ShareOptions>
+                    <LinkName>iframe</LinkName>
+                    <textarea
+                      onFocus={this.select}
+                      value={this.getIframeScript()}
+                    />
+                  </Inputs>
+                </Column>
+              </Divider>
+            </ShareOptions>
+          )}
         </HoverMenu>
       </Container>
     );