v2.0.0 is out with many features

Author: ifndefdeadmau5

.babelrc

@@ -4,7 +4,4 @@
     "stage-0",
     "react"
   ],
-  "plugins": [
-    "react-hot-loader/babel"
-  ]
 }

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-floating-button-menu-docs",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "docs",
   "main": "src/index.js",
   "scripts": {
@@ -27,17 +27,17 @@
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^2.28.0",
     "webpack": "2.4.1",
+    "react-hot-loader": "next",
     "webpack-dev-server": "2.4.3"
   },
   "dependencies": {
     "@material-ui/core": "^1.5.1",
+    "@material-ui/icons": "^3.0.1",
     "jss": "^9.8.2",
     "jss-preset-default": "^4.5.0",
     "prop-types": "^15.5.8",
     "react": "^16.4.0",
     "react-dom": "^16.3.0",
-    "react-hot-loader": "next",
-    "react-icons": "^2.2.3",
     "react-jss": "^8.4.0",
     "styled-components": "1.4.5",
     "yargs": "^8.0.1"

docs/src/App.js

@@ -1,20 +1,13 @@
-/* eslint-disable */
 import React, { Component } from 'react';
-import styled from 'styled-components';
-import MdAdd from 'react-icons/lib/md/add';
-import MdClose from 'react-icons/lib/md/close';
-import {
-  FloatingMenu,
-  MainButton,
-  ChildButton,
-} from 'react-floating-button-menu';
+import MdAdd from '@material-ui/icons/add';
+import MdClose from '@material-ui/icons/clear';
+import MdFavorite from '@material-ui/icons/favorite';
+import { FloatingMenu, MainButton, ChildButton } from 'react-floating-button-menu';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Input from '@material-ui/core/Input';
 import Paper from '@material-ui/core/Paper';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 
@@ -48,13 +41,13 @@ const styles = theme => ({
 class App extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-  }
+  };
   state = {
     direction: 'up',
     isOpen: false,
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({ direction: event.target.value });
   };
 
@@ -65,7 +58,7 @@ class App extends Component {
       <div className={classes.root}>
         <h2>Material Floating Button Menu Demo</h2>
         <FormControl className={classes.formControl}>
-          <InputLabel htmlFor="age-simple">Age</InputLabel>
+          <InputLabel>Direction</InputLabel>
           <Select
             value={this.state.direction}
             onChange={this.handleChange}
@@ -80,35 +73,29 @@ class App extends Component {
           </Select>
         </FormControl>
         <Paper className={classes.paper} elevation={4}>
-          <FloatingMenu
-            slideSpeed={500}
-            direction={direction}
-            isOpen={isOpen}
-          >
+          <FloatingMenu slideSpeed={500} direction={direction} isOpen={isOpen} spacing={8}>
             <MainButton
-              iconResting={MdAdd}
-              iconActive={MdClose}
-              iconColor="white"
+              iconResting={<MdAdd style={{ fontSize: 20 }} nativeColor="white" />}
+              iconActive={<MdClose style={{ fontSize: 20 }} nativeColor="white" />}
               backgroundColor="black"
               onClick={() => this.setState({ isOpen: !this.state.isOpen })}
               size={56}
             />
             <ChildButton
-              iconButton={MdAdd}
-              iconColor="black"
-              order={1}
+              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
               backgroundColor="white"
               size={40}
-              margin={16}
               onClick={() => console.log('First button clicked')}
             />
             <ChildButton
-              iconButton={MdAdd}
-              iconColor="black"
-              order={2}
+              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
+              backgroundColor="white"
+              size={40}
+            />
+            <ChildButton
+              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
               backgroundColor="white"
               size={40}
-              margin={8}
             />
           </FloatingMenu>
         </Paper>

package.json

@@ -31,7 +31,6 @@
     "prop-types": "^15.5.8",
     "react": "^16.4.0",
     "react-dom": "^16.3.0",
-    "react-icons": "^2.2.3",
     "styled-components": "1.4.5",
     "styled-jss": "^2.2.3",
     "yargs": "^8.0.1"

src/ChildButton.js

@@ -1,9 +1,10 @@
+/* eslint-disable no-nested-ternary  */
 import React, { Component } from 'react';
 import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
 const Wrapper = styled('li')(
-  ({ isOpen, slideSpeed, backgroundColor, size, iconColor, margin, direction }) => ({
+  ({ isOpen, slideSpeed, backgroundColor, size, iconColor, spacing, direction }) => ({
     backgroundColor,
     display: 'flex',
     border: 'none',
@@ -20,43 +21,61 @@ const Wrapper = styled('li')(
     transition: `all ${slideSpeed}ms`,
     width: size,
     height: size,
-    marginTop: (direction === 'down') ? margin : 0,
-    marginBottom: (direction === 'up') ? margin : 0,
-    marginLeft: (direction === 'right') ? margin : 0,
-    marginRight: (direction === 'left') ? margin : 0,
-    '& > a > svg': {
-      fill: iconColor,
-    },
+    marginTop: direction === 'down' ? spacing : 0,
+    marginBottom: direction === 'up' ? spacing : 0,
+    marginLeft: direction === 'right' ? spacing : 0,
+    marginRight: direction === 'left' ? spacing : 0,
+    color: iconColor,
   }),
 );
 
 class ChildButton extends Component {
   static propTypes = {
-    iconButton: PropTypes.func.isRequired,
-    direction: PropTypes.string.isRequired,
-    iconColor: PropTypes.string,
+    icon: PropTypes.node.isRequired,
+    direction: PropTypes.string,
+    index: PropTypes.number,
     onClick: PropTypes.func,
     isOpen: PropTypes.bool,
     size: PropTypes.number,
-    margin: PropTypes.number,
+    spacing: PropTypes.number,
   };
 
   static defaultProps = {
+    direction: 'up',
+    index: 1,
     iconColor: 'black',
     size: '40',
-    margin: 0,
+    spacing: 0,
     isOpen: false,
-    onClick: null
+    onClick: null,
   };
 
   render() {
-    const { iconButton: IconButton, ...other } = this.props;
+    const {
+      icon,
+      index,
+      direction,
+      size,
+      spacing,
+      isOpen,
+      onClick,
+    } = this.props;
+    const offsetX =
+      direction === 'right' ? (size + spacing) * index :
+      direction === 'left' ? (size + spacing) * index * -1 : 0;
+    const offsetY =
+      direction === 'down' ? (size + spacing) * index :
+      direction === 'up' ? (size + spacing) * index * -1 : 0;
 
     return (
-      <Wrapper {...other} onClick={this.props.isOpen ? this.props.onClick : null}>
-        <a>
-          <IconButton />
-        </a>
+      <Wrapper
+        {...this.props}
+        onClick={isOpen ? onClick : null}
+        style={{
+          transform: `translate(${isOpen ? 0 : -offsetX}px, ${isOpen ? 0 : -offsetY}px)`,
+        }}
+      >
+        {icon}
       </Wrapper>
     );
   }

src/FloatingMenu.js

@@ -19,9 +19,6 @@ const StyledUl = styledJss('ul')(
     flexDirection: DIRECTIONS[direction],
     justifyContent: 'center',
     alignItems: 'center',
-    '& > a + li, li + li': {
-      marginLeft: 8,
-    },
   }),
 );
 
@@ -30,6 +27,7 @@ class FloatingMenu extends Component {
     className: PropTypes.string,
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
     slideSpeed: PropTypes.number,
+    spacing: PropTypes.number,
     direction: PropTypes.string,
     isOpen: PropTypes.bool,
   };
@@ -39,15 +37,18 @@ class FloatingMenu extends Component {
     slideSpeed: 500,
     direction: 'down',
     isOpen: false,
+    spacing: 8,
   };
 
   render() {
-    const { slideSpeed, direction, className, isOpen } = this.props;
-    const childrenWithProps = React.Children.map(this.props.children, child =>
+    const { slideSpeed, direction, className, isOpen, spacing } = this.props;
+    const childrenWithProps = React.Children.map(this.props.children, (child, index) =>
       React.cloneElement(child, {
         isOpen,
         slideSpeed,
         direction,
+        index,
+        spacing,
       }),
     );
 

src/MainButton.js

@@ -5,9 +5,7 @@ import PropTypes from 'prop-types';
 
 const Wrapper = styled('a')(
   ({ backgroundColor, size, iconColor }) => ({
-    '& > a > svg': {
-      fill: iconColor,
-    },
+    color: iconColor,
     zIndex: '1',
     display: 'flex',
     border: 'none',
@@ -18,7 +16,6 @@ const Wrapper = styled('a')(
     padding: '0',
     WebkitUserDrag: 'none',
     fontWeight: 'bold',
-    color: '#f1f1f1',
     justifyContent: 'center',
     alignItems: 'center',
     WebkitTransition: '-webkit-transform 300ms',
@@ -32,41 +29,37 @@ const Wrapper = styled('a')(
     transform: `rotate(${isOpen ? 180 : 0}deg)`,
   }),
 );
-const IconResting = ({ iconResting, isOpen }) =>
-  styled(iconResting)({
-    position: 'absolute',
-    opacity: isOpen ? 0 : 1,
-  });
-const IconActive = ({ iconActive, isOpen }) =>
-  styled(iconActive)({
-    position: 'absolute',
-    opacity: isOpen ? 1 : 0,
-  });
+
+const IconWrapper = styled('div')(({ isOpen }) => ({
+  display: 'flex',
+  position: 'absolute',
+  opacity: isOpen ? 1 : 0,
+}));
 
 class MainButton extends Component {
   static propTypes = {
-    iconResting: PropTypes.func.isRequired,
-    iconActive: PropTypes.func.isRequired,
-    iconColor: PropTypes.string,
+    iconResting: PropTypes.node.isRequired,
+    iconActive: PropTypes.node.isRequired,
     isOpen: PropTypes.bool,
     size: PropTypes.number,
   };
 
   static defaultProps = {
-    iconColor: '#ff1744',
     isOpen: false,
     size: 56,
   };
 
   render() {
     const { iconResting, iconActive, isOpen } = this.props;
-    const StyledIconResting = IconResting({ iconResting, isOpen });
-    const StyledIconActive = IconActive({ iconActive, isOpen });
 
     return (
       <Wrapper {...this.props}>
-        <StyledIconResting />
-        <StyledIconActive />
+        <IconWrapper isOpen={!isOpen}>
+          {iconResting}
+        </IconWrapper>
+        <IconWrapper isOpen={isOpen}>
+          {iconActive}
+        </IconWrapper>
       </Wrapper>
     );
   }