"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _airbnbPropTypes = require("airbnb-prop-types"); var _reactWithStyles = require("react-with-styles"); var _defaultPhrases = require("../defaultPhrases"); var _getPhrasePropTypes = _interopRequireDefault(require("../utils/getPhrasePropTypes")); var _noflip = _interopRequireDefault(require("../utils/noflip")); var _OpenDirectionShape = _interopRequireDefault(require("../shapes/OpenDirectionShape")); var _DateInput = _interopRequireDefault(require("./DateInput")); var _IconPositionShape = _interopRequireDefault(require("../shapes/IconPositionShape")); var _DisabledShape = _interopRequireDefault(require("../shapes/DisabledShape")); var _RightArrow = _interopRequireDefault(require("./RightArrow")); var _LeftArrow = _interopRequireDefault(require("./LeftArrow")); var _CloseButton = _interopRequireDefault(require("./CloseButton")); var _CalendarIcon = _interopRequireDefault(require("./CalendarIcon")); var _constants = require("../constants"); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } var propTypes = process.env.NODE_ENV !== "production" ? (0, _airbnbPropTypes.forbidExtraProps)(_objectSpread({}, _reactWithStyles.withStylesPropTypes, { children: _propTypes["default"].node, startDateId: _propTypes["default"].string, startDatePlaceholderText: _propTypes["default"].string, startDateAriaLabel: _propTypes["default"].string, screenReaderMessage: _propTypes["default"].string, endDateId: _propTypes["default"].string, endDatePlaceholderText: _propTypes["default"].string, endDateAriaLabel: _propTypes["default"].string, onStartDateFocus: _propTypes["default"].func, onEndDateFocus: _propTypes["default"].func, onStartDateChange: _propTypes["default"].func, onEndDateChange: _propTypes["default"].func, onStartDateShiftTab: _propTypes["default"].func, onEndDateTab: _propTypes["default"].func, onClearDates: _propTypes["default"].func, onKeyDownArrowDown: _propTypes["default"].func, onKeyDownQuestionMark: _propTypes["default"].func, startDate: _propTypes["default"].string, endDate: _propTypes["default"].string, isStartDateFocused: _propTypes["default"].bool, isEndDateFocused: _propTypes["default"].bool, showClearDates: _propTypes["default"].bool, disabled: _DisabledShape["default"], required: _propTypes["default"].bool, readOnly: _propTypes["default"].bool, openDirection: _OpenDirectionShape["default"], showCaret: _propTypes["default"].bool, showDefaultInputIcon: _propTypes["default"].bool, inputIconPosition: _IconPositionShape["default"], customInputIcon: _propTypes["default"].node, customArrowIcon: _propTypes["default"].node, customCloseIcon: _propTypes["default"].node, noBorder: _propTypes["default"].bool, block: _propTypes["default"].bool, small: _propTypes["default"].bool, regular: _propTypes["default"].bool, verticalSpacing: _airbnbPropTypes.nonNegativeInteger, // accessibility isFocused: _propTypes["default"].bool, // describes actual DOM focus // i18n phrases: _propTypes["default"].shape((0, _getPhrasePropTypes["default"])(_defaultPhrases.DateRangePickerInputPhrases)), isRTL: _propTypes["default"].bool })) : {}; var defaultProps = { children: null, startDateId: _constants.START_DATE, endDateId: _constants.END_DATE, startDatePlaceholderText: 'Start Date', endDatePlaceholderText: 'End Date', startDateAriaLabel: undefined, endDateAriaLabel: undefined, screenReaderMessage: '', onStartDateFocus: function onStartDateFocus() {}, onEndDateFocus: function onEndDateFocus() {}, onStartDateChange: function onStartDateChange() {}, onEndDateChange: function onEndDateChange() {}, onStartDateShiftTab: function onStartDateShiftTab() {}, onEndDateTab: function onEndDateTab() {}, onClearDates: function onClearDates() {}, onKeyDownArrowDown: function onKeyDownArrowDown() {}, onKeyDownQuestionMark: function onKeyDownQuestionMark() {}, startDate: '', endDate: '', isStartDateFocused: false, isEndDateFocused: false, showClearDates: false, disabled: false, required: false, readOnly: false, openDirection: _constants.OPEN_DOWN, showCaret: false, showDefaultInputIcon: false, inputIconPosition: _constants.ICON_BEFORE_POSITION, customInputIcon: null, customArrowIcon: null, customCloseIcon: null, noBorder: false, block: false, small: false, regular: false, verticalSpacing: undefined, // accessibility isFocused: false, // i18n phrases: _defaultPhrases.DateRangePickerInputPhrases, isRTL: false }; function DateRangePickerInput(_ref) { var children = _ref.children, startDate = _ref.startDate, startDateId = _ref.startDateId, startDatePlaceholderText = _ref.startDatePlaceholderText, screenReaderMessage = _ref.screenReaderMessage, isStartDateFocused = _ref.isStartDateFocused, onStartDateChange = _ref.onStartDateChange, onStartDateFocus = _ref.onStartDateFocus, onStartDateShiftTab = _ref.onStartDateShiftTab, startDateAriaLabel = _ref.startDateAriaLabel, endDate = _ref.endDate, endDateId = _ref.endDateId, endDatePlaceholderText = _ref.endDatePlaceholderText, isEndDateFocused = _ref.isEndDateFocused, onEndDateChange = _ref.onEndDateChange, onEndDateFocus = _ref.onEndDateFocus, onEndDateTab = _ref.onEndDateTab, endDateAriaLabel = _ref.endDateAriaLabel, onKeyDownArrowDown = _ref.onKeyDownArrowDown, onKeyDownQuestionMark = _ref.onKeyDownQuestionMark, onClearDates = _ref.onClearDates, showClearDates = _ref.showClearDates, disabled = _ref.disabled, required = _ref.required, readOnly = _ref.readOnly, showCaret = _ref.showCaret, openDirection = _ref.openDirection, showDefaultInputIcon = _ref.showDefaultInputIcon, inputIconPosition = _ref.inputIconPosition, customInputIcon = _ref.customInputIcon, customArrowIcon = _ref.customArrowIcon, customCloseIcon = _ref.customCloseIcon, isFocused = _ref.isFocused, phrases = _ref.phrases, isRTL = _ref.isRTL, noBorder = _ref.noBorder, block = _ref.block, verticalSpacing = _ref.verticalSpacing, small = _ref.small, regular = _ref.regular, styles = _ref.styles; var calendarIcon = customInputIcon || _react["default"].createElement(_CalendarIcon["default"], (0, _reactWithStyles.css)(styles.DateRangePickerInput_calendarIcon_svg)); var arrowIcon = customArrowIcon || _react["default"].createElement(_RightArrow["default"], (0, _reactWithStyles.css)(styles.DateRangePickerInput_arrow_svg)); if (isRTL) arrowIcon = _react["default"].createElement(_LeftArrow["default"], (0, _reactWithStyles.css)(styles.DateRangePickerInput_arrow_svg)); if (small) arrowIcon = '-'; var closeIcon = customCloseIcon || _react["default"].createElement(_CloseButton["default"], (0, _reactWithStyles.css)(styles.DateRangePickerInput_clearDates_svg, small && styles.DateRangePickerInput_clearDates_svg__small)); var screenReaderStartDateText = screenReaderMessage || phrases.keyboardForwardNavigationInstructions; var screenReaderEndDateText = screenReaderMessage || phrases.keyboardBackwardNavigationInstructions; var inputIcon = (showDefaultInputIcon || customInputIcon !== null) && _react["default"].createElement("button", (0, _extends2["default"])({}, (0, _reactWithStyles.css)(styles.DateRangePickerInput_calendarIcon), { type: "button", disabled: disabled, "aria-label": phrases.focusStartDate, onClick: onKeyDownArrowDown }), calendarIcon); var startDateDisabled = disabled === _constants.START_DATE || disabled === true; var endDateDisabled = disabled === _constants.END_DATE || disabled === true; return _react["default"].createElement("div", (0, _reactWithStyles.css)(styles.DateRangePickerInput, disabled && styles.DateRangePickerInput__disabled, isRTL && styles.DateRangePickerInput__rtl, !noBorder && styles.DateRangePickerInput__withBorder, block && styles.DateRangePickerInput__block, showClearDates && styles.DateRangePickerInput__showClearDates), inputIconPosition === _constants.ICON_BEFORE_POSITION && inputIcon, _react["default"].createElement(_DateInput["default"], { id: startDateId, placeholder: startDatePlaceholderText, ariaLabel: startDateAriaLabel, displayValue: startDate, screenReaderMessage: screenReaderStartDateText, focused: isStartDateFocused, isFocused: isFocused, disabled: startDateDisabled, required: required, readOnly: readOnly, showCaret: showCaret, openDirection: openDirection, onChange: onStartDateChange, onFocus: onStartDateFocus, onKeyDownShiftTab: onStartDateShiftTab, onKeyDownArrowDown: onKeyDownArrowDown, onKeyDownQuestionMark: onKeyDownQuestionMark, verticalSpacing: verticalSpacing, small: small, regular: regular }), children, _react["default"].createElement("div", (0, _extends2["default"])({}, (0, _reactWithStyles.css)(styles.DateRangePickerInput_arrow), { "aria-hidden": "true", role: "presentation" }), arrowIcon), _react["default"].createElement(_DateInput["default"], { id: endDateId, placeholder: endDatePlaceholderText, ariaLabel: endDateAriaLabel, displayValue: endDate, screenReaderMessage: screenReaderEndDateText, focused: isEndDateFocused, isFocused: isFocused, disabled: endDateDisabled, required: required, readOnly: readOnly, showCaret: showCaret, openDirection: openDirection, onChange: onEndDateChange, onFocus: onEndDateFocus, onKeyDownArrowDown: onKeyDownArrowDown, onKeyDownQuestionMark: onKeyDownQuestionMark, onKeyDownTab: onEndDateTab, verticalSpacing: verticalSpacing, small: small, regular: regular }), showClearDates && _react["default"].createElement("button", (0, _extends2["default"])({ type: "button", "aria-label": phrases.clearDates }, (0, _reactWithStyles.css)(styles.DateRangePickerInput_clearDates, small && styles.DateRangePickerInput_clearDates__small, !customCloseIcon && styles.DateRangePickerInput_clearDates_default, !(startDate || endDate) && styles.DateRangePickerInput_clearDates__hide), { onClick: onClearDates, disabled: disabled }), closeIcon), inputIconPosition === _constants.ICON_AFTER_POSITION && inputIcon); } DateRangePickerInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {}; DateRangePickerInput.defaultProps = defaultProps; var _default = (0, _reactWithStyles.withStyles)(function (_ref2) { var _ref2$reactDates = _ref2.reactDates, border = _ref2$reactDates.border, color = _ref2$reactDates.color, sizing = _ref2$reactDates.sizing; return { DateRangePickerInput: { backgroundColor: color.background, display: 'inline-block' }, DateRangePickerInput__disabled: { background: color.disabled }, DateRangePickerInput__withBorder: { borderColor: color.border, borderWidth: border.pickerInput.borderWidth, borderStyle: border.pickerInput.borderStyle, borderRadius: border.pickerInput.borderRadius }, DateRangePickerInput__rtl: { direction: (0, _noflip["default"])('rtl') }, DateRangePickerInput__block: { display: 'block' }, DateRangePickerInput__showClearDates: { paddingRight: 30 // TODO: should be noflip wrapped and handled by an isRTL prop }, DateRangePickerInput_arrow: { display: 'inline-block', verticalAlign: 'middle', color: color.text }, DateRangePickerInput_arrow_svg: { verticalAlign: 'middle', fill: color.text, height: sizing.arrowWidth, width: sizing.arrowWidth }, DateRangePickerInput_clearDates: { background: 'none', border: 0, color: 'inherit', font: 'inherit', lineHeight: 'normal', overflow: 'visible', cursor: 'pointer', padding: 10, margin: '0 10px 0 5px', // TODO: should be noflip wrapped and handled by an isRTL prop position: 'absolute', right: 0, // TODO: should be noflip wrapped and handled by an isRTL prop top: '50%', transform: 'translateY(-50%)' }, DateRangePickerInput_clearDates__small: { padding: 6 }, DateRangePickerInput_clearDates_default: { ':focus': { background: color.core.border, borderRadius: '50%' }, ':hover': { background: color.core.border, borderRadius: '50%' } }, DateRangePickerInput_clearDates__hide: { visibility: 'hidden' }, DateRangePickerInput_clearDates_svg: { fill: color.core.grayLight, height: 12, width: 15, verticalAlign: 'middle' }, DateRangePickerInput_clearDates_svg__small: { height: 9 }, DateRangePickerInput_calendarIcon: { background: 'none', border: 0, color: 'inherit', font: 'inherit', lineHeight: 'normal', overflow: 'visible', cursor: 'pointer', display: 'inline-block', verticalAlign: 'middle', padding: 10, margin: '0 5px 0 10px' // TODO: should be noflip wrapped and handled by an isRTL prop }, DateRangePickerInput_calendarIcon_svg: { fill: color.core.grayLight, height: 15, width: 14, verticalAlign: 'middle' } }; }, { pureComponent: typeof _react["default"].PureComponent !== 'undefined' })(DateRangePickerInput); exports["default"] = _default;