62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Overlay, OverlayBackdrop, Box, config, Text, TooltipProvider, Tooltip, Chip, IconButton } from 'folds';
|
|
import { Icons, Icon } from './icons';
|
|
import FocusTrap from 'focus-trap-react';
|
|
|
|
export type UIAFlowOverlayProps = {
|
|
currentStep: number;
|
|
stepCount: number;
|
|
children: ReactNode;
|
|
onCancel: () => void;
|
|
};
|
|
export function UIAFlowOverlay({
|
|
currentStep,
|
|
stepCount,
|
|
children,
|
|
onCancel,
|
|
}: UIAFlowOverlayProps) {
|
|
return (
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
|
|
<Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
|
|
<Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
|
|
{children}
|
|
</Box>
|
|
<Box
|
|
style={{ padding: config.space.S200 }}
|
|
shrink="No"
|
|
justifyContent="Center"
|
|
alignItems="Center"
|
|
gap="200"
|
|
>
|
|
<Chip as="div" radii="Pill" outlined>
|
|
<Text as="span" size="T300">{`Step ${currentStep}/${stepCount}`}</Text>
|
|
</Chip>
|
|
<TooltipProvider
|
|
tooltip={
|
|
<Tooltip variant="Critical">
|
|
<Text>Exit</Text>
|
|
</Tooltip>
|
|
}
|
|
position="Top"
|
|
>
|
|
{(anchorRef) => (
|
|
<IconButton
|
|
ref={anchorRef}
|
|
variant="Critical"
|
|
size="300"
|
|
onClick={onCancel}
|
|
radii="Pill"
|
|
outlined
|
|
>
|
|
<Icon size="50" src={Icons.Cross} />
|
|
</IconButton>
|
|
)}
|
|
</TooltipProvider>
|
|
</Box>
|
|
</Box>
|
|
</FocusTrap>
|
|
</Overlay>
|
|
);
|
|
}
|