|
1 | 1 | import React, { useState } from 'react'; |
2 | | - |
3 | | -import { EuiPopover, EuiButtonEmpty, EuiText } from '../../../../src'; |
| 2 | +import moment from 'moment'; |
| 3 | +import { |
| 4 | + EuiPopover, |
| 5 | + EuiPopoverTitle, |
| 6 | + EuiPopoverFooter, |
| 7 | + EuiButton, |
| 8 | + EuiButtonEmpty, |
| 9 | + EuiHorizontalRule, |
| 10 | + EuiDatePickerRange, |
| 11 | + EuiDatePicker, |
| 12 | +} from '../../../../src'; |
4 | 13 |
|
5 | 14 | export default () => { |
6 | | - const [isPopoverOpen, setIsPopoverOpen] = useState(false); |
| 15 | + const [isPopoverOpen3, setIsPopoverOpen3] = useState(false); |
7 | 16 |
|
8 | | - const onButtonClick = () => |
9 | | - setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); |
10 | | - const closePopover = () => setIsPopoverOpen(false); |
| 17 | + const onButtonClick3 = () => |
| 18 | + setIsPopoverOpen3((isPopoverOpen3) => !isPopoverOpen3); |
| 19 | + const closePopover3 = () => setIsPopoverOpen3(false); |
11 | 20 |
|
12 | | - const button = ( |
13 | | - <EuiButtonEmpty |
14 | | - iconType="documentation" |
15 | | - iconSide="right" |
16 | | - onClick={onButtonClick} |
17 | | - > |
18 | | - How it works |
19 | | - </EuiButtonEmpty> |
20 | | - ); |
| 21 | + const [startDate, setStartDate] = useState(moment()); |
| 22 | + const [endDate, setEndDate] = useState(moment().add(11, 'd')); |
21 | 23 |
|
22 | 24 | return ( |
23 | 25 | <EuiPopover |
24 | | - button={button} |
25 | | - isOpen={isPopoverOpen} |
26 | | - closePopover={closePopover} |
| 26 | + button={ |
| 27 | + <EuiButtonEmpty |
| 28 | + iconType="questionInCircle" |
| 29 | + iconSide="right" |
| 30 | + onClick={onButtonClick3} |
| 31 | + > |
| 32 | + With title and footer button |
| 33 | + </EuiButtonEmpty> |
| 34 | + } |
| 35 | + isOpen={isPopoverOpen3} |
| 36 | + closePopover={closePopover3} |
| 37 | + anchorPosition="upCenter" |
27 | 38 | > |
28 | | - <EuiText style={{ width: 300 }}> |
29 | | - <p>Popover content that’s wider than the default width</p> |
30 | | - </EuiText> |
| 39 | + <EuiPopoverTitle>Edit schedule</EuiPopoverTitle> |
| 40 | + <EuiDatePickerRange |
| 41 | + isInvalid={startDate > endDate} |
| 42 | + startDateControl={ |
| 43 | + <EuiDatePicker |
| 44 | + selected={startDate} |
| 45 | + onChange={(date) => date && setStartDate(date)} |
| 46 | + startDate={startDate} |
| 47 | + endDate={endDate} |
| 48 | + aria-label="Start date" |
| 49 | + showTimeSelect |
| 50 | + /> |
| 51 | + } |
| 52 | + endDateControl={ |
| 53 | + <EuiDatePicker |
| 54 | + selected={endDate} |
| 55 | + onChange={(date) => date && setEndDate(date)} |
| 56 | + startDate={startDate} |
| 57 | + endDate={endDate} |
| 58 | + aria-label="End date" |
| 59 | + showTimeSelect |
| 60 | + /> |
| 61 | + } |
| 62 | + /> |
| 63 | + <EuiHorizontalRule margin="m" /> |
| 64 | + <EuiButton fill fullWidth> |
| 65 | + Save schedule |
| 66 | + </EuiButton> |
| 67 | + <EuiPopoverFooter> |
| 68 | + <EuiButton fullWidth color="danger"> |
| 69 | + Delete schedule |
| 70 | + </EuiButton> |
| 71 | + </EuiPopoverFooter> |
31 | 72 | </EuiPopover> |
32 | 73 | ); |
33 | 74 | }; |
0 commit comments