Expose 'isOpen' property & Make ChildButton not clickable when hided

Author: ifndefdeadmau5

docs/src/App.js

@@ -50,8 +50,8 @@ class App extends Component {
     classes: PropTypes.object.isRequired,
   }
   state = {
-    isClicked: false,
     direction: 'up',
+    isOpen: false,
   };
 
   handleChange = event => {
@@ -60,7 +60,7 @@ class App extends Component {
 
   render() {
     const { classes } = this.props;
-    const { direction } = this.state;
+    const { direction, isOpen } = this.state;
     return (
       <div className={classes.root}>
         <h2>Material Floating Button Menu Demo</h2>
@@ -83,12 +83,14 @@ class App extends Component {
           <FloatingMenu
             slideSpeed={500}
             direction={direction}
+            isOpen={isOpen}
           >
             <MainButton
               iconResting={MdAdd}
               iconActive={MdClose}
               iconColor="white"
               backgroundColor="black"
+              onClick={() => this.setState({ isOpen: !this.state.isOpen })}
               size={56}
             />
             <ChildButton

src/ChildButton.js

@@ -35,6 +35,7 @@ class ChildButton extends Component {
     iconButton: PropTypes.func.isRequired,
     direction: PropTypes.string.isRequired,
     iconColor: PropTypes.string,
+    onClick: PropTypes.func,
     isOpen: PropTypes.bool,
     size: PropTypes.number,
     margin: PropTypes.number,
@@ -45,13 +46,14 @@ class ChildButton extends Component {
     size: '40',
     margin: 0,
     isOpen: false,
+    onClick: null
   };
 
   render() {
     const { iconButton: IconButton, ...other } = this.props;
 
     return (
-      <Wrapper {...other}>
+      <Wrapper {...other} onClick={this.props.isOpen ? this.props.onClick : null}>
         <a>
           <IconButton />
         </a>

src/FloatingMenu.js

@@ -31,28 +31,18 @@ class FloatingMenu extends Component {
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
     slideSpeed: PropTypes.number,
     direction: PropTypes.string,
+    isOpen: PropTypes.bool,
   };
 
   static defaultProps = {
     className: '',
     slideSpeed: 500,
     direction: 'down',
-  };
-
-  state = {
     isOpen: false,
   };
 
-  toggleMenu = (event) => {
-    event.preventDefault();
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
-  };
-
   render() {
-    const { slideSpeed, direction, className } = this.props;
-    const { isOpen } = this.state;
+    const { slideSpeed, direction, className, isOpen } = this.props;
     const childrenWithProps = React.Children.map(this.props.children, child =>
       React.cloneElement(child, {
         isOpen,