Skip to content

Commit

Permalink
chore: update Popup stories (#1337)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValeraS
ValeraS authored Feb 14, 2024
1 parent 422a7dc commit e404161
Showing 1 changed file with 129 additions and 104 deletions.
233 changes: 129 additions & 104 deletions src/components/Popup/__stories__/Popup.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,157 @@
import React from 'react';

import type {Meta, StoryFn} from '@storybook/react';
import type {Meta, StoryObj} from '@storybook/react';

import {useUniqId, useVirtualElementRef} from '../../../hooks';
import {useVirtualElementRef} from '../../../hooks';
import {Button} from '../../Button';
import {TextInput} from '../../controls';
import {Text} from '../../Text';
import {Popup} from '../Popup';
import type {PopupPlacement, PopupProps} from '../Popup';
import type {PopupPlacement} from '../Popup';

export default {
const meta: Meta<typeof Popup> = {
title: 'Components/Overlays/Popup',
component: Popup,
} as Meta;
};

export default meta;

type Story = StoryObj<typeof Popup>;

export const Default: Story = {
render: function PopupStory(props) {
const anchorRef = React.useRef<HTMLButtonElement>(null);
const [open, setOpen] = React.useState(false);

return (
<React.Fragment>
<Popup {...props} open={open} anchorRef={anchorRef} onClose={() => setOpen(false)}>
<div style={{padding: 10}}>Popup content</div>
</Popup>
<div
style={{
width: '100%',
height: 200,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button ref={anchorRef} onClick={() => setOpen(!open)}>
{open ? 'Hide' : 'Show'}
</Button>
</div>
</React.Fragment>
);
},
};

export const Default: StoryFn<PopupProps> = (props: PopupProps) => {
const anchorRef = React.useRef<HTMLButtonElement>(null);
const [open, setOpen] = React.useState(false);
export const Placement: Story = {
render: function PopupStory(props) {
const anchorRef = React.useRef<HTMLDivElement>(null);
const [open, setOpen] = React.useState(true);
const contentStyle = {padding: 10};
const placements: PopupPlacement = [
'top-start',
'top',
'top-end',
'right-start',
'right',
'right-end',
'bottom-end',
'bottom',
'bottom-start',
'left-end',
'left',
'left-start',
];

return (
<React.Fragment>
<Popup {...props} open={open} anchorRef={anchorRef} onClose={() => setOpen(false)}>
<div style={{padding: 10}}>Popup content</div>
</Popup>
return (
<div
ref={anchorRef}
style={{
width: '100%',
width: 300,
height: 200,
border: '2px dashed black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button ref={anchorRef} onClick={() => setOpen(!open)}>
{open ? 'Hide' : 'Show'}
</Button>
<Button onClick={() => setOpen(!open)}>Toggle open</Button>
{placements.map((placement) => (
<Popup
key={placement}
{...props}
open={open}
anchorRef={anchorRef}
placement={placement}
>
<div style={contentStyle}>{placement}</div>
</Popup>
))}
</div>
</React.Fragment>
);
);
},
parameters: {
layout: 'centered',
},
};

export const Placement: StoryFn<PopupProps> = (args) => {
const anchorRef = React.useRef<HTMLDivElement>(null);
const [open, setOpen] = React.useState(true);
const contentStyle = {padding: 10};
const placements: PopupPlacement = [
'top-start',
'top',
'top-end',
'right-start',
'right',
'right-end',
'bottom-end',
'bottom',
'bottom-start',
'left-end',
'left',
'left-start',
];
export const Position: Story = {
render: function PopupStory(props) {
const [left, setLeft] = React.useState(0);
const [top, setTop] = React.useState(0);

return (
<div
ref={anchorRef}
style={{
width: 300,
height: 200,
border: '2px dashed black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button onClick={() => setOpen(!open)}>Toggle open</Button>
{placements.map((placement) => (
<Popup
key={placement}
{...args}
open={open}
anchorRef={anchorRef}
placement={placement}
>
<div style={contentStyle}>{placement}</div>
</Popup>
))}
</div>
);
};
Placement.parameters = {
layout: 'centered',
};
const [contextElement, setContextElement] = React.useState<HTMLDivElement | null>(null);
const anchorRef = useVirtualElementRef({
rect: {top, left},
contextElement: contextElement ?? undefined,
});
const [open, setOpen] = React.useState(false);

export const Position: StoryFn<PopupProps> = (args) => {
const [left, setLeft] = React.useState(100);
const [top, setTop] = React.useState(100);
const anchorRef = useVirtualElementRef({rect: {top, left}});
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
setLeft(event.clientX);
setTop(event.clientY);
};

const id = useUniqId();
React.useEffect(() => {
window.dispatchEvent(new CustomEvent('scroll'));
}, [left, top]);

return (
<div>
<label htmlFor={id + '1'} style={{display: 'flex', alignItems: 'center'}}>
x:
<TextInput
id={id + '1'}
value={String(left)}
onUpdate={(value) => {
setLeft(Number(value));
window.dispatchEvent(new CustomEvent('scroll'));
return (
<div>
<div
style={{
width: 400,
height: 400,
position: 'relative',
overflow: 'hidden',
border: '2px dashed black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onMouseMove={handleMouseMove}
onMouseEnter={() => {
setOpen(true);
}}
type="number"
style={{width: 100}}
/>
</label>
<label htmlFor={id + '2'} style={{display: 'flex', alignItems: 'center'}}>
y:
<TextInput
id={id + '2'}
value={String(top)}
onUpdate={(value) => {
setTop(Number(value));
window.dispatchEvent(new CustomEvent('scroll'));
onMouseLeave={() => {
setOpen(false);
}}
type="number"
style={{width: 100}}
/>
</label>
<Popup {...args} open anchorRef={anchorRef}>
<div style={{padding: 10}}>Popup content</div>
</Popup>
</div>
);
>
<div ref={setContextElement} />
<Text color="complementary">Move cursor here</Text>
<Popup {...props} open={open} anchorRef={anchorRef}>
<div style={{padding: 10}}>Popup content</div>
</Popup>
</div>
</div>
);
},
args: {
disablePortal: true,
},
parameters: {
layout: 'centered',
},
};

0 comments on commit e404161

Please sign in to comment.