jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
61 lines (55 loc) • 4.11 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var tslib_es6 = require('../../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../11-form-item/index.js');
var index$7 = require('../../../../../../node_modules/date-fns/esm/addDays/index.js');
var index$1 = require('../../../../../../node_modules/react-datepicker/dist/es/index.js');
var styles = require('../styles.js');
const DatePickerGlobalStyles = styles.datePickerGlobalStyles();
/**
* A date popup can be used inside forms or filters in order to make it easier to choose a date. The range date picker is used
* for multiple value dates like a start and end of education item or work experience. Use the "min and max dates" prop
* to allow any date value to be inserted (including past dates).
*/
const RangeDatePopup = (_a) => {
var { startDateId = 'start_date', endDateId = 'end_date', initialStartDate = new Date(), initialEndDate = index$7.default(new Date(), 2), label, startDateAriaLabel, endDateAriaLabel, startDatePlaceholderText = 'Start date', endDatePlaceholderText = 'End date', onDatesChange, displayFormat = 'dd/MM/yyyy', minDate, maxDate, showTimeSelect = false, timeFormat = 'HH:mm', timeIntervals = 15, timeCaption = 'Time', readOnly = false, required = false, error = false, disabledKeyboardNavigation } = _a, props = tslib_es6.__rest(_a, ["startDateId", "endDateId", "initialStartDate", "initialEndDate", "label", "startDateAriaLabel", "endDateAriaLabel", "startDatePlaceholderText", "endDatePlaceholderText", "onDatesChange", "displayFormat", "minDate", "maxDate", "showTimeSelect", "timeFormat", "timeIntervals", "timeCaption", "readOnly", "required", "error", "disabledKeyboardNavigation"]);
const [startDate, setStartDate] = React.useState(initialStartDate);
const [endDate, setEndDate] = React.useState(initialEndDate);
const [months, setMonths] = React.useState(1);
// Update number of months shown when window is small.
React.useEffect(() => {
if (window.matchMedia('(max-width: 800px)').matches) {
setMonths(1);
}
});
const datePicker = (React__default.createElement(styles.DateWrapper, { error: error },
React__default.createElement(DatePickerGlobalStyles, null),
React__default.createElement(index$1.default, Object.assign({ id: startDateId, selected: startDate, onChange: date => {
setStartDate(date);
onDatesChange({
startDate: date,
endDate
});
}, selectsStart: true, dateFormat: displayFormat, monthsShown: months, startDate: startDate, endDate: endDate, readOnly: readOnly }, (minDate ? { minDate } : null), (maxDate ? { maxDate } : null), (showTimeSelect
? { showTimeSelect, timeFormat, timeCaption, timeIntervals }
: null), { disabledKeyboardNavigation: disabledKeyboardNavigation }, props)),
React__default.createElement(index$1.default, Object.assign({ id: endDateId, selected: endDate, onChange: date => {
setEndDate(date);
onDatesChange({
startDate,
endDate: date
});
}, monthsShown: months, selectsEnd: true, dateFormat: displayFormat, endDate: endDate, minDate: startDate, readOnly: readOnly }, (maxDate ? { maxDate } : null), (showTimeSelect
? { showTimeSelect, timeFormat, timeCaption, timeIntervals }
: null), { disabledKeyboardNavigation: disabledKeyboardNavigation }, props))));
if (!label) {
return datePicker;
}
return (React__default.createElement(index.FormItem, null,
React__default.createElement(index.FormLabel, { error: error, required: required, htmlFor: startDateId }, label),
datePicker));
};
exports.RangeDatePopup = RangeDatePopup;