Skip to content

Commit cdf15ca

Browse files
yazhouioyazhouio
authored
fix: Update sheet overlay component (#314)
* fix: Update sheet overlay component Signed-off-by: yazhou <[email protected]> * chore: update version Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
1 parent 75f0175 commit cdf15ca

File tree

4 files changed

+154
-50
lines changed

4 files changed

+154
-50
lines changed

‎.changeset/silver-pets-rule.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@kubed/code-editor': patch
3+
'@kubed/diff-viewer': patch
4+
'@kubed/components': patch
5+
'@kubed/log-viewer': patch
6+
'@kubed/charts': patch
7+
'@kubed/hooks': patch
8+
'@kubed/icons': patch
9+
'@kubed/tests': patch
10+
'kubed-documents': patch
11+
---
12+
13+
fix: Update sheet overlay component

‎packages/components/src/Sheet/Sheet.story.tsx‎

Lines changed: 79 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import styled from 'styled-components';
33

44
import * as Sheets from './Sheet';
5-
import { Button } from '../index';
5+
import { Button, Modal } from '../index';
66

77
export default {
88
title: 'Components/Sheet',
@@ -28,33 +28,89 @@ export const Basic = () => {
2828
}
2929
return 'div';
3030
};
31+
const [show, setShow] = React.useState(false);
32+
const [showOut, setShowOut] = React.useState(false);
33+
34+
const avoidDefaultDomBehavior = (e: Event) => {
35+
e.preventDefault();
36+
};
37+
3138
const renderItem = (side: SheetSide) => {
3239
const Wrapper = wrapper(side);
3340
return (
34-
<Sheet>
35-
<SheetTrigger asChild>
36-
<Button variant="outline">{side}</Button>
37-
</SheetTrigger>
38-
<SheetContent width={1200} side={side}>
39-
<Wrapper>
40-
<SheetHeader>
41-
<SheetFieldTitle
42-
title="Edit profile"
43-
description="Make changes to your profile here. Click save when you are done."
44-
/>
45-
</SheetHeader>
46-
body
47-
<SheetFooter>
48-
<SheetClose asChild>
49-
<Button type="submit">Save changes</Button>
50-
</SheetClose>
51-
</SheetFooter>
52-
</Wrapper>
53-
</SheetContent>
54-
</Sheet>
41+
<>
42+
<Sheet modal={false}>
43+
<SheetTrigger asChild>
44+
<Button variant="outline">{side}</Button>
45+
</SheetTrigger>
46+
<SheetContent
47+
// hasRadixOverlay
48+
// hasOverlay={true}
49+
// maskClosable={false}
50+
onPointerDownOutside={avoidDefaultDomBehavior}
51+
onInteractOutside={avoidDefaultDomBehavior}
52+
width={1200}
53+
side={side}
54+
>
55+
<Wrapper>
56+
<SheetHeader>
57+
<SheetFieldTitle
58+
title="Edit profile"
59+
description="Make changes to your profile here. Click save when you are done."
60+
/>
61+
</SheetHeader>
62+
<div>
63+
<Button
64+
onClick={() => {
65+
setShow(true);
66+
}}
67+
>
68+
show modal
69+
</Button>
70+
<Button
71+
onClick={() => {
72+
setShowOut(true);
73+
}}
74+
>
75+
show modal out
76+
</Button>
77+
</div>
78+
<Modal
79+
visible={show}
80+
onCancel={() => {
81+
setShow(false);
82+
}}
83+
content="modal info"
84+
>
85+
modal content
86+
<input />
87+
</Modal>
88+
<SheetFooter>
89+
<SheetClose asChild>
90+
<Button type="submit">Save changes</Button>
91+
</SheetClose>
92+
</SheetFooter>
93+
</Wrapper>
94+
</SheetContent>
95+
</Sheet>
96+
</>
5597
);
5698
};
57-
return SHEET_SIDES.map(renderItem);
99+
return (
100+
<>
101+
{SHEET_SIDES.map(renderItem)}
102+
<Modal
103+
visible={showOut}
104+
onCancel={() => {
105+
setShowOut(false);
106+
}}
107+
content="modal out info"
108+
>
109+
modal out content
110+
<input />
111+
</Modal>
112+
</>
113+
);
58114
};
59115

