Merge pull request SupremeTechnopriest#4 from yrokhlin/offcanvasfix

Refactored OffCanvas to use flexbox vs floats and padding.

Author: SupremeTechnopriest

lib/OffCanvas/OffCanvas.js

@@ -17,8 +17,6 @@ var _radium = require('radium');
 
 var _radium2 = _interopRequireDefault(_radium);
 
-var _reactMotion = require('react-motion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,73 +56,93 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 			var style = _props.style;
 			var leftStyle = _props.leftStyle;
 			var rightStyle = _props.rightStyle;
+			var leftType = _props.leftType;
+			var rightType = _props.rightType;
 			var _state = this.state;
 			var openLeft = _state.openLeft;
 			var openRight = _state.openRight;
 			var expanded = _state.expanded;
 
-			var sidebarStyles = function sidebarStyles(width) {
-				return [styles.sidebar, { width: width }, leftStyle];
-			};
-			var mainStyles = function mainStyles(paddingLeft, paddingRight) {
-				return [styles.content, { paddingLeft: paddingLeft, paddingRight: paddingRight }, style];
-			};
-			var auxbarStyles = function auxbarStyles(width) {
-				return [styles.auxbar, { width: width }, rightStyle];
-			};
+			var leftPushStyles = [leftType === 'push' && styles.push, { left: 0 }];
 
-			var defaults = {
-				leftWidth: this._calculateLeft('width'),
-				rightWidth: this._calculateRight('width'),
-				paddingLeft: this._calculateLeft('padding'),
-				paddingRight: this._calculateRight('padding')
-			};
+			var rightPushStyles = [rightType === 'push' && styles.push, { right: 0 }];
 
-			var springs = {
-				leftWidth: (0, _reactMotion.spring)(this._calculateLeft('width')),
-				rightWidth: (0, _reactMotion.spring)(this._calculateRight('width')),
-				paddingLeft: (0, _reactMotion.spring)(this._calculateLeft('padding')),
-				paddingRight: (0, _reactMotion.spring)(this._calculateRight('padding'))
+			var containerStyles = function containerStyles(marginLeft) {
+				return [styles.container, { marginLeft: marginLeft }];
+			},
+			    sidebarStyles = function sidebarStyles(width) {
+				return [styles.sidebar, { width: width }, leftType === 'overlay' && styles.overlay, leftPushStyles, leftStyle];
+			},
+			    mainStyles = [styles.content, style],
+			    auxbarStyles = function auxbarStyles(width) {
+				return [styles.auxbar, { width: width }, rightType === 'overlay' && styles.overlay, rightPushStyles, rightStyle];
 			};
 
 			return _react2.default.createElement(
 				'div',
-				{ style: styles.container },
+				{ style: containerStyles(this._calculatePush()) },
 				_react2.default.createElement(
 					'div',
 					{ style: sidebarStyles(this._calculateLeft('width')) },
 					this.props.leftSidebar
 				),
 				_react2.default.createElement(
 					'div',
-					{ style: auxbarStyles(this._calculateRight('width')) },
-					this.props.rightSidebar
+					{ style: mainStyles },
+					this.props.children
 				),
 				_react2.default.createElement(
 					'div',
-					{ style: mainStyles(this._calculateLeft('padding'), this._calculateRight('padding')) },
-					this.props.children
+					{ style: auxbarStyles(this._calculateRight('width')) },
+					this.props.rightSidebar
 				)
 			);
 		}
 	}, {
 		key: 'toggleLeft',
 		value: function toggleLeft() {
-			this.setState({ openLeft: !this.state.openLeft });
+			var _props2 = this.props;
+			var leftType = _props2.leftType;
+			var rightType = _props2.rightType;
+
+			if (leftType === 'push' && rightType === 'push') {
+				this.setState({ openLeft: !this.state.openLeft, openRight: false });
+			} else {
+				this.setState({ openLeft: !this.state.openLeft });
+			}
 		}
 	}, {
 		key: 'toggleRight',
 		value: function toggleRight() {
+			var _props3 = this.props;
+			var leftType = _props3.leftType;
+			var rightType = _props3.rightType;
 
-			if (this.state.openRight) {
-				this.setState({
-					openRight: false,
-					expanded: false
-				});
+			if (leftType === 'push' && rightType === 'push') {
+
+				if (this.state.openRight) {
+					this.setState({
+						openRight: false,
+						expanded: false
+					});
+				} else {
+					this.setState({
+						openRight: true,
+						openLeft: false
+					});
+				}
 			} else {
-				this.setState({
-					openRight: true
-				});
+
+				if (this.state.openRight) {
+					this.setState({
+						openRight: false,
+						expanded: false
+					});
+				} else {
+					this.setState({
+						openRight: true
+					});
+				}
 			}
 		}
 	}, {
@@ -151,6 +169,29 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 		value: function closeRight() {
 			this.setState({ openRight: false });
 		}
+	}, {
+		key: '_calculatePush',
+		value: function _calculatePush() {
+			var _props4 = this.props;
+			var rightType = _props4.rightType;
+			var leftType = _props4.leftType;
+			var _state2 = this.state;
+			var openLeft = _state2.openLeft;
+			var openRight = _state2.openRight;
+			var expanded = _state2.expanded;
+
+			if (openLeft && leftType === 'push') {
+
+				return this.props.leftWidth;
+			} else if (openRight && rightType === 'push') {
+
+				if (this.state.expanded) {
+					return this.props.expandedWidth * -1;
+				}
+
+				return this.props.rightWidth * -1;
+			}
+		}
 	}, {
 		key: '_calculateRight',
 		value: function _calculateRight(type) {
@@ -159,10 +200,13 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 					case 'squeeze':
 						if (this.state.expanded) return this.props.expandedWidth;
 						return this.props.rightWidth;
+
+					case 'push':
+						if (this.state.expanded) return this.props.expandedWidth;
+						return this.props.rightWidth;
+
 					case 'overlay':
-						if (this.state.expanded) {
-							return type === 'padding' ? 0 : this.props.expandedWidth;
-						}
+						if (this.state.expanded) return type === 'padding' ? 0 : this.props.expandedWidth;
 						return type === 'padding' ? 0 : this.props.rightWidth;
 				}
 			} else {
@@ -176,6 +220,8 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 				switch (this.props.leftType) {
 					case 'squeeze':
 						return this.props.leftWidth;
+					case 'push':
+						return this.props.leftWidth;
 					case 'overlay':
 						return type === 'padding' ? 0 : this.props.leftWidth;
 				}
@@ -216,35 +262,46 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 exports.default = OffCanvas;
 
 var styles = {
-	container: { height: '100%' },
+	container: {
+		height: '100%',
+		width: '100%',
+		display: 'flex',
+		flexDirection: 'row',
+		flex: 1,
+		transition: 'margin 0.4s ease-out'
+	},
 	sidebar: {
 		width: 0,
 		height: '100%',
-		position: 'fixed',
+		position: 'relative',
 		paddingLeft: 0,
-		float: 'left',
 		zIndex: 0,
 		overflow: 'hidden',
-		transition: 'width 0.5s ease'
+		transition: 'width 0.4s ease-out'
 	},
 	auxbar: {
 		width: 0,
+		position: 'relative',
 		height: '100%',
-		position: 'fixed',
 		right: 0,
-		float: 'left',
 		zIndex: 0,
 		overflow: 'hidden',
-		transition: 'width 0.5s ease'
+		transition: 'width 0.4s ease-out'
+	},
+	overlay: {
+		position: 'absolute',
+		zIndex: 2
+	},
+	push: {
+		position: 'absolute'
 	},
 	content: {
 		width: 'auto',
 		height: '100%',
 		paddingLeft: 0,
 		zIndex: 1,
-		overflowX: 'hidden',
+		flex: 1,
 		position: 'relative',
-		pointerEvents: 'none',
-		transition: 'padding 0.5s ease'
+		pointerEvents: 'none'
 	}
 };