roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 01:59:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency

Browse source
This commit is contained in:
41666 2021-03-13 22:49:01 -05:00
parent a931f8c69c
commit 9b71a24e2d
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

61
packages/design-system/atoms/popover/Popover.tsx
View file

@ -2,42 +2,39 @@ import { globalOnKeyUp } from '@roleypoly/design-system/atoms/key-events';
import * as React from 'react';
import { IoMdClose } from 'react-icons/io';
import {
DefocusHandler,
PopoverBase,
PopoverContent,
PopoverHead,
PopoverHeadCloser,
DefocusHandler,
PopoverBase,
PopoverContent,
PopoverHead,
PopoverHeadCloser,
} from './Popover.styled';
type PopoverProps = {
children: () => React.ReactNode;
position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
active: boolean;
canDefocus?: boolean;
onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
headContent: React.ReactNode;
preferredWidth?: number;
children: () => React.ReactNode;
position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
active: boolean;
canDefocus?: boolean;
onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
headContent: React.ReactNode;
preferredWidth?: number;
};
export const Popover = (props: PopoverProps) => {
globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
return (
<>
<PopoverBase active={props.active} preferredWidth={props.preferredWidth}>
<PopoverHead>
<PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
<IoMdClose />
</PopoverHeadCloser>
<div>{props.headContent}</div>
</PopoverHead>
<PopoverContent>{props.children()}</PopoverContent>
</PopoverBase>
{props.canDefocus && (
<DefocusHandler
active={props.active}
onClick={() => props.onExit?.('defocus')}
/>
)}
</>
);
globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
return (
<>
<PopoverBase active={props.active} preferredWidth={props.preferredWidth}>
<PopoverHead>
<PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
<IoMdClose />
</PopoverHeadCloser>
<div>{props.headContent}</div>
</PopoverHead>
<PopoverContent>{props.children()}</PopoverContent>
</PopoverBase>
{props.canDefocus && (
<DefocusHandler active={props.active} onClick={() => props.onExit?.('defocus')} />
)}
</>
);
};