60116
export const WithOpen = () => {

‎packages/components/src/Sheet/Sheet.styles.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,3 +315,11 @@ export const HiddenTitle = styled.span`
315315
overflow-wrap: normal;
316316
visibility: hidden;
317317
`;
318+
319+
export const SheetBaseOverlay = styled.div`
320+
position: fixed;
321+
inset: 0;
322+
background-color: #242e42b2;
323+
z-index: 998;
324+
transition: background-color 0.3s;
325+
`;

‎packages/components/src/Sheet/Sheets.tsx‎

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import * as SheetPrimitive from '@radix-ui/react-dialog';
33
import { CloseDuotone } from '@kubed/icons';
4-
import { isNull } from 'lodash';
54

65
import {
76
StyledSheetContent,
@@ -14,6 +13,7 @@ import {
1413
HeaderWrapper,
1514
HiddenTitle,
1615
FieldWrapper as Field,
16+
SheetBaseOverlay as SheetOverlay,
1717
} from './Sheet.styles';
1818
import { Button } from '../index';
1919

@@ -48,7 +48,7 @@ const SheetFieldTitle = (props: {
4848
return <div className="kubed-modal-title">{body}</div>;
4949
};
5050

51-
const SheetOverlay = React.forwardRef<
51+
const SheetRadixOverlay = React.forwardRef<
5252
React.ElementRef<typeof SheetPrimitive.Overlay>,
5353
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
5454
>(({ className, ...props }, ref) => (
@@ -79,7 +79,7 @@ const SheetBaseContent = React.forwardRef<
7979
ref
8080
) => (
8181
<SheetPortal>
82-
{hasOverlay && <SheetOverlay />}
82+
{hasOverlay && <SheetRadixOverlay />}
8383
<StyledSheetContent ref={ref} side={side} className={className} {...props}>
8484
{children}
8585
</StyledSheetContent>
@@ -89,32 +89,57 @@ const SheetBaseContent = React.forwardRef<
8989

9090
const SheetContent = React.forwardRef<
9191
React.ElementRef<typeof SheetPrimitive.Content>,
92-
SheetContentProps
92+
SheetContentProps & {
93+
hasRadixOverlay?: boolean;
94+
maskClosable?: boolean;
95+
}
9396
>(
9497
(
95-
{ side = 'right', hasOverlay = true, className, children, title, description, ...props },
98+
{
99+
side = 'right',
100+
hasRadixOverlay = false,
101+
hasOverlay = true,
102+
maskClosable = true,
103+
className,
104+
children,
105+
title,
106+
description,
107+
...props
108+
},
96109
ref
97-
) => (
98-
<SheetPortal>
99-
{hasOverlay && <SheetOverlay />}
100-
<StyledSheetContent ref={ref} side={side} className={className} {...props}>
101-
<HiddenTitle>
102-
<SheetPrimitive.Title>{title ?? 'sheet'}</SheetPrimitive.Title>
103-
</HiddenTitle>
104-
<HiddenTitle>
105-
<SheetPrimitive.Description>
106-
{description ?? 'sheet description'}
107-
</SheetPrimitive.Description>
108-
</HiddenTitle>
109-
<SheetHeaderClose asChild>
110-
<Button variant="filled" color="secondary" radius="sm" size="sm">
111-
<CloseDuotone size={24} variant="light" />
112-
</Button>
113-
</SheetHeaderClose>
114-
{children}
115-
</StyledSheetContent>
116-
</SheetPortal>
117-
)
110+
) => {
111+
const baseOverlay = hasOverlay ? (
112+
maskClosable ? (
113+
<SheetClose asChild>
114+
<SheetOverlay />
115+
</SheetClose>
116+
) : (
117+
<SheetOverlay />
118+
)
119+
) : null;
120+
return (
121+
<SheetPortal>
122+
{baseOverlay}
123+
{hasRadixOverlay && <SheetRadixOverlay />}
124+
<StyledSheetContent ref={ref} side={side} className={className} {...props}>
125+
<HiddenTitle>
126+
<SheetPrimitive.Title>{title ?? 'sheet'}</SheetPrimitive.Title>
127+
</HiddenTitle>
128+
<HiddenTitle>
129+
<SheetPrimitive.Description>
130+
{description ?? 'sheet description'}
131+
</SheetPrimitive.Description>
132+
</HiddenTitle>
133+
<SheetHeaderClose asChild>
134+
<Button variant="filled" color="secondary" radius="sm" size="sm">
135+
<CloseDuotone size={24} variant="light" />
136+
</Button>
137+
</SheetHeaderClose>
138+
{children}
139+
</StyledSheetContent>
140+
</SheetPortal>
141+
);
142+
}
118143
);
119144

120145
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -142,15 +167,17 @@ const SheetDescription = React.forwardRef<
142167
Sheet.displayName = '@kubed/components/Sheet';
143168

144169
SheetDescription.displayName = SheetPrimitive.Description.displayName;
145-
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
170+
SheetRadixOverlay.displayName = SheetPrimitive.Overlay.displayName;
146171
SheetTitle.displayName = SheetPrimitive.Title.displayName;
147172
SheetContent.displayName = SheetPrimitive.Content.displayName;
148173

149174
SheetHeader.displayName = 'SheetHeader';
150175
SheetFooter.displayName = 'SheetFooter';
176+
151177
export {
152178
Sheet,
153179
SheetPortal,
180+
SheetRadixOverlay,
154181
SheetOverlay,
155182
SheetTrigger,
156183
SheetClose,

0 commit comments

Comments
 (0)