jobiqo-cl/lib/src/components/02-atoms/01-forms/06-date/single/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'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$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 single date picker is used for single value
 * dates like a birthdate or a reminder date. Use the "min and max values" prop
 * to allow any date value to be inserted (including past dates).
 */
const SingleDatePopup = (_a) => {
    var { id = 'date', placeholder = 'Date', initialDate = new Date(), onDateChange, label, displayFormat = 'dd/MM/yyyy', showTimeSelect = false, timeFormat = 'HH:mm', timeIntervals = 15, timeCaption = 'Time', minDate, maxDate, readOnly = false, required = false, error = false, disabledKeyboardNavigation } = _a, props = tslib_es6.__rest(_a, ["id", "placeholder", "initialDate", "onDateChange", "label", "displayFormat", "showTimeSelect", "timeFormat", "timeIntervals", "timeCaption", "minDate", "maxDate", "readOnly", "required", "error", "disabledKeyboardNavigation"]);
    const [date, setDate] = React.useState(initialDate);
    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: id, selected: date, placeholderText: placeholder, monthsShown: months, dateFormat: displayFormat, readOnly: readOnly, onChange: changedDate => {
                onDateChange(changedDate);
                setDate(changedDate);
            } }, (minDate ? { minDate } : null), (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: id }, label),
        datePicker));
};

exports.SingleDatePopup = SingleDatePopup;