Extract GuideThemeSelector and use it in GuideSandboxChrome.

elastic · Dec 4, 2017 · d998f1e · d998f1e
1 parent c9a8509
commit d998f1e
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 79 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -7,26 +7,25 @@ import {
 } from 'react-router';
 
 import {
-  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiPopover,
   EuiSideNav,
   EuiSpacer,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
 export class GuidePageChrome extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       search: '',
       isSideNavOpenOnMobile: false,
-      isThemePopoverOpen: false,
     };
   }
 
@@ -53,18 +52,6 @@ export class GuidePageChrome extends Component {
     this.scrollTo($(`#${id}`).offset().top - 20);
   };
 
-  onThemeButtonClick = () => {
-    this.setState({
-      isThemePopoverOpen: !this.state.isThemePopoverOpen,
-    });
-  };
-
-  closeThemePopover = () => {
-    this.setState({
-      isThemePopoverOpen: false,
-    });
-  };
-
   renderIdentity() {
     const homeLink = (
       <Link
@@ -75,65 +62,17 @@ export class GuidePageChrome extends Component {
       </Link>
     );
 
-    const themeButton = (
-      <EuiButtonEmpty
-        size="s"
-        color="text"
-        iconType="arrowDown"
-        iconSide="right"
-        onClick={this.onThemeButtonClick}
-      >
-        Theme
-      </EuiButtonEmpty>
-    );
-
-    const themeOptions = [{
-      name: 'Light',
-      value: 'light',
-    }, {
-      name: 'Dark',
-      value: 'dark',
-    }, {
-      name: 'K6',
-      value: 'k6',
-    }, {
-      name: 'K6 dark',
-      value: 'k6_dark',
-    }].map(option => {
-      const { name, value } = option;
-
-      return (
-        <EuiContextMenuItem
-          key={value}
-          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
-          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
-        >
-          {`${name}`}
-        </EuiContextMenuItem>
-      );
-    });
-
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           {homeLink}
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiPopover
-            id="pageChromeThemePopover"
-            button={themeButton}
-            isOpen={this.state.isThemePopoverOpen}
-            closePopover={this.closeThemePopover}
-            panelPaddingSize="none"
-            withTitle
-            anchorPosition="downRight"
-          >
-            <EuiContextMenuPanel
-              style={{ width: '120px' }}
-              items={themeOptions}
-            />
-          </EuiPopover>
+          <GuideThemeSelector
+            onToggleTheme={this.props.onToggleTheme}
+            selectedTheme={this.props.selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     );

diff --git a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
@@ -5,20 +5,25 @@ import {
   Link,
 } from 'react-router';
 
-import {
-  GuideSandboxChromeToggle,
-} from './guide_sandbox_chrome_toggle';
-
 import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
+import {
+  GuideSandboxChromeToggle,
+} from './guide_sandbox_chrome_toggle';
+
 export const GuideSandboxChrome = ({
   isVisible,
   onToggleTheme,
   onToggleSandboxChrome,
+  selectedTheme,
 }) => {
   const toggle = <GuideSandboxChromeToggle onClick={onToggleSandboxChrome} />;
 
@@ -36,12 +41,10 @@ export const GuideSandboxChrome = ({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <button
-            onClick={onToggleTheme}
-            className="guideSandboxChrome__link"
-          >
-            Theme
-          </button>
+          <GuideThemeSelector
+            onToggleTheme={onToggleTheme}
+            selectedTheme={selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -54,5 +57,6 @@ GuideSandboxChrome.propTypes = {
   routes: PropTypes.array.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   onToggleSandboxChrome: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
   isVisible: PropTypes.bool,
 };
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -75,6 +75,7 @@ export class GuideSection extends Component {
           routes={Routes.getAppRoutes()}
           onToggleTheme={this.props.toggleTheme}
           onToggleSandboxChrome={this.onToggleSandboxChrome}
+          selectedTheme={this.props.theme}
           isVisible={this.state.sandbox.isChromeVisible}
         />
       );
@@ -156,4 +157,5 @@ GuideSection.propTypes = {
   children: PropTypes.any,
   isSandbox: PropTypes.bool,
   toggleTheme: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };
diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js
@@ -4,6 +4,7 @@ import { GuideSection } from './guide_section';
 
 import {
   getIsSandbox,
+  getTheme,
 } from '../../store';
 
 import {
@@ -13,6 +14,7 @@ import {
 function mapStateToProps(state) {
   return {
     isSandbox: getIsSandbox(state),
+    theme: getTheme(state),
   };
 }
 

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src/components';
+
+export class GuideThemeSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isThemePopoverOpen: false,
+    };
+  }
+
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
+  render() {
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </EuiButtonEmpty>
+    );
+
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
+
+    return (
+      <EuiPopover
+        id="pageChromeThemePopover"
+        button={themeButton}
+        isOpen={this.state.isThemePopoverOpen}
+        closePopover={this.closeThemePopover}
+        panelPaddingSize="none"
+        withTitle
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel
+          style={{ width: '120px' }}
+          items={themeOptions}
+        />
+      </EuiPopover>
+    );
+  }
+}
+
+GuideThemeSelector.propTypes = {
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+};
diff --git a/src-docs/src/components/guide_theme_selector/index.js b/src-docs/src/components/guide_theme_selector/index.js
@@ -0,0 +1 @@
+export { GuideThemeSelector } from './guide_theme_selector';