Copy generated code to clipboard

Summary: Generated code modal now has a copy to clipboard button

Reviewed By: emilsjolander

Differential Revision: D7009716

fbshipit-source-id: 7a9b083d7067aa66ffa5b9d9c23741321547c4f6

website/src/components/Playground/CodeGenerators.css

@@ -0,0 +1,20 @@
+.CodeGeneratorsTitle {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+.CodeGeneratorsTitle a {
+  font-size: 13px;
+  font-weight: normal;
+  margin-right: 20px;
+}
+
+.CodeGeneratorsCopyText {
+  position: absolute;
+  top: -9999em;
+  left: -9999em;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}

website/src/components/Playground/CodeGenerators.js

@@ -11,7 +11,7 @@
  */
 
 import React, {Component} from 'react';
-import {Menu, Button, Row, Col, Dropdown, Icon, Modal} from 'antd';
+import {Menu, Button, Row, Col, Dropdown, Icon, Modal, Tooltip} from 'antd';
 import SyntaxHighlighter, {
   registerLanguage,
 } from 'react-syntax-highlighter/prism-light';
@@ -29,6 +29,8 @@ registerLanguage('jsx', jsx);
 registerLanguage('java', java);
 registerLanguage('objectivec', objectivec);
 
+import './CodeGenerators.css';
+
 import type {LayoutRecordT} from './LayoutRecord';
 import type {Yoga$Direction} from 'yoga-layout';
 
@@ -38,6 +40,7 @@ type Props = {
 };
 type State = {
   showModal: ?string,
+  copied: boolean,
 };
 
 const LANGUAGES = {
@@ -62,10 +65,19 @@ const LANGUAGES = {
 export default class CodeGenerators extends Component<Props, State> {
   state = {
     showModal: null,
+    copied: false,
   };
 
   onClick = ({key}: {key: string}) => this.setState({showModal: key});
 
+  onCopy = () => {
+    if (this._ref) {
+      this._ref.select();
+      document.execCommand('Copy');
+      this.setState({copied: true});
+    }
+  };
+
   render() {
     const {showModal} = this.state;
 
@@ -77,27 +89,53 @@ export default class CodeGenerators extends Component<Props, State> {
       </Menu>
     );
 
+    const code = showModal
+      ? LANGUAGES[showModal].generator(
+          this.props.layoutDefinition,
+          this.props.direction,
+        )
+      : '';
+
     return [
       <Modal
         key="modal"
-        title={showModal ? LANGUAGES[showModal].title : ''}
+        title={
+          showModal ? (
+            <div className="CodeGeneratorsTitle">
+              {LANGUAGES[showModal].title}
+              <Tooltip
+                title={this.state.copied ? 'Copied!' : 'Click to copy'}
+                onVisibleChange={() => this.setState({copied: false})}>
+                <a onClick={this.onCopy}>copy to clipboard</a>
+              </Tooltip>
+            </div>
+          ) : (
+            ''
+          )
+        }
         visible={Boolean(showModal)}
         footer={null}
         bodyStyle={{padding: 0}}
         onCancel={() => this.setState({showModal: null})}>
         {showModal && (
-          <SyntaxHighlighter
+          <div>
-            language={LANGUAGES[showModal].syntax}
+            <textarea
-            style={styles}
+              className="CodeGeneratorsCopyText"
-            customStyle={{fontSize: '13px', backgroundColor: 'white'}}
+              value={code}
-            lineNumberStyle={{userSelect: 'none', opacity: 0.5}}
+              ref={ref => {
-            codeTagProps={{style: {tabSize: 4}}}
+                this._ref = ref;
-            showLineNumbers>
+              }}
-            {LANGUAGES[showModal].generator(
+            />
-              this.props.layoutDefinition,
+            <SyntaxHighlighter
-              this.props.direction,
+              language={LANGUAGES[showModal].syntax}
-            )}
+              style={styles}
-          </SyntaxHighlighter>
+              customStyle={{fontSize: '13px', backgroundColor: 'white'}}
+              lineNumberStyle={{userSelect: 'none', opacity: 0.5}}
+              codeTagProps={{style: {tabSize: 4}}}
+              showLineNumbers>
+              {code}
+            </SyntaxHighlighter>
+          </div>
         )}
       </Modal>,
       <Dropdown overlay={menu} key="dropdown">