-
Notifications
You must be signed in to change notification settings - Fork 496
/
Panel.tsx
115 lines (100 loc) · 3.07 KB
/
Panel.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/** @jsx h */
import { h } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';
import cx from 'classnames';
import Template from '../Template/Template';
import type {
PanelCSSClasses,
PanelTemplates,
} from '../../widgets/panel/panel';
import type {
ComponentCSSClasses,
RenderOptions,
UnknownWidgetFactory,
} from '../../types';
export type PanelComponentCSSClasses = ComponentCSSClasses<
// `collapseIcon` is only used in the default templates of the widget
Omit<PanelCSSClasses, 'collapseIcon'>
>;
export type PanelComponentTemplates<TWidget extends UnknownWidgetFactory> =
Required<PanelTemplates<TWidget>>;
export type PanelProps<TWidget extends UnknownWidgetFactory> = {
hidden: boolean;
collapsible: boolean;
isCollapsed: boolean;
data: RenderOptions | Record<string, never>;
cssClasses: PanelComponentCSSClasses;
templates: PanelComponentTemplates<TWidget>;
bodyElement: HTMLElement;
};
function Panel<TWidget extends UnknownWidgetFactory>(
props: PanelProps<TWidget>
) {
const [isCollapsed, setIsCollapsed] = useState<boolean>(props.isCollapsed);
const [isControlled, setIsControlled] = useState<boolean>(false);
const bodyRef = useRef<HTMLElement | null>(null);
useEffect(() => {
const node = bodyRef.current;
if (!node) {
return undefined;
}
node.appendChild(props.bodyElement);
return () => {
node.removeChild(props.bodyElement);
};
}, [bodyRef, props.bodyElement]);
if (!isControlled && props.isCollapsed !== isCollapsed) {
setIsCollapsed(props.isCollapsed);
}
return (
<div
className={cx(props.cssClasses.root, {
[props.cssClasses.noRefinementRoot]: props.hidden,
[props.cssClasses.collapsibleRoot]: props.collapsible,
[props.cssClasses.collapsedRoot]: isCollapsed,
})}
hidden={props.hidden}
>
{props.templates.header && (
<div className={props.cssClasses.header}>
<Template
templates={props.templates}
templateKey="header"
rootTagName="span"
data={props.data}
/>
{props.collapsible && (
<button
className={props.cssClasses.collapseButton}
aria-expanded={!isCollapsed}
onClick={(event) => {
event.preventDefault();
setIsControlled(true);
setIsCollapsed((prevIsCollapsed) => !prevIsCollapsed);
}}
>
<Template
templates={props.templates}
templateKey="collapseButtonText"
rootTagName="span"
data={{ collapsed: isCollapsed }}
/>
</button>
)}
</div>
)}
<div className={props.cssClasses.body} ref={bodyRef} />
{props.templates.footer && (
<Template
templates={props.templates}
templateKey="footer"
rootProps={{
className: props.cssClasses.footer,
}}
data={props.data}
/>
)}
</div>
);
}
export default Panel;