index.js
71 lines
| 1 | // Vendor dependencies |
| 2 | import {useState} from 'react'; |
| 3 | import PropTypes from 'prop-types'; |
| 4 | import moment from 'moment'; |
| 5 | // react-dates dependencies |
| 6 | import 'react-dates/initialize'; |
| 7 | import {DateRangePicker} from 'react-dates'; |
| 8 | import 'react-dates/lib/css/_datepicker.css'; |
| 9 | |
| 10 | import styles from './style.module.scss'; |
| 11 | |
| 12 | const PeriodSelector = ({period, setDates}) => { |
| 13 | const [focusedInput, setFocusedInput] = useState(null); |
| 14 | |
| 15 | const icon = ( |
| 16 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 17 | <g opacity="0.501465"> |
| 18 | <path opacity="0.3" d="M3.75 6H14.25V4.5H3.75V6Z" fill="black" /> |
| 19 | <path |
| 20 | fillRule="evenodd" |
| 21 | clipRule="evenodd" |
| 22 | d="M13.5 3H14.25C15.075 3 15.75 3.675 15.75 4.5V15C15.75 15.825 15.075 16.5 14.25 16.5H3.75C2.9175 16.5 2.25 15.825 2.25 15L2.2575 4.5C2.2575 3.675 2.9175 3 3.75 3H4.5V1.5H6V3H12V1.5H13.5V3ZM6.75 9.75V8.25H5.25V9.75H6.75ZM14.25 15H3.75V7.5H14.25V15ZM3.75 6H14.25V4.5H3.75V6ZM12.75 8.25V9.75H11.25V8.25H12.75ZM9.75 8.25H8.25V9.75H9.75V8.25Z" |
| 23 | fill="black" |
| 24 | /> |
| 25 | </g> |
| 26 | </svg> |
| 27 | ); |
| 28 | |
| 29 | return ( |
| 30 | <div className={styles.periodSelector} key={focusedInput}> |
| 31 | <div className={styles.icon}>{icon}</div> |
| 32 | <div className={styles.datepicker}> |
| 33 | <DateRangePicker |
| 34 | noBorder={true} |
| 35 | startDate={period.startDate} |
| 36 | startDateId="givewp-logs-start" |
| 37 | endDate={period.endDate} |
| 38 | hideKeyboardShortcutsPanel={true} |
| 39 | endDateId="givewp-logs-end" |
| 40 | onDatesChange={({startDate, endDate}) => { |
| 41 | setDates(startDate, endDate); |
| 42 | }} |
| 43 | focusedInput={focusedInput} |
| 44 | onFocusChange={(newFocus) => { |
| 45 | setFocusedInput(newFocus); |
| 46 | }} |
| 47 | isOutsideRange={(day) => moment().diff(day) < 0} |
| 48 | numberOfMonths={1} |
| 49 | /> |
| 50 | </div> |
| 51 | </div> |
| 52 | ); |
| 53 | }; |
| 54 | |
| 55 | PeriodSelector.propTypes = { |
| 56 | // Time period |
| 57 | period: PropTypes.object.isRequired, |
| 58 | // SetDates function |
| 59 | setDates: PropTypes.func.isRequired, |
| 60 | }; |
| 61 | |
| 62 | PeriodSelector.defaultProps = { |
| 63 | period: { |
| 64 | startDate: null, |
| 65 | endDate: null, |
| 66 | }, |
| 67 | setDates: () => {}, |
| 68 | }; |
| 69 | |
| 70 | export default PeriodSelector; |
| 71 |