etendo-ui-library 1.3.18 → 1.3.19

package/dist-native/components/datepicker/DatePicker.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _icons=require("../../assets/images/icons");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.styles");var _DatePicker2=require("./DatePicker.translations");var _DatePicker3=require("./DatePicker.utils");var _button=require("../button");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/datepicker/DatePicker.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DatePicker=function DatePicker(_ref){var value=_ref.value,styleField=_ref.styleField,onChangeText=_ref.onChangeText,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_50:_ref$backgroundColor;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredDay=_useState2[0],setHoveredDay=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),isDateValid=_useState4[0],setIsDateValid=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isMonthSelection=_useState6[0],setIsMonthSelection=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isPickerShow=_useState8[0],setIsPickerShow=_useState8[1];var _useState9=(0,_react.useState)(new Date()),_useState10=(0,_slicedToArray2.default)(_useState9,2),selectedDate=_useState10[0],setSelectedDate=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),isInputFocused=_useState12[0],setIsInputFocused=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isYearSelection=_useState14[0],setIsYearSelection=_useState14[1];var _useState15=(0,_react.useState)(new Date().getMonth()),_useState16=(0,_slicedToArray2.default)(_useState15,2),currentMonth=_useState16[0],setCurrentMonth=_useState16[1];var _useState17=(0,_react.useState)(new Date().getFullYear()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentYear=_useState18[0],setCurrentYear=_useState18[1];var _useState19=(0,_react.useState)(false),_useState20=(0,_slicedToArray2.default)(_useState19,2),disabledMonthSelection=_useState20[0],setDisabledMonthSelection=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledYearSelection=_useState22[0],setDisabledYearSelection=_useState22[1];var _useState23=(0,_react.useState)(new Date(selectedDate)),_useState24=(0,_slicedToArray2.default)(_useState23,2),currentSelectedDate=_useState24[0],setTempSelectedDate=_useState24[1];var _useState25=(0,_react.useState)({top:0,bottom:0}),_useState26=(0,_slicedToArray2.default)(_useState25,2),modalPosition=_useState26[0],setModalPosition=_useState26[1];(0,_react.useEffect)(function(){if(value){var defaultValue=(0,_DatePicker3.parseLocalDateString)(value,dateFormat);var isValid=(0,_DatePicker3.validateDate)(defaultValue,value,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(defaultValue);setCurrentMonth(defaultValue.getMonth());setCurrentYear(defaultValue.getFullYear());}else{setSelectedDate(new Date());setCurrentMonth(new Date().getMonth());setCurrentYear(new Date().getFullYear());}}},[value,dateFormat]);(0,_react.useEffect)(function(){var handleScroll=function handleScroll(){if(isPickerShow){setIsPickerShow(false);}};if(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&window&&typeof window!=='undefined'){window.addEventListener('scroll',handleScroll,true);}},[isPickerShow]);var inputRef=(0,_react.useRef)(null);var monthListRef=(0,_react.useRef)(null);var showMonthSelection=function showMonthSelection(){if(!isMonthSelection)setDisabledYearSelection(true);else setDisabledYearSelection(false);setIsMonthSelection(!isMonthSelection);if(!isMonthSelection&&monthListRef.current){monthListRef.current.scrollToIndex({animated:true,index:currentMonth});}};var adjustDateForMonth=function adjustDateForMonth(year,month,currentSelectedDate){var lastDayOfMonth=new Date(year,month+1,0).getDate();if(currentSelectedDate.getDate()>lastDayOfMonth){return new Date(year,month,lastDayOfMonth);}return new Date(year,month,currentSelectedDate.getDate());};var showYearSelection=function showYearSelection(){if(!isYearSelection)setDisabledMonthSelection(true);else setDisabledMonthSelection(false);setIsYearSelection(!isYearSelection);if(!isYearSelection){var index=(0,_DatePicker3.generateYearList)().indexOf(currentYear);if(index!==-1&&yearListRef.current){yearListRef.current.scrollToIndex({animated:true,index:index});}}};var selectMonth=function selectMonth(monthIndex){setCurrentMonth(monthIndex);setIsMonthSelection(false);var adjustedDate=adjustDateForMonth(currentYear,monthIndex,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var selectYear=function selectYear(year){setCurrentYear(year);setIsYearSelection(false);var adjustedDate=adjustDateForMonth(year,currentMonth,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var renderMonthItem=function renderMonthItem(_ref2){var item=_ref2.item,index=_ref2.index;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,index===currentMonth&&_DatePicker.styles.selectedItem],onPress:function onPress(){selectMonth(index);setDisabledYearSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:206,columnNumber:7}},item));};var renderYearItem=function renderYearItem(_ref3){var item=_ref3.item;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,item===currentYear?_DatePicker.styles.selectedItem:null],onPress:function onPress(){selectYear(item);setDisabledMonthSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:7}},item));};var renderMonthSelection=function renderMonthSelection(){return _react.default.createElement(_reactNative.FlatList,{ref:monthListRef,data:monthNames,renderItem:renderMonthItem,keyExtractor:function keyExtractor(_,index){return index.toString();},style:_DatePicker.styles.list,initialScrollIndex:currentMonth,getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?20*index:43.5,offset:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:5}});};var yearListRef=(0,_react.useRef)(null);var renderYearSelection=function renderYearSelection(){var yearList=(0,_DatePicker3.generateYearList)();return _react.default.createElement(_reactNative.FlatList,{ref:yearListRef,data:yearList,renderItem:renderYearItem,keyExtractor:function keyExtractor(item){return item.toString();},style:_DatePicker.styles.list,initialScrollIndex:yearList.indexOf(currentYear),getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43:30,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43*index:43*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:7}});};var changeMonthAndYear=function changeMonthAndYear(newMonth,newYear){setCurrentMonth(newMonth);setCurrentYear(newYear);};var goToPreviousMonth=function goToPreviousMonth(){if(!disabledMonthSelection){currentMonth===0?changeMonthAndYear(11,currentYear-1):changeMonthAndYear(currentMonth-1,currentYear);}};var goToNextMonth=function goToNextMonth(){if(!disabledMonthSelection){currentMonth===11?changeMonthAndYear(0,currentYear+1):changeMonthAndYear(currentMonth+1,currentYear);}};var goToPreviousYear=function goToPreviousYear(){if(!disabledYearSelection)setCurrentYear(currentYear-1);};var goToNextYear=function goToNextYear(){if(!disabledYearSelection)setCurrentYear(currentYear+1);};var daysShort=_DatePicker2.translations[language].daysShort;var monthsShort=_DatePicker2.translations[language].monthsShort;var monthNames=_DatePicker2.translations[language].monthNames;var calculateCalendarDirection=function calculateCalendarDirection(){if(inputRef.current){inputRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;var modalLeftPosition=pageX+width-_DatePicker3.MODAL_CONTENT_WIDTH;modalLeftPosition=Math.max(modalLeftPosition,0);if(spaceBelow>=_DatePicker.CALENDAR_HEIGHT){setModalPosition({top:pageY+height,left:modalLeftPosition});}else{setModalPosition({top:pageY-_DatePicker.CALENDAR_HEIGHT-_DatePicker3.MODAL_CONTENT_TOP_POSITION,left:modalLeftPosition});}});}};var showPicker=function showPicker(){if(!disabled){calculateCalendarDirection();if(isMonthSelection)setIsMonthSelection(false);if(isYearSelection)setIsYearSelection(false);if(disabledMonthSelection)setDisabledMonthSelection(false);if(disabledYearSelection)setDisabledYearSelection(false);setIsPickerShow(!isPickerShow);if(!isPickerShow&&selectedDate){setCurrentMonth(selectedDate.getMonth());setCurrentYear(selectedDate.getFullYear());}}};var onDateSelected=function onDateSelected(date){var formattedDate=(0,_DatePicker3.formatterDate)(date,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(date,formattedDate,dateFormat);setTempSelectedDate(date);setSelectedDate(date);setIsDateValid(isValidDate);if(isValidDate&&onChangeText){onChangeText(formattedDate);}};var onAccept=function onAccept(){if(selectedDate){onChangeText((0,_DatePicker3.formatterDate)(selectedDate,dateFormat));}setIsPickerShow(false);};var onCancel=function onCancel(){setSelectedDate(currentSelectedDate);setIsPickerShow(false);};var handleTextInputChange=function handleTextInputChange(text){var processedText=text.replace(/[^0-9]/g,'').slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}onChangeText(processedText);if(processedText.length===10){var dateObject=(0,_DatePicker3.parseLocalDateString)(processedText,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(dateObject,processedText,dateFormat);if(isValidDate){setSelectedDate(dateObject);setIsDateValid(true);}else{setIsDateValid(false);}}else{setIsDateValid(true);setSelectedDate(undefined);}};var formatInputText=function formatInputText(text){var processedText=text.replace(/[^0-9]/g,'');processedText=processedText.slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}return processedText;};var handleBlur=function handleBlur(){var formattedText=formatInputText(value);var dateObject=(0,_DatePicker3.parseLocalDateString)(formattedText,dateFormat);var isValid=(0,_DatePicker3.validateDate)(dateObject,formattedText,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(dateObject);}else{setSelectedDate(undefined);}};var renderDayItem=function renderDayItem(_ref4){var date=_ref4.date,isCurrentMonth=_ref4.isCurrentMonth;var isToday=date.getDate()===new Date().getDate()&&date.getMonth()===new Date().getMonth()&&date.getFullYear()===new Date().getFullYear();var isSelectedDate=isCurrentMonth&&date.getDate()===new Date(selectedDate).getDate()&&date.getMonth()===new Date(selectedDate).getMonth()&&date.getFullYear()===new Date(selectedDate).getFullYear();var notCurrentMonthStyle={color:_colors.NEUTRAL_400};var isPartOfCurrentMonth=date.getMonth()===currentMonth;var dayKey=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();var isHovered=hoveredDay===dayKey&&!isSelectedDate;var isTodayHovered=isToday&&isHovered;return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){return isPartOfCurrentMonth&&onDateSelected(date);},onHoverIn:function onHoverIn(){return setHoveredDay(dayKey);},onHoverOut:function onHoverOut(){return setHoveredDay(null);},style:[_DatePicker.styles.dayItem,isPartOfCurrentMonth?null:notCurrentMonthStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:475,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.dayItemText,isSelectedDate?_DatePicker.styles.selectedDayBackground:{},isToday&&!isSelectedDate?_DatePicker.styles.currentDayBorder:{},!isCurrentMonth?notCurrentMonthStyle:{},isHovered?_DatePicker.styles.dayItemTextHover:{},isTodayHovered?_DatePicker.styles.todayItemTextHover:{}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:483,columnNumber:9}},_react.default.createElement(_reactNative.Text,{style:[_DatePicker.styles.dayText,isSelectedDate?_DatePicker.styles.selectedDayText:{},!isCurrentMonth?notCurrentMonthStyle:{},isPartOfCurrentMonth?null:notCurrentMonthStyle,isTodayHovered&&{color:_colors.PRIMARY_100}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:492,columnNumber:11}},date.getDate())));};var renderCalendar=function renderCalendar(){var daysInMonth=(0,_DatePicker3.buildMonth)(currentYear,currentMonth);return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.calendarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:512,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:513,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:515,columnNumber:13}},day);})),_react.default.createElement(_reactNative.FlatList,{data:daysInMonth,numColumns:7,renderItem:function renderItem(_ref5){var item=_ref5.item;return item&&renderDayItem({date:item,isCurrentMonth:true});},keyExtractor:function keyExtractor(_,index){return index.toString();},showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:9}}));};return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:534,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.inputContainerWrapper,(isPickerShow||isInputFocused)&&_DatePicker.styles.inputWrapperFocused,!isDateValid&&_DatePicker.styles.invalidDateWrapperFocused],__self:_this,__source:{fileName:_jsxFileName,lineNumber:535,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper,{backgroundColor:backgroundColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:541,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput,{backgroundColor:backgroundColor}],value:value,placeholder:(0,_DatePicker3.getPlaceholderDateFormat)(dateFormat),placeholderTextColor:_colors.NEUTRAL_600,editable:!disabled,onChangeText:handleTextInputChange,focusable:true,onFocus:function onFocus(){return!disabled&&setIsInputFocused(true);},onBlur:function onBlur(){setIsInputFocused(false),!disabled&&handleBlur();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:549,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:569,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:disabled&&{opacity:0.2},width:25,__self:_this,__source:{fileName:_jsxFileName,lineNumber:570,columnNumber:15}})))),_react.default.createElement(_reactNative.Modal,{animationType:"fade",transparent:true,visible:isPickerShow,onRequestClose:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:576,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.modalContent,{width:_DatePicker3.MODAL_CONTENT_WIDTH},{position:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'absolute':'relative',top:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.top+_DatePicker3.MODAL_POSITION_TOP,left:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.left}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:585,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.header,(isMonthSelection||isYearSelection)&&{borderBottomWidth:1,borderBottomColor:_colors.NEUTRAL_300}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:13}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledMonthSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledMonthSelection,onPress:showMonthSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:606,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:613,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:614,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:616,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:617,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:620,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:629,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:630,columnNumber:19}}))),_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledYearSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledYearSelection,onPress:showYearSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:634,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:641,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:642,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:644,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:645,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:646,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:655,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:656,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:666,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:667,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:673,columnNumber:15}}))))));};var _default=exports.default=DatePicker;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _icons=require("../../assets/images/icons");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.styles");var _DatePicker2=require("./DatePicker.translations");var _DatePicker3=require("./DatePicker.utils");var _button=require("../button");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/datepicker/DatePicker.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DatePicker=function DatePicker(_ref){var value=_ref.value,styleField=_ref.styleField,onChangeText=_ref.onChangeText,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_50:_ref$backgroundColor;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredDay=_useState2[0],setHoveredDay=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),isDateValid=_useState4[0],setIsDateValid=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isMonthSelection=_useState6[0],setIsMonthSelection=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isPickerShow=_useState8[0],setIsPickerShow=_useState8[1];var _useState9=(0,_react.useState)(value?new Date(value):undefined),_useState10=(0,_slicedToArray2.default)(_useState9,2),selectedDate=_useState10[0],setSelectedDate=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),isInputFocused=_useState12[0],setIsInputFocused=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isYearSelection=_useState14[0],setIsYearSelection=_useState14[1];var _useState15=(0,_react.useState)(new Date().getMonth()),_useState16=(0,_slicedToArray2.default)(_useState15,2),currentMonth=_useState16[0],setCurrentMonth=_useState16[1];var _useState17=(0,_react.useState)(new Date().getFullYear()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentYear=_useState18[0],setCurrentYear=_useState18[1];var _useState19=(0,_react.useState)(false),_useState20=(0,_slicedToArray2.default)(_useState19,2),disabledMonthSelection=_useState20[0],setDisabledMonthSelection=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledYearSelection=_useState22[0],setDisabledYearSelection=_useState22[1];var _useState23=(0,_react.useState)(new Date(selectedDate)),_useState24=(0,_slicedToArray2.default)(_useState23,2),currentSelectedDate=_useState24[0],setTempSelectedDate=_useState24[1];var _useState25=(0,_react.useState)({top:0,bottom:0}),_useState26=(0,_slicedToArray2.default)(_useState25,2),modalPosition=_useState26[0],setModalPosition=_useState26[1];(0,_react.useEffect)(function(){if(value){var defaultValue=(0,_DatePicker3.parseLocalDateString)(value,dateFormat);var isValid=(0,_DatePicker3.validateDate)(defaultValue,value,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(defaultValue);setCurrentMonth(defaultValue.getMonth());setCurrentYear(defaultValue.getFullYear());}else{setSelectedDate(new Date());setCurrentMonth(new Date().getMonth());setCurrentYear(new Date().getFullYear());}}},[]);(0,_react.useEffect)(function(){var handleScroll=function handleScroll(event){if(isPickerShow){if(calendarRef.current&&!calendarRef.current.contains(event.target)){setIsPickerShow(false);}}};if(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web){window.addEventListener('scroll',handleScroll,true);}return function(){if(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web){window.removeEventListener('scroll',handleScroll,true);}};},[isPickerShow]);var calendarRef=(0,_react.useRef)(null);var inputRef=(0,_react.useRef)(null);var monthListRef=(0,_react.useRef)(null);var showMonthSelection=function showMonthSelection(){if(!isMonthSelection)setDisabledYearSelection(true);else setDisabledYearSelection(false);setIsMonthSelection(!isMonthSelection);if(!isMonthSelection&&monthListRef.current){monthListRef.current.scrollToIndex({animated:true,index:currentMonth});}};var adjustDateForMonth=function adjustDateForMonth(year,month,currentSelectedDate){var lastDayOfMonth=new Date(year,month+1,0).getDate();if(currentSelectedDate.getDate()>lastDayOfMonth){return new Date(year,month,lastDayOfMonth);}return new Date(year,month,currentSelectedDate.getDate());};var showYearSelection=function showYearSelection(){if(!isYearSelection)setDisabledMonthSelection(true);else setDisabledMonthSelection(false);setIsYearSelection(!isYearSelection);if(!isYearSelection){var index=(0,_DatePicker3.generateYearList)().indexOf(currentYear);if(index!==-1&&yearListRef.current){yearListRef.current.scrollToIndex({animated:true,index:index});}}};var selectMonth=function selectMonth(monthIndex){setCurrentMonth(monthIndex);setIsMonthSelection(false);var adjustedDate=adjustDateForMonth(currentYear,monthIndex,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var selectYear=function selectYear(year){setCurrentYear(year);setIsYearSelection(false);var adjustedDate=adjustDateForMonth(year,currentMonth,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var renderMonthItem=function renderMonthItem(_ref2){var item=_ref2.item,index=_ref2.index;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,index===currentMonth&&_DatePicker.styles.selectedItem],onPress:function onPress(){selectMonth(index);setDisabledYearSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:7}},item));};var renderYearItem=function renderYearItem(_ref3){var item=_ref3.item;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,item===currentYear?_DatePicker.styles.selectedItem:null],onPress:function onPress(){selectYear(item);setDisabledMonthSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:230,columnNumber:7}},item));};var renderMonthSelection=function renderMonthSelection(){return _react.default.createElement(_reactNative.FlatList,{ref:monthListRef,data:monthNames,renderItem:renderMonthItem,keyExtractor:function keyExtractor(_,index){return index.toString();},style:_DatePicker.styles.list,initialScrollIndex:currentMonth,getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?20*index:43.5,offset:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:236,columnNumber:5}});};var yearListRef=(0,_react.useRef)(null);var renderYearSelection=function renderYearSelection(){var yearList=(0,_DatePicker3.generateYearList)();return _react.default.createElement(_reactNative.FlatList,{ref:yearListRef,data:yearList,renderItem:renderYearItem,keyExtractor:function keyExtractor(item){return item.toString();},style:_DatePicker.styles.list,initialScrollIndex:yearList.indexOf(currentYear),getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43:30,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43*index:43*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:7}});};var changeMonthAndYear=function changeMonthAndYear(newMonth,newYear){setCurrentMonth(newMonth);setCurrentYear(newYear);};var goToPreviousMonth=function goToPreviousMonth(){if(!disabledMonthSelection){currentMonth===0?changeMonthAndYear(11,currentYear-1):changeMonthAndYear(currentMonth-1,currentYear);}};var goToNextMonth=function goToNextMonth(){if(!disabledMonthSelection){currentMonth===11?changeMonthAndYear(0,currentYear+1):changeMonthAndYear(currentMonth+1,currentYear);}};var goToPreviousYear=function goToPreviousYear(){if(!disabledYearSelection)setCurrentYear(currentYear-1);};var goToNextYear=function goToNextYear(){if(!disabledYearSelection)setCurrentYear(currentYear+1);};var daysShort=_DatePicker2.translations[language].daysShort;var monthsShort=_DatePicker2.translations[language].monthsShort;var monthNames=_DatePicker2.translations[language].monthNames;var calculateCalendarDirection=function calculateCalendarDirection(){if(inputRef.current){inputRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;var modalLeftPosition=pageX+width-_DatePicker3.MODAL_CONTENT_WIDTH;modalLeftPosition=Math.max(modalLeftPosition,0);if(spaceBelow>=_DatePicker.CALENDAR_HEIGHT){setModalPosition({top:pageY+height,left:modalLeftPosition});}else{setModalPosition({top:pageY-_DatePicker.CALENDAR_HEIGHT-_DatePicker3.MODAL_CONTENT_TOP_POSITION,left:modalLeftPosition});}});}};var showPicker=function showPicker(){if(!disabled){calculateCalendarDirection();if(isMonthSelection)setIsMonthSelection(false);if(isYearSelection)setIsYearSelection(false);if(disabledMonthSelection)setDisabledMonthSelection(false);if(disabledYearSelection)setDisabledYearSelection(false);setIsPickerShow(!isPickerShow);if(!isPickerShow&&selectedDate instanceof Date){setCurrentMonth(selectedDate.getMonth());setCurrentYear(selectedDate.getFullYear());}}};var onDateSelected=function onDateSelected(date){var formattedDate=(0,_DatePicker3.formatterDate)(date,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(date,formattedDate,dateFormat);setTempSelectedDate(date);setSelectedDate(date);setIsDateValid(isValidDate);if(isValidDate&&onChangeText){onChangeText(formattedDate);}};var onAccept=function onAccept(){if(selectedDate){onChangeText((0,_DatePicker3.convertDateToEtendoERPFormat)(selectedDate));}setIsPickerShow(false);};var onCancel=function onCancel(){setSelectedDate(currentSelectedDate);setIsPickerShow(false);};var handleTextInputChange=function handleTextInputChange(text){var processedText=text.replace(/[^0-9]/g,'').slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}setSelectedDate(processedText);if(processedText.length===10){var dateObject=(0,_DatePicker3.parseLocalDateString)(processedText,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(dateObject,processedText,dateFormat);if(isValidDate){setSelectedDate(dateObject);setIsDateValid(true);}else{setIsDateValid(false);}}else{setIsDateValid(true);setSelectedDate(undefined);}};var formatInputText=function formatInputText(text){var processedText=text.replace(/[^0-9]/g,'');processedText=processedText.slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}return processedText;};var handleBlur=function handleBlur(){var isValidSelectedDate=isDateValid;setIsDateValid(isValidSelectedDate);if(onChangeText){onChangeText((0,_DatePicker3.convertDateToEtendoERPFormat)(selectedDate));}};var renderDayItem=function renderDayItem(_ref4){var date=_ref4.date,isCurrentMonth=_ref4.isCurrentMonth;var isToday=date.getDate()===new Date().getDate()&&date.getMonth()===new Date().getMonth()&&date.getFullYear()===new Date().getFullYear();var isSelectedDate=isCurrentMonth&&date.getDate()===new Date(selectedDate).getDate()&&date.getMonth()===new Date(selectedDate).getMonth()&&date.getFullYear()===new Date(selectedDate).getFullYear();var notCurrentMonthStyle={color:_colors.NEUTRAL_400};var isPartOfCurrentMonth=date.getMonth()===currentMonth;var dayKey=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();var isHovered=hoveredDay===dayKey&&!isSelectedDate;var isTodayHovered=isToday&&isHovered;return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){return isPartOfCurrentMonth&&onDateSelected(date);},onHoverIn:function onHoverIn(){return setHoveredDay(dayKey);},onHoverOut:function onHoverOut(){return setHoveredDay(null);},style:[_DatePicker.styles.dayItem,isPartOfCurrentMonth?null:notCurrentMonthStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:482,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.dayItemText,isSelectedDate?_DatePicker.styles.selectedDayBackground:{},isToday&&!isSelectedDate?_DatePicker.styles.currentDayBorder:{},!isCurrentMonth?notCurrentMonthStyle:{},isHovered?_DatePicker.styles.dayItemTextHover:{},isTodayHovered?_DatePicker.styles.todayItemTextHover:{}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:490,columnNumber:9}},_react.default.createElement(_reactNative.Text,{style:[_DatePicker.styles.dayText,isSelectedDate?_DatePicker.styles.selectedDayText:{},!isCurrentMonth?notCurrentMonthStyle:{},isPartOfCurrentMonth?null:notCurrentMonthStyle,isTodayHovered&&{color:_colors.PRIMARY_100}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:499,columnNumber:11}},date.getDate())));};var renderCalendar=function renderCalendar(){var daysInMonth=(0,_DatePicker3.buildMonth)(currentYear,currentMonth);return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.calendarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:519,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:522,columnNumber:13}},day);})),_react.default.createElement(_reactNative.FlatList,{data:daysInMonth,numColumns:7,renderItem:function renderItem(_ref5){var item=_ref5.item;return item&&renderDayItem({date:item,isCurrentMonth:true});},keyExtractor:function keyExtractor(_,index){return index.toString();},showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:527,columnNumber:9}}));};return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:541,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.inputContainerWrapper,(isPickerShow||isInputFocused)&&_DatePicker.styles.inputWrapperFocused,!isDateValid&&_DatePicker.styles.invalidDateWrapperFocused],__self:_this,__source:{fileName:_jsxFileName,lineNumber:542,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper,{backgroundColor:backgroundColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:548,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput,{backgroundColor:backgroundColor}],value:selectedDate instanceof Date?(0,_DatePicker3.formatterDate)(selectedDate,dateFormat):selectedDate,placeholder:(0,_DatePicker3.getPlaceholderDateFormat)(dateFormat),placeholderTextColor:_colors.NEUTRAL_600,editable:!disabled,onChangeText:handleTextInputChange,focusable:true,onFocus:function onFocus(){return!disabled&&setIsInputFocused(true);},onBlur:function onBlur(){setIsInputFocused(false),!disabled&&handleBlur();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:556,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:580,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:disabled&&{opacity:0.2},width:25,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:15}})))),_react.default.createElement(_reactNative.Modal,{animationType:"fade",transparent:true,visible:isPickerShow,onRequestClose:showPicker,ref:calendarRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:587,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:593,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.modalContent,{width:_DatePicker3.MODAL_CONTENT_WIDTH},{position:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'absolute':'relative',top:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.top+_DatePicker3.MODAL_POSITION_TOP,left:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.left}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:597,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.header,(isMonthSelection||isYearSelection)&&{borderBottomWidth:1,borderBottomColor:_colors.NEUTRAL_300}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:610,columnNumber:13}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledMonthSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledMonthSelection,onPress:showMonthSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:618,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:625,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:626,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:628,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:629,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:632,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:641,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:642,columnNumber:19}}))),_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledYearSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledYearSelection,onPress:showYearSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:646,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:653,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:654,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:656,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:657,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:658,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:667,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:668,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:678,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:679,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:685,columnNumber:15}}))))));};var _default=exports.default=DatePicker;

