@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
879 lines (781 loc) • 36 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = require("./props/propTypes");
var _defaultProps = require("./props/defaultProps");
var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
var _CalendarView = _interopRequireDefault(require("./CalendarView"));
var _YearView = _interopRequireDefault(require("./YearView"));
var _DateTimePopupHeader = _interopRequireDefault(require("./DateTimePopupHeader"));
var _DateTimePopupFooter = _interopRequireDefault(require("./DateTimePopupFooter"));
var _Time = _interopRequireDefault(require("./Time"));
var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
var _common = require("../utils/datetime/common");
var _Common = require("../utils/Common");
var _constants = require("./constants");
var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
var _Layout = require("../Layout");
var _dateFormatUtils = require("./dateFormatUtils");
var _dateFormat = require("./dateFormatUtils/dateFormat");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function title(date, year, month) {
var monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
var HeadingText = "".concat(monthNames[month] || '', " ").concat(year);
return HeadingText;
}
var DateTime = /*#__PURE__*/function (_React$PureComponent) {
_inherits(DateTime, _React$PureComponent);
var _super = _createSuper(DateTime);
function DateTime(props) {
var _this;
_classCallCheck(this, DateTime);
_this = _super.call(this, props);
_this.getHours = _this.getHours.bind(_assertThisInitialized(_this));
_this.amPmSelect = _this.amPmSelect.bind(_assertThisInitialized(_this));
_this.hoursSelect = _this.hoursSelect.bind(_assertThisInitialized(_this));
_this.dateSelect = _this.dateSelect.bind(_assertThisInitialized(_this));
_this.handleClear = _this.handleClear.bind(_assertThisInitialized(_this));
_this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
_this.minutesSelect = _this.minutesSelect.bind(_assertThisInitialized(_this));
_this.modifyCalendar = _this.modifyCalendar.bind(_assertThisInitialized(_this));
_this.handleGetSelectedDate = _this.handleGetSelectedDate.bind(_assertThisInitialized(_this));
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
_this.handleCalendarNavigation = _this.handleCalendarNavigation.bind(_assertThisInitialized(_this));
_this.handleExposeMethods = _this.handleExposeMethods.bind(_assertThisInitialized(_this));
_this.handleDateReset = _this.handleDateReset.bind(_assertThisInitialized(_this));
_this.handleOpenYearView = _this.handleOpenYearView.bind(_assertThisInitialized(_this));
_this.handleSelectMonth = _this.handleSelectMonth.bind(_assertThisInitialized(_this));
_this.handleSelectYear = _this.handleSelectYear.bind(_assertThisInitialized(_this));
_this.handleSelectMonthViaYearView = _this.handleSelectMonthViaYearView.bind(_assertThisInitialized(_this));
_this.handleGetStateValues = _this.handleGetStateValues.bind(_assertThisInitialized(_this));
_this.handleYearViewToggle = _this.handleYearViewToggle.bind(_assertThisInitialized(_this));
var _props$i18nKeys$ampmT = props.i18nKeys.ampmText,
ampmText = _props$i18nKeys$ampmT === void 0 ? _constants.ampmTextDefault : _props$i18nKeys$ampmT;
_this.ampmSuggestions = function () {
var ampmSuggestions = [];
ampmText.forEach(function (text, index) {
if (index === 0) {
ampmSuggestions.push({
text: text,
id: 'AM'
});
} else if (index === 1) {
ampmSuggestions.push({
text: text,
id: 'PM'
});
}
});
return ampmSuggestions;
}();
var initalStateObj = _this.getStateFromProps(props);
_this.state = Object.assign({}, initalStateObj, {
isYearView: false,
isMonthOpen: false
});
return _this;
}
_createClass(DateTime, [{
key: "componentDidMount",
value: function componentDidMount() {
this.handleExposeMethods(true);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props = this.props,
value = _this$props.value,
isActive = _this$props.isActive,
is24Hour = _this$props.is24Hour;
if (prevProps.value !== value || is24Hour !== prevProps.is24Hour) {
this.setState(this.getStateFromProps(this.props));
}
if (prevProps.isActive !== isActive && !isActive) {
this.setState({
isYearView: false,
isMonthOpen: false
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.handleExposeMethods(false);
}
}, {
key: "getStateFromProps",
value: function getStateFromProps(props) {
var date, month, year, hours, mins, amPm;
var value = props.value,
timeZone = props.timeZone,
defaultTime = props.defaultTime,
needDefaultTime = props.needDefaultTime,
isDateTimeField = props.isDateTimeField,
is24Hour = props.is24Hour; //defaultTime --> 12:00:PM
defaultTime = needDefaultTime ? defaultTime ? defaultTime : '12:00:PM' : '';
var defaultHour, defaultMin, defaultAmPm;
var todayObj = new Date();
var todayDate = todayObj.getDate();
var todayMonth = todayObj.getMonth();
var todayYear = todayObj.getFullYear();
if (!value) {
var _ref = defaultTime ? defaultTime.split(':') : [];
var _ref2 = _slicedToArray(_ref, 3);
defaultHour = _ref2[0];
defaultMin = _ref2[1];
defaultAmPm = _ref2[2];
defaultHour = parseInt(defaultHour);
defaultMin = parseInt(defaultMin);
}
var dateObj = (0, _dateFormat.getDateText)(value, isDateTimeField, timeZone);
date = dateObj.getDate();
month = dateObj.getMonth();
year = dateObj.getFullYear();
hours = defaultHour ? defaultHour : dateObj.getHours();
mins = !(0, _Common.getIsEmptyValue)(defaultMin) ? defaultMin : dateObj.getMinutes();
mins = (0, _dateFormatUtils.addZeroIfNeeded)(mins);
amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
hours = this.getHours(hours, is24Hour);
return {
date: date,
month: month,
year: year,
mins: mins,
hours: hours,
amPm: amPm,
todayDate: todayDate,
todayMonth: todayMonth,
todayYear: todayYear
};
}
}, {
key: "getHours",
value: function getHours(hoursParam, is24Hour) {
var hours = hoursParam;
if (!is24Hour) {
if (hours === 0) {
hours = 12;
} else if (hours > 12) {
hours -= 12;
}
}
hours = (0, _dateFormatUtils.addZeroIfNeeded)(hours);
return hours;
}
}, {
key: "handleGetSelectedDate",
value: function handleGetSelectedDate() {
var selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _this$props2 = this.props,
min = _this$props2.min,
max = _this$props2.max,
timeZone = _this$props2.timeZone,
isDateTimeField = _this$props2.isDateTimeField,
dateFormat = _this$props2.dateFormat,
is24Hour = _this$props2.is24Hour,
customDateFormat = _this$props2.customDateFormat;
var year = selectedInfo.year,
month = selectedInfo.month,
date = selectedInfo.date,
hours = selectedInfo.hours,
mins = selectedInfo.mins,
amPm = selectedInfo.amPm;
if (!is24Hour) {
if (parseInt(hours) === 12) {
hours = amPm === 'AM' ? 0 : 12;
}
if (amPm === 'PM') {
if (hours < 12) {
hours = parseInt(hours) + 12;
}
}
}
var minInMillis = min ? _datetimejs["default"].millis(min) : null,
maxInMillis = max ? _datetimejs["default"].millis(max) : null,
selectedInMillis,
selectedValue = '',
formattedValue;
var currentDate = new Date();
var sec = currentDate.getSeconds();
var milliSec = currentDate.getMilliseconds();
if (isDateTimeField || customDateFormat) {
var dateArgs = [year, month, date, hours, mins];
if (customDateFormat) {
dateArgs.push(sec, milliSec);
}
selectedInMillis = timeZone ? _datetimejs["default"].tz.tzToUtc(Date.UTC.apply(Date, dateArgs), timeZone) : Date.UTC.apply(Date, dateArgs);
selectedValue = _datetimejs["default"].ISO(selectedInMillis);
formattedValue = (0, _common.formatDate)(_construct(Date, dateArgs), customDateFormat == null ? is24Hour ? "".concat(dateFormat, " HH:mm:ss") : "".concat(dateFormat, " hh:mm:ss A") : "".concat(customDateFormat));
} else {
selectedInMillis = Date.UTC(year, month, date);
selectedValue = (0, _common.formatDate)(new Date(year, month, date), 'YYYY-MM-DD');
formattedValue = (0, _common.formatDate)(new Date(year, month, date), dateFormat);
}
var isError = false;
var errorType = '';
if (minInMillis && minInMillis > selectedInMillis) {
isError = true;
errorType = 'MIN';
} else if (maxInMillis && maxInMillis < selectedInMillis) {
isError = true;
errorType = 'MAX';
}
return {
isError: isError,
errorType: errorType,
selectedValue: selectedValue,
formattedValue: formattedValue
};
}
}, {
key: "handleSelect",
value: function handleSelect(e) {
e && e.preventDefault();
var _this$props3 = this.props,
onError = _this$props3.onError,
onSelect = _this$props3.onSelect,
minErrorText = _this$props3.minErrorText,
maxErrorText = _this$props3.maxErrorText;
var _this$state = this.state,
year = _this$state.year,
month = _this$state.month,
date = _this$state.date,
hours = _this$state.hours,
mins = _this$state.mins,
amPm = _this$state.amPm;
var _this$handleGetSelect = this.handleGetSelectedDate({
year: year,
month: month,
date: date,
hours: hours,
mins: mins,
amPm: amPm
}),
isError = _this$handleGetSelect.isError,
errorType = _this$handleGetSelect.errorType,
selectedValue = _this$handleGetSelect.selectedValue,
formattedValue = _this$handleGetSelect.formattedValue;
if (isError) {
if (errorType === 'MIN') {
onError && onError(minErrorText, true);
} else if (errorType === 'MAX') {
onError && onError(maxErrorText, true);
}
} else {
onSelect(selectedValue, formattedValue, e);
}
}
}, {
key: "handleChange",
value: function handleChange() {
var selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _this$props4 = this.props,
onError = _this$props4.onError,
onChange = _this$props4.onChange,
minErrorText = _this$props4.minErrorText,
maxErrorText = _this$props4.maxErrorText;
var _this$state2 = this.state,
oldYear = _this$state2.year,
oldMonth = _this$state2.month,
oldDate = _this$state2.date,
oldHours = _this$state2.hours,
oldMins = _this$state2.mins,
oldAMPM = _this$state2.amPm;
var year = selectedInfo.year,
month = selectedInfo.month,
date = selectedInfo.date,
hours = selectedInfo.hours,
mins = selectedInfo.mins,
amPm = selectedInfo.amPm;
var newSelectedInfo = {
year: (0, _Common.getIsEmptyValue)(year) ? oldYear : year,
month: (0, _Common.getIsEmptyValue)(month) ? oldMonth : month,
date: (0, _Common.getIsEmptyValue)(date) ? oldDate : date,
hours: (0, _Common.getIsEmptyValue)(hours) ? oldHours : hours,
mins: (0, _Common.getIsEmptyValue)(mins) ? oldMins : mins,
amPm: (0, _Common.getIsEmptyValue)(amPm) ? oldAMPM : amPm
};
if (onChange) {
var _this$handleGetSelect2 = this.handleGetSelectedDate(newSelectedInfo),
isError = _this$handleGetSelect2.isError,
errorType = _this$handleGetSelect2.errorType,
selectedValue = _this$handleGetSelect2.selectedValue,
formattedValue = _this$handleGetSelect2.formattedValue;
if (isError) {
if (errorType === 'MIN') {
onError && onError(minErrorText, true);
} else if (errorType === 'MAX') {
onError && onError(maxErrorText, true);
}
} else {
this.setState(newSelectedInfo);
onChange(selectedValue, formattedValue);
}
} else {
this.setState(newSelectedInfo);
}
}
}, {
key: "handleClear",
value: function handleClear(e) {
var _this$props5 = this.props,
onSelect = _this$props5.onSelect,
onClear = _this$props5.onClear;
if (onClear) {
onClear(e);
} else {
onSelect('', '', e);
}
}
}, {
key: "dateSelect",
value: function dateSelect(date, month, year, e) {
this.handleChange({
date: date,
month: month,
year: year
});
e && e.preventDefault();
var _this$props6 = this.props,
onError = _this$props6.onError,
onDateSelect = _this$props6.onDateSelect,
minErrorText = _this$props6.minErrorText,
maxErrorText = _this$props6.maxErrorText;
var _this$state3 = this.state,
hours = _this$state3.hours,
mins = _this$state3.mins,
amPm = _this$state3.amPm;
var _this$handleGetSelect3 = this.handleGetSelectedDate({
year: year,
month: month,
date: date,
hours: hours,
mins: mins,
amPm: amPm
}),
isError = _this$handleGetSelect3.isError,
errorType = _this$handleGetSelect3.errorType,
selectedValue = _this$handleGetSelect3.selectedValue,
formattedValue = _this$handleGetSelect3.formattedValue;
if (isError) {
if (errorType === 'MIN') {
onError && onError(minErrorText, true);
} else if (errorType === 'MAX') {
onError && onError(maxErrorText, true);
}
} else {
onDateSelect && onDateSelect(selectedValue, formattedValue, e);
}
}
}, {
key: "hoursSelect",
value: function hoursSelect(hours) {
this.handleChange({
hours: hours
});
}
}, {
key: "minutesSelect",
value: function minutesSelect(mins) {
this.handleChange({
mins: mins
});
}
}, {
key: "amPmSelect",
value: function amPmSelect(amPm) {
this.handleChange({
amPm: amPm
});
}
/*global closeGroupPopups*/
}, {
key: "closePopup",
value: function closePopup() {
closeGroupPopups('calender');
}
}, {
key: "handleCalendarNavigation",
value: function handleCalendarNavigation(type, selectedInfo) {
var stateYear = selectedInfo.year,
stateMonth = selectedInfo.month,
stateDate = selectedInfo.date;
var date = stateDate;
var month = stateMonth;
var year = stateYear;
var getDate = function getDate(month, year) {
var monthEnd = (0, _common.getMonthEnd)(month, year);
return monthEnd >= parseInt(date) ? date : monthEnd;
};
var modifyCalendarRecursion = function modifyCalendarRecursion(recursionType) {
if (recursionType === 'nextYear') {
//Click next year icon
var newYear = year + 1;
return {
date: getDate(month, newYear),
month: month,
year: newYear
};
} else if (recursionType === 'previousYear') {
//Click previous year icon
var _newYear = year - 1;
return {
date: getDate(month, _newYear),
month: month,
year: _newYear
};
} else if (recursionType === 'nextMonth') {
//Click next month icon
if (month === 11) {
month = 0;
return modifyCalendarRecursion('nextYear');
}
var newMonth = month + 1;
return {
date: getDate(newMonth, year),
month: newMonth,
year: year
};
} else if (recursionType === 'previousMonth') {
//Click previous month icon
if (month === 0) {
month = 11;
return modifyCalendarRecursion('previousYear');
}
var _newMonth = month - 1;
return {
date: getDate(_newMonth, year),
month: _newMonth,
year: year
};
} else if (recursionType === 'nextDate') {
var monthEnd = (0, _common.getMonthEnd)(month, year);
if (date === monthEnd) {
date = 1;
return modifyCalendarRecursion('nextMonth');
}
var newDate = parseInt(date) + 1;
return {
date: newDate,
month: month,
year: year
};
} else if (recursionType === 'previousDate') {
if (date === 1) {
date = month === 0 ? (0, _common.getMonthEnd)(11, year - 1) : (0, _common.getMonthEnd)(month - 1, year);
return modifyCalendarRecursion('previousMonth');
}
var _newDate = parseInt(date) - 1;
return {
date: _newDate,
month: month,
year: year
};
}
};
return modifyCalendarRecursion(type);
}
}, {
key: "modifyCalendar",
value: function modifyCalendar(type) {
var _this$state4 = this.state,
year = _this$state4.year,
month = _this$state4.month,
date = _this$state4.date;
return this.handleChange(this.handleCalendarNavigation(type, {
year: year,
month: month,
date: date
}));
}
}, {
key: "handleDateReset",
value: function handleDateReset() {
this.setState(this.getStateFromProps(this.props));
}
}, {
key: "handleGetStateValues",
value: function handleGetStateValues() {
var isActive = this.props.isActive;
var _this$state5 = this.state,
isYearView = _this$state5.isYearView,
isMonthOpen = _this$state5.isMonthOpen;
return {
isActive: isActive,
isYearView: isYearView,
isMonthOpen: isMonthOpen
};
}
}, {
key: "handleYearViewToggle",
value: function handleYearViewToggle(isYearOpen, isMonthOpen) {
this.setState({
isYearView: isYearOpen,
isMonthOpen: isMonthOpen
});
}
}, {
key: "handleExposeMethods",
value: function handleExposeMethods(isMount) {
var getMethods = this.props.getMethods;
var methods = {};
if (isMount) {
methods = {
resetLocalDate: this.handleDateReset,
getStateValues: this.handleGetStateValues,
toggleYearView: this.handleYearViewToggle
};
} else {
methods = {
resetLocalDate: null,
getStateValues: null,
toggleYearView: null
};
}
getMethods && getMethods(methods);
}
}, {
key: "handleOpenYearView",
value: function handleOpenYearView() {
var _this$state6 = this.state,
isYearView = _this$state6.isYearView,
isMonthOpen = _this$state6.isMonthOpen;
this.setState({
isYearView: !isYearView,
isMonthOpen: !isMonthOpen
});
}
}, {
key: "handleSelectYear",
value: function handleSelectYear(year) {
this.setState({
year: year,
isMonthOpen: true
});
}
}, {
key: "handleSelectMonth",
value: function handleSelectMonth(month) {
var _this$state7 = this.state,
date = _this$state7.date,
year = _this$state7.year;
var monthEnd = (0, _common.getMonthEnd)(month, year);
var newDate = date;
if (date > monthEnd) {
newDate = monthEnd;
}
this.setState({
month: month,
date: newDate
});
}
}, {
key: "handleSelectMonthViaYearView",
value: function handleSelectMonthViaYearView(month) {
this.handleSelectMonth(month);
this.setState({
isYearView: false,
isMonthOpen: false
});
}
}, {
key: "render",
value: function render() {
var _this$state8 = this.state,
date = _this$state8.date,
month = _this$state8.month,
year = _this$state8.year,
hours = _this$state8.hours,
mins = _this$state8.mins,
amPm = _this$state8.amPm,
isYearView = _this$state8.isYearView,
isMonthOpen = _this$state8.isMonthOpen,
todayDate = _this$state8.todayDate,
todayMonth = _this$state8.todayMonth,
todayYear = _this$state8.todayYear;
var _this$props7 = this.props,
isDateTimeField = _this$props7.isDateTimeField,
isActive = _this$props7.isActive,
position = _this$props7.position,
isReady = _this$props7.isReady,
getRef = _this$props7.getRef,
onClick = _this$props7.onClick,
dataId = _this$props7.dataId,
needResponsive = _this$props7.needResponsive,
isAbsolute = _this$props7.isAbsolute,
isAnimate = _this$props7.isAnimate,
needAction = _this$props7.needAction,
boxSize = _this$props7.boxSize,
className = _this$props7.className,
innerClass = _this$props7.innerClass,
isPadding = _this$props7.isPadding,
i18nKeys = _this$props7.i18nKeys,
is24Hour = _this$props7.is24Hour,
isDefaultPosition = _this$props7.isDefaultPosition,
positionsOffset = _this$props7.positionsOffset,
targetOffset = _this$props7.targetOffset,
isRestrictScroll = _this$props7.isRestrictScroll,
dropBoxPortalId = _this$props7.dropBoxPortalId,
renderCustomHeader = _this$props7.renderCustomHeader,
renderCustomFooter = _this$props7.renderCustomFooter,
_this$props7$customPr = _this$props7.customProps,
customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
weekStartDay = _this$props7.weekStartDay,
holidays = _this$props7.holidays;
var _customProps$TimeProp = customProps.TimeProps,
TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp,
_customProps$DropBoxP = customProps.DropBoxProps,
DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
var _i18nKeys$timeText = i18nKeys.timeText,
timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
_i18nKeys$submitText = i18nKeys.submitText,
submitText = _i18nKeys$submitText === void 0 ? 'Set' : _i18nKeys$submitText,
_i18nKeys$cancelText = i18nKeys.cancelText,
cancelText = _i18nKeys$cancelText === void 0 ? 'Clear' : _i18nKeys$cancelText,
_i18nKeys$hourEmptyTe = i18nKeys.hourEmptyText,
hourEmptyText = _i18nKeys$hourEmptyTe === void 0 ? 'No search results' : _i18nKeys$hourEmptyTe,
_i18nKeys$minuteEmpty = i18nKeys.minuteEmptyText,
minuteEmptyText = _i18nKeys$minuteEmpty === void 0 ? 'No search results' : _i18nKeys$minuteEmpty,
_i18nKeys$nextMonthTi = i18nKeys.nextMonthTitleText,
nextMonthTitleText = _i18nKeys$nextMonthTi === void 0 ? 'Next month' : _i18nKeys$nextMonthTi,
_i18nKeys$prevMonthTi = i18nKeys.prevMonthTitleText,
prevMonthTitleText = _i18nKeys$prevMonthTi === void 0 ? 'Prev month' : _i18nKeys$prevMonthTi,
_i18nKeys$monthNames = i18nKeys.monthNames,
monthNames = _i18nKeys$monthNames === void 0 ? _constants.monthNamesDefault : _i18nKeys$monthNames,
_i18nKeys$monthNamesS = i18nKeys.monthNamesShort,
monthNamesShort = _i18nKeys$monthNamesS === void 0 ? _constants.monthNamesShortDefault : _i18nKeys$monthNamesS,
_i18nKeys$dayNames = i18nKeys.dayNames,
dayNames = _i18nKeys$dayNames === void 0 ? _constants.dayNamesDefault : _i18nKeys$dayNames,
_i18nKeys$dayNamesSho = i18nKeys.dayNamesShort,
dayNamesShort = _i18nKeys$dayNamesSho === void 0 ? _constants.dayNamesShortDefault : _i18nKeys$dayNamesSho;
var showmonthtxt = title(date, year, month, monthNames);
var customDayNames = dayNames,
customDayNamesShort = dayNamesShort,
customizedHolidays = holidays;
if (weekStartDay !== 0) {
customDayNames = [].concat(_toConsumableArray(dayNames.slice(weekStartDay)), _toConsumableArray(dayNames.slice(0, weekStartDay)));
customDayNamesShort = [].concat(_toConsumableArray(dayNamesShort.slice(weekStartDay)), _toConsumableArray(dayNamesShort.slice(0, weekStartDay)));
customizedHolidays = holidays.map(function (dayIndex) {
return customDayNames.indexOf(dayNames[dayIndex]);
});
}
var childEle = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
"data-id": "".concat(dataId, "_Calendar"),
"data-test-id": "".concat(dataId, "_Calendar"),
onClick: this.closePopup
}, renderCustomHeader, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
onOpenYearView: this.handleOpenYearView,
showMonthTxt: showmonthtxt,
isYearView: isYearView,
prevMonthTitleText: prevMonthTitleText,
nextMonthTitleText: nextMonthTitleText,
onModifyCalendar: this.modifyCalendar
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _DateTimeModule["default"].subContainer
}, /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
needBorder: isDateTimeField || needAction,
dataId: dataId,
date: date,
year: year,
month: month,
onSelect: this.dateSelect,
dayNames: customDayNames,
dayNamesShort: customDayNamesShort,
todayDate: todayDate,
todayMonth: todayMonth,
todayYear: todayYear,
weekStartDay: weekStartDay,
holidays: customizedHolidays
}), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
timeText: timeText,
dataId: dataId,
hourSuggestions: (0, _dateFormatUtils.getHourSuggestions)(is24Hour),
onHourSelect: this.hoursSelect,
hours: hours,
hourEmptyText: hourEmptyText,
needResponsive: needResponsive,
minSuggestions: (0, _dateFormatUtils.getMinuteSuggestions)(),
onMinutesSelect: this.minutesSelect,
mins: mins,
minuteEmptyText: minuteEmptyText,
ampmSuggestions: this.ampmSuggestions,
onAmPmSelect: this.amPmSelect,
amPm: amPm,
is24Hour: is24Hour,
customProps: TimeProps
}) : null, needAction ? /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
submitText: submitText,
onSubmit: this.handleSelect,
cancelText: cancelText,
onCancel: this.handleClear,
dataId: dataId
}) : null, isYearView ? /*#__PURE__*/_react["default"].createElement("div", {
className: _DateTimeModule["default"].yearContainer
}, /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
onSelectYear: this.handleSelectYear,
onSelectMonth: this.handleSelectMonthViaYearView,
viewedYear: year,
viewedMonth: month,
monthNames: monthNames,
monthNamesShort: monthNamesShort,
isMonthOpen: isMonthOpen
})) : null), renderCustomFooter);
return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
"data-id": "".concat(dataId, "_dateBoxContainer"),
"data-test-id": "".concat(dataId, "_dateBoxContainer")
}, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
size: boxSize,
boxPosition: position,
isActive: isActive,
isArrow: false,
isAnimate: isAnimate,
animationStyle: "bounce",
getRef: getRef,
onClick: onClick,
dataId: "".concat(dataId, "_dateBoxContainer"),
needResponsive: needResponsive,
isAbsolutePositioningNeeded: isAbsolute,
customClass: {
customDropBoxWrap: className
},
isPadding: isPadding,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
portalId: dropBoxPortalId
}, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
}
}]);
return DateTime;
}(_react["default"].PureComponent);
exports["default"] = DateTime;
DateTime.propTypes = _propTypes.DateTime_propTypes;
DateTime.defaultProps = _defaultProps.DateTime_defaultProps;