@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/esm/components/SingleDatePickerInput.js

@@ -0,0 +1,264 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { SingleDatePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
+import DateInput from './DateInput';
+import IconPositionShape from '../shapes/IconPositionShape';
+import CloseButton from './CloseButton';
+import CalendarIcon from './CalendarIcon';
+import openDirectionShape from '../shapes/OpenDirectionShape';
+import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
+  titleText: PropTypes.string,
+  displayValue: PropTypes.string,
+  screenReaderMessage: PropTypes.string,
+  focused: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  // describes actual DOM focus
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
+  showCaret: PropTypes.bool,
+  showClearDate: PropTypes.bool,
+  customCloseIcon: PropTypes.node,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  customInputIcon: PropTypes.node,
+  isRTL: PropTypes.bool,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+  onChange: PropTypes.func,
+  onClearDate: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDownShiftTab: PropTypes.func,
+  onKeyDownTab: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+  // i18n
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerInputPhrases))
+})) : {};
+var defaultProps = {
+  children: null,
+  placeholder: 'Select Date',
+  ariaLabel: undefined,
+  autoComplete: 'off',
+  titleText: undefined,
+  displayValue: '',
+  screenReaderMessage: '',
+  focused: false,
+  isFocused: false,
+  disabled: false,
+  required: false,
+  readOnly: false,
+  openDirection: OPEN_DOWN,
+  showCaret: false,
+  showClearDate: false,
+  showDefaultInputIcon: false,
+  inputIconPosition: 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: SingleDatePickerInputPhrases
+};
+function SingleDatePickerInput(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    placeholder = _ref.placeholder,
+    ariaLabel = _ref.ariaLabel,
+    autoComplete = _ref.autoComplete,
+    titleText = _ref.titleText,
+    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,
+    css = _ref.css,
+    styles = _ref.styles;
+  var calendarIcon = customInputIcon || /*#__PURE__*/React.createElement(CalendarIcon, css(styles.SingleDatePickerInput_calendarIcon_svg));
+  var closeIcon = customCloseIcon || /*#__PURE__*/React.createElement(CloseButton, css(styles.SingleDatePickerInput_clearDate_svg, small && styles.SingleDatePickerInput_clearDate_svg__small));
+  var screenReaderText = screenReaderMessage || phrases.keyboardForwardNavigationInstructions;
+  var inputIcon = (showDefaultInputIcon || customInputIcon !== null) && /*#__PURE__*/React.createElement("button", _extends({}, css(styles.SingleDatePickerInput_calendarIcon), {
+    type: "button",
+    disabled: disabled,
+    "aria-label": phrases.focusStartDate,
+    onClick: onFocus,
+    tabIndex: "-1"
+  }), calendarIcon);
+  return /*#__PURE__*/React.createElement("div", css(styles.SingleDatePickerInput, disabled && styles.SingleDatePickerInput__disabled, isRTL && styles.SingleDatePickerInput__rtl, !noBorder && styles.SingleDatePickerInput__withBorder, block && styles.SingleDatePickerInput__block, showClearDate && styles.SingleDatePickerInput__showClearDate), inputIconPosition === ICON_BEFORE_POSITION && inputIcon, /*#__PURE__*/React.createElement(DateInput, {
+    id: id,
+    placeholder: placeholder,
+    ariaLabel: ariaLabel,
+    autoComplete: autoComplete,
+    titleText: titleText,
+    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 && /*#__PURE__*/React.createElement("button", _extends({}, 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 === ICON_AFTER_POSITION && inputIcon);
+}
+SingleDatePickerInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+SingleDatePickerInput.defaultProps = defaultProps;
+export default 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: noflip('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.PureComponent !== 'undefined'
+})(SingleDatePickerInput);

package/esm/components/SingleDatePickerInputController.js

@@ -0,0 +1,260 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import shallowEqual from "enzyme-shallow-equal";
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import openDirectionShape from '../shapes/OpenDirectionShape';
+import { SingleDatePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import SingleDatePickerInput from './SingleDatePickerInput';
+import IconPositionShape from '../shapes/IconPositionShape';
+import DisabledShape from '../shapes/DisabledShape';
+import toMomentObject from '../utils/toMomentObject';
+import toLocalizedDateString from '../utils/toLocalizedDateString';
+import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
+import { ICON_BEFORE_POSITION, OPEN_DOWN } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps({
+  children: PropTypes.node,
+  date: momentPropTypes.momentObj,
+  onDateChange: PropTypes.func.isRequired,
+  focused: PropTypes.bool,
+  onFocusChange: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
+  titleText: PropTypes.string,
+  screenReaderMessage: PropTypes.string,
+  showClearDate: PropTypes.bool,
+  showCaret: PropTypes.bool,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  disabled: DisabledShape,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+  keepOpenOnDateSelect: PropTypes.bool,
+  reopenPickerOnClearDate: PropTypes.bool,
+  isOutsideRange: PropTypes.func,
+  isDayBlocked: PropTypes.func,
+  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  onClose: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+  customInputIcon: PropTypes.node,
+  customCloseIcon: PropTypes.node,
+  // accessibility
+  isFocused: PropTypes.bool,
+  // i18n
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerInputPhrases)),
+  isRTL: PropTypes.bool
+}) : {};
+var defaultProps = {
+  children: null,
+  date: null,
+  focused: false,
+  placeholder: '',
+  ariaLabel: undefined,
+  autoComplete: 'off',
+  titleText: undefined,
+  screenReaderMessage: 'Date',
+  showClearDate: false,
+  showCaret: false,
+  showDefaultInputIcon: false,
+  inputIconPosition: ICON_BEFORE_POSITION,
+  disabled: false,
+  required: false,
+  readOnly: false,
+  openDirection: OPEN_DOWN,
+  noBorder: false,
+  block: false,
+  small: false,
+  regular: false,
+  verticalSpacing: undefined,
+  keepOpenOnDateSelect: false,
+  reopenPickerOnClearDate: false,
+  isOutsideRange: function isOutsideRange(day) {
+    return !isInclusivelyAfterDay(day, moment());
+  },
+  isDayBlocked: function isDayBlocked() {
+    return false;
+  },
+  displayFormat: function displayFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  onClose: function onClose() {},
+  onKeyDownArrowDown: function onKeyDownArrowDown() {},
+  onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
+  customInputIcon: null,
+  customCloseIcon: null,
+  // accessibility
+  isFocused: false,
+  // i18n
+  phrases: SingleDatePickerInputPhrases,
+  isRTL: false
+};
+var SingleDatePickerInputController = /*#__PURE__*/function (_ref2, _ref) {
+  function SingleDatePickerInputController(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    _this.onChange = _this.onChange.bind(_this);
+    _this.onFocus = _this.onFocus.bind(_this);
+    _this.onClearFocus = _this.onClearFocus.bind(_this);
+    _this.clearDate = _this.clearDate.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(SingleDatePickerInputController, _ref2);
+  var _proto = SingleDatePickerInputController.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.onChange = function onChange(dateString) {
+    var _this$props = this.props,
+      isOutsideRange = _this$props.isOutsideRange,
+      isDayBlocked = _this$props.isDayBlocked,
+      keepOpenOnDateSelect = _this$props.keepOpenOnDateSelect,
+      onDateChange = _this$props.onDateChange,
+      onFocusChange = _this$props.onFocusChange,
+      onClose = _this$props.onClose;
+    var newDate = toMomentObject(dateString, this.getDisplayFormat());
+    var isValid = newDate && !isOutsideRange(newDate) && !isDayBlocked(newDate);
+    if (isValid) {
+      onDateChange(newDate);
+      if (!keepOpenOnDateSelect) {
+        onFocusChange({
+          focused: false
+        });
+        onClose({
+          date: newDate
+        });
+      }
+    } else {
+      onDateChange(null);
+    }
+  };
+  _proto.onFocus = function onFocus() {
+    var _this$props2 = this.props,
+      onFocusChange = _this$props2.onFocusChange,
+      disabled = _this$props2.disabled;
+    if (!disabled) {
+      onFocusChange({
+        focused: true
+      });
+    }
+  };
+  _proto.onClearFocus = function onClearFocus() {
+    var _this$props3 = this.props,
+      focused = _this$props3.focused,
+      onFocusChange = _this$props3.onFocusChange,
+      onClose = _this$props3.onClose,
+      date = _this$props3.date;
+    if (!focused) return;
+    onFocusChange({
+      focused: false
+    });
+    onClose({
+      date: date
+    });
+  };
+  _proto.getDisplayFormat = function getDisplayFormat() {
+    var displayFormat = this.props.displayFormat;
+    return typeof displayFormat === 'string' ? displayFormat : displayFormat();
+  };
+  _proto.getDateString = function getDateString(date) {
+    var displayFormat = this.getDisplayFormat();
+    if (date && displayFormat) {
+      return date && date.format(displayFormat);
+    }
+    return toLocalizedDateString(date);
+  };
+  _proto.clearDate = function clearDate() {
+    var _this$props4 = this.props,
+      onDateChange = _this$props4.onDateChange,
+      reopenPickerOnClearDate = _this$props4.reopenPickerOnClearDate,
+      onFocusChange = _this$props4.onFocusChange;
+    onDateChange(null);
+    if (reopenPickerOnClearDate) {
+      onFocusChange({
+        focused: true
+      });
+    }
+  };
+  _proto.render = function render() {
+    var _this$props5 = this.props,
+      children = _this$props5.children,
+      id = _this$props5.id,
+      placeholder = _this$props5.placeholder,
+      ariaLabel = _this$props5.ariaLabel,
+      autoComplete = _this$props5.autoComplete,
+      titleText = _this$props5.titleText,
+      disabled = _this$props5.disabled,
+      focused = _this$props5.focused,
+      isFocused = _this$props5.isFocused,
+      required = _this$props5.required,
+      readOnly = _this$props5.readOnly,
+      openDirection = _this$props5.openDirection,
+      showClearDate = _this$props5.showClearDate,
+      showCaret = _this$props5.showCaret,
+      showDefaultInputIcon = _this$props5.showDefaultInputIcon,
+      inputIconPosition = _this$props5.inputIconPosition,
+      customCloseIcon = _this$props5.customCloseIcon,
+      customInputIcon = _this$props5.customInputIcon,
+      date = _this$props5.date,
+      phrases = _this$props5.phrases,
+      onKeyDownArrowDown = _this$props5.onKeyDownArrowDown,
+      onKeyDownQuestionMark = _this$props5.onKeyDownQuestionMark,
+      screenReaderMessage = _this$props5.screenReaderMessage,
+      isRTL = _this$props5.isRTL,
+      noBorder = _this$props5.noBorder,
+      block = _this$props5.block,
+      small = _this$props5.small,
+      regular = _this$props5.regular,
+      verticalSpacing = _this$props5.verticalSpacing;
+    var displayValue = this.getDateString(date);
+    return /*#__PURE__*/React.createElement(SingleDatePickerInput, {
+      id: id,
+      placeholder: placeholder,
+      ariaLabel: ariaLabel,
+      autoComplete: autoComplete,
+      titleText: titleText,
+      focused: focused,
+      isFocused: isFocused,
+      disabled: disabled,
+      required: required,
+      readOnly: readOnly,
+      openDirection: openDirection,
+      showCaret: showCaret,
+      onClearDate: this.clearDate,
+      showClearDate: showClearDate,
+      showDefaultInputIcon: showDefaultInputIcon,
+      inputIconPosition: inputIconPosition,
+      customCloseIcon: customCloseIcon,
+      customInputIcon: customInputIcon,
+      displayValue: displayValue,
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      onKeyDownShiftTab: this.onClearFocus,
+      onKeyDownArrowDown: onKeyDownArrowDown,
+      onKeyDownQuestionMark: onKeyDownQuestionMark,
+      screenReaderMessage: screenReaderMessage,
+      phrases: phrases,
+      isRTL: isRTL,
+      noBorder: noBorder,
+      block: block,
+      small: small,
+      regular: regular,
+      verticalSpacing: verticalSpacing
+    }, children);
+  };
+  return SingleDatePickerInputController;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+export { SingleDatePickerInputController as default };
+SingleDatePickerInputController.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+SingleDatePickerInputController.defaultProps = defaultProps;

package/esm/constants.js

@@ -0,0 +1,28 @@
+export var DISPLAY_FORMAT = 'L';
+export var ISO_FORMAT = 'YYYY-MM-DD';
+export var ISO_MONTH_FORMAT = 'YYYY-MM'; // TODO delete this line of dead code on next breaking change
+
+export var START_DATE = 'startDate';
+export var END_DATE = 'endDate';
+export var HORIZONTAL_ORIENTATION = 'horizontal';
+export var VERTICAL_ORIENTATION = 'vertical';
+export var VERTICAL_SCROLLABLE = 'verticalScrollable';
+export var NAV_POSITION_BOTTOM = 'navPositionBottom';
+export var NAV_POSITION_TOP = 'navPositionTop';
+export var ICON_BEFORE_POSITION = 'before';
+export var ICON_AFTER_POSITION = 'after';
+export var INFO_POSITION_TOP = 'top';
+export var INFO_POSITION_BOTTOM = 'bottom';
+export var INFO_POSITION_BEFORE = 'before';
+export var INFO_POSITION_AFTER = 'after';
+export var ANCHOR_LEFT = 'left';
+export var ANCHOR_RIGHT = 'right';
+export var OPEN_DOWN = 'down';
+export var OPEN_UP = 'up';
+export var DAY_SIZE = 39;
+export var BLOCKED_MODIFIER = 'blocked';
+export var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export var FANG_WIDTH_PX = 20;
+export var FANG_HEIGHT_PX = 10;
+export var DEFAULT_VERTICAL_SPACING = 22;
+export var MODIFIER_KEY_NAMES = new Set(['Shift', 'Control', 'Alt', 'Meta']);