Skip to content

Commit

Permalink
fix: flexible selection depending on Items
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyechan99
kyechan99 committed Apr 25, 2024
1 parent 1874c0a commit a88dcac
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 124 deletions.
24 changes: 14 additions & 10 deletions src/components/Portal/Portal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import { composeEventHandlers } from '@/libs/event';
import { composeRefs } from '@/libs/ref';
import { PositionType } from '@/types/position';

interface ModalContentProps extends React.ComponentProps<'div'> {
export interface PortalProps extends React.ComponentProps<'div'> {
ref: React.ForwardedRef<HTMLDivElement>;
width?: React.CSSProperties['width'];
disabledBG?: boolean;
disabledAutoFocus?: boolean;
}

const Portal = ({ children, ref, width, onKeyDown, ...props }: ModalContentProps) => {
const Portal = ({ children, ref, width, onKeyDown, disabledAutoFocus, ...props }: PortalProps) => {
const portalRef = React.useRef<HTMLDivElement>(null);
const { showModal, toggleElement, reorgPos } = usePortal({ portalRef });
const [items, setItems] = useState<HTMLElement[]>([]);
Expand Down Expand Up @@ -65,18 +66,21 @@ const Portal = ({ children, ref, width, onKeyDown, ...props }: ModalContentProps

const handleOpen = React.useCallback(() => {
if (portalRef.current) {
// portalRef.current.focus();
setItems(
Array.from(portalRef.current.querySelectorAll<HTMLElement>('[data-focus-enabled="true"]')).filter(e => {
return e.getAttribute('disabled') == null;
}),
);
if (!disabledAutoFocus) portalRef.current.focus();

const newItems = Array.from(
portalRef.current.querySelectorAll<HTMLElement>('[data-focus-enabled="true"]'),
).filter(e => {
return e.getAttribute('disabled') == null;
});
console.log(newItems);
setItems(newItems);
}
}, []);
}, [disabledAutoFocus]);

React.useEffect(() => {
if (showModal && portalRef.current) handleOpen();
}, [handleOpen, showModal]);
}, [handleOpen, showModal, children]);

return (
<PortalStyled
Expand Down
21 changes: 11 additions & 10 deletions src/components/Portal/PortalContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import styled from '@emotion/styled';
import React from 'react';
import { createPortal } from 'react-dom';

import useContext from '@/hooks/useContext';

import Portal from './Portal';
import Portal, { PortalProps } from './Portal';
import { PortalContext } from './PortalContext';

interface ModalContentProps extends React.ComponentProps<'div'> {
ref: React.ForwardedRef<HTMLDivElement>;
width?: React.CSSProperties['width'];
disabledBG?: boolean;
}

export const PortalContent = ({ children, ref, width, disabledBG = false, onKeyDown, ...props }: ModalContentProps) => {
export const PortalContent = ({
children,
ref,
width,
disabledBG = false,
disabledAutoFocus = false,
onKeyDown,
...props
}: PortalProps) => {
const { showModal, setShowModal } = useContext(PortalContext)!;

const close = () => {
Expand All @@ -26,7 +27,7 @@ export const PortalContent = ({ children, ref, width, disabledBG = false, onKeyD
createPortal(
<>
{!disabledBG && <PortalBG id="bmates-portal-bg" className="bmates-portal-bg" onClick={close} />}
<Portal ref={ref} width={width} onKeyDown={onKeyDown} {...props}>
<Portal ref={ref} width={width} onKeyDown={onKeyDown} disabledAutoFocus={disabledAutoFocus} {...props}>
{children}
</Portal>
</>,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
*/
export const SearchContent = React.forwardRef<HTMLDivElement, ModalProps>(({ width, children, ...props }, ref) => {
return (
<PortalContent width={width} ref={ref} role="group" {...props}>
<PortalContent width={width} ref={ref} role="group" disabledAutoFocus {...props}>
{children}
</PortalContent>
);
Expand Down
163 changes: 60 additions & 103 deletions src/stories/common/Search.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,24 @@ export default meta;

type Story = StoryObj<typeof Search>;

const animals = [
'dog',
'cat',
'elephant',
'lion',
'tiger',
'bear',
'giraffe',
'zebra',
'monkey',
'snake',
'rabbit',
'horse',
'deer',
'fox',
'wolf',
];

export const Default: Story = {
args: {},
decorators: [
Expand All @@ -55,27 +73,50 @@ export const Default: Story = {
],
};

const TempSearch = () => {
const [text, setText] = React.useState<string>('');

return (
<>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput
onChange={e => {
setText(e.target.value);
}}
/>
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>
GitHub
<SearchShortcut>⌘+T</SearchShortcut>
</SearchItem>
<SearchItem>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
{animals
.filter(animal => animal.includes(text))
.slice(0, 5)
.map(item => (
<SearchItem key={item}>{item}</SearchItem>
))}
</SearchItemList>
</SearchContent>
</>
);
};

export const Toggle: Story = {
args: {},
decorators: [
() => {
return (
<Search>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput />
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>GitHub</SearchItem>
<SearchItem>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
</SearchItemList>
</SearchContent>
<TempSearch />
</Search>
);
},
Expand All @@ -93,28 +134,7 @@ export const Space: Story = {
args: {
align: 'start',
space: 16,
children: (
<>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput />
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>
GitHub
<SearchShortcut>⌘+T</SearchShortcut>
</SearchItem>
<SearchItem>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
</SearchItemList>
</SearchContent>
</>
),
children: <TempSearch />,
},
};

Expand All @@ -128,28 +148,7 @@ export const AlignStart: Story = {
},
args: {
align: 'start',
children: (
<>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput />
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>
GitHub
<SearchShortcut>⌘+T</SearchShortcut>
</SearchItem>
<SearchItem disabled>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
</SearchItemList>
</SearchContent>
</>
),
children: <TempSearch />,
},
};

Expand All @@ -163,28 +162,7 @@ export const AlignCenter: Story = {
},
args: {
align: 'center',
children: (
<>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput />
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>
GitHub
<SearchShortcut>⌘+T</SearchShortcut>
</SearchItem>
<SearchItem disabled>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
</SearchItemList>
</SearchContent>
</>
),
children: <TempSearch />,
},
};

Expand All @@ -198,27 +176,6 @@ export const AlignEnd: Story = {
},
args: {
align: 'end',
children: (
<>
<SearchToggle>
Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
</SearchToggle>
<SearchContent width={600} style={{}}>
<SearchInput />
<SearchItemList>
<SearchLabel>Social</SearchLabel>
<SearchItem>
GitHub
<SearchShortcut>⌘+T</SearchShortcut>
</SearchItem>
<SearchItem disabled>Facebook</SearchItem>
<SearchDivider />
<SearchLabel>User</SearchLabel>
<SearchItem>@bandmators</SearchItem>
<SearchItem>@bmates</SearchItem>
</SearchItemList>
</SearchContent>
</>
),
children: <TempSearch />,
},
};

0 comments on commit a88dcac

Please sign in to comment.