package/dist-native/components/datepicker/DatePicker.utils.d.ts

@@ -1,6 +1,7 @@
 export declare const MODAL_CONTENT_WIDTH = 360;
 export declare const MODAL_CONTENT_TOP_POSITION = 155;
 export declare const MODAL_POSITION_TOP = 5;
+export declare const convertDateToEtendoERPFormat: (inputDate: Date) => string;
 export declare const formatterDate: (date: Date, format: string) => string;
 export declare const getPlaceholderDateFormat: (dateFormat: string) => "DD/MM/YYYY" | "MM/DD/YYYY";
 export declare const parseLocalDateString: (localDate: string, dateFormat: string) => Date;
@@ -10,3 +11,5 @@ export declare const isLeapYear: (year: number) => boolean;
 export declare const getDaysInMonth: (year: number, month: number) => number;
 export declare const buildMonth: (year: number, month: number) => Date[];
 export declare const validateDate: (dateObject: Date, text: string, format: string) => boolean;
+export declare const isDateValid: (date: Date) => boolean;
+export declare const formatInputText: (text: string) => string;

package/dist-native/components/datepicker/DatePicker.utils.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.validateDate=exports.transformDate=exports.parseLocalDateString=exports.isLeapYear=exports.getPlaceholderDateFormat=exports.getDaysInMonth=exports.generateYearList=exports.formatterDate=exports.buildMonth=exports.MODAL_POSITION_TOP=exports.MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_TOP_POSITION=void 0;var MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_WIDTH=360;var MODAL_CONTENT_TOP_POSITION=exports.MODAL_CONTENT_TOP_POSITION=155;var MODAL_POSITION_TOP=exports.MODAL_POSITION_TOP=5;var formatterDate=exports.formatterDate=function formatterDate(date,format){if(date!==undefined){var day=date.getDate().toString().padStart(2,'0');var month=(date.getMonth()+1).toString().padStart(2,'0');var year=date.getFullYear();if(format==='MM/DD/YYYY'){return month+"/"+day+"/"+year;}else if(format==='DD/MM/YYYY'){return day+"/"+month+"/"+year;}else{return month+"/"+day+"/"+year;}}return'';};var getPlaceholderDateFormat=exports.getPlaceholderDateFormat=function getPlaceholderDateFormat(dateFormat){return dateFormat==='MM/DD/YYYY'?'MM/DD/YYYY':'DD/MM/YYYY';};var parseLocalDateString=exports.parseLocalDateString=function parseLocalDateString(localDate,dateFormat){var parts=localDate.split('/');var year=parts[2];var month=dateFormat==='MM/DD/YYYY'?parts[0]-1:parts[1]-1;var day=dateFormat==='MM/DD/YYYY'?parts[1]:parts[0];return new Date(year,month,day);};var transformDate=exports.transformDate=function transformDate(dateString){var parts=dateString.split('/');var date=new Date(parts[2],parts[1]-1,parts[0],3,0,0);return date.toISOString();};var generateYearList=exports.generateYearList=function generateYearList(){return Array.from({length:200},function(_,i){return 1900+i;});};var isLeapYear=exports.isLeapYear=function isLeapYear(year){return year%4===0&&year%100!==0||year%400===0;};var getDaysInMonth=exports.getDaysInMonth=function getDaysInMonth(year,month){var daysInMonth=[31,isLeapYear(year)?29:28,31,30,31,30,31,31,30,31,30,31];return daysInMonth[month];};var buildMonth=exports.buildMonth=function buildMonth(year,month){var days=[];var firstDayOfMonth=new Date(year,month,1).getDay();var totalDays=getDaysInMonth(year,month);var previousMonth=month===0?11:month-1;var previousMonthYear=month===0?year-1:year;var previousMonthDays=getDaysInMonth(previousMonthYear,previousMonth);for(var i=firstDayOfMonth;i>0;i--){days.push(new Date(previousMonthYear,previousMonth,previousMonthDays-i+1));}for(var _day=1;_day<=totalDays;_day++){days.push(new Date(year,month,_day));}var nextMonth=month===11?0:month+1;var nextMonthYear=month===11?year+1:year;var day=1;while(days.length%7!==0){days.push(new Date(nextMonthYear,nextMonth,day++));}return days;};var validateDate=exports.validateDate=function validateDate(dateObject,text,format){if(isNaN(dateObject.getTime())||dateObject.getFullYear()<1000||dateObject.getFullYear()>9999){return false;}var parts=text.split('/');var day,month;if(format==='DD/MM/YYYY'){day=parseInt(parts[0],10);month=parseInt(parts[1],10);}else{day=parseInt(parts[1],10);month=parseInt(parts[0],10);}if(month<1||month>12||day<1||day>31){return false;}if((month===4||month===6||month===9||month===11)&&day>30){return false;}if(month===2){var isLeap=dateObject.getFullYear()%4===0&&(dateObject.getFullYear()%100!==0||dateObject.getFullYear()%400===0);if(day>(isLeap?29:28)){return false;}}return true;};
+Object.defineProperty(exports,"__esModule",{value:true});exports.validateDate=exports.transformDate=exports.parseLocalDateString=exports.isLeapYear=exports.isDateValid=exports.getPlaceholderDateFormat=exports.getDaysInMonth=exports.generateYearList=exports.formatterDate=exports.formatInputText=exports.convertDateToEtendoERPFormat=exports.buildMonth=exports.MODAL_POSITION_TOP=exports.MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_TOP_POSITION=void 0;var MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_WIDTH=360;var MODAL_CONTENT_TOP_POSITION=exports.MODAL_CONTENT_TOP_POSITION=155;var MODAL_POSITION_TOP=exports.MODAL_POSITION_TOP=5;var convertDateToEtendoERPFormat=exports.convertDateToEtendoERPFormat=function convertDateToEtendoERPFormat(inputDate){var date=new Date(inputDate);var year=date.getFullYear();var month=(date.getMonth()+1).toString().padStart(2,'0');var day=date.getDate().toString().padStart(2,'0');var hours=date.getHours().toString().padStart(2,'0');var minutes=date.getMinutes().toString().padStart(2,'0');var seconds=date.getSeconds().toString().padStart(2,'0');return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds+".0";};var formatterDate=exports.formatterDate=function formatterDate(date,format){if(date instanceof Date){var day=date.getDate().toString().padStart(2,'0');var month=(date.getMonth()+1).toString().padStart(2,'0');var year=date.getFullYear();if(format==='MM/DD/YYYY'){return month+"/"+day+"/"+year;}else if(format==='DD/MM/YYYY'){return day+"/"+month+"/"+year;}else{return month+"/"+day+"/"+year;}}return'';};var getPlaceholderDateFormat=exports.getPlaceholderDateFormat=function getPlaceholderDateFormat(dateFormat){return dateFormat==='MM/DD/YYYY'?'MM/DD/YYYY':'DD/MM/YYYY';};var parseLocalDateString=exports.parseLocalDateString=function parseLocalDateString(localDate,dateFormat){var parts=localDate.split('/');var year=parts[2];var month=dateFormat==='MM/DD/YYYY'?parts[0]-1:parts[1]-1;var day=dateFormat==='MM/DD/YYYY'?parts[1]:parts[0];return new Date(year,month,day);};var transformDate=exports.transformDate=function transformDate(dateString){var parts=dateString.split('/');var date=new Date(parts[2],parts[1]-1,parts[0],3,0,0);return date.toISOString();};var generateYearList=exports.generateYearList=function generateYearList(){return Array.from({length:200},function(_,i){return 1900+i;});};var isLeapYear=exports.isLeapYear=function isLeapYear(year){return year%4===0&&year%100!==0||year%400===0;};var getDaysInMonth=exports.getDaysInMonth=function getDaysInMonth(year,month){var daysInMonth=[31,isLeapYear(year)?29:28,31,30,31,30,31,31,30,31,30,31];return daysInMonth[month];};var buildMonth=exports.buildMonth=function buildMonth(year,month){var days=[];var firstDayOfMonth=new Date(year,month,1).getDay();var totalDays=getDaysInMonth(year,month);var previousMonth=month===0?11:month-1;var previousMonthYear=month===0?year-1:year;var previousMonthDays=getDaysInMonth(previousMonthYear,previousMonth);for(var i=firstDayOfMonth;i>0;i--){days.push(new Date(previousMonthYear,previousMonth,previousMonthDays-i+1));}for(var _day=1;_day<=totalDays;_day++){days.push(new Date(year,month,_day));}var nextMonth=month===11?0:month+1;var nextMonthYear=month===11?year+1:year;var day=1;while(days.length%7!==0){days.push(new Date(nextMonthYear,nextMonth,day++));}return days;};var validateDate=exports.validateDate=function validateDate(dateObject,text,format){if(!dateObject||new Date(dateObject).getFullYear()<1000||new Date(dateObject).getFullYear()>9999){return false;}var parts=text.split('/');var day,month;if(format==='DD/MM/YYYY'){day=parseInt(parts[0],10);month=parseInt(parts[1],10);}else{day=parseInt(parts[1],10);month=parseInt(parts[0],10);}if(month<1||month>12||day<1||day>31){return false;}if((month===4||month===6||month===9||month===11)&&day>30){return false;}if(month===2){var isLeap=dateObject.getFullYear()%4===0&&(dateObject.getFullYear()%100!==0||dateObject.getFullYear()%400===0);if(day>(isLeap?29:28)){return false;}}return true;};var isDateValid=exports.isDateValid=function isDateValid(date){if(Object.prototype.toString.call(date)==='[object Date]'){if(isNaN(date.getTime())){return false;}else{return true;}}else{return false;}};var formatInputText=exports.formatInputText=function formatInputText(text){if(!text){return'';}var processedText=text.replace(/[^0-9]/g,'');processedText=processedText.slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}return processedText;};

