Support top/bottom/left/right drawer direction (#187)

* Support top/bottom/left/right drawer direction

* Fix for ts errors

* Use clsx and rerun prettier

README.md

@@ -60,6 +60,8 @@ Additional props:
 
 `modal`: When `false`it allows to interact with elements outside of the drawer without closing it. Defaults to`true`.
 
+`direction`: Direction of the drawer. Can be `top` or `bottom`, `left`, `right`. Defaults to `bottom`.
+
 `preventScrollRestoration`: When `true` it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to `true`.
 
 ### Trigger

src/context.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerDirection } from './types';
 
 interface DrawerContextValue {
   drawerRef: React.RefObject<HTMLDivElement>;
@@ -24,6 +25,7 @@ interface DrawerContextValue {
   setVisible: (o: boolean) => void;
   openProp?: boolean;
   onOpenChange?: (o: boolean) => void;
+  direction?: DrawerDirection;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({
@@ -50,6 +52,7 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   visible: false,
   closeDrawer: () => {},
   setVisible: () => {},
+  direction: 'bottom',
 });
 
 export const useDrawerContext = () => React.useContext(DrawerContext);

src/helpers.ts

@@ -1,3 +1,5 @@
+import { DrawerDirection } from './types';
+
 interface Style {
   [key: string]: string;
 }
@@ -54,15 +56,32 @@ export function reset(el: Element | HTMLElement | null, prop?: string) {
   }
 }
 
-export function getTranslateY(element: HTMLElement): number | null {
+export const isVertical = (direction: DrawerDirection) => {
+  switch (direction) {
+    case 'top':
+    case 'bottom':
+      return true;
+    case 'left':
+    case 'right':
+      return false;
+    default:
+      return direction satisfies never;
+  }
+};
+
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
   const style = window.getComputedStyle(element);
   const transform =
     // @ts-ignore
     style.transform || style.webkitTransform || style.mozTransform;
   let mat = transform.match(/^matrix3d\((.+)\)$/);
-  if (mat) return parseFloat(mat[1].split(', ')[13]);
+  if (mat) {
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+    return parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12]);
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
   mat = transform.match(/^matrix\((.+)\)$/);
-  return mat ? parseFloat(mat[1].split(', ')[5]) : null;
+  return mat ? parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null;
 }
 
 export function dampenValue(v: number) {