Allow to customize the position (above or below), also exposing some material-ui properties, so we can customize colors, styles, etc

.gitignore

@@ -1 +1,20 @@
 .idea/
+
+npm-debug.log*
+
+# Dist folder
+dist
+
+# Dependency directories
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# OS files
+.DS_Store
+.idea
+npm-debug.log

README.md

@@ -88,6 +88,7 @@ transforms into a "close" icon.
   Note that `position` must remain `relative` or `absolute`. You might also 
   want to encapsulate the `<SpeedDial>` in a positioned parent container to 
   avoid problems. 
+ - `itemsPosition` = show buttons above or below the main button
 
 ## `<SpeedDialItem>` props
 
@@ -98,6 +99,7 @@ transforms into a "close" icon.
   vertically aligned to the FAB.
  - `onTouchTap` = called when the user clicks the mini-FAB (*not* called when
   the label is clicked)
+ - `secondary`, `backgroundColor`, `style`, `iconStyle` = material-ui FloatingActionButton exposed props
 
 ## License
 This project is licensed under the terms of the [MIT license](LICENSE)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mui-speeddial",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "a speed dial component for Material UI",
   "repository": {
     "type": "git",

src/speed-dial-item.jsx

@@ -18,79 +18,85 @@ const styles = {
 };
 
 
-const effects = {
-
-  "none": (visible, index) => ({
-    display: visible ? "" : "none"
-  }),
-
-  "fade-staggered": (visible, index) => ({
-    transition: visible ? "450ms" : "300ms",
-    transitionDelay: visible ? (index * 0.025) + "s" : "",
-    transform: "translateY(" + (visible ? 0 : "5px") + ")",
-    opacity: visible ? 1 : 0
-  }),
-
-  "fade":  (visible, index) => ({
-    transition: visible ? "450ms" : "300ms",
-    opacity: visible ? 1 : 0
-  }),
-
-  "slide": (visible, index) => ({
-    transition: visible ? "250ms" : "300ms",
-    transform: "translateY(" + (visible ? 0 : getYPos(index) + "px") + ")",
-    opacity: visible ? 1 : 0
-  })
-
-};
+function getYPos(index, position) {
+  let newYPos = 81 + index * 56;
 
+  if (position === 'below') {
+    newYPos = -114 + (index * 56);
+  }
 
-function getYPos(index) {
-  return 81 + index * 56;
+  return newYPos;
 }
 
-export const SpeedDialItem = React.createClass({
+export class SpeedDialItem extends React.PureComponent {
+  effects = {
+    "none": (visible, index) => ({
+      display: visible ? "" : "none"
+    }),
+
+    "fade-staggered": (visible, index) => ({
+      transition: visible ? "450ms" : "300ms",
+      transitionDelay: visible ? (index * 0.025) + "s" : "",
+      transform: "translateY(" + (visible ? 0 : (this.props.itemPosition === 'above' ? "5px" : "-5px")) + ")",
+      opacity: visible ? 1 : 0
+    }),
+
+    "fade":  (visible, index) => ({
+      transition: visible ? "450ms" : "300ms",
+      opacity: visible ? 1 : 0
+    }),
+
+    "slide": (visible, index) => ({
+      transition: visible ? "250ms" : "300ms",
+      transform: "translateY(" + (visible ? 0 : getYPos(index, this.props.itemsPosition) + "px") + ")",
+      opacity: visible ? 1 : 0
+    }),
+  };
 
   handleTouchTap(ev) {
     this.props.onCloseRequest();
     this.props.onTouchTap(ev);
-  },
-
-  render: function() {
+  }
 
-    const { index, visible } = this.props;
+  render() {
+    const { index, visible, itemPosition } = this.props;
 
     let style = {
       pointerEvents: visible ? "" : "none",
       position: "absolute",
+      zIndex: 9999,
       whiteSpace: "nowrap",
       right: 8,
-      bottom: getYPos(index)
+      bottom: getYPos(index, itemPosition)
     };
 
-    let fx = effects[this.props.effect];
+    let fx = this.effects[this.props.effect];
 
     if (!fx)
       fx = effects.none;
 
     style = { ...style, ...fx(visible, index) };
 
-    return <div style={style}>
-
-      <div style={styles.itemContainer}>
+    return (<div style={style}>
+      <div style={Object.assign(styles.itemContainer, this.props.labelStyle)}>
         {this.props.label}
       </div>
 
       <FloatingActionButton
-        mini={true}
-        secondary={true}
-        onTouchTap={this.handleTouchTap}
+        mini={true}        
+        secondary={this.props.secondary}
+        backgroundColor={this.props.backgroundColor}
+        style={this.props.style}
+        iconStyle={this.props.iconStyle}
+        onTouchTap={(ev) => { this.handleTouchTap(ev); }}
       >
         {this.props.fabContent}
       </FloatingActionButton>
-
-    </div>;
-
+    </div>);
   }
+};
 
-});
+SpeedDialItem.defaultProps = {
+  itemPosition: 'above', // above or below
+  secondary: true,
+};

src/speed-dial.jsx

@@ -47,9 +47,11 @@ export const SpeedDial = React.createClass({
 
     let enhancedChildren = React.Children.map(this.props.children,
       (child, index) => React.cloneElement(child, {
+        ...child.props,
         effect,
         index,
         visible: open,
+        itemPosition: this.props.itemsPosition,
         onCloseRequest: this.handleCloseRequest
       })
     );
@@ -72,4 +74,8 @@ export const SpeedDial = React.createClass({
     </div>;
   }
 
-});
+});
+
+SpeedDial.defaultProps = {
+  itemsPosition: 'above' // above or below
+};