package/dist-web/components/datepicker/DatePicker.js

@@ -12,7 +12,7 @@ import { NEUTRAL_300, NEUTRAL_400, NEUTRAL_50, NEUTRAL_600, PRIMARY_100 } from "
 import { AppPlatform } from "../../helpers/utilsTypes";
 import { CALENDAR_HEIGHT, styles } from "./DatePicker.styles";
 import { translations } from "./DatePicker.translations";
-import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, validateDate, MODAL_CONTENT_WIDTH, MODAL_CONTENT_TOP_POSITION, MODAL_POSITION_TOP } from "./DatePicker.utils";
+import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, MODAL_CONTENT_WIDTH, MODAL_CONTENT_TOP_POSITION, MODAL_POSITION_TOP, convertDateToEtendoERPFormat, validateDate } from "./DatePicker.utils";
 
 // Button from the Etendo UI library
 import { Button } from "../button";
@@ -50,7 +50,7 @@ var DatePicker = function DatePicker(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isPickerShow = _useState8[0],
     setIsPickerShow = _useState8[1];
-  var _useState9 = useState(new Date()),
+  var _useState9 = useState(value ? new Date(value) : undefined),
     _useState10 = _slicedToArray(_useState9, 2),
     selectedDate = _useState10[0],
     setSelectedDate = _useState10[1];
@@ -106,21 +106,30 @@ var DatePicker = function DatePicker(_ref) {
         setCurrentYear(new Date().getFullYear());
       }
     }
