diff --git a/.all-contributorsrc b/.all-contributorsrc index 184cdac..6b3ea99 100644 --- a/.all-contributorsrc +++ b/.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" } diff --git a/.eslintrc.json b/.eslintrc.json index c4ce289..5e6a5f3 100644 --- a/.eslintrc.json +++ b/.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": { diff --git a/README.md b/README.md index 952f0d0..c8eeffa 100644 --- a/README.md +++ b/README.md @@ -107,9 +107,18 @@ Alternatively, you can look at the code for [``](./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 + +`` requires all the props passed down by the `` render function. It also accepts two optionnal props: + +* `overlayStyle` (object): overrides the `` style +* `contentStyle` (object): overrides the `` 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]): -| [
Damien Varron](https://github.com/damusnet)
[💻](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") | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | - + +| [
Damien Varron](https://github.com/damusnet)
[💻](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") | [
Oscar Martinez](http://mtnz-web.com)
[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=ooHmartY "Code") | +| :---: | :---: | diff --git a/src/DrawerContainer.js b/src/DrawerContainer.js index 3170b01..de5c800 100644 --- a/src/DrawerContainer.js +++ b/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} /> ); @@ -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: {}, }; diff --git a/src/DrawerContainer.test.js b/src/DrawerContainer.test.js index 451863a..cbd0e5a 100644 --- a/src/DrawerContainer.test.js +++ b/src/DrawerContainer.test.js @@ -18,6 +18,8 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + overlayStyle={{ zIndex: 1 }} + contentStyle={{ zIndex: 2 }} /> ); const tree = component.toJSON(); diff --git a/src/DrawerContentContainer.js b/src/DrawerContentContainer.js index 2062b05..1a388df 100644 --- a/src/DrawerContentContainer.js +++ b/src/DrawerContentContainer.js @@ -48,6 +48,7 @@ const DrawerContentContainer = ({ handleTouchMove, handleTouchEnd, drawerContent, + style, }) => (
{drawerContent} @@ -76,4 +78,5 @@ DrawerContentContainer.propTypes = { handleTouchMove: PropTypes.func.isRequired, handleTouchEnd: PropTypes.func.isRequired, drawerContent: PropTypes.element.isRequired, + style: PropTypes.object.isRequired, }; diff --git a/src/DrawerContentContainer.test.js b/src/DrawerContentContainer.test.js index 28954ae..1bbf8aa 100644 --- a/src/DrawerContentContainer.test.js +++ b/src/DrawerContentContainer.test.js @@ -17,6 +17,7 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + style={{ zIndex: 2 }} /> ); const tree = component.toJSON(); @@ -34,6 +35,7 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + style={{ zIndex: 2 }} /> ); const tree = component.toJSON(); @@ -51,6 +53,7 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + style={{ zIndex: 2 }} /> ); const tree = component.toJSON(); @@ -68,6 +71,7 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + style={{ zIndex: 2 }} /> ); const tree = component.toJSON(); @@ -85,6 +89,7 @@ describe("", () => { handleTouchMove={noop} handleTouchEnd={noop} drawerContent={
} + style={{ zIndex: 2 }} /> ); const tree = component.toJSON(); diff --git a/src/DrawerOverlay.js b/src/DrawerOverlay.js index ee4f873..f21cd26 100644 --- a/src/DrawerOverlay.js +++ b/src/DrawerOverlay.js @@ -54,6 +54,7 @@ const DrawerOverlay = ({ handleTouchStart, handleTouchMove, handleTouchEnd, + style, }) => (
); @@ -82,4 +84,5 @@ DrawerOverlay.propTypes = { handleTouchStart: PropTypes.func.isRequired, handleTouchMove: PropTypes.func.isRequired, handleTouchEnd: PropTypes.func.isRequired, + style: PropTypes.object.isRequired, }; diff --git a/src/DrawerOverlay.test.js b/src/DrawerOverlay.test.js index dcde616..c945e58 100644 --- a/src/DrawerOverlay.test.js +++ b/src/DrawerOverlay.test.js @@ -19,6 +19,7 @@ describe("", () => { handleTouchStart={noop} handleTouchMove={noop} handleTouchEnd={noop} + style={{ zIndex: 1 }} /> ); const tree = component.toJSON(); @@ -36,6 +37,7 @@ describe("", () => { handleTouchStart={noop} handleTouchMove={noop} handleTouchEnd={noop} + style={{ zIndex: 1 }} /> ); const tree = component.toJSON(); @@ -54,6 +56,7 @@ describe("", () => { handleTouchStart={noop} handleTouchMove={noop} handleTouchEnd={noop} + style={{ zIndex: 1 }} /> ); const tree = component.toJSON(); diff --git a/src/MainContentContainer.js b/src/MainContentContainer.js index 4b82d17..c16a7d8 100644 --- a/src/MainContentContainer.js +++ b/src/MainContentContainer.js @@ -7,6 +7,8 @@ const MainContentContainer = ({ translation, mainContentScroll, children }) => { ? { position: "fixed", top: -mainContentScroll, + left: 0, + right: 0, } : {}; diff --git a/src/__snapshots__/DrawerContainer.test.js.snap b/src/__snapshots__/DrawerContainer.test.js.snap index 510e064..7664edc 100644 --- a/src/__snapshots__/DrawerContainer.test.js.snap +++ b/src/__snapshots__/DrawerContainer.test.js.snap @@ -37,7 +37,7 @@ exports[` renders correctly 1`] = ` "transform": "translateX(0%)", "transition": "transform .2s ease-in-out", "width": "80%", - "zIndex": 1, + "zIndex": 2, } } > diff --git a/src/__snapshots__/DrawerContentContainer.test.js.snap b/src/__snapshots__/DrawerContentContainer.test.js.snap index f9a5cca..c3acc1b 100644 --- a/src/__snapshots__/DrawerContentContainer.test.js.snap +++ b/src/__snapshots__/DrawerContentContainer.test.js.snap @@ -15,7 +15,7 @@ exports[` 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[` renders correctly when swiping down 1`] = ` "top": "-80%", "transform": "translateY(50%)", "transition": "", - "zIndex": 1, + "zIndex": 2, } } > @@ -61,7 +61,7 @@ exports[` renders correctly when swiping left 1`] = ` "transform": "translateX(-50%)", "transition": "", "width": "80%", - "zIndex": 1, + "zIndex": 2, } } > @@ -84,7 +84,7 @@ exports[` renders correctly when swiping right 1`] = ` "transform": "translateX(50%)", "transition": "", "width": "80%", - "zIndex": 1, + "zIndex": 2, } } > @@ -107,7 +107,7 @@ exports[` renders correctly when up 1`] = ` "right": 0, "transform": "translateY(-50%)", "transition": "", - "zIndex": 1, + "zIndex": 2, } } > diff --git a/src/__snapshots__/MainContentContainer.test.js.snap b/src/__snapshots__/MainContentContainer.test.js.snap index ab8b6f1..ead1578 100644 --- a/src/__snapshots__/MainContentContainer.test.js.snap +++ b/src/__snapshots__/MainContentContainer.test.js.snap @@ -14,7 +14,9 @@ exports[` renders correctly when swiping 1`] = ` className="MainContentContainer" style={ Object { + "left": 0, "position": "fixed", + "right": 0, "top": -100, } }