@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
1,173 lines (1,049 loc) • 47.2 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 _DateTime = _interopRequireDefault(require("./DateTime"));
var _Popup = _interopRequireDefault(require("../Popup/Popup"));
var _icons = require("@zohodesk/icons");
var _Layout = require("../Layout");
var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));
var _validator = _interopRequireDefault(require("./validator"));
var _common = require("../utils/datetime/common");
var _dateFormatUtils = require("./dateFormatUtils");
var _dateFormat = require("./dateFormatUtils/dateFormat");
var _dayChange = require("./dateFormatUtils/dayChange");
var _monthChange = require("./dateFormatUtils/monthChange");
var _yearChange = require("./dateFormatUtils/yearChange");
var _timeChange = require("./dateFormatUtils/timeChange");
var _Common = require("../utils/Common");
var _constants = require("./constants");
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 _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); }
/* eslint-disable react/no-unused-prop-types */
/* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
_inherits(DateWidgetComponent, _React$Component);
var _super = _createSuper(DateWidgetComponent);
function DateWidgetComponent(props) {
var _this;
_classCallCheck(this, DateWidgetComponent);
_this = _super.call(this, props);
_this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
_this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
_this.handleGetDisplayText = _this.handleGetDisplayText.bind(_assertThisInitialized(_this));
_this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
_this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
_this.getValueInputRef = _this.getValueInputRef.bind(_assertThisInitialized(_this));
_this.handleGetMethods = _this.handleGetMethods.bind(_assertThisInitialized(_this));
_this.handleInputClick = _this.handleInputClick.bind(_assertThisInitialized(_this));
_this.handleGetShowValue = _this.handleGetShowValue.bind(_assertThisInitialized(_this));
_this.handleSelection = _this.handleSelection.bind(_assertThisInitialized(_this));
_this.handleDateType = _this.handleDateType.bind(_assertThisInitialized(_this));
_this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
_this.handleGetAllowedType = _this.handleGetAllowedType.bind(_assertThisInitialized(_this));
_this.handleDateClear = _this.handleDateClear.bind(_assertThisInitialized(_this));
_this.handleDateTimeClear = _this.handleDateTimeClear.bind(_assertThisInitialized(_this));
_this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
_this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
_this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
_this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
_this.state = {
selected: '',
displayText: '',
dateFormatDetails: {},
dateFormatSelection: {},
day: '',
month: '',
year: '',
hour: '',
minute: '',
noon: '',
isDateEdited: false,
stateFocusOrder: '',
isError: false,
isFocused: false
};
_this.oldFocusOrder = '';
_this.focusOrder = '';
_this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
_this.keyDownAction = ''; //'Arrow' || 'valueTyped'
_this.isMouseDown = false;
return _this;
}
_createClass(DateWidgetComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props = this.props,
validation = _this$props.validation,
getPopupProps = _this$props.getPopupProps,
isPopupReady = _this$props.isPopupReady;
var selected = this.state.selected;
if (validation && validation.validate) {
this.validateOnSelect(selected, this.props);
}
var _this$handleGetDispla = this.handleGetDisplayText(this.props),
displayText = _this$handleGetDispla.displayText,
newSelected = _this$handleGetDispla.selected;
this.setState({
displayText: displayText,
selected: newSelected
});
this.handleSelectionRangeDetails(this.props);
if (getPopupProps) {
getPopupProps({
isPopupReady: isPopupReady
});
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _this$state = this.state,
selected = _this$state.selected,
day = _this$state.day,
month = _this$state.month,
year = _this$state.year,
hour = _this$state.hour,
minute = _this$state.minute,
noon = _this$state.noon,
isDateEdited = _this$state.isDateEdited,
stateFocusOrder = _this$state.stateFocusOrder,
isFocused = _this$state.isFocused;
var _this$props2 = this.props,
value = _this$props2.value,
validation = _this$props2.validation,
isPopupReady = _this$props2.isPopupReady,
_this$props2$dateForm = _this$props2.dateFormat,
dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
is24Hour = _this$props2.is24Hour,
isHideCurrentYear = _this$props2.isHideCurrentYear,
getPopupProps = _this$props2.getPopupProps,
onDropboxClose = _this$props2.onDropboxClose;
if (validation && validation.validate) {
this.validateOnSelect(selected, this.props);
}
if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
var _this$handleGetDispla2 = this.handleGetDisplayText(this.props),
displayText = _this$handleGetDispla2.displayText,
_selected = _this$handleGetDispla2.selected;
this.setState({
selected: _selected,
displayText: displayText
});
if (value !== _constants.INVALID_DATE) {
this.setState({
day: '',
month: '',
year: '',
hour: '',
minute: '',
noon: '',
isDateEdited: false,
isError: false
});
}
}
if (prevProps.isPopupReady !== isPopupReady) {
if (isPopupReady) {
this.resetLocalDate && this.resetLocalDate();
} else {
typeof onDropboxClose === 'function' && onDropboxClose();
}
if (getPopupProps) {
getPopupProps({
isPopupReady: isPopupReady
});
}
}
var haveLocalValue = [day, month, year, hour, minute, noon].some(function (value) {
return !(0, _Common.getIsEmptyValue)(value);
});
if (isDateEdited !== haveLocalValue) {
this.setState({
isDateEdited: haveLocalValue
});
}
if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || (0, _dateFormatUtils.arrayIsNotEqual)([day, month, year, hour, minute, noon], [prevState.day, prevState.month, prevState.year, prevState.hour, prevState.minute, prevState.noon])) {
this.handleSelectionRangeDetails(this.props);
} // if (stateFocusOrder !== prevState.stateFocusOrder) {
isFocused && !(0, _Common.getIsEmptyValue)(stateFocusOrder) && this.handleSelection(stateFocusOrder);
this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
// if (prevProps.isPopupOpen !== isPopupOpen) {
// if (!isPopupOpen) {
// this.valueInput && this.valueInput.focus({preventScroll:true});
// }
// }
}
}, {
key: "handleSelect",
value: function handleSelect(userZoneSelectedTime, fotmattedValue, e) {
var _this$props3 = this.props,
id = _this$props3.id,
onSelect = _this$props3.onSelect,
closePopupOnly = _this$props3.closePopupOnly,
validation = _this$props3.validation;
if (validation && validation.validateOn) {
var selected = this.state.selected;
this.validateOnSelect(selected, this.props);
}
onSelect && onSelect(userZoneSelectedTime, id);
this.valueInput && this.valueInput.focus({
preventScroll: true
});
closePopupOnly(e);
}
}, {
key: "validateOnSelect",
value: function validateOnSelect(value, props) {
var defaultCheckPropsRules = ['required'];
var defaultValidateRules = ['required'];
var defaultType = 'onegroup';
var validation = props.validation,
onPassValidation = props.onPassValidation,
onFailValidation = props.onFailValidation;
var targetTag = this.elementRef;
if (validation) {
//validateOn won't work here ...
var newValidation = _validator["default"].combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
var validationObj = {
validation: newValidation,
onPassValidation: onPassValidation,
onFailValidation: onFailValidation
};
_validator["default"].executeValidation(value, targetTag, validationObj, defaultType);
} else {
onPassValidation && onPassValidation(value, targetTag);
}
}
}, {
key: "handleTogglePopup",
value: function handleTogglePopup(e, isOpenOnly) {
var _this$props4 = this.props,
togglePopup = _this$props4.togglePopup,
_this$props4$defaultP = _this$props4.defaultPosition,
defaultPosition = _this$props4$defaultP === void 0 ? 'bottom' : _this$props4$defaultP,
isPopupOpen = _this$props4.isPopupOpen,
removeClose = _this$props4.removeClose;
if (isOpenOnly) {
if (!isPopupOpen) {
togglePopup(e, "".concat(defaultPosition, "Right"));
} else {
removeClose(e);
}
}
!isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
}
}, {
key: "handleSelectionRangeDetails",
value: function handleSelectionRangeDetails(props) {
var timeZone = props.timeZone,
dateFormat = props.dateFormat,
isDateTime = props.isDateTime,
value = props.value,
is24Hour = props.is24Hour;
var _this$state2 = this.state,
day = _this$state2.day,
month = _this$state2.month,
year = _this$state2.year,
hour = _this$state2.hour,
minute = _this$state2.minute,
noon = _this$state2.noon;
var selected = value === _constants.INVALID_DATE ? '' : value; //New UI Changes
var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
isHideCurrentYear: false,
value: value,
timeZone: timeZone,
isDateTime: isDateTime
});
var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
i18nShortMonths: _constants.i18nShortMonths,
i18nMonths: _constants.i18nMonths,
selectedValue: selected,
day: day,
month: month,
year: year,
hour: hour,
minute: minute,
noon: noon,
timeZone: timeZone,
is24Hour: is24Hour
});
var newDateFormat = dateFormatDetails.dateFormat;
this.setState({
dateFormatDetails: dateFormatDetails,
dateFormatSelection: dateFormatSelection,
newDateFormat: newDateFormat
});
}
}, {
key: "handleGetDisplayText",
value: function handleGetDisplayText(props) {
var timeZone = props.timeZone,
dateFormat = props.dateFormat,
isDateTime = props.isDateTime,
value = props.value,
is24Hour = props.is24Hour,
isHideCurrentYear = props.isHideCurrentYear;
var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
isHideCurrentYear: isHideCurrentYear,
value: value,
timeZone: timeZone,
isDateTime: isDateTime
});
var newDateFormat = dateFormatDetails.dateFormat;
var displayText = '';
var selected = value === _constants.INVALID_DATE ? '' : value;
if (selected) {
var format = newDateFormat,
convertedValue = (0, _dateFormat.getDateText)(value, isDateTime, timeZone);
if (isDateTime) {
format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
}
displayText = (0, _common.formatDate)(convertedValue, format);
}
return {
displayText: displayText,
selected: selected
};
}
}, {
key: "handleKeyDown",
value: function handleKeyDown(e) {
var keyCode = e.keyCode;
var _this$props5 = this.props,
isPopupOpen = _this$props5.isPopupOpen,
isPopupOpenOnEnter = _this$props5.isPopupOpenOnEnter,
onKeyDown = _this$props5.onKeyDown,
closePopupOnly = _this$props5.closePopupOnly,
cantEditOnPopupOpen = _this$props5.cantEditOnPopupOpen;
var isAllowedDateType = this.handleGetAllowedType();
if (isPopupOpen) {
if (keyCode === 9 && !isAllowedDateType) {
//on tab click popup close
closePopupOnly(e);
} // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
if (isAllowedDateType) {
cantEditOnPopupOpen && this.handleDateType(e);
}
} else if (!isPopupOpen) {
if (isPopupOpenOnEnter && keyCode === 13) {
//onEnter popup open
this.handleTogglePopup(e);
} else if (keyCode === 13) {
//onEnter submit case
onKeyDown && onKeyDown(e);
} else if (isAllowedDateType) {
this.handleDateType(e);
}
}
}
}, {
key: "getValueInputRef",
value: function getValueInputRef(el) {
var getRef = this.props.getRef;
this.valueInput = el;
getRef && getRef(el);
}
}, {
key: "handleFocus",
value: function handleFocus() {
var isAllowedDateType = this.handleGetAllowedType();
var isMouseDown = this.isMouseDown;
if (isAllowedDateType && !isMouseDown) {
var dateFormatSelection = this.state.dateFormatSelection;
var focusedIndex = dateFormatSelection.focusedIndex;
var _this$valueInput = this.valueInput,
newSelectionStart = _this$valueInput.selectionStart,
newSelectionEnd = _this$valueInput.selectionEnd;
var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)] || 0;
isAllowedDateType && this.setState({
stateFocusOrder: focusedOrder,
isFocused: true
});
} else if (!isAllowedDateType) {
var valueInput = this.valueInput;
document.getSelection().removeAllRanges();
valueInput && valueInput.setSelectionRange(0, 0);
this.setState({
isFocused: true
});
}
var onFocus = this.props.onFocus;
onFocus && onFocus();
}
}, {
key: "handleBlur",
value: function handleBlur() {
this.focusOrder = '';
this.oldFocusOrder = '';
this.oldKeyDownAction = '';
this.keyDownAction = '';
this.setState({
isFocused: false
}); // const { valueInput } = this;
// document.getSelection().removeAllRanges();
// valueInput && valueInput.setSelectionRange(0, 0);
var onBlur = this.props.onBlur;
onBlur && onBlur();
}
}, {
key: "handleGetMethods",
value: function handleGetMethods(methods) {
var getMethods = this.props.getMethods;
var resetLocalDate = methods.resetLocalDate,
getStateValues = methods.getStateValues,
toggleYearView = methods.toggleYearView;
this.resetLocalDate = resetLocalDate;
this.getDateTimeStateValues = getStateValues;
this.DateTimeYearViewToggle = toggleYearView;
getMethods && getMethods(methods);
}
}, {
key: "handleDateType",
value: function handleDateType(e) {
var _this2 = this;
var keyCode = e.keyCode,
shiftKey = e.shiftKey;
var input = e.target;
if ((0, _dateFormatUtils.getIsSupportedKey)(e)) {
e.preventDefault();
}
var _this$props6 = this.props,
isDateTime = _this$props6.isDateTime,
timeZone = _this$props6.timeZone,
value = _this$props6.value,
onSelect = _this$props6.onSelect,
id = _this$props6.id,
min = _this$props6.min,
max = _this$props6.max,
minErrorText = _this$props6.minErrorText,
maxErrorText = _this$props6.maxErrorText,
onError = _this$props6.onError,
closePopupOnly = _this$props6.closePopupOnly,
is24Hour = _this$props6.is24Hour;
var _this$state3 = this.state,
dateFormatSelection = _this$state3.dateFormatSelection,
day = _this$state3.day,
month = _this$state3.month,
year = _this$state3.year,
hour = _this$state3.hour,
minute = _this$state3.minute,
noon = _this$state3.noon,
selected = _this$state3.selected,
dateFormatDetails = _this$state3.dateFormatDetails;
var focusedIndex = dateFormatSelection.focusedIndex,
order = dateFormatSelection.order;
var yearInfo = dateFormatDetails.yearInfo;
var _getDateDetails = (0, _dateFormat.getDateDetails)(selected, {
day: day,
month: month,
year: year,
hour: hour,
minute: minute,
noon: noon
}, isDateTime, timeZone, {
is24Hour: is24Hour
}),
_getDateDetails$day = _getDateDetails.day,
selectedDay = _getDateDetails$day === void 0 ? '' : _getDateDetails$day,
_getDateDetails$month = _getDateDetails.month,
selectedMonth = _getDateDetails$month === void 0 ? '' : _getDateDetails$month,
_getDateDetails$year = _getDateDetails.year,
selectedYear = _getDateDetails$year === void 0 ? '' : _getDateDetails$year,
_getDateDetails$hour = _getDateDetails.hour,
selectedHour = _getDateDetails$hour === void 0 ? '' : _getDateDetails$hour,
_getDateDetails$minut = _getDateDetails.minute,
selectedMinute = _getDateDetails$minut === void 0 ? '' : _getDateDetails$minut,
_getDateDetails$noon = _getDateDetails.noon,
selectedNoon = _getDateDetails$noon === void 0 ? '' : _getDateDetails$noon;
var newSelectionStart = input.selectionStart,
newSelectionEnd = input.selectionEnd;
var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)];
var _ref = order[focusedOrder] || {},
type = _ref.type;
this.oldFocusOrder = this.focusOrder;
this.focusOrder = focusedOrder;
if (keyCode === 38 || keyCode === 40) {
//up arrow && down arrow
this.oldKeyDownAction = this.keyDownAction;
this.keyDownAction = 'Arrow';
} else {
this.oldKeyDownAction = this.keyDownAction;
this.keyDownAction = 'valueTyped';
}
var focusedOrders = {
focusOrder: this.focusOrder,
oldFocusOrder: this.oldFocusOrder
};
var keyActions = {
oldKeyAction: this.oldKeyDownAction,
keyAction: this.keyDownAction
};
var newDay = selectedDay,
newMonth = selectedMonth,
newYear = selectedYear,
newHour = selectedHour,
newMinute = selectedMinute,
newNoon = selectedNoon,
isValueChanged = false,
newFocusOrder = focusedOrder;
if (keyCode === 9 && shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && focusedOrder !== 0) {
e.preventDefault();
this.setState({
stateFocusOrder: focusedOrder - 1
});
} else if (keyCode === 9 && !shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && order.length - 1 !== focusedOrder) {
e.preventDefault();
this.setState({
stateFocusOrder: focusedOrder + 1
});
} else if (keyCode === 39) {
//arrow right
(0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
stateFocusOrder: 0
}) : this.setState({
stateFocusOrder: focusedOrder + 1
});
} else if (keyCode === 37) {
//arrow left
(0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
stateFocusOrder: order.length - 1
}) : this.setState({
stateFocusOrder: focusedOrder - 1
});
} else if (keyCode === 9) {
//on tab click popup close
closePopupOnly(e);
} else if (type === 'day') {
var _getChangedDay = (0, _dayChange.getChangedDay)({
day: selectedDay,
month: selectedMonth,
year: selectedYear
}, e, focusedOrders, keyActions);
newDay = _getChangedDay.day;
isValueChanged = _getChangedDay.isChanged;
newFocusOrder = _getChangedDay.focusOrder;
} else if (type === 'month') {
var _getChangedMonth = (0, _monthChange.getChangedMonth)({
day: selectedDay,
month: selectedMonth,
year: selectedYear
}, e, focusedOrders, keyActions);
newMonth = _getChangedMonth.month;
isValueChanged = _getChangedMonth.isChanged;
newFocusOrder = _getChangedMonth.focusOrder;
} else if (type === 'year') {
var _getChangedYear = (0, _yearChange.getChangedYear)({
day: selectedDay,
month: selectedMonth,
year: selectedYear
}, e, focusedOrders, keyActions, {
yearInfo: yearInfo
});
newYear = _getChangedYear.year;
isValueChanged = _getChangedYear.isChanged;
newFocusOrder = _getChangedYear.focusOrder;
} else if (type === 'hour') {
var _getChangedHour = (0, _timeChange.getChangedHour)({
hour: selectedHour
}, e, focusedOrders, keyActions, {
is24Hour: is24Hour
});
newHour = _getChangedHour.hour;
isValueChanged = _getChangedHour.isChanged;
newFocusOrder = _getChangedHour.focusOrder;
} else if (type === 'minute') {
var _getChangedMinute = (0, _timeChange.getChangedMinute)({
minute: selectedMinute
}, e, focusedOrders, keyActions);
newMinute = _getChangedMinute.minute;
isValueChanged = _getChangedMinute.isChanged;
newFocusOrder = _getChangedMinute.focusOrder;
} else if (type === 'noon') {
var _getChangedNoon = (0, _timeChange.getChangedNoon)({
noon: selectedNoon
}, e, focusedOrders, keyActions);
newNoon = _getChangedNoon.noon;
isValueChanged = _getChangedNoon.isChanged;
newFocusOrder = _getChangedNoon.focusOrder;
}
if (isValueChanged) {
var currentValue = {
day: newDay,
month: newMonth,
year: newYear,
hour: newHour,
minute: newMinute,
noon: newNoon
};
var errorCaseHandle = function errorCaseHandle(isEmptyValError) {
_this2.setState(function () {
return {
day: newDay,
month: newMonth,
year: newYear,
hour: newHour,
minute: newMinute,
noon: newNoon,
stateFocusOrder: newFocusOrder,
isDateEdited: true,
isError: !isEmptyValError
};
});
var newSelected = isEmptyValError ? '' : _constants.INVALID_DATE;
value !== newSelected && onSelect && onSelect(newSelected, id);
};
var _getIsValidDate = (0, _dateFormat.getIsValidDate)(currentValue, isDateTime, {
is24Hour: is24Hour
}),
isError = _getIsValidDate.isError,
isEmptyValError = _getIsValidDate.isEmptyValError;
if (isError) {
errorCaseHandle(isEmptyValError);
} else {
var _getSelectedDate = (0, _dateFormat.getSelectedDate)(currentValue, {
min: min,
max: max,
timeZone: timeZone,
isDateTime: isDateTime,
is24Hour: is24Hour
}),
selectedValue = _getSelectedDate.selectedValue,
selectedDateError = _getSelectedDate.isError,
errorType = _getSelectedDate.errorType;
if (selectedDateError) {
if (errorType === 'MIN') {
onError && onError(minErrorText, true);
} else if (errorType === 'MAX') {
onError && onError(maxErrorText, true);
}
errorCaseHandle();
} else {
this.setState(function () {
return {
day: '',
month: '',
year: '',
hour: '',
minute: '',
noon: '',
isDateEdited: false,
stateFocusOrder: newFocusOrder,
isError: false
};
});
onSelect && onSelect(selectedValue, id);
}
}
}
}
}, {
key: "handleSelection",
value: function handleSelection() {
var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var isAllowedDateType = this.handleGetAllowedType();
if (isAllowedDateType) {
var dateFormatSelection = this.state.dateFormatSelection;
var _dateFormatSelection$ = dateFormatSelection.order,
order = _dateFormatSelection$ === void 0 ? {} : _dateFormatSelection$;
var _ref2 = order[focusOrder] || {},
index = _ref2.index;
if (!index) {
focusOrder = 0;
var _ref3 = order[focusOrder] || {};
index = _ref3.index;
}
if (index && this.valueInput) {
document.getSelection().removeAllRanges();
this.valueInput.setSelectionRange(index[0], index[1]);
}
}
}
}, {
key: "handleInputClick",
value: function handleInputClick(e) {
this.isMouseDown = false;
var dateFormatSelection = this.state.dateFormatSelection;
var input = e.target;
var selectionEnd = input.selectionEnd;
e.preventDefault();
var clickIndex = dateFormatSelection.clickIndex;
var focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
var isAllowedDateType = this.handleGetAllowedType();
if (isAllowedDateType) {
this.setState({
stateFocusOrder: focusOrder,
isFocused: true
});
}
if (!isAllowedDateType) {
this.handleTogglePopup(e);
} else {
var _this$props7 = this.props,
isPopupOpenOnClick = _this$props7.isPopupOpenOnClick,
isReadOnly = _this$props7.isReadOnly,
isDisabled = _this$props7.isDisabled;
if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
this.handleTogglePopup(e, true);
}
var _this$props8 = this.props,
isPopupCloseOnClick = _this$props8.isPopupCloseOnClick,
isPopupOpen = _this$props8.isPopupOpen,
closePopupOnly = _this$props8.closePopupOnly;
if (isPopupCloseOnClick && !isPopupOpen) {
closePopupOnly && closePopupOnly(e);
}
}
}
}, {
key: "handleMouseDown",
value: function handleMouseDown() {
this.isMouseDown = true;
}
}, {
key: "handleGetShowValue",
value: function handleGetShowValue() {
var _this$state4 = this.state,
day = _this$state4.day,
month = _this$state4.month,
year = _this$state4.year,
hour = _this$state4.hour,
minute = _this$state4.minute,
noon = _this$state4.noon,
dateFormatDetails = _this$state4.dateFormatDetails,
displayText = _this$state4.displayText,
newDateFormat = _this$state4.newDateFormat,
isDateEdited = _this$state4.isDateEdited,
isFocused = _this$state4.isFocused,
selected = _this$state4.selected;
var _this$props9 = this.props,
isDateTime = _this$props9.isDateTime,
is24Hour = _this$props9.is24Hour,
isPopupReady = _this$props9.isPopupReady,
timeZone = _this$props9.timeZone,
isPopupOpen = _this$props9.isPopupOpen;
if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
day: day,
month: month,
year: year,
hour: hour,
minute: minute,
noon: noon
}, isDateTime, timeZone, {
is24Hour: is24Hour
}),
_getDateDetails2$day = _getDateDetails2.day,
selectedDay = _getDateDetails2$day === void 0 ? '' : _getDateDetails2$day,
_getDateDetails2$mont = _getDateDetails2.month,
selectedMonth = _getDateDetails2$mont === void 0 ? '' : _getDateDetails2$mont,
_getDateDetails2$year = _getDateDetails2.year,
selectedYear = _getDateDetails2$year === void 0 ? '' : _getDateDetails2$year,
_getDateDetails2$hour = _getDateDetails2.hour,
selectedHour = _getDateDetails2$hour === void 0 ? '' : _getDateDetails2$hour,
_getDateDetails2$minu = _getDateDetails2.minute,
selectedMinute = _getDateDetails2$minu === void 0 ? '' : _getDateDetails2$minu,
_getDateDetails2$noon = _getDateDetails2.noon,
selectedNoon = _getDateDetails2$noon === void 0 ? '' : _getDateDetails2$noon;
var dateTimeString = (0, _dateFormat.getDateTimeString)({
day: selectedDay,
month: selectedMonth,
year: selectedYear,
hour: selectedHour,
minute: selectedMinute,
noon: selectedNoon
}, dateFormatDetails, isDateTime, {
i18nShortMonths: _constants.i18nShortMonths,
i18nMonths: _constants.i18nMonths,
is24Hour: is24Hour
});
return dateTimeString;
} else if (displayText) {
return displayText;
}
var timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
var dateTimeFormat = isDateTime ? "".concat(newDateFormat).concat(timeFormat) : newDateFormat;
return dateTimeFormat || '';
}
}, {
key: "handleGetAllowedType",
value: function handleGetAllowedType() {
var _this$props10 = this.props,
isReadOnly = _this$props10.isReadOnly,
isDisabled = _this$props10.isDisabled,
isEditable = _this$props10.isEditable;
if (isEditable) {
if (isReadOnly || isDisabled) {
return false;
}
return true;
}
return false;
}
}, {
key: "handleDateClear",
value: function handleDateClear() {
var _this$props11 = this.props,
id = _this$props11.id,
onSelect = _this$props11.onSelect,
value = _this$props11.value;
this.setState({
day: '',
month: '',
year: '',
hour: '',
minute: '',
noon: '',
isDateEdited: false,
stateFocusOrder: 0,
isError: false
});
value && onSelect && onSelect('', id); // this.valueInput && this.valueInput.focus({ preventScroll: true });
}
}, {
key: "handleDateTimeClear",
value: function handleDateTimeClear(e) {
this.handleDateClear();
var closePopupOnly = this.props.closePopupOnly;
closePopupOnly(e);
}
}, {
key: "handleDateIconClick",
value: function handleDateIconClick(e) {
this.handleTogglePopup(e);
this.valueInput && this.valueInput.focus({
preventScroll: true
});
}
}, {
key: "handleBlurSelectionRange",
value: function handleBlurSelectionRange() {
var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var isAllowedDateType = this.handleGetAllowedType();
if (isAllowedDateType) {
// if (focusOrder !== oldFocusOrder) {
var _this$state5 = this.state,
_this$state5$dateForm = _this$state5.dateFormatSelection,
dateFormatSelection = _this$state5$dateForm === void 0 ? {} : _this$state5$dateForm,
isFocused = _this$state5.isFocused;
var _dateFormatSelection$2 = dateFormatSelection.order,
order = _dateFormatSelection$2 === void 0 ? [] : _dateFormatSelection$2;
var isPopupOpen = this.props.isPopupOpen; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
var _ref4 = order[focusOrder] || {},
_ref4$type = _ref4.type,
focusedType = _ref4$type === void 0 ? '' : _ref4$type;
var _this$getDateTimeStat = this.getDateTimeStateValues(),
isYearView = _this$getDateTimeStat.isYearView,
oldIsMonthOpen = _this$getDateTimeStat.isMonthOpen;
var yearViewTypes = ['month', 'year'];
var isMonthOpen = focusedType === 'month';
if (isPopupOpen) {
if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
if (!isFocused && isYearView) {
this.DateTimeYearViewToggle(true, oldIsMonthOpen);
} else {
this.DateTimeYearViewToggle(true, isMonthOpen);
}
} else if (yearViewTypes.indexOf(focusedType) === -1) {
if (!isFocused && isYearView) {
this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
} else {
this.DateTimeYearViewToggle(false, false);
}
}
} // }
}
}
}, {
key: "render",
value: function render() {
var _this$props12 = this.props,
removeClose = _this$props12.removeClose,
minErrorText = _this$props12.minErrorText,
maxErrorText = _this$props12.maxErrorText,
min = _this$props12.min,
max = _this$props12.max,
placeholder = _this$props12.placeholder,
isPopupOpen = _this$props12.isPopupOpen,
isPopupReady = _this$props12.isPopupReady,
isDateTime = _this$props12.isDateTime,
position = _this$props12.position,
textBoxVariant = _this$props12.textBoxVariant,
textBoxSize = _this$props12.textBoxSize,
_this$props12$childre = _this$props12.children,
children = _this$props12$childre === void 0 ? null : _this$props12$childre,
isDisabled = _this$props12.isDisabled,
getContainerRef = _this$props12.getContainerRef,
getTargetRef = _this$props12.getTargetRef,
timeZone = _this$props12.timeZone,
isReadOnly = _this$props12.isReadOnly,
dataId = _this$props12.dataId,
needResponsive = _this$props12.needResponsive,
className = _this$props12.className,
needBorder = _this$props12.needBorder,
defaultTime = _this$props12.defaultTime,
needDefaultTime = _this$props12.needDefaultTime,
borderColor = _this$props12.borderColor,
i18nKeys = _this$props12.i18nKeys,
needErrorOnBlur = _this$props12.needErrorOnBlur,
htmlId = _this$props12.htmlId,
iconOnHover = _this$props12.iconOnHover,
is24Hour = _this$props12.is24Hour,
isAbsolutePositioningNeeded = _this$props12.isAbsolutePositioningNeeded,
positionsOffset = _this$props12.positionsOffset,
targetOffset = _this$props12.targetOffset,
isRestrictScroll = _this$props12.isRestrictScroll,
dropBoxPortalId = _this$props12.dropBoxPortalId,
a11y = _this$props12.a11y,
boxSize = _this$props12.boxSize,
onError = _this$props12.onError,
renderCustomHeader = _this$props12.renderCustomHeader,
renderCustomFooter = _this$props12.renderCustomFooter,
weekStartDay = _this$props12.weekStartDay,
holidays = _this$props12.holidays,
_this$props12$customP = _this$props12.customProps,
customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
var _customProps$DateTime = customProps.DateTimeProps,
DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
_customProps$TextBoxP = customProps.TextBoxProps,
TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
_customProps$TextBoxI = customProps.TextBoxIconProps,
TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
var _this$state6 = this.state,
_this$state6$selected = _this$state6.selected,
value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
isError = _this$state6.isError,
isDateEdited = _this$state6.isDateEdited,
isFocused = _this$state6.isFocused;
var showValue = this.handleGetShowValue();
var isAllowedDateType = this.handleGetAllowedType();
var showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
var showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DateWidgetModule["default"].container)
}, children ? /*#__PURE__*/_react["default"].createElement("div", {
"data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
"data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
ref: getTargetRef,
className: "".concat(className ? className : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled)
}, children) : /*#__PURE__*/_react["default"].createElement("div", {
"data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
"data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
ref: getTargetRef
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
htmlId: htmlId,
value: showValue ? showValue : placeholder,
needBorder: needBorder,
size: textBoxSize,
variant: textBoxVariant,
inputRef: this.getValueInputRef,
isDisabled: isDisabled,
dataId: dataId,
needReadOnlyStyle: isReadOnly || isDisabled,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
borderColor: showError ? 'error' : borderColor,
needEffect: !(isDisabled || isReadOnly || showError),
isClickable: true,
onClick: isDisabled || isReadOnly ? null : this.handleInputClick,
onBlur: this.handleBlur,
onClear: showClear ? this.handleDateClear : null,
isReadOnly: isReadOnly,
onMouseDown: this.handleMouseDown,
showClearIcon: showClear,
customClass: {
customTBoxWrap: isDateEdited || value ? '' : _DateWidgetModule["default"].placeHolder
},
iconOnHover: iconOnHover,
isFocus: isPopupReady,
autoComplete: false,
a11y: a11y,
customProps: TextBoxProps
}, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
isInline: true,
align: "both",
isCover: false,
onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
dataId: "".concat(dataId, "_datePicker"),
className: _DateWidgetModule["default"].datePickIcon
}, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: "ZD-datepicker",
size: "12"
})))), isReadOnly || isDisabled ? null : /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
value: value,
isDateTimeField: isDateTime,
onSelect: this.handleSelect,
timeZone: timeZone,
min: min,
max: max,
maxErrorText: maxErrorText,
minErrorText: minErrorText,
position: position,
isReady: isPopupOpen,
isActive: isPopupReady,
getRef: getContainerRef,
onClick: removeClose,
needResponsive: needResponsive,
dataId: dataId,
defaultTime: defaultTime,
needDefaultTime: needDefaultTime,
getMethods: this.handleGetMethods,
onClear: this.handleDateTimeClear,
needAction: isDateTime,
onDateSelect: !isDateTime ? this.handleSelect : null,
i18nKeys: i18nKeys,
is24Hour: is24Hour,
isAbsolute: isAbsolutePositioningNeeded,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
dropBoxPortalId: dropBoxPortalId,
boxSize: boxSize,
onError: onError,
renderCustomHeader: renderCustomHeader,
renderCustomFooter: renderCustomFooter,
customProps: DateTimeProps,
weekStartDay: weekStartDay,
holidays: holidays
}));
}
}]);
return DateWidgetComponent;
}(_react["default"].Component);
DateWidgetComponent.defaultProps = _defaultProps.DateWidget_defaultProps;
DateWidgetComponent.propTypes = _propTypes.DateWidget_propTypes;
var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
DateWidget.defaultProps = DateWidgetComponent.defaultProps;
DateWidget.propTypes = DateWidgetComponent.propTypes; // eslint-disable-next-line no-undef
// if (__DOCS__) {
// DateWidgetComponent.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide',
// external: true,
// description: ' '
// };
// // eslint-disable-next-line react/forbid-foreign-prop-types
// DateWidget.propTypes = DateWidgetComponent.propTypes;
// }
var _default = DateWidget;
exports["default"] = _default;