Merge pull request #10 from vtex-apps/feature/slide-right-to-left

Enable the Drawer to open from right to left
vtex-apps · Nov 6, 2019 · 49c5db2 · 49c5db2
2 parents 945c087 + 946224c
commit 49c5db2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Support for new values for `slideDirection` prop: `'rightToLeft'` and `'leftToRight'`.
 
 ## [0.3.0] - 2019-10-18
 ### Added

diff --git a/README.md b/README.md
diff --git a/docs/README.md b/docs/README.md
@@ -60,23 +60,23 @@ The Drawer component accepts a few props that allow you to customize it.
 | ---------------- | -------------------- | ------------------------------------------------------------------------------------ | -------------- |
 | `maxWidth`       | `Number` or `String` | Define the open Drawer's maximum width.                                              | `450`          |
 | `isFullWidth`    | `Boolean`            | Control whether or not the open Drawer should occupy the full available width.       | `false`        |
-| `slideDirection` | `Enum`               | Controls the opening animation's direction. (values: `'vertical'` or `'horizontal'`) | `'horizontal'` |
+| `slideDirection` | `'horizontal'`&#124;`'vertical'`&#124;`'rightToLeft'`&#124;`'leftToRight'`             | Controls the opening animation's direction. | `'horizontal'` |
 
 ### Styles API
 
 This app provides some CSS classes as an API for style customization.
 
 To use this CSS API, you must add the `styles` builder and create an app styling CSS file.
 
-1. Add the `styles` builder to your `manifest.json`:
+- Add the `styles` builder to your `manifest.json`:
 
 ```json
-  "builders": {
-    "styles": "1.x"
-  }
+"builders": {
+  "styles": "1.x"
+}
 ```
 
-2. Create a file called `vtex.store-drawer.css` inside the `styles/css` folder and add your custom using regular CSS.
+- Create a file called `vtex.store-drawer.css` inside the `styles/css` folder and add your custom using regular CSS.
 
 #### CSS Namespaces
 

diff --git a/react/Drawer.tsx b/react/Drawer.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect, ReactElement } from 'react'
 import { defineMessages } from 'react-intl'
 
 import { IconClose, IconMenu } from 'vtex.store-icons'
@@ -122,15 +122,18 @@ const CSS_HANDLES = [
   'closeIconButton',
 ]
 
-const Drawer: StorefrontComponent<DrawerSchema> = ({
+const Drawer: StorefrontComponent<
+  DrawerSchema & { customIcon: ReactElement }
+> = ({
   // actionIconId,
   // dismissIconId,
   // position,
-  // width,
   // height,
+  width,
+  customIcon,
   maxWidth = 450,
   isFullWidth,
-  slideDirection,
+  slideDirection = 'horizontal',
   children,
 }) => {
   const {
@@ -140,15 +143,30 @@ const Drawer: StorefrontComponent<DrawerSchema> = ({
     closeMenu,
   } = useMenuState()
   const handles = useCssHandles(CSS_HANDLES)
-
   const menuRef = useRef(null)
+
   const slideFromTopToBottom = `translate3d(0, ${
     isMenuOpen ? '0' : '-100%'
   }, 0)`
   const slideFromLeftToRight = `translate3d(${
     isMenuOpen ? '0' : '-100%'
   }, 0, 0)`
-  const isVertical = slideDirection === 'vertical'
+  const slideFromRightToLeft = `translate3d(${isMenuOpen ? '0' : '100%'}, 0, 0)`
+
+  const resolveSlideDirection = () => {
+    switch (slideDirection) {
+      case 'horizontal':
+        return slideFromLeftToRight
+      case 'vertical':
+        return slideFromTopToBottom
+      case 'leftToRight':
+        return slideFromLeftToRight
+      case 'rightToLeft':
+        return slideFromRightToLeft
+      default:
+        return slideFromLeftToRight
+    }
+  }
 
   return (
     <>
@@ -157,39 +175,41 @@ const Drawer: StorefrontComponent<DrawerSchema> = ({
         onClick={openMenu}
         aria-hidden
       >
-        <IconMenu size={20} />
+        {customIcon || <IconMenu size={20} />}
       </div>
       <Portal>
         <Overlay visible={isMenuOpen} onClick={closeMenu} />
 
         <Swipable
           enabled={isMenuOpen}
           element={menuRef && menuRef.current}
-          onSwipeLeft={closeMenu}
+          onSwipeLeft={
+            slideDirection === 'horizontal' || slideDirection === 'leftToRight'
+              ? closeMenu
+              : null
+          }
+          onSwipeRight={slideDirection === 'rightToLeft' ? closeMenu : null}
+          rubberBanding
         >
           <div
             ref={menuRef}
-            className={`${
-              handles.drawer
-            } fixed top-0 left-0 bottom-0 bg-base z-999 flex flex-column`}
+            className={`${handles.drawer} fixed top-0 ${
+              slideDirection === 'rightToLeft' ? 'right-0' : 'left-0'
+            } bottom-0 bg-base z-999 flex flex-column`}
             style={{
               WebkitOverflowScrolling: 'touch',
               overflowY: 'scroll',
-              width: isFullWidth ? '100%' : '85%',
+              width: width || (isFullWidth ? '100%' : '85%'),
               maxWidth,
               pointerEvents: isMenuOpen ? 'auto' : 'none',
-              transform: isVertical
-                ? slideFromTopToBottom
-                : slideFromLeftToRight,
+              transform: resolveSlideDirection(),
               transition: isMenuTransitioning ? 'transform 300ms' : 'none',
               minWidth: 280,
             }}
           >
             <div className={`flex ${handles.closeIconContainer}`}>
               <button
-                className={`pa4 pointer bg-transparent transparent bn pointer ${
-                  handles.closeIconButton
-                }`}
+                className={`pa4 pointer bg-transparent transparent bn pointer ${handles.closeIconButton}`}
                 onClick={closeMenu}
               >
                 <IconClose size={30} type="line" />

diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts
@@ -20,7 +20,7 @@ declare global {
     position: Position
     width: '100%' | 'auto'
     height: '100%' | 'auto' | 'fullscreen'
-    slideDirection: 'vertical' | 'horizontal'
+    slideDirection: 'vertical' | 'horizontal' | 'rightToLeft' | 'leftToRight'
     isFullWidth: boolean
     maxWidth: number | string
   }