Merge pull request #15 from AkinAguda/development

Development
AkinAguda · Aug 8, 2021 · 2192de4 · 2192de4
2 parents 937c588 + ee891f0
commit 2192de4
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -62,6 +62,21 @@ and use as:
 </UnopDropdown>
 ```
 
+or
+
+```jsx
+<UnopDropdown trigger={<button>Click</button>}>
+  {({ hide }) => (
+    <ul>
+      <li>
+        <button onClick={hide}>click me to hide dropdown</button>
+      </li>
+      <li>List item 2</li>
+    </ul>
+  )}
+</UnopDropdown>
+```
+
 > **trigger** is the minimum required prop
 > To implement the other props, they can be passed as such:
 
@@ -74,9 +89,11 @@ and use as:
   align="CENTER"
   hover
 >
-  <div>I am random</div>
-  <div>I am random</div>
-  <div>I am random</div>
+  <div>
+    <div>I am random</div>
+    <div>I am random</div>
+    <div>I am random</div>
+  </div>
 </UnopDropdown>
 ```
 
@@ -97,17 +114,19 @@ Full list of component props, and their options can be found [here](#api)
 
 ### Component props
 
-| Prop                   | Type                          | Default | Description                                                                                                                                     |
-| ---------------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| trigger                | Jsx.Element                   | none    | This is the only compulsory prop. This will be passed an onClick to handle the toggling when it is rendered. This should prefarably be a button |
-| align                  | 'RIGHT' or 'LEFT' or 'CENTER' | 'LEFT'  | When 'RIGHT', the dropdown will be rendered below the trigger, aligned to the right. When 'CENTER', the dropdown will be aligned to the center  |
-| onAppear               | function                      | null    | This will be called when the dropdown is visible                                                                                                |
-| onDisappear            | function                      | null    | This will be called when the dropdown is invisible                                                                                              |
-| onDisappearStart       | function                      | null    | This will be called when the timeout to diappear(become invisible) starts                                                                       |
-| delay                  | number                        | 0       | This is the delay in milliseconds before the dropdown goes invisible                                                                            |
-| hover                  | boolean                       | false   | When true, the dropdown will become visible on hover                                                                                            |
-| closeOnClickOut        | boolean                       | false   | When true, this closes the dropdown when the user clicks on any element that is outside the dropdown                                            |
-| closeOnDropdownClicked | boolean                       | false   | When true, this closes the dropdown when any area in the dropdown is clicked                                                                    |
+| Prop                     | Type                          | Default | Description                                                                                                                                     |
+| ------------------------ | ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| trigger                  | Jsx.Element                   | none    | This is the only compulsory prop. This will be passed an onClick to handle the toggling when it is rendered. This should prefarably be a button |
+| align                    | 'RIGHT' or 'LEFT' or 'CENTER' | 'LEFT'  | When 'RIGHT', the dropdown will be rendered below the trigger, aligned to the right. When 'CENTER', the dropdown will be aligned to the center  |
+| onAppear                 | function                      | null    | This will be called when the dropdown is visible                                                                                                |
+| onDisappear              | function                      | null    | This will be called when the dropdown is invisible                                                                                              |
+| onDisappearStart         | function                      | null    | This will be called when the timeout to diappear(become invisible) starts                                                                       |
+| delay                    | number                        | 0       | This is the delay in milliseconds before the dropdown goes invisible                                                                            |
+| hover                    | boolean                       | false   | When true, the dropdown will become visible on hover                                                                                            |
+| closeOnClickOut          | boolean                       | false   | When true, this closes the dropdown when the user clicks on any element that is outside the dropdown                                            |
+| closeOnDropdownClicked   | boolean                       | false   | When true, this closes the dropdown when any area in the dropdown is clicked                                                                    |
+| dropdownWrapperClassName | string                        | ""      | An optional className that weaps around the Dropdown Wrapper                                                                                    |
+| dropdownMenuClassName    | string                        | ""      | An optional className that weaps around the Dropdown Menu                                                                                       |
 
 ### License
 

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
@@ -12,9 +12,15 @@ const DropDown: React.FC<DropDownProps> = ({
   show,
   style,
   dropdownRef,
+  makeDisappear,
+  displayMenuItem,
+  dropdownWrapperClassName,
+  dropdownMenuClassName,
 }) => (
   <div
-    className="UnopdropDown_EMFQP"
+    className={`UnopdropDown_EMFQP${
+      dropdownWrapperClassName ? ` ${dropdownWrapperClassName}` : ''
+    }`}
     onMouseLeave={handleMouseLeave}
     onMouseOver={handleMouseOver}
     onFocus={() => {}}
@@ -27,11 +33,17 @@ const DropDown: React.FC<DropDownProps> = ({
     <div
       className={`drop-down-menu_EMFQP${
         show ? ' reveal-drop-down-menu_EMFQP' : ''
-      }`}
+      }${dropdownMenuClassName ? ` ${dropdownMenuClassName}` : ''}`}
       style={style}
       ref={dropdownMenuRef}
     >
-      {children}
+      {typeof children === 'function'
+        ? (children as Function)({
+            show: displayMenuItem,
+            hide: makeDisappear,
+            open: show,
+          })
+        : children}
     </div>
   </div>
 );

diff --git a/src/index.tsx b/src/index.tsx
@@ -18,6 +18,8 @@ const UnopDropdown: React.FC<UnopDropdownProps> = ({
   hover,
   closeOnClickOut = false,
   closeOnDropdownClicked = false,
+  dropdownWrapperClassName,
+  dropdownMenuClassName,
 }) => {
   const [show, setShow] = useState(false);
 
@@ -62,14 +64,14 @@ const UnopDropdown: React.FC<UnopDropdownProps> = ({
     };
   }, [show]);
 
-  const displayMenuItem = (e: CustomMouseEvent) => {
+  const displayMenuItem = (e?: CustomMouseEvent) => {
     if (timer) clearTimeout(timer.current!);
     timer.current = null;
     setShow(true);
     if (onAppear) onAppear(e);
   };
 
-  const makeDisappear = (e: CustomMouseEvent) => {
+  const makeDisappear = (e?: CustomMouseEvent) => {
     const timerFunc = () =>
       setTimeout(() => {
         setShow(false);
@@ -111,6 +113,10 @@ const UnopDropdown: React.FC<UnopDropdownProps> = ({
       style={Utility.getStyleObject(align, dropdownWidth.current)}
       dropdownMenuRef={dropdownMenuRef}
       dropdownRef={dropdownRef}
+      makeDisappear={makeDisappear}
+      displayMenuItem={displayMenuItem}
+      dropdownWrapperClassName={dropdownWrapperClassName}
+      dropdownMenuClassName={dropdownMenuClassName}
     >
       {children}
     </DropDown>

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,16 @@
+import React from 'react';
+
 export interface CommonProps {
   trigger: JSX.Element;
+  dropdownWrapperClassName?: string;
+  dropdownMenuClassName?: string;
+  children:
+    | React.ReactNode
+    | ((value: {
+        show: (e?: any) => void;
+        hide: (e?: any) => void;
+        open: boolean;
+      }) => React.ReactNode);
 }
 
 export type CustomMouseEvent =
@@ -14,6 +25,8 @@ export interface DropDownProps extends CommonProps {
   style: React.CSSProperties;
   dropdownMenuRef: React.RefObject<HTMLDivElement>;
   dropdownRef: React.RefObject<HTMLDivElement>;
+  makeDisappear: (e?: CustomMouseEvent) => void;
+  displayMenuItem: (e?: CustomMouseEvent) => void;
 }
 
 export enum DropDowndirections {

diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx
@@ -69,6 +69,22 @@ const AdditionalLogicTemplate: Story<UnopDropdownProps> = (args) => {
   );
 };
 
+const FunctionChildTemplate: Story<UnopDropdownProps> = (args) => {
+  return (
+    <div style={dropdownWrapperStyles}>
+      <UnopDropdown {...args}>
+        {({ hide }) => (
+          <ul style={dropdownStyles}>
+            <li>
+              <button onClick={hide}>Click me to close dropdown</button>
+            </li>
+          </ul>
+        )}
+      </UnopDropdown>
+    </div>
+  );
+};
+
 export const Default = Template.bind({});
 
 Default.args = {
@@ -126,3 +142,9 @@ UsingAppearanceEvents.args = {
   onDisappearStart: () => {},
   onAppear: () => {},
 };
+
+export const PassingDownHelpersToChild = FunctionChildTemplate.bind({});
+
+PassingDownHelpersToChild.args = {
+  ...Default.args,
+};