-  }, [value, dateFormat]);
+  }, []);
 
   // Effect to close the date picker when the user scrolls
+
   useEffect(function () {
-    var handleScroll = function handleScroll() {
+    var handleScroll = function handleScroll(event) {
       if (isPickerShow) {
-        setIsPickerShow(false);
+        if (calendarRef.current && !calendarRef.current.contains(event.target)) {
+          setIsPickerShow(false);
+        }
       }
     };
-    if (Platform.OS === AppPlatform.web && window && typeof window !== 'undefined') {
+    if (Platform.OS === AppPlatform.web) {
       window.addEventListener('scroll', handleScroll, true);
     }
+    return function () {
+      if (Platform.OS === AppPlatform.web) {
+        window.removeEventListener('scroll', handleScroll, true);
+      }
+    };
   }, [isPickerShow]);
 
   // References for the date picker
+  var calendarRef = useRef(null);
   var inputRef = useRef(null);
   var monthListRef = useRef(null);
 
@@ -330,7 +339,7 @@ var DatePicker = function DatePicker(_ref) {
       setIsPickerShow(!isPickerShow);
 
       // If date is selected, set current month and year to selected date
-      if (!isPickerShow && selectedDate) {
+      if (!isPickerShow && selectedDate instanceof Date) {
         setCurrentMonth(selectedDate.getMonth());
         setCurrentYear(selectedDate.getFullYear());
       }
@@ -352,7 +361,7 @@ var DatePicker = function DatePicker(_ref) {
   // Function for the button 'Accept'
   var onAccept = function onAccept() {
     if (selectedDate) {
-      onChangeText(formatterDate(selectedDate, dateFormat));
+      onChangeText(convertDateToEtendoERPFormat(selectedDate));
     }
     setIsPickerShow(false);
   };
@@ -377,7 +386,7 @@ var DatePicker = function DatePicker(_ref) {
     }
 
     // Update the date value as user types
-    onChangeText(processedText);
+    setSelectedDate(processedText);
 
     // Convert to date object if the date is complete and verify if it's valid
     if (processedText.length === 10) {
@@ -416,14 +425,10 @@ var DatePicker = function DatePicker(_ref) {
 
   // Handle blur event on text input
   var handleBlur = function handleBlur() {
-    var formattedText = formatInputText(value);
-    var dateObject = parseLocalDateString(formattedText, dateFormat);
-    var isValid = validateDate(dateObject, formattedText, dateFormat);
-    setIsDateValid(isValid);
-    if (isValid) {
-      setSelectedDate(dateObject);
-    } else {
-      setSelectedDate(undefined);
+    var isValidSelectedDate = isDateValid;
+    setIsDateValid(isValidSelectedDate);
+    if (onChangeText) {
+      onChangeText(convertDateToEtendoERPFormat(selectedDate));
     }
   };
 
@@ -503,7 +508,7 @@ var DatePicker = function DatePicker(_ref) {
     style: [styles.datePickerInput, disabled && styles.disabledInput, {
       backgroundColor: backgroundColor
     }],
-    value: value,
+    value: selectedDate instanceof Date ? formatterDate(selectedDate, dateFormat) : selectedDate,
     placeholder: getPlaceholderDateFormat(dateFormat),
     placeholderTextColor: NEUTRAL_600,
     editable: !disabled,
@@ -527,7 +532,8 @@ var DatePicker = function DatePicker(_ref) {
     animationType: "fade",
     transparent: true,
     visible: isPickerShow,
-    onRequestClose: showPicker
+    onRequestClose: showPicker,
+    ref: calendarRef
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: styles.modalContainer,
     activeOpacity: 1,

package/dist-web/components/datepicker/DatePicker.utils.d.ts

@@ -1,6 +1,7 @@
 export declare const MODAL_CONTENT_WIDTH = 360;
 export declare const MODAL_CONTENT_TOP_POSITION = 155;
 export declare const MODAL_POSITION_TOP = 5;
+export declare const convertDateToEtendoERPFormat: (inputDate: Date) => string;
 export declare const formatterDate: (date: Date, format: string) => string;
 export declare const getPlaceholderDateFormat: (dateFormat: string) => "DD/MM/YYYY" | "MM/DD/YYYY";
 export declare const parseLocalDateString: (localDate: string, dateFormat: string) => Date;
@@ -10,3 +11,5 @@ export declare const isLeapYear: (year: number) => boolean;
 export declare const getDaysInMonth: (year: number, month: number) => number;
 export declare const buildMonth: (year: number, month: number) => Date[];
 export declare const validateDate: (dateObject: Date, text: string, format: string) => boolean;
+export declare const isDateValid: (date: Date) => boolean;
+export declare const formatInputText: (text: string) => string;

package/dist-web/components/datepicker/DatePicker.utils.js

@@ -4,9 +4,21 @@ export var MODAL_CONTENT_WIDTH = 360;
 export var MODAL_CONTENT_TOP_POSITION = 155;
 export var MODAL_POSITION_TOP = 5;
 
+// Convert date to compatible format with Etendo ERP
+export var convertDateToEtendoERPFormat = function convertDateToEtendoERPFormat(inputDate) {
+  var date = new Date(inputDate);
+  var year = date.getFullYear();
+  var month = (date.getMonth() + 1).toString().padStart(2, '0');
+  var day = date.getDate().toString().padStart(2, '0');
+  var hours = date.getHours().toString().padStart(2, '0');
+  var minutes = date.getMinutes().toString().padStart(2, '0');
+  var seconds = date.getSeconds().toString().padStart(2, '0');
+  return "".concat(year, "-").concat(month, "-").concat(day, " ").concat(hours, ":").concat(minutes, ":").concat(seconds, ".0");
+};
+
 // Format date based on language
 export var formatterDate = function formatterDate(date, format) {
-  if (date !== undefined) {
+  if (date instanceof Date) {
     var day = date.getDate().toString().padStart(2, '0');
     var month = (date.getMonth() + 1).toString().padStart(2, '0');
     var year = date.getFullYear();
@@ -17,7 +29,7 @@ export var formatterDate = function formatterDate(date, format) {
     } else if (format === 'DD/MM/YYYY') {
       return "".concat(day, "/").concat(month, "/").concat(year);
     } else {
-      // Default format - // MM/DD/YYYY
+      // Default format - MM/DD/YYYY
       return "".concat(month, "/").concat(day, "/").concat(year);
     }
   }
@@ -96,7 +108,7 @@ export var buildMonth = function buildMonth(year, month) {
 
 // Function to validate the date format
 export var validateDate = function validateDate(dateObject, text, format) {
-  if (isNaN(dateObject.getTime()) || dateObject.getFullYear() < 1000 || dateObject.getFullYear() > 9999) {
+  if (!dateObject || new Date(dateObject).getFullYear() < 1000 || new Date(dateObject).getFullYear() > 9999) {
     return false;
   }
   var parts = text.split('/');
@@ -122,4 +134,42 @@ export var validateDate = function validateDate(dateObject, text, format) {
     }
   }
   return true;
+};
+
+// Check if the date is valid
+export var isDateValid = function isDateValid(date) {
+  // Check if the date is a valid Date object
+  if (Object.prototype.toString.call(date) === '[object Date]') {
+    // Check if the date is valid
+    if (isNaN(date.getTime())) {
+      return false;
+    } else {
+      return true;
+    }
+  } else {
+    // The input is not a Date object
+    return false;
+  }
+};
+
+// Format the text input value
+export var formatInputText = function formatInputText(text) {
+  if (!text) {
+    return '';
+  }
+
+  // Remove all non-numeric characters
+  var processedText = text.replace(/[^0-9]/g, '');
+
+  // Limit the length to 8 characters
+  processedText = processedText.slice(0, 8);
+
+  // Format the date
+  if (processedText.length > 2) {
+    processedText = processedText.slice(0, 2) + '/' + processedText.slice(2);
+  }
+  if (processedText.length > 5) {
+    processedText = processedText.slice(0, 5) + '/' + processedText.slice(5);
+  }
+  return processedText;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.3.18",
+  "version": "1.3.19",
   "private": false,
   "scripts": {
     "android": "react-native run-android",