| 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 = {startDate: null, endDate: null}, 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 |
export default PeriodSelector; |
| 63 |
|
