From 027fab7e31e79b71e53ee9095e5fa7f158208dd7 Mon Sep 17 00:00:00 2001 From: AkinAguda Date: Sun, 8 Aug 2021 20:42:39 +0100 Subject: [PATCH 1/3] added optinal classname and ability to pass function as child --- README.md | 47 +++++++++++++++++++++++++----------- src/Dropdown.tsx | 18 +++++++++++--- src/index.tsx | 10 ++++++-- src/types.ts | 13 ++++++++++ stories/Dropdown.stories.tsx | 22 +++++++++++++++++ 5 files changed, 91 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 53cf988..6123421 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,21 @@ and use as: ``` +or + +```jsx +Click}> + {({ hide }) => ( + + )} + +``` + > **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 > -
I am random
-
I am random
-
I am random
+
+
I am random
+
I am random
+
I am random
+
``` @@ -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/src/Dropdown.tsx b/src/Dropdown.tsx index f02f54f..e68350b 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -12,9 +12,15 @@ const DropDown: React.FC = ({ show, style, dropdownRef, + makeDisappear, + displayMenuItem, + dropdownWrapperClassName, + dropdownMenuClassName, }) => (
{}} @@ -27,11 +33,17 @@ const DropDown: React.FC = ({
- {children} + {typeof children === 'function' + ? children({ + show: displayMenuItem, + hide: makeDisappear, + open: show, + }) + : children}
); diff --git a/src/index.tsx b/src/index.tsx index 185f17c..b3f6c33 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,6 +18,8 @@ const UnopDropdown: React.FC = ({ hover, closeOnClickOut = false, closeOnDropdownClicked = false, + dropdownWrapperClassName, + dropdownMenuClassName, }) => { const [show, setShow] = useState(false); @@ -62,14 +64,14 @@ const UnopDropdown: React.FC = ({ }; }, [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 = ({ style={Utility.getStyleObject(align, dropdownWidth.current)} dropdownMenuRef={dropdownMenuRef} dropdownRef={dropdownRef} + makeDisappear={makeDisappear} + displayMenuItem={displayMenuItem} + dropdownWrapperClassName={dropdownWrapperClassName} + dropdownMenuClassName={dropdownMenuClassName} > {children} diff --git a/src/types.ts b/src/types.ts index 56aa7b4..c7d9ed1 100644 --- 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; dropdownRef: React.RefObject; + makeDisappear: (e?: CustomMouseEvent) => void; + displayMenuItem: (e?: CustomMouseEvent) => void; } export enum DropDowndirections { diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx index 32f92f3..d3011ee 100644 --- a/stories/Dropdown.stories.tsx +++ b/stories/Dropdown.stories.tsx @@ -69,6 +69,22 @@ const AdditionalLogicTemplate: Story = (args) => { ); }; +const FunctionChildTemplate: Story = (args) => { + return ( +
+ + {({ hide }) => ( +
    +
  • + +
    • +
+ )} + +
+ ); +}; + export const Default = Template.bind({}); Default.args = { @@ -126,3 +142,9 @@ UsingAppearanceEvents.args = { onDisappearStart: () => {}, onAppear: () => {}, }; + +export const PassingDownHelpersToChild = FunctionChildTemplate.bind({}); + +PassingDownHelpersToChild.args = { + ...Default.args, +}; From 8740b005044ca8192296b3f39420dc0b5c3a89f5 Mon Sep 17 00:00:00 2001 From: AkinAguda Date: Sun, 8 Aug 2021 21:25:06 +0100 Subject: [PATCH 2/3] converted type to function --- src/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index e68350b..59b5ab1 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -38,7 +38,7 @@ const DropDown: React.FC = ({ ref={dropdownMenuRef} > {typeof children === 'function' - ? children({ + ? (children as Function)({ show: displayMenuItem, hide: makeDisappear, open: show, From ee891f0f007fff184b80052353619c2b91eaff7b Mon Sep 17 00:00:00 2001 From: AkinAguda Date: Sun, 8 Aug 2021 21:31:56 +0100 Subject: [PATCH 3/3] bumped up version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5e6ac37..cf41e18 100644 --- 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",