added top & bottom positions + some cleanups

Author: wysher

examples/App.js

@@ -6,29 +6,31 @@ import { OffCanvas, OffCanvasMenu, OffCanvasBody } from "react-offcanvas";
 import styles from "./styles.css";
 
 export default class App extends Component {
-  componentWillMount() {
-    // sets the initial state
-    this.setState({
-      isMenuOpened: false
-    });
+  state = {
+    isMenuOpened: false,
+  }
+
+  toggle = () => {
+    this.setState(state => ({ isMenuOpened: !state.isMenuOpened }));
   }
 
   render() {
     return (
       <OffCanvas
         width={300}
+        height={300}
         transitionDuration={300}
         isMenuOpened={this.state.isMenuOpened}
-        position={"right"}
-        effect={"overlay"}
+        position={"top"}
+        effect={"parallax"}
       >
         <OffCanvasBody
           className={styles.bodyClass}
           style={{ fontSize: "30px" }}
         >
           <p>This is the main body container.</p>
           <p>
-            <a href="#" onClick={this.handleClick.bind(this)}>
+            <a href="#" onClick={this.toggle}>
               Click here
             </a>{" "}
             to toggle the menu.
@@ -43,7 +45,7 @@ export default class App extends Component {
             <li>Link 4</li>
             <li>Link 5</li>
             <li>
-              <a href="#" onClick={this.handleClick.bind(this)}>
+              <a href="#" onClick={this.toggle}>
                 Toggle Menu
               </a>
             </li>
@@ -52,9 +54,4 @@ export default class App extends Component {
       </OffCanvas>
     );
   }
-
-  handleClick() {
-    // toggles the menu opened state
-    this.setState({ isMenuOpened: !this.state.isMenuOpened });
-  }
 }

examples/bundle.js

@@ -2,8 +2,9 @@
 
 import React from "react";
 
-let OffCanvas = ({
+const OffCanvas = ({
   width = 250,
+  height = 250,
   transitionDuration = 250,
   isMenuOpened = false,
   position = "left",
@@ -14,6 +15,7 @@ let OffCanvas = ({
   const transferProps = element => {
     return React.cloneElement(element, {
       width,
+      height,
       transitionDuration,
       isMenuOpened,
       position,
@@ -22,7 +24,7 @@ let OffCanvas = ({
   };
 
   // transfer the props from OffCanvas to the child
-  let offCanvasChildren = React.Children.map(children, transferProps);
+  const offCanvasChildren = React.Children.map(children, transferProps);
 
   return <div>{offCanvasChildren}</div>;
 };

src/OffCanvas.js

@@ -2,8 +2,9 @@
 
 import React, { PropTypes } from "react";
 
-let OffCanvasBody = ({
+const OffCanvasBody = ({
   width = 250,
+  height = 250,
   transitionDuration = 250,
   isMenuOpened = false,
   position = "left",
@@ -12,41 +13,49 @@ let OffCanvasBody = ({
   className,
   style
 }) => {
-  // closed state style
-  let translateX = position === "left" ? 0 : 0;
-  let closedStyle = {
+  // translateOpen map
+  const translateOpen = {
+    left: {
+      overlay: "0 0",
+      parallax: width / 2 + "px, 0",
+      push: width + "px, 0",
+    },
+    right: {
+      overlay: "0 0",
+      parallax: -width / 2 + "px, 0",
+      push: -width + "px, 0",
+    },
+    top: {
+      overlay: "0 0",
+      parallax: "0, " + height / 2 + "px",
+      push: "0, " + height + "px",
+    },
+    bottom: {
+      overlay: "0 0",
+      parallax: "0, " + -height / 2 + "px",
+      push: "0, " + -height + "px",
+    },
+  }[position][effect];
+  
+  const currentStyle = Object.assign({
     transitionDuration: transitionDuration + "ms",
-    transform: "translate(" + translateX + "px, 0px)",
+    transform: "translate(" + (isMenuOpened ? translateOpen : "0, 0") +")",
     backfaceVisibility: "hidden"
-  };
-
-  // open state style
-  let translateOpenX = position === "left" ? width : -1 * width;
-  translateOpenX = effect === "parallax" ? translateOpenX / 2 : translateOpenX;
-  translateOpenX = effect === "overlay" ? 0 : translateOpenX;
-
-  let openStyle = {
-    transform: "translate(" + translateOpenX + "px, 0px)"
-  };
-
-  // create current state styles
-  let currStyle = Object.assign({}, closedStyle);
-  if (isMenuOpened) {
-    currStyle = Object.assign({}, currStyle, openStyle);
-  }
+  }, style);
 
   return (
-    <div style={{ ...currStyle, ...style }} className={className}>
+    <div style={currentStyle} className={className}>
       {children}
     </div>
   );
 };
 
 OffCanvasBody.propTypes = {
   width: PropTypes.number,
+  height: PropTypes.number,
   transitionDuration: PropTypes.number,
   isMenuOpened: PropTypes.bool,
-  position: PropTypes.oneOf(["left", "right"]),
+  position: PropTypes.oneOf(["left", "right", "top", "bottom"]),
   effect: PropTypes.oneOf(["push", "parallax", "overlay"]),
   style: PropTypes.object
 };

src/OffCanvasBody.js

@@ -2,8 +2,9 @@
 
 import React, { PropTypes } from "react";
 
-let OffCanvasMenu = ({
+const OffCanvasMenu = ({
   width = 250,
+  height = 250,
   transitionDuration = 250,
   isMenuOpened = false,
   position = "left",
@@ -12,46 +13,67 @@ let OffCanvasMenu = ({
   className,
   style
 }) => {
-  console.log(position, effect);
-  // closed state style
-  let left = position === "left" ? -1 * width + "px" : "auto";
-  let right = position === "left" ? "auto" : -1 * width + "px";
-  let translateX = position === "left" ? -1 * width : 0;
-  let closedStyle = {
+  // position styles map
+  const { left, right, top, bottom, translateClose, translateOpen } = {
+    left: {
+      left: -width + "px",
+      right: "auto",
+      top: 0,
+      bottom: "auto",
+      translateClose: -width + "px, 0",
+      translateOpen: width + "px, 0",
+    },
+    right: {
+      left: "auto",
+      right: -width + "px",
+      top: 0,
+      bottom: "auto",
+      translateClose: "0, 0",
+      translateOpen: -width + "px, 0",
+    },
+    top: {
+      left: 0,
+      right: "auto",
+      top: -height + "px",
+      bottom: "auto",
+      translateClose: "0, " + -height + "px",
+      translateOpen: "0, " + height + "px",
+    },
+    bottom: {
+      left: 0,
+      right: "auto",
+      top: "auto",
+      bottom: -height + "px",
+      translateClose: "0, 0",
+      translateOpen: "0, " + -height + "px",
+    },
+  }[position];
+
+  const currentStyle = Object.assign({
     width: width + "px",
     position: "fixed",
-    top: "0px",
-    left: left,
-    right: right,
-    transform: "translate(" + translateX + "px, 0px)",
+    top,
+    bottom,
+    left,
+    right,
+    transform: "translate(" + (isMenuOpened ? translateOpen : translateClose) + ")",
     transitionDuration: transitionDuration + "ms",
     backfaceVisibility: "hidden"
-  };
-
-  // open state style
-  let translateOpenX = position === "left" ? width : -1 * width;
-  let openStyle = {
-    transform: "translate(" + translateOpenX + "px, 0px)"
-  };
-
-  // create current state styles
-  let currStyle = Object.assign({}, closedStyle);
-  if (isMenuOpened) {
-    currStyle = Object.assign({}, currStyle, openStyle);
-  }
+  }, style);
 
   return (
-    <div style={{ ...currStyle, ...style }} className={className}>
+    <div style={currentStyle} className={className}>
       {children}
     </div>
   );
 };
 
 OffCanvasMenu.propTypes = {
   width: PropTypes.number,
+  height: PropTypes.number,
   transitionDuration: PropTypes.number,
   isMenuOpened: PropTypes.bool,
-  position: PropTypes.oneOf(["left", "right"]),
+  position: PropTypes.oneOf(["left", "right", "top", "bottom"]),
   effect: PropTypes.oneOf(["push", "parallax", "overlay"]),
   style: PropTypes.object
 };

src/OffCanvasMenu.js

@@ -1,5 +1,5 @@
-'use strict';
+"use strict";
 
-export OffCanvas from './OffCanvas';
-export OffCanvasBody from './OffCanvasBody';
-export OffCanvasMenu from './OffCanvasMenu';
+export { default as OffCanvas } from './OffCanvas';
+export { default as OffCanvasBody } from './OffCanvasBody';
+export { default as OffCanvasMenu } from './OffCanvasMenu';