refactor: improved drawer types & fixed drawer bugs (#68)

* refactor: improved drawer types & fixed drawer bugs * Apply suggestions from code review chore: review updates Co-authored-by: Navin Moorthy <[email protected]> * chore: review updates Co-authored-by: Navin Moorthy <[email protected]>
adaptui · Oct 5, 2020 · 4dc06ef · 4dc06ef
1 parent 66fb5a1
commit 4dc06ef
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 54 deletions.
diff --git a/src/drawer/Drawer.ts b/src/drawer/Drawer.ts
@@ -32,19 +32,23 @@ const PLACEMENTS = {
 
 export type TPlacement = keyof typeof PLACEMENTS;
 
-const useDrawer = createHook<
-  DialogOptions & { placement?: TPlacement },
-  DialogHTMLProps
->({
+export type DrawerOptions = DialogOptions & { placement?: TPlacement };
+
+export type DrawerHTMLProps = DialogHTMLProps;
+
+export type DrawerProps = DrawerOptions & DrawerHTMLProps;
+
+const useDrawer = createHook<DrawerOptions, DrawerHTMLProps>({
   name: "Drawer",
-  compose: [useDialog],
-  keys: [...DRAWER_KEYS, "placement"],
+  compose: useDialog,
+  keys: DRAWER_KEYS,
+
   useProps({ placement = "left" }, { style: htmlStyles, ...htmlProps }) {
     return {
       style: {
         ...PLACEMENTS[placement],
         position: "fixed",
-        htmlStyles,
+        ...htmlStyles,
       },
       ...htmlProps,
     };

diff --git a/src/drawer/DrawerCloseButton.ts b/src/drawer/DrawerCloseButton.ts
@@ -1,22 +1,32 @@
-import { callAllHandlers } from "@chakra-ui/utils";
 import { createHook, createComponent } from "reakit-system";
-import { useButton, DialogStateReturn, ButtonProps } from "reakit";
+import {
+  useButton,
+  ButtonProps,
+  useDialogDisclosure,
+  DialogDisclosureOptions,
+  DialogDisclosureHTMLProps,
+} from "reakit";
 
-import { DRAWER_KEYS } from "./__keys";
+import { DRAWER_CLOSE_BUTTON_KEYS } from "./__keys";
+
+export type DrawerCloseButtonOptions = DialogDisclosureOptions;
+
+export type DrawerCloseButtonHTMLProps = ButtonProps &
+  DialogDisclosureHTMLProps;
+
+export type DrawerCloseButtonProps = DrawerCloseButtonOptions &
+  DrawerCloseButtonHTMLProps;
 
 export const useDrawerCloseButton = createHook<
-  Pick<DialogStateReturn, "hide">,
-  ButtonProps
+  DrawerCloseButtonOptions,
+  DrawerCloseButtonHTMLProps
 >({
   name: "DrawerCloseButton",
-  compose: useButton,
-  keys: [...DRAWER_KEYS, "hide"],
+  compose: useDialogDisclosure,
+  keys: DRAWER_CLOSE_BUTTON_KEYS,
 
-  useProps({ hide }, { onClick: htmlOnClick, ...htmlProps }) {
-    return {
-      onClick: callAllHandlers(hide, htmlOnClick),
-      ...htmlProps,
-    };
+  useProps(options, htmlProps) {
+    return htmlProps;
   },
 });
 

diff --git a/src/drawer/__keys.ts b/src/drawer/__keys.ts
@@ -1,31 +1,3 @@
-const DRAWER_STATE_KEYS = [
-  "baseId",
-  "unstable_idCountRef",
-  "visible",
-  "animated",
-  "animating",
-  "setBaseId",
-  "show",
-  "hide",
-  "toggle",
-  "setVisible",
-  "setAnimated",
-  "stopAnimation",
-  "modal",
-  "unstable_disclosureRef",
-  "setModal",
-] as const;
-
-export const DRAWER_KEYS = [
-  ...DRAWER_STATE_KEYS,
-  "hideOnEsc",
-  "hideOnClickOutside",
-  "preventBodyScroll",
-  "unstable_initialFocusRef",
-  "unstable_finalFocusRef",
-  "unstable_orphan",
-  "unstable_autoFocusOnShow",
-  "unstable_autoFocusOnHide",
-] as const;
-export const DRAWER_BACKDROP_KEYS = DRAWER_STATE_KEYS;
-export const DRAWER_DISCLOSURE_KEYS = DRAWER_BACKDROP_KEYS;
+// Automatically generated
+export const DRAWER_KEYS = ["placement"] as const;
+export const DRAWER_CLOSE_BUTTON_KEYS = [] as const;
diff --git a/src/drawer/stories/Drawer.stories.tsx b/src/drawer/stories/Drawer.stories.tsx
@@ -44,19 +44,21 @@ export const Default = () => {
   return (
     <div>
       <DrawerDisclosure {...dialog}>Open Drawer</DrawerDisclosure>
-      <select onBlur={e => setPlacement(e.target.value as TPlacement)}>
+      <select
+        defaultValue={placement}
+        onBlur={e => setPlacement(e.target.value as TPlacement)}
+      >
         <option value="top">Top</option>
         <option value="bottom">Bottom</option>
         <option value="right">Right</option>
-        <option selected value="left">
-          Left
-        </option>
+        <option value="left">Left</option>
       </select>
       <DrawerBackdrop className={backdropStyles} {...dialog}>
         <Drawer
           {...dialog}
           placement={placement}
           aria-label="Hello world"
+          style={{ color: "red" }}
           className={css`
             opacity: 0;
             padding: 10px;