Skip to content

Commit

Permalink
Merge branch 'main' into feat/outline-for-text-input-and-select
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kyzyl-ool
Kyzyl-ool authored Feb 16, 2024
2 parents f46b49f + 84044f0 commit 75b9f13
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 105 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',
},
};
1 change: 0 additions & 1 deletion src/components/TreeSelect/TreeSelect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,5 @@ $block: '.#{variables.$ns}tree-select';
padding: 4px 0;
border-radius: 6px;
overflow: hidden;
min-width: 300px;
}
}
1 change: 1 addition & 0 deletions src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const InfinityScrollExample = ({
return node;
}}
renderContainer={RenderVirtualizedContainer}
popupWidth={300}
onUpdate={setValue}
slotAfterListBody={
isLoading && (
Expand Down
1 change: 1 addition & 0 deletions src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const WithFiltrationAndControlsExample = ({
{...treeSelectProps}
multiple
open={open}
popupWidth={350}
onOpenChange={onOpenChange}
slotBeforeListBody={
<TextInput
Expand Down

0 comments on commit 75b9f13

Please sign in to comment.