index.js
65 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 = <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 16 | <g opacity="0.501465"> |
| 17 | <path opacity="0.3" d="M3.75 6H14.25V4.5H3.75V6Z" fill="black" /> |
| 18 | <path fillRule="evenodd" clipRule="evenodd" 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" fill="black" /> |
| 19 | </g> |
| 20 | </svg>; |
| 21 | |
| 22 | return ( |
| 23 | <div className={ styles.periodSelector } key={ focusedInput }> |
| 24 | <div className={ styles.icon }>{ icon }</div> |
| 25 | <div className={ styles.datepicker }> |
| 26 | <DateRangePicker |
| 27 | noBorder={ true } |
| 28 | startDate={ period.startDate } |
| 29 | startDateId="givewp-logs-start" |
| 30 | endDate={ period.endDate } |
| 31 | hideKeyboardShortcutsPanel={ true } |
| 32 | endDateId="givewp-logs-end" |
| 33 | onDatesChange={ ( { startDate, endDate } ) => { |
| 34 | setDates( startDate, endDate ); |
| 35 | } } |
| 36 | focusedInput={ focusedInput } |
| 37 | onFocusChange={ ( newFocus ) => { |
| 38 | setFocusedInput( newFocus ); |
| 39 | } } |
| 40 | isOutsideRange={ ( day ) => ( moment().diff( day ) < 0 ) } |
| 41 | numberOfMonths={ 1 } |
| 42 | /> |
| 43 | </div> |
| 44 | |
| 45 | </div> |
| 46 | ); |
| 47 | }; |
| 48 | |
| 49 | PeriodSelector.propTypes = { |
| 50 | // Time period |
| 51 | period: PropTypes.object.isRequired, |
| 52 | // SetDates function |
| 53 | setDates: PropTypes.func.isRequired, |
| 54 | }; |
| 55 | |
| 56 | PeriodSelector.defaultProps = { |
| 57 | period: { |
| 58 | startDate: null, |
| 59 | endDate: null, |
| 60 | }, |
| 61 | setDates: () => {}, |
| 62 | }; |
| 63 | |
| 64 | export default PeriodSelector; |
| 65 |