Add live tab -> implement renderLive() -> render renderLive()

elastic · Mar 14, 2020 · 56313ca · 56313ca
1 parent cc9082e
commit 56313ca
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live';
 
 import {
   EuiCode,
@@ -18,6 +19,8 @@ import {
   EuiTextColor,
   EuiTitle,
   EuiLink,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components';
 
 function markup(text) {
@@ -99,6 +102,13 @@ export class GuideSection extends Component {
 
     this.tabs = [];
 
+    if (props.live) {
+      this.tabs.push({
+        name: 'live',
+        displayName: 'Live',
+      });
+    }
+
     if (props.demo) {
       this.tabs.push({
         name: 'demo',
@@ -408,6 +418,50 @@ export class GuideSection extends Component {
     );
   }
 
+  renderLive() {
+    let code = '<p>No code defined</p>';
+    const dependency = this.props.live.dependency;
+
+    if (this.props.live.snippet) {
+      code = '<>\n';
+      const snippet = this.props.live.snippet;
+      if (typeof snippet === 'object') {
+        code += snippet.join('\n');
+        code += '\n</>';
+      } else if (typeof snippet === 'string') code = snippet;
+      else code = '<p> Snippet not defined. </p>';
+    }
+
+    if (this.props.live.code) {
+      code = this.props.live.code;
+    }
+
+    const scope = dependency;
+
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          style={{ marginTop: '10px' }}
+          direction={this.props.live.snippet ? 'row' : 'column'}>
+          <LiveProvider code={code} scope={scope}>
+            <EuiFlexItem>
+              <LiveEditor
+                style={{
+                  border: '1px solid rgba(0, 0, 0, 0.2)',
+                  fontSize: '14px',
+                }}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <LivePreview />
+              <LiveError />
+            </EuiFlexItem>
+          </LiveProvider>
+        </EuiFlexGroup>
+      </Fragment>
+    );
+  }
+
   renderContent() {
     if (typeof this.state.selectedTab === 'undefined') {
       return;
@@ -429,6 +483,10 @@ export class GuideSection extends Component {
       return <EuiErrorBoundary>{this.renderProps()}</EuiErrorBoundary>;
     }
 
+    if (this.state.selectedTab.name === 'live') {
+      return <EuiErrorBoundary> {this.renderLive()} </EuiErrorBoundary>;
+    }
+
     return (
       <EuiErrorBoundary>
         <div>