<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/manuel_jung_wwi12/pen/bpXQgO?depth=everything&order=popularity&page=51&q=react&show_forks=false" />
<style class="cp-pen-styles">@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
html {
height: 100%;
}
body {
background: #DCDCDC;
height: 100%;
}
#main {
height: 100%;
display: flex;
justify-content: space-around;
align-items: space-around;
}
#app {
flex-basis: 90%;
display: flex;
flex-direction: column;
}
#headline {
align-self: center;
}
#content {
display: flex;
justify-content: space-around;
align-items: center;
flex-grow: 1;
}
.button-container {
position: relative;
display: flex;
}
.button-menu {
background: #72B0EC;
border-radius: 1000px;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.button-child {
position: absolute;
background: white;
border-radius: 1000px;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.child-button-icon {
color: grey;
}
.main-button-icon {
color: white;
}</style></head><body>
<div id="main"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-15.1.0.min.js'></script><script src='https://fb.me/react-dom-15.1.0.min.js'></script><script src='https://npmcdn.com/react-motion/build/react-motion.js'></script>
<script >"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
return target; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// React Motion
var Motion = ReactMotion.Motion;
var spring = ReactMotion.spring;
// CONSTANTS
// Value of 1 degree in radians
var DEG_TO_RAD = 0.0174533;
var ELEMENTS = [{
icon: "home",
onClick: function onClick() {
return alert("clicked home");
}
}, {
icon: "clock-o",
onClick: function onClick() {
return alert("clicked clock");
}
}, {
icon: "lock",
onClick: function onClick() {
return alert("clicked lock");
}
}, {
icon: "globe",
onClick: function onClick() {
return alert("clicked globe");
}
}, {
icon: "asterisk",
onClick: function onClick() {
return alert("clicked asterisk");
}
}, {
icon: "fighter-jet",
onClick: function onClick() {
return alert("clicked fighter-jet");
}
}, {
icon: "clipboard",
onClick: function onClick() {
return alert("clicked clipboard");
}
}, {
icon: "industry",
onClick: function onClick() {
return alert("clicked industry");
}
}, {
icon: "eye",
onClick: function onClick() {
return alert("clicked eye");
}
}];
// UTILITY FUNCTIONS
function toRadians(degrees) {
return degrees * DEG_TO_RAD;
}
// -------------------------------------------------------
// --------------- COMPONENT START -------------------
// -------------------------------------------------------
var MenuButton = function (_React$Component) {
_inherits(MenuButton, _React$Component);
function MenuButton(props) {
_classCallCheck(this, MenuButton);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {
isOpen: true
};
return _this;
}
MenuButton.prototype.toggleMenu = function toggleMenu() {
var isOpen = this.state.isOpen;
this.setState({
isOpen: !isOpen
});
};
MenuButton.prototype.getMainButtonStyle = function getMainButtonStyle() {
var mainButtonDiam = this.props.mainButtonDiam;
return {
width: mainButtonDiam,
height: mainButtonDiam
};
};
MenuButton.prototype.getInitalChildButtonStyle = function getInitalChildButtonStyle() {
var _props = this.props;
var childButtonDiam = _props.childButtonDiam;
var mainButtonDiam = _props.mainButtonDiam;
var stiffness = _props.stiffness;
var damping = _props.damping;
return {
width: childButtonDiam,
height: childButtonDiam,
zIndex: -1,
top: spring(mainButtonDiam / 2 - childButtonDiam / 2, { stiffness: stiffness, damping: damping }),
left: spring(mainButtonDiam / 2 - childButtonDiam / 2, { stiffness: stiffness, damping: damping })
};
};
MenuButton.prototype.getFinalChildButtonStyle = function getFinalChildButtonStyle(index) {
var _props2 = this.props;
var childButtonDiam = _props2.childButtonDiam;
var mainButtonDiam = _props2.mainButtonDiam;
var stiffness = _props2.stiffness;
var damping = _props2.damping;
var _getFinalDeltaPositio = this.getFinalDeltaPositions(index);
var deltaX = _getFinalDeltaPositio.deltaX;
var deltaY = _getFinalDeltaPositio.deltaY;
return {
width: childButtonDiam,
height: childButtonDiam,
zIndex: spring(0),
top: spring(mainButtonDiam / 2 + deltaX, { stiffness: stiffness, damping: damping }),
left: spring(mainButtonDiam / 2 - deltaY, { stiffness: stiffness, damping: damping })
};
};
MenuButton.prototype.getFinalDeltaPositions = function getFinalDeltaPositions(index) {
var NUM_CHILDREN = this.props.elements.length;
var CHILD_BUTTON_DIAM = this.props.childButtonDiam;
var FLY_OUT_RADIUS = this.props.flyOutRadius;
var SEPARATION_ANGLE = this.props.seperationAngle;
var ROTATION = this.props.rotation;
var FAN_ANGLE = (NUM_CHILDREN - 1) * SEPARATION_ANGLE;
var BASE_ANGLE = (180 - FAN_ANGLE) / 2 + 90 + ROTATION;
var TARGET_ANGLE = BASE_ANGLE + index * SEPARATION_ANGLE;
return {
deltaX: FLY_OUT_RADIUS * Math.cos(toRadians(TARGET_ANGLE)) - CHILD_BUTTON_DIAM / 2,
deltaY: FLY_OUT_RADIUS * Math.sin(toRadians(TARGET_ANGLE)) + CHILD_BUTTON_DIAM / 2
};
};
MenuButton.prototype.getCProps = function getCProps() {
var _this2 = this;
return {
mainButtonProps: function mainButtonProps() {
return {
className: "button-menu",
style: _this2.getMainButtonStyle(),
onClick: _this2.toggleMenu.bind(_this2)
};
},
childButtonProps: function childButtonProps(style, onClick) {
return {
className: "button-child",
style: style,
onClick: onClick
};
},
childButtonMotionProps: function childButtonMotionProps(index, isOpen) {
return {
key: index,
style: isOpen ? _this2.getFinalChildButtonStyle.call(_this2, index) : _this2.getInitalChildButtonStyle.call(_this2)
};
},
// handle Icons
childButtonIconProps: function childButtonIconProps(name) {
return {
className: "child-button-icon fa fa-" + name + " fa-" + _this2.props.childButtonIconSize
};
},
mainButtonIconProps: function mainButtonIconProps(name) {
return {
className: "main-button-icon fa fa-" + name + " fa-" + _this2.props.mainButtonIconSize
};
}
};
};
MenuButton.prototype.renderChildButton = function renderChildButton(item, index) {
var isOpen = this.state.isOpen;
var cp = this.getCProps();
//return <div {...cp.childButtonProps(index, isOpen)}/>;
return React.createElement(
Motion,
cp.childButtonMotionProps(index, isOpen),
function (style) {
return React.createElement(
"div",
cp.childButtonProps(style, item.onClick),
React.createElement("i", cp.childButtonIconProps(item.icon))
);
}
);
};
MenuButton.prototype.render = function render() {
var _this3 = this;
var cp = this.getCProps();
var _props3 = this.props;
var elements = _props3.elements;
var mainButtonIcon = _props3.mainButtonIcon;
var isOpen = this.state.isOpen;
return React.createElement(
"div",
{ className: "button-container" },
elements.map(function (item, i) {
return _this3.renderChildButton(item, i);
}),
React.createElement(
"div",
cp.mainButtonProps(),
React.createElement("i", cp.mainButtonIconProps(mainButtonIcon))
)
);
};
return MenuButton;
}(React.Component);
// -------------------------------------------------------
// ---------------- COMPONENT END --------------------
// -------------------------------------------------------
// APP
var App = function (_React$Component2) {
_inherits(App, _React$Component2);
function App(props) {
_classCallCheck(this, App);
var _this4 = _possibleConstructorReturn(this, _React$Component2.call(this, props));
_this4.state = {
flyOutRadius: 120,
seperationAngle: 40,
mainButtonDiam: 90,
childButtonDiam: 50,
numElements: 4,
stiffness: 320,
damping: 17,
rotation: 0,
mainButtonIcon: "bars",
mainButtonIconSize: "2x",
childButtonIconSize: "lg"
};
return _this4;
}
App.prototype.getInputProps = function getInputProps(type, title) {
var _this5 = this;
return {
type: type,
value: this.state[title],
onChange: function onChange(e) {
var _this5$setState, _this5$setState2;
return type === "number" ? _this5.setState((_this5$setState = {}, _this5$setState[title] = parseInt(e.target.value || 0), _this5$setState)) : _this5.setState((_this5$setState2 = {}, _this5$setState2[title] = e.target.value, _this5$setState2));
}
};
};
App.prototype.render = function render() {
var NUM = "number";
var TEX = "text";
return React.createElement(
"div",
{ id: "app" },
React.createElement(
"div",
{ id: "headline" },
React.createElement(
"h1",
null,
"React Menu Button"
)
),
React.createElement(
"div",
{ id: "content" },
React.createElement(
"div",
{ id: "component" },
React.createElement(MenuButton, _extends({}, this.state, { elements: ELEMENTS.slice(0, this.state.numElements) }))
),
React.createElement(
"div",
{ id: "config" },
React.createElement(
"h2",
null,
"Props"
),
React.createElement(
"table",
null,
React.createElement(
"tbody",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"fly out radius:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "flyOutRadius"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"seperation angle:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "seperationAngle"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"main button diam:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "mainButtonDiam"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"child button diam:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "childButtonDiam"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"num elements:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "numElements"))
),
React.createElement(
"td",
null,
React.createElement("i", { className: "fa fa-info", onClick: function onClick() {
return alert("normaly no number, but an array of obj {icon, onClick}");
} })
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"stiffness:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "stiffness"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"damping:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "damping"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"rotation:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(NUM, "rotation"))
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"main button icon:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(TEX, "mainButtonIcon"))
),
React.createElement(
"td",
null,
React.createElement("i", { className: "fa fa-info", onClick: function onClick() {
return alert("font awesome icon");
} })
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"main button icon size:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(TEX, "mainButtonIconSize"))
),
React.createElement(
"td",
null,
React.createElement("i", { className: "fa fa-info", onClick: function onClick() {
return alert("none | lg | 2x | 3x | 4x | 5x");
} })
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"child button icon size:"
),
React.createElement(
"td",
null,
React.createElement("input", this.getInputProps(TEX, "childButtonIconSize"))
),
React.createElement(
"td",
null,
React.createElement("i", { className: "fa fa-info", onClick: function onClick() {
return alert("none | lg | 2x | 3x | 4x | 5x");
} })
)
)
)
)
)
)
);
};
return App;
}(React.Component);
// render ToggleButton to DOM
ReactDOM.render(React.createElement(App, null), document.getElementById("main"));
//# sourceURL=pen.js
</script>
</body></html>
