Merge pull request #256 from plotly/button-in-menu

Button in menu

Author: VeraZab

README.md

@@ -137,6 +137,7 @@ The [custom editor example](https://github.com/plotly/react-plotly.js-editor/tre
 * `<Fold />`: collapsable container within a `<Panel />`
 * `<Section />`: uncollapsable container within a `<Panel />` or `<Fold />`
 * `<MenuPanel />`: container child of `<Section />` that appears when a cog icon in the section title is clicked on
+* `<SingleSidebarItem/>`: wraps any item you would like to see appear in the sidebar menu.
 
 ### General-purpose Fields
 
@@ -154,6 +155,12 @@ All Fields except `<Info />` accept an `attr` property to bind them to a key in
   <img src="examples/components.png" alt="Components" width="432" height="692" border="1">
 </p>
 
+### Widgets
+
+Simple component that takes in props and renders.
+
+* `<Button/>`: simple button component, useful when combined with `<SingleSidebarItem/>` to add as menu item
+
 ### Special-Purpose Containers
 
 * `<TraceAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to traces via `connectTraceToPlot()`.

examples/custom/src/CustomEditor.js

@@ -12,6 +12,8 @@ import {
   Numeric,
   LayoutPanel,
   MenuPanel,
+  Button,
+  SingleSidebarItem,
 } from 'react-plotly.js-editor';
 
 export default class CustomEditor extends Component {
@@ -69,6 +71,20 @@ export default class CustomEditor extends Component {
             </Section>
           </Fold>
         </LayoutPanel>
+        <SingleSidebarItem>
+          <Button
+            variant="primary"
+            label="save"
+            onClick={() => alert('save button clicked!')}
+          />
+        </SingleSidebarItem>
+        <SingleSidebarItem>
+          <Button
+            variant="secondary"
+            label="clear"
+            onClick={() => alert('clear button clicked!')}
+          />
+        </SingleSidebarItem>
       </PanelMenuWrapper>
     );
   }

src/components/PanelMenuWrapper.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {cloneElement, Component} from 'react';
 import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from 'lib';
+import SingleSidebarItem from './containers/SingleSidebarItem';
 
 class PanelsWithSidebar extends Component {
   constructor(props) {
@@ -15,57 +16,59 @@ class PanelsWithSidebar extends Component {
     };
 
     this.setPanel = this.setPanel.bind(this);
-    this.renderGroup = this.renderGroup.bind(this);
+    this.renderSection = this.renderSection.bind(this);
   }
 
   setPanel(group, panel) {
     this.setState({group, panel});
   }
 
-  renderGroup(group, i) {
+  renderSection(section, i) {
+    if (section.type && section.type === SingleSidebarItem) {
+      const sectionWithKey = cloneElement(section, {key: i});
+      return <div>{sectionWithKey}</div>;
+    }
     return (
       <SidebarGroup
         key={i}
         selectedGroup={this.state.group}
         selectedPanel={this.state.panel}
-        group={group.name}
-        panels={group.panels}
+        group={section.name}
+        panels={section.panels}
         onChangeGroup={this.setPanel}
       />
     );
   }
 
   computeMenuOptions(props) {
-    let obj, child, group, name;
-
-    let {children} = props;
-
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
-
+    const {children} = props;
+    const sections = [];
     const groupLookup = {};
     let groupIndex;
-    const groups = [];
-
-    for (let i = 0; i < children.length; i++) {
-      child = children[i];
-      group = child.props.group;
-      name = child.props.name;
-
-      if (groupLookup.hasOwnProperty(group)) {
-        groupIndex = groupLookup[group];
-        obj = groups[groupIndex];
-      } else {
-        groupLookup[group] = groups.length;
-        obj = {name: group, panels: []};
-        groups.push(obj);
+
+    React.Children.forEach(children, child => {
+      const group = child.props.group;
+      const name = child.props.name;
+
+      if (group && name) {
+        let obj;
+        if (groupLookup.hasOwnProperty(group)) {
+          groupIndex = groupLookup[group];
+          obj = sections[groupIndex];
+        } else {
+          groupLookup[group] = sections.length;
+          obj = {name: group, panels: []};
+          sections.push(obj);
+        }
+        obj.panels.push(name);
       }
 
-      obj.panels.push(name);
-    }
+      if (child.type === SingleSidebarItem) {
+        sections.push(child);
+      }
+    });
 
-    return groups;
+    return sections;
   }
 
   render() {
@@ -77,7 +80,7 @@ class PanelsWithSidebar extends Component {
 
     return (
       <div className={bem('plotly-editor', 'wrapper')}>
-        <div className={bem('sidebar')}>{menuOpts.map(this.renderGroup)}</div>
+        <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
         {children.map((child, i) =>
           cloneElement(child, {
             key: i,

src/components/containers/SingleSidebarItem.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React, {cloneElement, Component} from 'react';
+import Button from '../widgets/Button';
+
+export default class SingleSidebarItem extends Component {
+  render() {
+    let {children} = this.props;
+    children = React.Children.map(children, child => {
+      if (child.type === Button) {
+        return cloneElement(child, {className: 'button--menu'});
+      }
+      return child;
+    });
+    return children ? (
+      <div className="sidebar__item--single">{children}</div>
+    ) : null;
+  }
+}
+
+SingleSidebarItem.propTypes = {
+  children: PropTypes.any,
+};

src/components/containers/index.js

@@ -7,6 +7,7 @@ import TraceAccordion from './TraceAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
 import {LayoutPanel, AxesFold} from './derived';
 import TraceRequiredPanel from './TraceRequiredPanel';
+import SingleSidebarItem from './SingleSidebarItem';
 
 export {
   AnnotationAccordion,
@@ -19,4 +20,5 @@ export {
   TraceRequiredPanel,
   LayoutPanel,
   AxesFold,
+  SingleSidebarItem,
 };

src/components/index.js

@@ -24,17 +24,20 @@ import {
 
 import {
   AnnotationAccordion,
+  AxesFold,
   Fold,
+  LayoutPanel,
   MenuPanel,
   Panel,
   Section,
   TraceAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
-  LayoutPanel,
-  AxesFold,
+  SingleSidebarItem,
 } from './containers';
 
+import {Button} from './widgets';
+
 import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
@@ -70,4 +73,6 @@ export {
   TraceSelector,
   LayoutPanel,
   AxesFold,
+  Button,
+  SingleSidebarItem,
 };

src/components/widgets/Button.js

@@ -8,7 +8,7 @@ class Button extends Component {
   }
 
   render() {
-    const {variant, className, icon, label, children, ...rest} = this.props;
+    const {children, className, icon, label, variant, ...rest} = this.props;
 
     let classes = `button`;
 
@@ -18,7 +18,9 @@ class Button extends Component {
       classes += ` button--default`;
     }
 
-    classes += ` ${className}`;
+    if (className) {
+      classes += ` ${className}`;
+    }
 
     const Icon = icon ? (
       <div className={bem('button', 'icon')}>{icon}</div>
@@ -36,11 +38,11 @@ class Button extends Component {
 }
 
 Button.propTypes = {
-  variant: PropTypes.string,
-  label: PropTypes.any,
-  className: PropTypes.any,
   children: PropTypes.node,
+  className: PropTypes.any,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  label: PropTypes.any,
+  variant: PropTypes.string,
 };
 
 export default Button;

src/components/widgets/index.js

@@ -0,0 +1,2 @@
+import Button from './Button';
+export {Button};

src/index.js

@@ -46,6 +46,8 @@ import {
   TraceSelector,
   LayoutPanel,
   AxesFold,
+  Button,
+  SingleSidebarItem,
 } from './components';
 
 export {
@@ -92,6 +94,8 @@ export {
   walkObject,
   LayoutPanel,
   AxesFold,
+  Button,
+  SingleSidebarItem,
 };
 
 export default PlotlyEditor;

src/styles/components/sidebar/_main.scss

@@ -109,6 +109,11 @@
     border-bottom: var(--border-light);
     position: relative;
     overflow: hidden;
+
+    &--single {
+      margin-top: 15px;
+    }
+
     &::before {
       content: '';
       position: absolute;