forked from Workday/canvas-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Basic.tsx
48 lines (43 loc) · 1.3 KB
/
Basic.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from 'react';
import {DeleteButton} from '@workday/canvas-kit-react/button';
import {
Popup,
usePopupModel,
useCloseOnEscape,
useCloseOnOutsideClick,
useInitialFocus,
useReturnFocus,
} from '@workday/canvas-kit-react/popup';
import {Box, HStack} from '@workday/canvas-kit-react/layout';
export const Basic = () => {
const model = usePopupModel();
useCloseOnOutsideClick(model);
useCloseOnEscape(model);
useInitialFocus(model);
useReturnFocus(model);
const handleDelete = () => {
console.log('Delete Item');
};
return (
<Popup model={model}>
<Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
<Popup.Popper placement="bottom">
<Popup.Card width={400}>
<Popup.CloseIcon aria-label="Close" />
<Popup.Heading>Delete Item</Popup.Heading>
<Popup.Body>
<Box as="p" marginTop="zero">
Are you sure you'd like to delete the item titled 'My Item'?
</Box>
<HStack spacing="s">
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
Delete
</Popup.CloseButton>
<Popup.CloseButton>Cancel</Popup.CloseButton>
</HStack>
</Popup.Body>
</Popup.Card>
</Popup.Popper>
</Popup>
);
};