-
Notifications
You must be signed in to change notification settings - Fork 0
/
useSidePanel.tsx
50 lines (39 loc) · 1.7 KB
/
useSidePanel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { useCallback, useMemo, useState } from "react";
import SidePanel from "SidePanel";
export default function useSidePanel({ onOpen, onClose, onHide, content, props = {} }: useSidePanelProps = {}) {
const [isActive, setActive] = useState(false);
const { openSidePanel, closeSidePanel, hideSidePanel } = useMemo(() => {
const openSidePanel = (...args: any[]) => {
typeof onOpen === "function" && onOpen(...args);
setActive(true);
};
const closeSidePanel = (...args: any[]) => {
typeof onClose === "function" && onClose(...args);
setActive(false);
};
const hideSidePanel = (...args: any[]) => {
typeof onHide === "function" && onHide(...args);
setActive(false);
};
return { openSidePanel, closeSidePanel, hideSidePanel };
}, [onHide, onClose, onOpen]);
const renderSidePanel = useCallback((sidePanelProps = {}) => {
if(!isActive)
return null;
const SidePanelContent = content as React.ElementType;
const sidePanelContentProps = Object.assign(props, sidePanelProps);
return (
<SidePanel close={ closeSidePanel } hide={ hideSidePanel } { ...sidePanelContentProps }>
{ content && (<SidePanelContent close={ closeSidePanel } hide={ hideSidePanel } { ...sidePanelContentProps }/>) }
</SidePanel>
);
}, [isActive, props, closeSidePanel, hideSidePanel]);
return { openSidePanel, closeSidePanel, hideSidePanel, renderSidePanel };
}
type useSidePanelProps = {
onOpen?: Function,
onClose?: Function,
onHide?: Function,
content?: React.ReactNode,
props?: object,
};