feat(DrawerContainer): add style overrides to overlay and content (@o…

…oHmartY) (#39)

closes #38

.all-contributorsrc

@@ -20,6 +20,16 @@
         "ideas",
         "tool"
       ]
+    },
+    {
+      "login": "ooHmartY",
+      "name": "Oscar Martinez",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/2343630?v=4",
+      "profile": "http://mtnz-web.com",
+      "contributions": [
+        "code"
+      ]
     }
-  ]
+  ],
+  "repoType": "github"
 }

.eslintrc.json

@@ -13,6 +13,7 @@
       }
     ],
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
+    "react/forbid-prop-types": "off",
     "jsx-a11y/no-static-element-interactions": "off"
   },
   "globals": {

README.md

@@ -107,9 +107,18 @@ Alternatively, you can look at the code for [`<DrawerOverlay />`](./src/DrawerOv
 
 ### Props
 
+#### Drawer
+
 * `size` (integer): size (width or height) in percent (%) of the drawer
 * `position` (string): one of `left`, `right`, `top` or `bottom`
 
+#### DrawerContainer
+
+`<DrawerContainer />` requires all the props passed down by the `<Drawer />` render function. It also accepts two optionnal props:
+
+* `overlayStyle` (object): overrides the `<DrawerOverlay />` style
+* `contentStyle` (object): overrides the `<DrawerContentContainer />` style
+
 ## Known limitations
 
 Due to the fact that Safari on iOS interprets a swipe from the left as a navigation to the previous page, you will not be able to swipe the drawer open. The `toggleDrawer` function should still work though.
@@ -126,9 +135,9 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 
-| [<img src="https://avatars.githubusercontent.com/u/433409" width="100px;"/><br /><sub>Damien Varron</sub>](https://github.com/damusnet)<br />[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Code") [📖](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Documentation") [🚇](#infra-damusnet "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Tests") [🤔](#ideas-damusnet "Ideas, Planning, & Feedback") [🔧](#tool-damusnet "Tools") |
-| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-
+<!-- prettier-ignore -->
+| [<img src="https://avatars.githubusercontent.com/u/433409" width="100px;"/><br /><sub><b>Damien Varron</b></sub>](https://github.com/damusnet)<br />[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Code") [📖](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Documentation") [🚇](#infra-damusnet "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Tests") [🤔](#ideas-damusnet "Ideas, Planning, & Feedback") [🔧](#tool-damusnet "Tools") | [<img src="https://avatars2.githubusercontent.com/u/2343630?v=4" width="100px;"/><br /><sub><b>Oscar Martinez</b></sub>](http://mtnz-web.com)<br />[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=ooHmartY "Code") |
+| :---: | :---: |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/DrawerContainer.js

@@ -13,6 +13,8 @@ const DrawerContainer = ({
   handleTouchMove,
   handleTouchEnd,
   drawerContent,
+  overlayStyle,
+  contentStyle,
 }) => {
   const open = translation > 0;
 
@@ -27,6 +29,7 @@ const DrawerContainer = ({
         handleTouchStart={handleTouchStart}
         handleTouchMove={handleTouchMove}
         handleTouchEnd={handleTouchEnd}
+        style={overlayStyle}
       />
       <DrawerContentContainer
         position={position}
@@ -38,6 +41,7 @@ const DrawerContainer = ({
         handleTouchMove={handleTouchMove}
         handleTouchEnd={handleTouchEnd}
         drawerContent={drawerContent}
+        style={contentStyle}
       />
     </div>
   );
@@ -55,4 +59,11 @@ DrawerContainer.propTypes = {
   handleTouchMove: PropTypes.func.isRequired,
   handleTouchEnd: PropTypes.func.isRequired,
   drawerContent: PropTypes.element.isRequired,
+  overlayStyle: PropTypes.object,
+  contentStyle: PropTypes.object,
+};
+
+DrawerContainer.defaultProps = {
+  overlayStyle: {},
+  contentStyle: {},
 };

src/DrawerContainer.test.js

@@ -18,6 +18,8 @@ describe("<DrawerContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        overlayStyle={{ zIndex: 1 }}
+        contentStyle={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();

src/DrawerContentContainer.js

@@ -48,6 +48,7 @@ const DrawerContentContainer = ({
   handleTouchMove,
   handleTouchEnd,
   drawerContent,
+  style,
 }) => (
   <div
     className="DrawerContentContainer"
@@ -59,6 +60,7 @@ const DrawerContentContainer = ({
       zIndex: 1,
       transition: swiping ? "" : "transform .2s ease-in-out",
       ...transform({ position, size, translation }),
+      ...style,
     }}
   >
     {drawerContent}
@@ -76,4 +78,5 @@ DrawerContentContainer.propTypes = {
   handleTouchMove: PropTypes.func.isRequired,
   handleTouchEnd: PropTypes.func.isRequired,
   drawerContent: PropTypes.element.isRequired,
+  style: PropTypes.object.isRequired,
 };

src/DrawerContentContainer.test.js

@@ -17,6 +17,7 @@ describe("<DrawerContentContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        style={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();
@@ -34,6 +35,7 @@ describe("<DrawerContentContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        style={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();
@@ -51,6 +53,7 @@ describe("<DrawerContentContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        style={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();
@@ -68,6 +71,7 @@ describe("<DrawerContentContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        style={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();
@@ -85,6 +89,7 @@ describe("<DrawerContentContainer />", () => {
         handleTouchMove={noop}
         handleTouchEnd={noop}
         drawerContent={<div />}
+        style={{ zIndex: 2 }}
       />
     );
     const tree = component.toJSON();

src/DrawerOverlay.js

@@ -54,6 +54,7 @@ const DrawerOverlay = ({
   handleTouchStart,
   handleTouchMove,
   handleTouchEnd,
+  style,
 }) => (
   <div
     className="DrawerOverlay"
@@ -67,6 +68,7 @@ const DrawerOverlay = ({
       backgroundColor: `rgba(0,0,0,${0.6 * translation / 100})`,
       transition: transition({ swiping, open }),
       ...transform({ position, swiping, open }),
+      ...style,
     }}
   />
 );
@@ -82,4 +84,5 @@ DrawerOverlay.propTypes = {
   handleTouchStart: PropTypes.func.isRequired,
   handleTouchMove: PropTypes.func.isRequired,
   handleTouchEnd: PropTypes.func.isRequired,
+  style: PropTypes.object.isRequired,
 };

src/DrawerOverlay.test.js

@@ -19,6 +19,7 @@ describe("<DrawerOverlay />", () => {
           handleTouchStart={noop}
           handleTouchMove={noop}
           handleTouchEnd={noop}
+          style={{ zIndex: 1 }}
         />
       );
       const tree = component.toJSON();
@@ -36,6 +37,7 @@ describe("<DrawerOverlay />", () => {
           handleTouchStart={noop}
           handleTouchMove={noop}
           handleTouchEnd={noop}
+          style={{ zIndex: 1 }}
         />
       );
       const tree = component.toJSON();
@@ -54,6 +56,7 @@ describe("<DrawerOverlay />", () => {
         handleTouchStart={noop}
         handleTouchMove={noop}
         handleTouchEnd={noop}
+        style={{ zIndex: 1 }}
       />
     );
     const tree = component.toJSON();

src/MainContentContainer.js

@@ -7,6 +7,8 @@ const MainContentContainer = ({ translation, mainContentScroll, children }) => {
       ? {
           position: "fixed",
           top: -mainContentScroll,
+          left: 0,
+          right: 0,
         }
       : {};
 

src/__snapshots__/DrawerContainer.test.js.snap

@@ -37,7 +37,7 @@ exports[`<DrawerContainer /> renders correctly 1`] = `
         "transform": "translateX(0%)",
         "transition": "transform .2s ease-in-out",
         "width": "80%",
-        "zIndex": 1,
+        "zIndex": 2,
       }
     }
   >

src/__snapshots__/DrawerContentContainer.test.js.snap

@@ -15,7 +15,7 @@ exports[`<DrawerContentContainer /> renders correctly when closed 1`] = `
       "transform": "translateX(0%)",
       "transition": "transform .2s ease-in-out",
       "width": "80%",
-      "zIndex": 1,
+      "zIndex": 2,
     }
   }
 >
@@ -38,7 +38,7 @@ exports[`<DrawerContentContainer /> renders correctly when swiping down 1`] = `
       "top": "-80%",
       "transform": "translateY(50%)",
       "transition": "",
-      "zIndex": 1,
+      "zIndex": 2,
     }
   }
 >
@@ -61,7 +61,7 @@ exports[`<DrawerContentContainer /> renders correctly when swiping left 1`] = `
       "transform": "translateX(-50%)",
       "transition": "",
       "width": "80%",
-      "zIndex": 1,
+      "zIndex": 2,
     }
   }
 >
@@ -84,7 +84,7 @@ exports[`<DrawerContentContainer /> renders correctly when swiping right 1`] = `
       "transform": "translateX(50%)",
       "transition": "",
       "width": "80%",
-      "zIndex": 1,
+      "zIndex": 2,
     }
   }
 >
@@ -107,7 +107,7 @@ exports[`<DrawerContentContainer /> renders correctly when up 1`] = `
       "right": 0,
       "transform": "translateY(-50%)",
       "transition": "",
-      "zIndex": 1,
+      "zIndex": 2,
     }
   }
 >

src/__snapshots__/MainContentContainer.test.js.snap

@@ -14,7 +14,9 @@ exports[`<MainContentContainer /> renders correctly when swiping 1`] = `
   className="MainContentContainer"
   style={
     Object {
+      "left": 0,
       "position": "fixed",
+      "right": 0,
       "top": -100,
     }
   }