react-dates
Version:
A responsive and accessible date range picker component built with React
290 lines (260 loc) • 11.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
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 _DateInput = _interopRequireDefault(require("./DateInput"));
var _IconPositionShape = _interopRequireDefault(require("../shapes/IconPositionShape"));
var _CloseButton = _interopRequireDefault(require("./CloseButton"));
var _CalendarIcon = _interopRequireDefault(require("./CalendarIcon"));
var _OpenDirectionShape = _interopRequireDefault(require("../shapes/OpenDirectionShape"));
var _constants = require("../constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var propTypes = process.env.NODE_ENV !== "production" ? (0, _airbnbPropTypes.forbidExtraProps)(_objectSpread({}, _reactWithStyles.withStylesPropTypes, {
id: _propTypes["default"].string.isRequired,
children: _propTypes["default"].node,
placeholder: _propTypes["default"].string,
ariaLabel: _propTypes["default"].string,
displayValue: _propTypes["default"].string,
screenReaderMessage: _propTypes["default"].string,
focused: _propTypes["default"].bool,
isFocused: _propTypes["default"].bool,
// describes actual DOM focus
disabled: _propTypes["default"].bool,
required: _propTypes["default"].bool,
readOnly: _propTypes["default"].bool,
openDirection: _OpenDirectionShape["default"],
showCaret: _propTypes["default"].bool,
showClearDate: _propTypes["default"].bool,
customCloseIcon: _propTypes["default"].node,
showDefaultInputIcon: _propTypes["default"].bool,
inputIconPosition: _IconPositionShape["default"],
customInputIcon: _propTypes["default"].node,
isRTL: _propTypes["default"].bool,
noBorder: _propTypes["default"].bool,
block: _propTypes["default"].bool,
small: _propTypes["default"].bool,
regular: _propTypes["default"].bool,
verticalSpacing: _airbnbPropTypes.nonNegativeInteger,
onChange: _propTypes["default"].func,
onClearDate: _propTypes["default"].func,
onFocus: _propTypes["default"].func,
onKeyDownShiftTab: _propTypes["default"].func,
onKeyDownTab: _propTypes["default"].func,
onKeyDownArrowDown: _propTypes["default"].func,
onKeyDownQuestionMark: _propTypes["default"].func,
// i18n
phrases: _propTypes["default"].shape((0, _getPhrasePropTypes["default"])(_defaultPhrases.SingleDatePickerInputPhrases))
})) : {};;
var defaultProps = {
children: null,
placeholder: 'Select Date',
ariaLabel: undefined,
displayValue: '',
screenReaderMessage: '',
focused: false,
isFocused: false,
disabled: false,
required: false,
readOnly: false,
openDirection: _constants.OPEN_DOWN,
showCaret: false,
showClearDate: false,
showDefaultInputIcon: false,
inputIconPosition: _constants.ICON_BEFORE_POSITION,
customCloseIcon: null,
customInputIcon: null,
isRTL: false,
noBorder: false,
block: false,
small: false,
regular: false,
verticalSpacing: undefined,
onChange: function onChange() {},
onClearDate: function onClearDate() {},
onFocus: function onFocus() {},
onKeyDownShiftTab: function onKeyDownShiftTab() {},
onKeyDownTab: function onKeyDownTab() {},
onKeyDownArrowDown: function onKeyDownArrowDown() {},
onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
// i18n
phrases: _defaultPhrases.SingleDatePickerInputPhrases
};
function SingleDatePickerInput(_ref) {
var id = _ref.id,
children = _ref.children,
placeholder = _ref.placeholder,
ariaLabel = _ref.ariaLabel,
displayValue = _ref.displayValue,
focused = _ref.focused,
isFocused = _ref.isFocused,
disabled = _ref.disabled,
required = _ref.required,
readOnly = _ref.readOnly,
showCaret = _ref.showCaret,
showClearDate = _ref.showClearDate,
showDefaultInputIcon = _ref.showDefaultInputIcon,
inputIconPosition = _ref.inputIconPosition,
phrases = _ref.phrases,
onClearDate = _ref.onClearDate,
onChange = _ref.onChange,
onFocus = _ref.onFocus,
onKeyDownShiftTab = _ref.onKeyDownShiftTab,
onKeyDownTab = _ref.onKeyDownTab,
onKeyDownArrowDown = _ref.onKeyDownArrowDown,
onKeyDownQuestionMark = _ref.onKeyDownQuestionMark,
screenReaderMessage = _ref.screenReaderMessage,
customCloseIcon = _ref.customCloseIcon,
customInputIcon = _ref.customInputIcon,
openDirection = _ref.openDirection,
isRTL = _ref.isRTL,
noBorder = _ref.noBorder,
block = _ref.block,
small = _ref.small,
regular = _ref.regular,
verticalSpacing = _ref.verticalSpacing,
styles = _ref.styles;
var calendarIcon = customInputIcon || _react["default"].createElement(_CalendarIcon["default"], (0, _reactWithStyles.css)(styles.SingleDatePickerInput_calendarIcon_svg));
var closeIcon = customCloseIcon || _react["default"].createElement(_CloseButton["default"], (0, _reactWithStyles.css)(styles.SingleDatePickerInput_clearDate_svg, small && styles.SingleDatePickerInput_clearDate_svg__small));
var screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
var inputIcon = (showDefaultInputIcon || customInputIcon !== null) && _react["default"].createElement("button", _extends({}, (0, _reactWithStyles.css)(styles.SingleDatePickerInput_calendarIcon), {
type: "button",
disabled: disabled,
"aria-label": phrases.focusStartDate,
onClick: onFocus
}), calendarIcon);
return _react["default"].createElement("div", (0, _reactWithStyles.css)(styles.SingleDatePickerInput, disabled && styles.SingleDatePickerInput__disabled, isRTL && styles.SingleDatePickerInput__rtl, !noBorder && styles.SingleDatePickerInput__withBorder, block && styles.SingleDatePickerInput__block, showClearDate && styles.SingleDatePickerInput__showClearDate), inputIconPosition === _constants.ICON_BEFORE_POSITION && inputIcon, _react["default"].createElement(_DateInput["default"], {
id: id,
placeholder: placeholder,
ariaLabel: ariaLabel,
displayValue: displayValue,
screenReaderMessage: screenReaderText,
focused: focused,
isFocused: isFocused,
disabled: disabled,
required: required,
readOnly: readOnly,
showCaret: showCaret,
onChange: onChange,
onFocus: onFocus,
onKeyDownShiftTab: onKeyDownShiftTab,
onKeyDownTab: onKeyDownTab,
onKeyDownArrowDown: onKeyDownArrowDown,
onKeyDownQuestionMark: onKeyDownQuestionMark,
openDirection: openDirection,
verticalSpacing: verticalSpacing,
small: small,
regular: regular,
block: block
}), children, showClearDate && _react["default"].createElement("button", _extends({}, (0, _reactWithStyles.css)(styles.SingleDatePickerInput_clearDate, small && styles.SingleDatePickerInput_clearDate__small, !customCloseIcon && styles.SingleDatePickerInput_clearDate__default, !displayValue && styles.SingleDatePickerInput_clearDate__hide), {
type: "button",
"aria-label": phrases.clearDate,
disabled: disabled,
onClick: onClearDate
}), closeIcon), inputIconPosition === _constants.ICON_AFTER_POSITION && inputIcon);
}
SingleDatePickerInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
SingleDatePickerInput.defaultProps = defaultProps;
var _default = (0, _reactWithStyles.withStyles)(function (_ref2) {
var _ref2$reactDates = _ref2.reactDates,
border = _ref2$reactDates.border,
color = _ref2$reactDates.color;
return {
SingleDatePickerInput: {
display: 'inline-block',
backgroundColor: color.background
},
SingleDatePickerInput__withBorder: {
borderColor: color.border,
borderWidth: border.pickerInput.borderWidth,
borderStyle: border.pickerInput.borderStyle,
borderRadius: border.pickerInput.borderRadius
},
SingleDatePickerInput__rtl: {
direction: (0, _noflip["default"])('rtl')
},
SingleDatePickerInput__disabled: {
backgroundColor: color.disabled
},
SingleDatePickerInput__block: {
display: 'block'
},
SingleDatePickerInput__showClearDate: {
paddingRight: 30 // TODO: should be noflip wrapped and handled by an isRTL prop
},
SingleDatePickerInput_clearDate: {
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%)'
},
SingleDatePickerInput_clearDate__default: {
':focus': {
background: color.core.border,
borderRadius: '50%'
},
':hover': {
background: color.core.border,
borderRadius: '50%'
}
},
SingleDatePickerInput_clearDate__small: {
padding: 6
},
SingleDatePickerInput_clearDate__hide: {
visibility: 'hidden'
},
SingleDatePickerInput_clearDate_svg: {
fill: color.core.grayLight,
height: 12,
width: 15,
verticalAlign: 'middle'
},
SingleDatePickerInput_clearDate_svg__small: {
height: 9
},
SingleDatePickerInput_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
},
SingleDatePickerInput_calendarIcon_svg: {
fill: color.core.grayLight,
height: 15,
width: 14,
verticalAlign: 'middle'
}
};
}, {
pureComponent: typeof _react["default"].PureComponent !== 'undefined'
})(SingleDatePickerInput);
exports["default"] = _default;