Skip to content
This repository was archived by the owner on Feb 19, 2025. It is now read-only.

Commit 505726c

Browse files
MildTomatoMildTomato
committed
fix: move SidePanel component fully inside a Transition component
1 parent 08372bd commit 505726c

File tree

1 file changed

+93
-92
lines changed

1 file changed

+93
-92
lines changed

‎src/components/SidePanel/SidePanel.tsx‎

Lines changed: 93 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -80,117 +80,118 @@ const SidePanel = ({
8080
)
8181

8282
return (
83-
<React.Fragment>
84-
{/* Background overlay */}
85-
<Transition
86-
show={visible}
87-
enter="ease-out duration-200"
88-
enterFrom="opacity-0"
89-
enterTo="opacity-100"
90-
leave="ease-in duration-200"
91-
leaveFrom="opacity-100"
92-
leaveTo="opacity-0"
93-
>
83+
<Transition
84+
show={visible}
85+
enter="ease-out duration-200"
86+
enterFrom="opacity-0"
87+
enterTo="opacity-100"
88+
leave="ease-in duration-200"
89+
leaveFrom="opacity-100"
90+
leaveTo="opacity-0"
91+
>
92+
<div onClick={() => (onCancel ? onCancel() : null)}>
9493
<div className={SlidePanelStyles['sbui-sidepanel-overlay-container']}>
9594
<div className={SlidePanelStyles['sbui-sidepanel-overlay']}></div>
9695
</div>
97-
</Transition>
9896

99-
{/* sidepanel element */}
100-
<div
101-
className={SlidePanelStyles['sbui-sidepanel-fixed']}
102-
onClick={onCancel}
103-
>
104-
<div className={SlidePanelStyles['sbui-sidepanel-absolute']}>
105-
<section
106-
className={
107-
SlidePanelStyles['sbui-sidepanel-container'] +
108-
' ' +
109-
orientationClasses
110-
}
111-
>
112-
<Transition
113-
show={visible}
114-
enter="transform transition ease-in-out duration-500 sm:duration-700"
115-
enterFrom={left ? '-translate-x-full' : 'translate-x-full'}
116-
enterTo="translate-x-0"
117-
leave="transform transition ease-in-out duration-500 sm:duration-700"
118-
leaveFrom="translate-x-0"
119-
leaveTo={left ? '-translate-x-full' : 'translate-x-full'}
97+
{/* sidepanel element */}
98+
<div
99+
className={SlidePanelStyles['sbui-sidepanel-fixed']}
100+
onClick={onCancel}
101+
>
102+
<div className={SlidePanelStyles['sbui-sidepanel-absolute']}>
103+
<div
104+
className={
105+
SlidePanelStyles['sbui-sidepanel-container'] +
106+
' ' +
107+
orientationClasses
108+
}
120109
>
121-
<div
122-
className={
123-
wide
124-
? SlidePanelStyles['sbui-sidepanel--wide']
125-
: SlidePanelStyles['sbui-sidepanel--medium']
126-
}
110+
<Transition
111+
show={visible}
112+
enter="transform transition ease-in-out duration-500 sm:duration-700"
113+
enterFrom={left ? '-translate-x-full' : 'translate-x-full'}
114+
enterTo="translate-x-0"
115+
leave="transform transition ease-in-out duration-500 sm:duration-700"
116+
leaveFrom="translate-x-0"
117+
leaveTo={left ? '-translate-x-full' : 'translate-x-full'}
127118
>
128119
<div
129120
className={
130-
SlidePanelStyles['sbui-sidepanel'] + ' ' + className
121+
wide
122+
? SlidePanelStyles['sbui-sidepanel--wide']
123+
: SlidePanelStyles['sbui-sidepanel--medium']
131124
}
132-
onClick={stopPropagation}
133125
>
134-
<Space
135-
size={6}
136-
direction="vertical"
137-
style={{
138-
minHeight: '0',
139-
flex: '1 1 0%',
140-
overflowY: 'scroll',
141-
}}
126+
<div
127+
className={
128+
SlidePanelStyles['sbui-sidepanel'] + ' ' + className
129+
}
130+
onClick={stopPropagation}
142131
>
143-
<header
144-
className={SlidePanelStyles['sbui-sidepanel-header']}
132+
<Space
133+
size={6}
134+
direction="vertical"
135+
style={{
136+
minHeight: '0',
137+
flex: '1 1 0%',
138+
overflowY: 'scroll',
139+
}}
145140
>
146-
<Space
147-
size={3}
148-
direction="row"
149-
style={{
150-
alignItems: 'center',
151-
justifyContent: 'space-between',
152-
}}
141+
<header
142+
className={SlidePanelStyles['sbui-sidepanel-header']}
153143
>
154-
{title && (
155-
<Typography.Title className="m-0" level={4}>
156-
{title}
157-
</Typography.Title>
158-
)}
159-
<div
160-
className={
161-
SlidePanelStyles['sbui-sidepanel-close-container']
162-
}
144+
<Space
145+
size={3}
146+
direction="row"
147+
style={{
148+
alignItems: 'center',
149+
justifyContent: 'space-between',
150+
}}
163151
>
164-
<Button
165-
aria-label="Close panel"
166-
onClick={onCancel}
167-
type="text"
168-
shadow={false}
169-
style={{ padding: 0 }}
170-
icon={<IconX size="xlarge" strokeWidth={2} />}
171-
/>
152+
{title && (
153+
<Typography.Title className="m-0" level={4}>
154+
{title}
155+
</Typography.Title>
156+
)}
157+
<div
158+
className={
159+
SlidePanelStyles['sbui-sidepanel-close-container']
160+
}
161+
>
162+
<Button
163+
aria-label="Close panel"
164+
onClick={onCancel}
165+
type="text"
166+
shadow={false}
167+
style={{ padding: 0 }}
168+
icon={<IconX size="xlarge" strokeWidth={2} />}
169+
/>
170+
</div>
171+
</Space>
172+
<div>
173+
{description && (
174+
<Typography.Text type="secondary">
175+
{description}
176+
</Typography.Text>
177+
)}
172178
</div>
173-
</Space>
174-
<div>
175-
{description && (
176-
<Typography.Text type="secondary">
177-
{description}
178-
</Typography.Text>
179-
)}
179+
</header>
180+
<div
181+
className={SlidePanelStyles['sbui-sidepanel-content']}
182+
>
183+
{children}
180184
</div>
181-
</header>
182-
<div className={SlidePanelStyles['sbui-sidepanel-content']}>
183-
{children}
184-
</div>
185-
</Space>
186-
{!hideFooter && footerContent}
185+
</Space>
186+
{!hideFooter && footerContent}
187+
</div>
187188
</div>
188-
</div>
189-
</Transition>
190-
</section>
189+
</Transition>
190+
</div>
191+
</div>
191192
</div>
192193
</div>
193-
</React.Fragment>
194+
</Transition>
194195
)
195196
}
196197

0 commit comments

Comments
 (0)