UNPKG

react-cm-ui

Version:
715 lines (604 loc) 26.4 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _lodash = require("lodash"); var _classnames = _interopRequireDefault(require("classnames")); var _momentTimezone = _interopRequireDefault(require("moment-timezone")); var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes")); var _propTypes = _interopRequireDefault(require("prop-types")); var _react = _interopRequireDefault(require("react")); var _reactTether = _interopRequireDefault(require("react-tether")); var _datePickerUtils = _interopRequireDefault(require("../../utils/datePickerUtils")); var _dateUtils = _interopRequireDefault(require("../../utils/dateUtils")); var _icon = _interopRequireDefault(require("../../dataDisplay/icon")); var _input = _interopRequireDefault(require("../input")); var _datePickerCalendarOnClickOutside = _interopRequireDefault(require("../datePickerCalendar/datePickerCalendarOnClickOutside")); var _withStyles = _interopRequireDefault(require("../../styles/withStyles")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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) { _defineProperty(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; } 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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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; } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var propTypes = { /** * Override or extend the styles applied to DatePickerInput. */ classes: _propTypes["default"].shape({ isFluid: _propTypes["default"].string, root: _propTypes["default"].string }), /** * Assign additional class names to DatePickerInput. */ className: _propTypes["default"].string, /** * Used for DOM testing. https://testing-library.com/docs/queries/bytestid/ */ dataTestId: _propTypes["default"].string, /** * Single date value. Moment object. */ date: _reactMomentProptypes["default"].momentObj, /** * 'From' ('Start') Date for a Date Range. Moment object. */ dateFrom: _reactMomentProptypes["default"].momentObj, /** * 'To' ('End') Date for a Date Range. Moment object. */ dateTo: _reactMomentProptypes["default"].momentObj, /** * Deprecated prop. Please use `disable` instead. */ disable: _propTypes["default"].bool, /** * A DatePickerInput can be disabled. */ disabled: _propTypes["default"].bool, /** * String specifying the way the date value will be formatted. */ displayFormat: _propTypes["default"].string, /** * Indicate that there is a validation error for this DatePickerInput control. */ errorMessage: _propTypes["default"].string, /** * Indicates dates that should be highlighted on the DatePickerInput's calendar control. Array of Moment objects. */ events: _propTypes["default"].arrayOf(_reactMomentProptypes["default"].momentObj), /** * Specifies a range of dates that are not selectable. Array of Moment objects. */ excludeDates: _propTypes["default"].arrayOf(_reactMomentProptypes["default"].momentObj), /** * Function that is used to filter out dates that are to not be selectable. */ filterDates: _propTypes["default"].func, /** * The DatePickerInput will be resized to its parent container's width. */ fluid: _propTypes["default"].bool, /** * Forwarded Ref */ forwardedRef: _propTypes["default"].oneOfType([// Either a function _propTypes["default"].func, // Or the instance of a DOM native element (see the note about SSR) _propTypes["default"].shape({ current: _propTypes["default"].instanceOf(Element) })]), /** * Specify an element ID this DatePickerInput control. */ id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]), /** * Specifies a range of dates that are selectable. Array of Moment objects. */ includeDates: _propTypes["default"].arrayOf(_reactMomentProptypes["default"].momentObj), /** * Specifies a label for the DatePickerInput control. */ label: _propTypes["default"].string, /** * Specifies which locale will be used when formatting date values. */ locale: _propTypes["default"].string, /** * Specifies maximum selectable date. Moment object. */ maxDate: _reactMomentProptypes["default"].momentObj, /** * Specifies minimum selectable date. Moment object. */ minDate: _reactMomentProptypes["default"].momentObj, /** * DatePickerInput can handle an onBlur event from parent. */ onBlur: _propTypes["default"].func, /** * Event handler for consumer to control state outside of the DatePickerInput. */ onChange: _propTypes["default"].func, /** * Event handler called when the month in the DatePickerInput's calendar control changes. */ onMonthChange: _propTypes["default"].func, /** * If true, specifies that the DatePickerInput represents the 'From' (or 'Start') date of a date range. */ rangeFrom: _propTypes["default"].bool, /** * If true, specifies that the DatePickerInput represents the 'To' (or 'End') date of a date range. */ rangeTo: _propTypes["default"].bool, /** * Indicates whether the DatePickerInput control represents a required field. */ required: _propTypes["default"].bool, /** * Supply any inline styles to the DatePickerInput's container. Mainly used for padding and margins. */ style: _propTypes["default"].shape({}), /** * Allows the DatePickerInput to be focused via the Tab key. */ tabIndex: _propTypes["default"].number }; var defaultProps = { classes: null, className: null, dataTestId: undefined, date: null, dateFrom: null, dateTo: null, disable: false, disabled: false, displayFormat: 'MM/DD/YYYY', errorMessage: null, events: null, excludeDates: null, filterDates: null, fluid: false, forwardedRef: undefined, id: null, includeDates: null, label: null, locale: 'en-US', maxDate: null, minDate: null, onBlur: null, onChange: null, onMonthChange: null, rangeFrom: false, rangeTo: false, required: false, style: null, tabIndex: -1 }; var styles = function styles(theme) { return { root: { display: 'inline-block', '&$isFluid': { width: '100%' } }, isFluid: {}, '@global': { '.date-picker-tether-element': { zIndex: theme.zIndex.datePickerInputCalendar } } }; }; /** * The DatePickerInput represents an input for storing a date value. * * When clicked, it can display an interactive calendar control for selecting * the date. * * A date value can also be typed into the input manually. */ var DatePickerInput = /*#__PURE__*/function (_React$PureComponent) { _inherits(DatePickerInput, _React$PureComponent); var _super = _createSuper(DatePickerInput); function DatePickerInput(props) { var _props$forwardedRef; var _this; _classCallCheck(this, DatePickerInput); _this = _super.call(this, props); var isDateRange = props.rangeFrom || props.rangeTo; var newDate = isDateRange ? undefined : props.date; var newDateFrom = !isDateRange ? undefined : props.dateFrom; var newDateTo = !isDateRange ? undefined : props.dateTo; var inputValue; if (props.rangeFrom) { inputValue = _this.safeDateFormat(newDateFrom, props.locale); } else if (props.rangeTo) { inputValue = _this.safeDateFormat(newDateTo, props.locale); } else { inputValue = _this.safeDateFormat(newDate, props.locale); } _this.state = { date: newDate, dateFrom: newDateFrom, dateTo: newDateTo, isCalendarOpen: false, inputValue: inputValue, isFocused: false }; _this.dateFormats = _this.getAllowedDateFormats('MM/DD/YYYY'); _this.getMaxDate = _this.getMaxDate.bind(_assertThisInitialized(_this)); _this.getMinDate = _this.getMinDate.bind(_assertThisInitialized(_this)); _this.onCalendarChange = _this.onCalendarChange.bind(_assertThisInitialized(_this)); _this.onCalendarClickOutside = _this.onCalendarClickOutside.bind(_assertThisInitialized(_this)); _this.onIconClick = _this.onIconClick.bind(_assertThisInitialized(_this)); _this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this)); _this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this)); _this.onInputClick = _this.onInputClick.bind(_assertThisInitialized(_this)); _this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this)); _this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this)); _this.onMonthChange = _this.onMonthChange.bind(_assertThisInitialized(_this)); _this.datePickerInput = (_props$forwardedRef = props.forwardedRef) !== null && _props$forwardedRef !== void 0 ? _props$forwardedRef : /*#__PURE__*/_react["default"].createRef(); return _this; } _createClass(DatePickerInput, [{ key: "componentDidMount", value: function componentDidMount() { var _this$props = this.props, onChange = _this$props.onChange, rangeFrom = _this$props.rangeFrom, rangeTo = _this$props.rangeTo; if ((rangeFrom || rangeTo) && !(0, _lodash.isFunction)(onChange)) { // eslint-disable-next-line no-console console.error('The onChange prop is required when using the rangeFrom or rangeTo props'); } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps) { var _this$props2 = this.props, date = _this$props2.date, dateFrom = _this$props2.dateFrom, dateTo = _this$props2.dateTo, locale = _this$props2.locale, rangeFrom = _this$props2.rangeFrom, rangeTo = _this$props2.rangeTo; if (!_datePickerUtils["default"].isSameDay(date, prevProps.date) || !_datePickerUtils["default"].isSameDay(dateFrom, prevProps.dateFrom) || !_datePickerUtils["default"].isSameDay(dateTo, prevProps.dateTo) || !(0, _lodash.isEqual)(locale, prevProps.locale)) { var isDateRange = rangeFrom || rangeTo; var newDate = isDateRange ? undefined : date; var newDateFrom = !isDateRange ? undefined : dateFrom; var newDateTo = !isDateRange ? undefined : dateTo; var newInputValue; if (rangeFrom) { newInputValue = this.safeDateFormat(newDateFrom, locale); } else if (rangeTo) { newInputValue = this.safeDateFormat(newDateTo, locale); } else { newInputValue = this.safeDateFormat(newDate, locale); } this.setState({ date: newDate, dateFrom: newDateFrom, dateTo: newDateTo, inputValue: newInputValue }); } } }, { key: "onCalendarChange", value: function onCalendarChange(_ref) { var date = _ref.date, dateFrom = _ref.dateFrom, dateTo = _ref.dateTo; var _this$props3 = this.props, disable = _this$props3.disable, disabled = _this$props3.disabled, onChange = _this$props3.onChange; var isNotDisabled = !disable && !disabled; var isOnChangeFunc = (0, _lodash.isFunction)(onChange); if (isNotDisabled && isOnChangeFunc) { onChange({ date: date, dateFrom: dateFrom, dateTo: dateTo }); } if (isNotDisabled && !isOnChangeFunc) { var locale = this.props.locale; this.setState({ date: date, inputValue: this.safeDateFormat(date, locale) }); } this.setOpen(false); } }, { key: "onCalendarClickOutside", value: function onCalendarClickOutside() { this.setOpen(false); } }, { key: "onIconClick", value: function onIconClick() { var _this$props4 = this.props, disable = _this$props4.disable, disabled = _this$props4.disabled; var isNotDisabled = !disable && !disabled; if (isNotDisabled) { this.datePickerInput.current.inputElement.focus(); } } }, { key: "onInputBlur", value: function onInputBlur(event) { var onBlur = this.props.onBlur; if ((0, _lodash.isFunction)(onBlur)) { onBlur(event); } this.setState({ isFocused: false }); } }, { key: "onInputChange", value: function onInputChange(value) { var _this$props5 = this.props, disable = _this$props5.disable, disabled = _this$props5.disabled, locale = _this$props5.locale, rangeFrom = _this$props5.rangeFrom, rangeTo = _this$props5.rangeTo; var _this$state = this.state, dateFrom = _this$state.dateFrom, dateTo = _this$state.dateTo; var date = (0, _momentTimezone["default"])(value, this.dateFormats, locale || _momentTimezone["default"].locale(), true); var isNotDisabled = !disable && !disabled; var isValidValueChange = isNotDisabled && date.isValid() && !_datePickerUtils["default"].isDayDisabled(date, this.props); var isValidUpdateToNull = !isValidValueChange && isNotDisabled && (value === '' || value === '__/__/____'); var onChangeParam = {}; var updatedDateValue = isValidValueChange ? date : null; if (rangeFrom) { onChangeParam.dateFrom = updatedDateValue; onChangeParam.dateTo = dateTo; } else if (rangeTo) { onChangeParam.dateFrom = dateFrom; onChangeParam.dateTo = updatedDateValue; } else { onChangeParam.date = updatedDateValue; } if (isValidValueChange || isValidUpdateToNull) { this.onCalendarChange(onChangeParam); } } }, { key: "onInputClick", value: function onInputClick() { this.setState({ isFocused: true }); } }, { key: "onInputFocus", value: function onInputFocus() { this.setOpen(true); this.setState({ isFocused: true }); } }, { key: "onInputKeyDown", value: function onInputKeyDown(event) { if (event.keyCode === 9 || event.keyCode === 13) { this.setOpen(false); } } }, { key: "onMonthChange", value: function onMonthChange(month, year) { var onMonthChange = this.props.onMonthChange; if ((0, _lodash.isFunction)(onMonthChange)) { onMonthChange(month, year); } } }, { key: "getAllowedDateFormats", value: function getAllowedDateFormats(specifiedFormat) { var formats = _dateUtils["default"].getAllowedDateFormats(); if ((0, _lodash.indexOf)(formats, specifiedFormat) < 0) { formats = [specifiedFormat].concat(_toConsumableArray(formats)); } return formats; } }, { key: "getMaxDate", value: function getMaxDate() { var maxDate = this.props.maxDate; return maxDate; } }, { key: "getMinDate", value: function getMinDate() { var minDate = this.props.minDate; return minDate; } }, { key: "setOpen", value: function setOpen(open) { this.setState({ isCalendarOpen: open }); } }, { key: "safeDateFormat", value: function safeDateFormat(date, locale) { var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MM/DD/YYYY'; if (date && date.isValid()) { return date.clone().locale(locale || _momentTimezone["default"].locale()).format(format); } if ((0, _lodash.isNil)(date)) { return ''; } return null; } }, { key: "render", value: function render() { var _this2 = this; var _this$props6 = this.props, classes = _this$props6.classes, className = _this$props6.className, errorMessage = _this$props6.errorMessage, dataTestId = _this$props6.dataTestId, disable = _this$props6.disable, disabled = _this$props6.disabled, displayFormat = _this$props6.displayFormat, events = _this$props6.events, excludeDates = _this$props6.excludeDates, filterDates = _this$props6.filterDates, fluid = _this$props6.fluid, id = _this$props6.id, includeDates = _this$props6.includeDates, label = _this$props6.label, locale = _this$props6.locale, rangeFrom = _this$props6.rangeFrom, rangeTo = _this$props6.rangeTo, required = _this$props6.required, style = _this$props6.style, tabIndex = _this$props6.tabIndex; var _this$state2 = this.state, date = _this$state2.date, dateFrom = _this$state2.dateFrom, dateTo = _this$state2.dateTo, isCalendarOpen = _this$state2.isCalendarOpen, inputValue = _this$state2.inputValue, isFocused = _this$state2.isFocused; var rootClasses = (0, _classnames["default"])('ui', 'date-picker-input', classes.root, className, _defineProperty({}, classes.isFluid, fluid)); var iconColor; if (isCalendarOpen) { iconColor = 'highlight'; } var isDisabled = disable || disabled; if (isDisabled) { iconColor = 'primary'; } var inputString = inputValue; if (!isFocused) { var dateFormat = this.safeDateFormat(date, locale, displayFormat); if (!(0, _lodash.isEmpty)(dateFormat)) { inputString = dateFormat; } } return /*#__PURE__*/_react["default"].createElement("div", { className: rootClasses, id: id, style: style }, /*#__PURE__*/_react["default"].createElement(_reactTether["default"], { attachment: "top left", classPrefix: "date-picker-tether", constraints: [{ to: 'window', attachment: 'together' }], renderElement: function renderElement(ref) { return isCalendarOpen && /*#__PURE__*/_react["default"].createElement("div", { ref: ref }, /*#__PURE__*/_react["default"].createElement(_datePickerCalendarOnClickOutside["default"], { controls: "dropdowns", date: date, dateFrom: dateFrom, dateTo: dateTo, events: events, excludeDates: excludeDates, filterDates: filterDates, includeDates: includeDates, locale: locale, maxDate: _this2.getMaxDate(), minDate: _this2.getMinDate(), mode: "input", onChange: _this2.onCalendarChange, onClose: _this2.onCalendarClickOutside, onMonthChange: _this2.onMonthChange, rangeFrom: rangeFrom, rangeTo: rangeTo })); }, renderTarget: function renderTarget(ref) { return /*#__PURE__*/_react["default"].createElement("div", { ref: ref }, /*#__PURE__*/_react["default"].createElement(_input["default"], { autoComplete: "off", "data-parsley-error-message": errorMessage, dataTestId: dataTestId, disable: isDisabled, fluid: fluid, guide: true, icon: /*#__PURE__*/_react["default"].createElement(_icon["default"], { color: iconColor, compact: true, disable: isDisabled, onClick: _this2.onIconClick, type: "calendar" }), keepCharPositions: true, label: label, mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/], onBlur: _this2.onInputBlur, onChange: _this2.onInputChange, onClick: _this2.onInputClick, onFocus: _this2.onInputFocus, onKeyDown: _this2.onInputKeyDown, placeholder: "mm/dd/yyyy", required: required, ref: _this2.datePickerInput, tabIndex: tabIndex, type: "text", value: inputString })); }, targetAttachment: "bottom left", targetOffset: "11px 0" })); } }]); return DatePickerInput; }(_react["default"].PureComponent); DatePickerInput.propTypes = propTypes; DatePickerInput.defaultProps = defaultProps; var DatePickerInputWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) { return ( /*#__PURE__*/ // eslint-disable-next-line react/jsx-props-no-spreading _react["default"].createElement(DatePickerInput, _extends({}, props, { forwardedRef: ref })) ); }); var wrapperPropTypes = _objectSpread({}, propTypes); delete wrapperPropTypes.forwardedRef; var wrapperDefaultProps = _objectSpread({}, defaultProps); delete wrapperDefaultProps.forwardedRef; DatePickerInputWrapper.propTypes = wrapperPropTypes; DatePickerInputWrapper.defaultProps = wrapperDefaultProps; DatePickerInputWrapper.displayName = 'DatePickerInput'; var _default = (0, _withStyles["default"])(styles)(DatePickerInputWrapper); exports["default"] = _default;