#13 Expose secondary and style of FAB as props in SpeedDialItem

dist/fab-spinner.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FabSpinner = undefined;
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+
+  container: {
+    position: "relative",
+    width: "100%",
+    height: 0,
+    transform: "translate(0, 2px)"
+  },
+
+  overlap: {
+    position: "relative",
+    transition: "all 450ms"
+  }
+
+};
+
+var FabSpinner = exports.FabSpinner = _react2.default.createClass({
+  displayName: "FabSpinner",
+
+
+  render: function render() {
+    var showB = this.props.showB;
+
+
+    var ac = _react2.default.cloneElement(this.props.aContent, {
+      style: (0, _extends3.default)({}, this.props.style, this.props.aContent.style)
+    });
+
+    var bc = _react2.default.cloneElement(this.props.bContent, {
+      style: (0, _extends3.default)({}, this.props.style, this.props.bContent.style)
+    });
+
+    return _react2.default.createElement(
+      "div",
+      { style: styles.container },
+      _react2.default.createElement(
+        "div",
+        { style: (0, _extends3.default)({}, styles.overlap, {
+            transform: "translateY(-50%) rotate(" + (showB ? "90deg" : 0) + ")",
+            opacity: showB ? 0 : 1
+          }) },
+        ac
+      ),
+      _react2.default.createElement(
+        "div",
+        { style: (0, _extends3.default)({}, styles.overlap, {
+            transform: "translateY(-150%) rotate(" + (showB ? 0 : "-90deg") + ")",
+            opacity: showB ? 1 : 0
+          }) },
+        bc
+      )
+    );
+  }
+
+});

dist/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpeedDialItem = exports.SpeedDial = undefined;
+
+var _speedDial = require('./speed-dial');
+
+var _speedDialItem = require('./speed-dial-item');
+
+exports.SpeedDial = _speedDial.SpeedDial;
+exports.SpeedDialItem = _speedDialItem.SpeedDialItem;

dist/speed-dial-item.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpeedDialItem = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _FloatingActionButton = require('material-ui/FloatingActionButton');
+
+var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+
+  itemContainer: {
+    position: "absolute",
+    right: 48,
+    top: 20,
+
+    WebkitTransform: "translateY(-50%)",
+    MozTransform: "translateY(-50%)",
+    MsTransform: "translateY(-50%)",
+    OTransform: "translateY(-50%)",
+    transform: "translateY(-50%)"
+  }
+
+};
+
+var effects = {
+
+  "none": function none(visible, index) {
+    return {
+      display: visible ? "" : "none"
+    };
+  },
+
+  "fade-staggered": function fadeStaggered(visible, index) {
+    return {
+      transition: visible ? "450ms" : "300ms",
+      transitionDelay: visible ? index * 0.025 + "s" : "",
+      transform: "translateY(" + (visible ? 0 : "5px") + ")",
+      opacity: visible ? 1 : 0
+    };
+  },
+
+  "fade": function fade(visible, index) {
+    return {
+      transition: visible ? "450ms" : "300ms",
+      opacity: visible ? 1 : 0
+    };
+  },
+
+  "slide": function slide(visible, index) {
+    return {
+      transition: visible ? "250ms" : "300ms",
+      transform: "translateY(" + (visible ? 0 : getYPos(index) + "px") + ")",
+      opacity: visible ? 1 : 0
+    };
+  }
+
+};
+
+function getYPos(index) {
+  return 81 + index * 56;
+}
+
+var SpeedDialItem = exports.SpeedDialItem = _react2.default.createClass({
+  displayName: 'SpeedDialItem',
+  handleTouchTap: function handleTouchTap(ev) {
+    this.props.onCloseRequest();
+    this.props.onTouchTap(ev);
+  },
+
+
+  render: function render() {
+    var _props = this.props,
+        index = _props.index,
+        visible = _props.visible;
+
+
+    var style = {
+      pointerEvents: visible ? "" : "none",
+      position: "absolute",
+      whiteSpace: "nowrap",
+      right: 8,
+      bottom: getYPos(index)
+    };
+
+    var fx = effects[this.props.effect];
+
+    if (!fx) fx = effects.none;
+
+    style = (0, _extends3.default)({}, style, fx(visible, index));
+
+    return _react2.default.createElement(
+      'div',
+      { style: style },
+      _react2.default.createElement(
+        'div',
+        { style: styles.itemContainer },
+        this.props.label
+      ),
+      _react2.default.createElement(
+        _FloatingActionButton2.default,
+        {
+          mini: true,
+          secondary: this.props.secondary ? this.props.secondary : false,
+          style: this.props.style,
+          onTouchTap: this.handleTouchTap
+        },
+        this.props.fabContent
+      )
+    );
+  }
+
+});

dist/speed-dial.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpeedDial = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _FloatingActionButton = require('material-ui/FloatingActionButton');
+
+var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton);
+
+var _fabSpinner = require('./fab-spinner');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+
+  container: {
+    position: "relative",
+    display: "inline-block"
+  }
+
+};
+
+var SpeedDial = exports.SpeedDial = _react2.default.createClass({
+  displayName: 'SpeedDial',
+  getInitialState: function getInitialState() {
+    return {
+      internalOpen: false
+    };
+  },
+  handleFabTouchTap: function handleFabTouchTap() {
+    this.setState({
+      internalOpen: !this.state.internalOpen
+    });
+
+    var cb = this.props.onOpenCloseRequest;
+    cb && cb();
+  },
+  handleCloseRequest: function handleCloseRequest() {
+    this.handleFabTouchTap();
+  },
+
+
+  render: function render() {
+    var _this = this;
+
+    var _props = this.props,
+        open = _props.open,
+        effect = _props.effect,
+        style = _props.style;
+
+
+    if (open === undefined) open = this.state.internalOpen;
+
+    if (effect === undefined) effect = "fade-staggered";
+
+    var enhancedChildren = _react2.default.Children.map(this.props.children, function (child, index) {
+      return _react2.default.cloneElement(child, {
+        effect: effect,
+        index: index,
+        visible: open,
+        onCloseRequest: _this.handleCloseRequest
+      });
+    });
+
+    return _react2.default.createElement(
+      'div',
+      { style: (0, _extends3.default)({}, styles.container, style) },
+      _react2.default.createElement(
+        _FloatingActionButton2.default,
+        (0, _extends3.default)({}, this.props.fabProps, {
+          onTouchTap: this.handleFabTouchTap
+        }),
+        _react2.default.createElement(_fabSpinner.FabSpinner, {
+          aContent: this.props.fabContentOpen,
+          bContent: this.props.fabContentClose || this.props.fabContentOpen,
+          showB: open
+        })
+      ),
+      enhancedChildren
+    );
+  }
+
+});

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

@@ -83,7 +83,8 @@ export const SpeedDialItem = React.createClass({
 
       <FloatingActionButton
         mini={true}
-        secondary={true}
+        secondary={this.props.secondary? this.props.secondary : false}
+        style={this.props.style}
         onTouchTap={this.handleTouchTap}
       >
         {this.props.fabContent}