etendo-ui-library 1.3.8 → 1.3.10

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ styleField, onChange, value, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ styleField, onChangeText, value, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

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 _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));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 styleField=_ref.styleField,onChange=_ref.onChange,value=_ref.value,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled;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)('downwards'),_useState16=(0,_slicedToArray2.default)(_useState15,2),calendarDirection=_useState16[0],setCalendarDirection=_useState16[1];var _useState17=(0,_react.useState)(new Date().getMonth()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentMonth=_useState18[0],setCurrentMonth=_useState18[1];var _useState19=(0,_react.useState)(new Date().getFullYear()),_useState20=(0,_slicedToArray2.default)(_useState19,2),currentYear=_useState20[0],setCurrentYear=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledMonthSelection=_useState22[0],setDisabledMonthSelection=_useState22[1];var _useState23=(0,_react.useState)(false),_useState24=(0,_slicedToArray2.default)(_useState23,2),disabledYearSelection=_useState24[0],setDisabledYearSelection=_useState24[1];var _useState25=(0,_react.useState)(new Date(selectedDate)),_useState26=(0,_slicedToArray2.default)(_useState25,2),currentSelectedDate=_useState26[0],setTempSelectedDate=_useState26[1];var inputRef=(0,_react.useRef)(null);(0,_react.useEffect)(function(){if(isPickerShow&&inputRef.current){inputRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;if(spaceBelow<_DatePicker.CALENDAR_HEIGHT){setCalendarDirection('upwards');}else{setCalendarDirection('downwards');}});}},[isPickerShow]);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});}};(0,_react.useEffect)(function(){if(isMonthSelection&&monthListRef.current){monthListRef.current.scrollToIndex({animated:true,index:currentMonth});}},[isMonthSelection,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(onChange){onChange((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var selectYear=function selectYear(year){setCurrentYear(year);setIsYearSelection(false);var adjustedDate=adjustDateForMonth(year,currentMonth,selectedDate);setSelectedDate(adjustedDate);if(onChange){onChange((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:191,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,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:203,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,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:215,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:43,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?38*index:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:237,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 showPicker=function showPicker(){if(!disabled){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){setTempSelectedDate(selectedDate);setSelectedDate(date);};var onAccept=function onAccept(){if(selectedDate){onChange((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);}onChange(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;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:428,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:436,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:445,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:465,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:466,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:468,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:473,columnNumber:9}}));};var PlatformComponent=_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_reactNative.View:_reactNative.Modal;return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:490,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:491,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:497,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput],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:504,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:[_DatePicker.styles.calendarIcon,disabled&&{opacity:0.2}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:521,columnNumber:15}})))),_react.default.createElement(PlatformComponent,(0,_extends2.default)({},_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?{style:{display:isPickerShow?'flex':'none',boxShadow:'0px 1px 1.41px rgba(0, 0, 0, 0.20)',borderRadius:8,marginTop:8}}:{transparent:true,visible:isPickerShow,onRequestClose:showPicker},{__self:_this,__source:{fileName:_jsxFileName,lineNumber:529,columnNumber:7}}),_react.default.createElement(_reactNative.TouchableOpacity,{style:!(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web)&&_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:544,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:calendarDirection==='downwards'?[_DatePicker.styles.modalContent]:[_DatePicker.styles.modalContentUpwards,_DatePicker.styles.modalContent],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:548,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:555,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:563,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:570,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:571,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:573,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:574,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:577,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:586,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:587,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:591,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:599,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:601,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:602,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:603,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:612,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:613,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:623,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:624,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:630,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 _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));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 styleField=_ref.styleField,onChangeText=_ref.onChangeText,value=_ref.value,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled;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)('downwards'),_useState16=(0,_slicedToArray2.default)(_useState15,2),calendarDirection=_useState16[0],setCalendarDirection=_useState16[1];var _useState17=(0,_react.useState)(new Date().getMonth()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentMonth=_useState18[0],setCurrentMonth=_useState18[1];var _useState19=(0,_react.useState)(new Date().getFullYear()),_useState20=(0,_slicedToArray2.default)(_useState19,2),currentYear=_useState20[0],setCurrentYear=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledMonthSelection=_useState22[0],setDisabledMonthSelection=_useState22[1];var _useState23=(0,_react.useState)(false),_useState24=(0,_slicedToArray2.default)(_useState23,2),disabledYearSelection=_useState24[0],setDisabledYearSelection=_useState24[1];var _useState25=(0,_react.useState)(new Date(selectedDate)),_useState26=(0,_slicedToArray2.default)(_useState25,2),currentSelectedDate=_useState26[0],setTempSelectedDate=_useState26[1];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:154,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,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:166,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,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:178,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:43,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?38*index:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,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;if(spaceBelow<_DatePicker.CALENDAR_HEIGHT){setCalendarDirection('upwards');}else{setCalendarDirection('downwards');}});}};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:424,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:432,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:441,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:461,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:462,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:464,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:469,columnNumber:9}}));};var PlatformComponent=_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_reactNative.View:_reactNative.Modal;return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:486,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:487,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:493,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput],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:500,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:516,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:[_DatePicker.styles.calendarIcon,disabled&&{opacity:0.2}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:517,columnNumber:15}})))),_react.default.createElement(PlatformComponent,(0,_extends2.default)({},_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?{style:{display:isPickerShow?'flex':'none',boxShadow:'0px 1px 1.41px rgba(0, 0, 0, 0.20)',borderRadius:8,marginTop:8}}:{transparent:true,visible:isPickerShow,onRequestClose:showPicker},{__self:_this,__source:{fileName:_jsxFileName,lineNumber:525,columnNumber:7}}),_react.default.createElement(_reactNative.TouchableOpacity,{style:!(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web)&&_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:540,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:calendarDirection==='downwards'?[_DatePicker.styles.modalContent]:[_DatePicker.styles.modalContentUpwards,_DatePicker.styles.modalContent],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:544,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:551,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:559,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:566,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:567,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:569,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:570,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:573,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:582,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:583,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:587,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:594,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:595,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:597,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:599,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:608,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:609,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:619,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:620,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:626,columnNumber:15}}))))));};var _default=exports.default=DatePicker;

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

@@ -7,7 +7,7 @@ export type LanguageFormat = 'en-US' | 'es-ES';
 export interface DatePickerProps {
     language: LanguageFormat;
     styleField: any;
-    onChange: any;
+    onChangeText: any;
     dateFormat: DateFormat;
     value: Date | string | undefined | any;
     showCalendar: boolean | undefined;

package/dist-native/components/input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputProps } from './Input.types';
-declare const Input: ({ value, titleLabel, titleImage, helperText, placeholder, placeholderPickerSearch, disabled, maxLength, centerText, keyboardType, displayKey, dataPicker, backgroundColor, showOptionsAmount, showSearchInPicker, height, onPress, onSubmit, onFocus, onBlur, onChangeText, onOptionSelected, typeField, isError, language, dateFormat, onChange, showCalendar, }: InputProps) => React.JSX.Element;
+declare const Input: ({ value, titleLabel, titleImage, helperText, placeholder, placeholderPickerSearch, disabled, maxLength, centerText, keyboardType, displayKey, dataPicker, backgroundColor, showOptionsAmount, showSearchInPicker, height, onPress, onSubmit, onFocus, onBlur, onChangeText, onOptionSelected, typeField, isError, language, dateFormat, showCalendar, }: InputProps) => React.JSX.Element;
 export default Input;

package/dist-native/components/input/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Input=require("./Input.style");var _index=require("./index");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/input/Input.tsx";var Input=function Input(_ref){var value=_ref.value,titleLabel=_ref.titleLabel,titleImage=_ref.titleImage,helperText=_ref.helperText,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,maxLength=_ref.maxLength,centerText=_ref.centerText,keyboardType=_ref.keyboardType,displayKey=_ref.displayKey,dataPicker=_ref.dataPicker,backgroundColor=_ref.backgroundColor,showOptionsAmount=_ref.showOptionsAmount,showSearchInPicker=_ref.showSearchInPicker,height=_ref.height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,_ref$onFocus=_ref.onFocus,onFocus=_ref$onFocus===void 0?function(){}:_ref$onFocus,_ref$onBlur=_ref.onBlur,onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,typeField=_ref.typeField,isError=_ref.isError,language=_ref.language,dateFormat=_ref.dateFormat,onChange=_ref.onChange,showCalendar=_ref.showCalendar;var stateStyle=function stateStyle(){if(typeField==='readOnly'){return _Input.inputStyleVariants.readOnly;}else if(getDisabled()){return _Input.inputStyleVariants.disabled;}else if(isError){return _Input.inputStyleVariants.destructive;}else{return _Input.inputStyleVariants.default;}};var getDisabled=function getDisabled(){if(typeField==='picker'){return!(dataPicker!=null&&dataPicker.length)||disabled;}if(typeField==='readOnly'){return false;}return disabled;};var showFilterSearch=dataPicker&&(showSearchInPicker!=null?showSearchInPicker:(dataPicker==null?void 0:dataPicker.length)>16);return _react.default.createElement(_reactNative.View,{style:_Input.styles.inputContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}},_react.default.createElement(_index.InputTitle,{disabled:getDisabled(),titleLabel:titleLabel,titleImage:titleImage,styleTitle:stateStyle().titleStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:7}}),_react.default.createElement(_index.InputField,{disabled:getDisabled(),type:typeField,configField:_Input.inputVariants[typeField].field,styleField:stateStyle().fieldStyle,placeholder:placeholder,placeholderPickerSearch:placeholderPickerSearch,value:value,onPress:onPress,onSubmit:onSubmit,onFocus:onFocus,onBlur:onBlur,onChangeText:onChangeText,onOptionSelected:onOptionSelected,showOptionsAmount:showOptionsAmount,showSearchInPicker:showFilterSearch,keyboardType:keyboardType,maxLength:maxLength,centerText:centerText,dataPicker:dataPicker,displayKey:displayKey,backgroundColor:backgroundColor,height:height,language:language,dateFormat:dateFormat,onChange:onChange,showCalendar:showCalendar,__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:7}}),_react.default.createElement(_index.InputHelperText,{label:helperText,styleHelper:stateStyle().helperStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:7}}));};var _default=exports.default=Input;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Input=require("./Input.style");var _index=require("./index");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/input/Input.tsx";var Input=function Input(_ref){var value=_ref.value,titleLabel=_ref.titleLabel,titleImage=_ref.titleImage,helperText=_ref.helperText,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,maxLength=_ref.maxLength,centerText=_ref.centerText,keyboardType=_ref.keyboardType,displayKey=_ref.displayKey,dataPicker=_ref.dataPicker,backgroundColor=_ref.backgroundColor,showOptionsAmount=_ref.showOptionsAmount,showSearchInPicker=_ref.showSearchInPicker,height=_ref.height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,_ref$onFocus=_ref.onFocus,onFocus=_ref$onFocus===void 0?function(){}:_ref$onFocus,_ref$onBlur=_ref.onBlur,onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,typeField=_ref.typeField,isError=_ref.isError,language=_ref.language,dateFormat=_ref.dateFormat,showCalendar=_ref.showCalendar;var stateStyle=function stateStyle(){if(typeField==='readOnly'){return _Input.inputStyleVariants.readOnly;}else if(getDisabled()){return _Input.inputStyleVariants.disabled;}else if(isError){return _Input.inputStyleVariants.destructive;}else{return _Input.inputStyleVariants.default;}};var getDisabled=function getDisabled(){if(typeField==='picker'){return!(dataPicker!=null&&dataPicker.length)||disabled;}if(typeField==='readOnly'){return false;}return disabled;};var showFilterSearch=dataPicker&&(showSearchInPicker!=null?showSearchInPicker:(dataPicker==null?void 0:dataPicker.length)>16);return _react.default.createElement(_reactNative.View,{style:_Input.styles.inputContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:5}},_react.default.createElement(_index.InputTitle,{disabled:getDisabled(),titleLabel:titleLabel,titleImage:titleImage,styleTitle:stateStyle().titleStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:7}}),_react.default.createElement(_index.InputField,{disabled:getDisabled(),type:typeField,configField:_Input.inputVariants[typeField].field,styleField:stateStyle().fieldStyle,placeholder:placeholder,placeholderPickerSearch:placeholderPickerSearch,value:value,onPress:onPress,onSubmit:onSubmit,onFocus:onFocus,onBlur:onBlur,onChangeText:onChangeText,onOptionSelected:onOptionSelected,showOptionsAmount:showOptionsAmount,showSearchInPicker:showFilterSearch,keyboardType:keyboardType,maxLength:maxLength,centerText:centerText,dataPicker:dataPicker,displayKey:displayKey,backgroundColor:backgroundColor,height:height,language:language,dateFormat:dateFormat,showCalendar:showCalendar,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_index.InputHelperText,{label:helperText,styleHelper:stateStyle().helperStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}}));};var _default=exports.default=Input;

package/dist-native/components/input/Input.types.d.ts

@@ -67,7 +67,6 @@ export interface InputProps {
     backgroundColor?: ColorValue;
     language?: LanguageFormat;
     dateFormat?: DateFormat;
-    onChange?: (event: any) => void;
     showCalendar?: boolean;
 }
 export interface InputTitleProps {
@@ -112,7 +111,6 @@ export interface InputFieldProps {
     onFocus: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     onBlur: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     dateFormat?: any;
-    onChange?: (event: any) => void;
     showCalendar?: boolean;
 }
 export interface InputHelperProps {

package/dist-native/components/input/components/InputField.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputFieldProps } from '../Input.types';
-declare const InputField: ({ type, configField, styleField, value, disabled, placeholder, placeholderPickerSearch, maxLength, keyboardType, dataPicker, displayKey, showSearchInPicker, backgroundColor, showOptionsAmount, height, onPress, onSubmit, onChangeText, onOptionSelected, onFocus, onBlur, language, onChange, dateFormat, showCalendar, }: InputFieldProps) => React.JSX.Element;
+declare const InputField: ({ type, configField, styleField, value, disabled, placeholder, placeholderPickerSearch, maxLength, keyboardType, dataPicker, displayKey, showSearchInPicker, backgroundColor, showOptionsAmount, height, onPress, onSubmit, onChangeText, onOptionSelected, onFocus, onBlur, language, dateFormat, showCalendar, }: InputFieldProps) => React.JSX.Element;
 export default InputField;

package/dist-native/components/input/components/InputField.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 _Input=require("../Input.style");var _Input2=require("../Input.types");var _ShowPasswordIcon=require("../../../assets/images/icons/ShowPasswordIcon");var _HidePasswordIcon=require("../../../assets/images/icons/HidePasswordIcon");var _InputOptions=_interopRequireDefault(require("./InputOptions"));var _DatePicker=_interopRequireDefault(require("../../datepicker/DatePicker"));var _colors=require("../../../styles/colors");var _table_utils=require("../../../helpers/table_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/input/components/InputField.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 InputField=function InputField(_ref){var type=_ref.type,configField=_ref.configField,styleField=_ref.styleField,value=_ref.value,disabled=_ref.disabled,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,maxLength=_ref.maxLength,keyboardType=_ref.keyboardType,dataPicker=_ref.dataPicker,displayKey=_ref.displayKey,showSearchInPicker=_ref.showSearchInPicker,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_0:_ref$backgroundColor,showOptionsAmount=_ref.showOptionsAmount,_ref$height=_ref.height,height=_ref$height===void 0?40:_ref$height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,onFocus=_ref.onFocus,onBlur=_ref.onBlur,language=_ref.language,onChange=_ref.onChange,dateFormat=_ref.dateFormat,showCalendar=_ref.showCalendar;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),showPassword=_useState4[0],setShowPassword=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),showOptions=_useState6[0],setShowOptions=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),dataOptionsFilter=_useState8[0],setDataOptionsFilter=_useState8[1];var _useState9=(0,_react.useState)(''),_useState10=(0,_slicedToArray2.default)(_useState9,2),filterValue=_useState10[0],setFilterValue=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),optionsTop=_useState12[0],setOptionsTop=_useState12[1];var _useState13=(0,_react.useState)({top:0,left:0,width:0,height:0}),_useState14=(0,_slicedToArray2.default)(_useState13,2),positionModal=_useState14[0],setPositionModal=_useState14[1];var windowHeight=_reactNative.Dimensions.get('window').height;var refComponent=(0,_react.useRef)(null);var regex=/^[0-9.,]+$/g;if(configField!=null&&configField.isDatePicker){return _react.default.createElement(_DatePicker.default,{dateFormat:dateFormat,language:language,styleField:styleField,onChange:onChange,value:value,showCalendar:showCalendar,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:7}});}var getStyleText=function getStyleText(){var style=[];if(value){style.push(styleField.textDefault);}else{style.push(styleField.textPlaceholder);}return style;};(0,_react.useEffect)(function(){if(dataPicker){setDataOptionsFilter(dataPicker);}},[dataPicker]);(0,_react.useEffect)(function(){if(showOptions){getTopLeft();}},[]);var getTopLeft=function getTopLeft(){if(refComponent.current){refComponent.current.measure(function(x,y,width,height,pageX,pageY){var calcDropdownTopLeft=pageY+height+_Input.styles.spaceInOptionsAndInput.height;var showFilterHeight=showSearchInPicker?_Input.styles.optionFilterContainer.height:0;var optionsHeight=_Input.styles.optionContainer.height+_Input.styles.optionContainer.marginTop+showFilterHeight+_Input.styles.optionContainer.marginTop+_Input.styles.optionsContainer.borderWidth*2;var topPosition,bottomPosition;if(optionsHeight+calcDropdownTopLeft+_Input.styles.offSet.height>windowHeight){topPosition=pageY-optionsHeight;setOptionsTop(true);}else{topPosition=calcDropdownTopLeft;setOptionsTop(false);}bottomPosition=windowHeight-(topPosition+optionsHeight);setPositionModal({top:topPosition,bottom:bottomPosition,left:pageX,width:width,height:height});});}};var handleOnChangeFilterText=function handleOnChangeFilterText(filterText){setFilterValue(filterText);if(displayKey)setDataOptionsFilter(dataPicker.filter(function(item){return item[displayKey].toLocaleLowerCase().includes(filterText.toLocaleLowerCase());}));};var handleOnClose=function handleOnClose(){setShowOptions(false);setDataOptionsFilter(dataPicker);setFilterValue('');};var getKeyboardType=function getKeyboardType(keyboardType){if(keyboardType==='number'){return'numeric';}return'default';};var getOnChangeText=function getOnChangeText(text){if(onChangeText){if(keyboardType==='number'){if(text.match(regex)||(text==null?void 0:text.length)===0){onChangeText(text);}return;}onChangeText(text);}};var getFocusStyle=function getFocusStyle(){var style=[];if(!isFocus){style.push({borderColor:'transparent'});}return style;};var removePaddingField=function removePaddingField(){var style={};if(configField!=null&&configField.image){style={paddingRight:0};}return style;};var onPressFocus=function onPressFocus(event){onFocus(event);setIsFocus(true);};var onPressBlur=function onPressBlur(event){onBlur(event);setIsFocus(false);};var getImage=function getImage(image){var fillValue=disabled?_colors.NEUTRAL_400:undefined;if(type===_Input2.InputFieldVariant.TextInputPassword){var PasswordComponent=showPassword?_HidePasswordIcon.HidePasswordIcon:_ShowPasswordIcon.ShowPasswordIcon;return _react.default.createElement(PasswordComponent,{style:_Input.styles.inputImageSize,fill:fillValue,__self:_this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:9}});}return _react.default.cloneElement(image,{fill:fillValue});};var handlePressImage=function handlePressImage(){if(type===_Input2.InputFieldVariant.TextInputPassword){setShowPassword(function(prevState){return!prevState;});}else{onSubmit==null?void 0:onSubmit();}};var handleOnPress=function handleOnPress(event){if(type===_Input2.InputFieldVariant.Picker){getTopLeft();setShowOptions(true);}if(onPress){onPress(event);}};var getText=function getText(){if(value){return value;}return placeholder;};var isAreaDisabled=function isAreaDisabled(){return disabled||configField.disabledSubmit||!onSubmit&&type!==_Input2.InputFieldVariant.TextInputPassword;};return _react.default.createElement(_reactNative.View,{style:[styleField.focus,getFocusStyle()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{ref:refComponent,style:[styleField.field,removePaddingField(),{backgroundColor:backgroundColor},{height:height}],disabled:disabled||configField.disabledField,onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:269,columnNumber:7}},(configField==null?void 0:configField.type)===_Input2.InputFieldVariant.TextInput&&_react.default.createElement(_reactNative.TextInput,{editable:!disabled||!configField.disabledField,focusable:!disabled||!configField.disabledField,onBlur:onPressBlur,onFocus:onPressFocus,value:value,keyboardType:getKeyboardType(keyboardType),onChangeText:getOnChangeText,style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],placeholder:placeholder,placeholderTextColor:_colors.NEUTRAL_600,maxLength:maxLength,secureTextEntry:type===_Input2.InputFieldVariant.TextInputPassword&&showPassword,onSubmitEditing:function onSubmitEditing(){return onSubmit==null?void 0:onSubmit();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:280,columnNumber:11}}),(configField==null?void 0:configField.type)==='text'&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],__self:_this,__source:{fileName:_jsxFileName,lineNumber:299,columnNumber:11}},getText()),(configField==null?void 0:configField.image)&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handlePressImage,style:_Input.styles.buttonContainerInputField,disabled:isAreaDisabled(),__self:_this,__source:{fileName:_jsxFileName,lineNumber:307,columnNumber:11}},getImage(configField.image)),_react.default.createElement(_InputOptions.default,{optionsTop:optionsTop,showOptionsAmount:showOptionsAmount,onOptionSelected:onOptionSelected,showOptions:showOptions,positionModal:positionModal,data:dataOptionsFilter,onClose:handleOnClose,onChangeFilterText:handleOnChangeFilterText,filterValue:filterValue,displayKey:displayKey,showSearchInPicker:showSearchInPicker,placeholderPickerSearch:placeholderPickerSearch,dataPicker:dataPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:314,columnNumber:9}})));};var _default=exports.default=InputField;
+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 _Input=require("../Input.style");var _Input2=require("../Input.types");var _ShowPasswordIcon=require("../../../assets/images/icons/ShowPasswordIcon");var _HidePasswordIcon=require("../../../assets/images/icons/HidePasswordIcon");var _InputOptions=_interopRequireDefault(require("./InputOptions"));var _DatePicker=_interopRequireDefault(require("../../datepicker/DatePicker"));var _colors=require("../../../styles/colors");var _table_utils=require("../../../helpers/table_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/input/components/InputField.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 InputField=function InputField(_ref){var type=_ref.type,configField=_ref.configField,styleField=_ref.styleField,value=_ref.value,disabled=_ref.disabled,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,maxLength=_ref.maxLength,keyboardType=_ref.keyboardType,dataPicker=_ref.dataPicker,displayKey=_ref.displayKey,showSearchInPicker=_ref.showSearchInPicker,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_0:_ref$backgroundColor,showOptionsAmount=_ref.showOptionsAmount,_ref$height=_ref.height,height=_ref$height===void 0?40:_ref$height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,onFocus=_ref.onFocus,onBlur=_ref.onBlur,language=_ref.language,dateFormat=_ref.dateFormat,showCalendar=_ref.showCalendar;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),showPassword=_useState4[0],setShowPassword=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),showOptions=_useState6[0],setShowOptions=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),dataOptionsFilter=_useState8[0],setDataOptionsFilter=_useState8[1];var _useState9=(0,_react.useState)(''),_useState10=(0,_slicedToArray2.default)(_useState9,2),filterValue=_useState10[0],setFilterValue=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),optionsTop=_useState12[0],setOptionsTop=_useState12[1];var _useState13=(0,_react.useState)({top:0,left:0,width:0,height:0}),_useState14=(0,_slicedToArray2.default)(_useState13,2),positionModal=_useState14[0],setPositionModal=_useState14[1];var windowHeight=_reactNative.Dimensions.get('window').height;var refComponent=(0,_react.useRef)(null);var regex=/^[0-9.,]+$/g;if(configField!=null&&configField.isDatePicker){return _react.default.createElement(_DatePicker.default,{dateFormat:dateFormat,language:language,styleField:styleField,onChangeText:onChangeText,value:value,showCalendar:showCalendar,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}});}var getStyleText=function getStyleText(){var style=[];if(value){style.push(styleField.textDefault);}else{style.push(styleField.textPlaceholder);}return style;};(0,_react.useEffect)(function(){if(dataPicker){setDataOptionsFilter(dataPicker);}},[dataPicker]);(0,_react.useEffect)(function(){if(showOptions){getTopLeft();}},[]);var getTopLeft=function getTopLeft(){if(refComponent.current){refComponent.current.measure(function(x,y,width,height,pageX,pageY){var calcDropdownTopLeft=pageY+height+_Input.styles.spaceInOptionsAndInput.height;var showFilterHeight=showSearchInPicker?_Input.styles.optionFilterContainer.height:0;var optionsHeight=_Input.styles.optionContainer.height+_Input.styles.optionContainer.marginTop+showFilterHeight+_Input.styles.optionContainer.marginTop+_Input.styles.optionsContainer.borderWidth*2;var topPosition,bottomPosition;if(optionsHeight+calcDropdownTopLeft+_Input.styles.offSet.height>windowHeight){topPosition=pageY-optionsHeight;setOptionsTop(true);}else{topPosition=calcDropdownTopLeft;setOptionsTop(false);}bottomPosition=windowHeight-(topPosition+optionsHeight);setPositionModal({top:topPosition,bottom:bottomPosition,left:pageX,width:width,height:height});});}};var handleOnChangeFilterText=function handleOnChangeFilterText(filterText){setFilterValue(filterText);if(displayKey)setDataOptionsFilter(dataPicker.filter(function(item){return item[displayKey].toLocaleLowerCase().includes(filterText.toLocaleLowerCase());}));};var handleOnClose=function handleOnClose(){setShowOptions(false);setDataOptionsFilter(dataPicker);setFilterValue('');};var getKeyboardType=function getKeyboardType(keyboardType){if(keyboardType==='number'){return'numeric';}return'default';};var getOnChangeText=function getOnChangeText(text){if(onChangeText){if(keyboardType==='number'){if(text.match(regex)||(text==null?void 0:text.length)===0){onChangeText(text);}return;}onChangeText(text);}};var getFocusStyle=function getFocusStyle(){var style=[];if(!isFocus){style.push({borderColor:'transparent'});}return style;};var removePaddingField=function removePaddingField(){var style={};if(configField!=null&&configField.image){style={paddingRight:0};}return style;};var onPressFocus=function onPressFocus(event){onFocus(event);setIsFocus(true);};var onPressBlur=function onPressBlur(event){onBlur(event);setIsFocus(false);};var getImage=function getImage(image){var fillValue=disabled?_colors.NEUTRAL_400:undefined;if(type===_Input2.InputFieldVariant.TextInputPassword){var PasswordComponent=showPassword?_HidePasswordIcon.HidePasswordIcon:_ShowPasswordIcon.ShowPasswordIcon;return _react.default.createElement(PasswordComponent,{style:_Input.styles.inputImageSize,fill:fillValue,__self:_this,__source:{fileName:_jsxFileName,lineNumber:227,columnNumber:9}});}return _react.default.cloneElement(image,{fill:fillValue});};var handlePressImage=function handlePressImage(){if(type===_Input2.InputFieldVariant.TextInputPassword){setShowPassword(function(prevState){return!prevState;});}else{onSubmit==null?void 0:onSubmit();}};var handleOnPress=function handleOnPress(event){if(type===_Input2.InputFieldVariant.Picker){getTopLeft();setShowOptions(true);}if(onPress){onPress(event);}};var getText=function getText(){if(value){return value;}return placeholder;};var isAreaDisabled=function isAreaDisabled(){return disabled||configField.disabledSubmit||!onSubmit&&type!==_Input2.InputFieldVariant.TextInputPassword;};return _react.default.createElement(_reactNative.View,{style:[styleField.focus,getFocusStyle()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{ref:refComponent,style:[styleField.field,removePaddingField(),{backgroundColor:backgroundColor},{height:height}],disabled:disabled||configField.disabledField,onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:7}},(configField==null?void 0:configField.type)===_Input2.InputFieldVariant.TextInput&&_react.default.createElement(_reactNative.TextInput,{editable:!disabled||!configField.disabledField,focusable:!disabled||!configField.disabledField,onBlur:onPressBlur,onFocus:onPressFocus,value:value,keyboardType:getKeyboardType(keyboardType),onChangeText:getOnChangeText,style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],placeholder:placeholder,placeholderTextColor:_colors.NEUTRAL_600,maxLength:maxLength,secureTextEntry:type===_Input2.InputFieldVariant.TextInputPassword&&showPassword,onSubmitEditing:function onSubmitEditing(){return onSubmit==null?void 0:onSubmit();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:11}}),(configField==null?void 0:configField.type)==='text'&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],__self:_this,__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:11}},getText()),(configField==null?void 0:configField.image)&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handlePressImage,style:_Input.styles.buttonContainerInputField,disabled:isAreaDisabled(),__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:11}},getImage(configField.image)),_react.default.createElement(_InputOptions.default,{optionsTop:optionsTop,showOptionsAmount:showOptionsAmount,onOptionSelected:onOptionSelected,showOptions:showOptions,positionModal:positionModal,data:dataOptionsFilter,onClose:handleOnClose,onChangeFilterText:handleOnChangeFilterText,filterValue:filterValue,displayKey:displayKey,showSearchInPicker:showSearchInPicker,placeholderPickerSearch:placeholderPickerSearch,dataPicker:dataPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:313,columnNumber:9}})));};var _default=exports.default=InputField;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ styleField, onChange, value, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ styleField, onChangeText, value, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

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

@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /* Imports */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Modal, Text, TextInput, View, TouchableOpacity, FlatList, Platform, Dimensions, Pressable } from "react-native-web";
 import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, CalendarIcon } from "../../assets/images/icons";
 import { NEUTRAL_300, NEUTRAL_400, NEUTRAL_600, PRIMARY_100 } from "../../styles/colors";
@@ -18,7 +18,7 @@ import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat,
 import { Button } from "../button";
 var DatePicker = function DatePicker(_ref) {
   var styleField = _ref.styleField,
-    onChange = _ref.onChange,
+    onChangeText = _ref.onChangeText,
     value = _ref.value,
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? 'MM/DD/YYYY' : _ref$dateFormat,
@@ -85,24 +85,6 @@ var DatePicker = function DatePicker(_ref) {
   // Reference for text input
   var inputRef = useRef(null);
 
-  // Use effect for calendar direction
-  useEffect(function () {
-    if (isPickerShow && inputRef.current) {
-      inputRef.current.measure(function (x, y, width, height, pageX, pageY) {
-        var windowHeight = Dimensions.get('window').height;
-        // Calculate the space below the input
-        var spaceBelow = windowHeight - pageY - height;
-
-        // If the space below is less than the calendar height, show the calendar upwards, else downwards
-        if (spaceBelow < CALENDAR_HEIGHT) {
-          setCalendarDirection('upwards');
-        } else {
-          setCalendarDirection('downwards');
-        }
-      });
-    }
-  }, [isPickerShow]);
-
   // Ref for month list
   var monthListRef = useRef(null);
   // Toggle month selection
@@ -117,16 +99,6 @@ var DatePicker = function DatePicker(_ref) {
     }
   };
 
-  // Use effect for month selection
-  useEffect(function () {
-    if (isMonthSelection && monthListRef.current) {
-      monthListRef.current.scrollToIndex({
-        animated: true,
-        index: currentMonth
-      });
-    }
-  }, [isMonthSelection, currentMonth]);
-
   // Adjust the selected date if the month has less days
   var adjustDateForMonth = function adjustDateForMonth(year, month, currentSelectedDate) {
     var lastDayOfMonth = new Date(year, month + 1, 0).getDate();
@@ -157,8 +129,8 @@ var DatePicker = function DatePicker(_ref) {
     setIsMonthSelection(false);
     var adjustedDate = adjustDateForMonth(currentYear, monthIndex, selectedDate);
     setSelectedDate(adjustedDate);
-    if (onChange) {
-      onChange(formatterDate(adjustedDate, dateFormat));
+    if (onChangeText) {
+      onChangeText(formatterDate(adjustedDate, dateFormat));
     }
   };
 
@@ -168,8 +140,8 @@ var DatePicker = function DatePicker(_ref) {
     setIsYearSelection(false);
     var adjustedDate = adjustDateForMonth(year, currentMonth, selectedDate);
     setSelectedDate(adjustedDate);
-    if (onChange) {
-      onChange(formatterDate(adjustedDate, dateFormat));
+    if (onChangeText) {
+      onChangeText(formatterDate(adjustedDate, dateFormat));
     }
   };
 
@@ -282,9 +254,25 @@ var DatePicker = function DatePicker(_ref) {
   var monthsShort = translations[language].monthsShort;
   var monthNames = translations[language].monthNames;
 
+  // Calculate calendar direction
+  var calculateCalendarDirection = function calculateCalendarDirection() {
+    if (inputRef.current) {
+      inputRef.current.measure(function (x, y, width, height, pageX, pageY) {
+        var windowHeight = Dimensions.get('window').height;
+        var spaceBelow = windowHeight - pageY - height;
+        if (spaceBelow < CALENDAR_HEIGHT) {
+          setCalendarDirection('upwards');
+        } else {
+          setCalendarDirection('downwards');
+        }
+      });
+    }
+  };
+
   // Toggle date picker display
   var showPicker = function showPicker() {
     if (!disabled) {
+      calculateCalendarDirection();
       // Close month and year selection if they are open
       if (isMonthSelection) setIsMonthSelection(false);
       if (isYearSelection) setIsYearSelection(false);
@@ -304,16 +292,22 @@ var DatePicker = function DatePicker(_ref) {
     }
   };
 
-  // Handle date selection
+  // Handle date selection from the calendar
   var onDateSelected = function onDateSelected(date) {
-    setTempSelectedDate(selectedDate);
+    var formattedDate = formatterDate(date, dateFormat);
+    var isValidDate = validateDate(date, formattedDate, dateFormat);
+    setTempSelectedDate(date);
     setSelectedDate(date);
+    setIsDateValid(isValidDate);
+    if (isValidDate && onChangeText) {
+      onChangeText(formattedDate);
+    }
   };
 
   // Function for the button 'Accept'
   var onAccept = function onAccept() {
     if (selectedDate) {
-      onChange(formatterDate(selectedDate, dateFormat));
+      onChangeText(formatterDate(selectedDate, dateFormat));
     }
     setIsPickerShow(false);
   };
@@ -338,7 +332,7 @@ var DatePicker = function DatePicker(_ref) {
     }
 
     // Update the date value as user types
-    onChange(processedText);
+    onChangeText(processedText);
 
     // Convert to date object if the date is complete and verify if it's valid
     if (processedText.length === 10) {
@@ -400,12 +394,9 @@ var DatePicker = function DatePicker(_ref) {
 
     // Determine if the date is part of the current month
     var isPartOfCurrentMonth = date.getMonth() === currentMonth;
-
-    // Determine if the date is part of the current month to apply hover styles
     var dayKey = "".concat(date.getFullYear(), "-").concat(date.getMonth(), "-").concat(date.getDate());
-    var isHovered = hoveredDay === dayKey;
-    var isTodayHovered = isToday && isHovered; // Sólo aplicar si es 'hoy' y está en hover
-
+    var isHovered = hoveredDay === dayKey && !isSelectedDate;
+    var isTodayHovered = isToday && isHovered;
     return /*#__PURE__*/React.createElement(Pressable, {
       onPress: function onPress() {
         return isPartOfCurrentMonth && onDateSelected(date);

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

@@ -7,7 +7,7 @@ export type LanguageFormat = 'en-US' | 'es-ES';
 export interface DatePickerProps {
     language: LanguageFormat;
     styleField: any;
-    onChange: any;
+    onChangeText: any;
     dateFormat: DateFormat;
     value: Date | string | undefined | any;
     showCalendar: boolean | undefined;

package/dist-web/components/input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputProps } from './Input.types';
-declare const Input: ({ value, titleLabel, titleImage, helperText, placeholder, placeholderPickerSearch, disabled, maxLength, centerText, keyboardType, displayKey, dataPicker, backgroundColor, showOptionsAmount, showSearchInPicker, height, onPress, onSubmit, onFocus, onBlur, onChangeText, onOptionSelected, typeField, isError, language, dateFormat, onChange, showCalendar, }: InputProps) => React.JSX.Element;
+declare const Input: ({ value, titleLabel, titleImage, helperText, placeholder, placeholderPickerSearch, disabled, maxLength, centerText, keyboardType, displayKey, dataPicker, backgroundColor, showOptionsAmount, showSearchInPicker, height, onPress, onSubmit, onFocus, onBlur, onChangeText, onOptionSelected, typeField, isError, language, dateFormat, showCalendar, }: InputProps) => React.JSX.Element;
 export default Input;

package/dist-web/components/input/Input.js

@@ -32,7 +32,6 @@ var Input = function Input(_ref) {
     isError = _ref.isError,
     language = _ref.language,
     dateFormat = _ref.dateFormat,
-    onChange = _ref.onChange,
     showCalendar = _ref.showCalendar;
   var stateStyle = function stateStyle() {
     if (typeField === 'readOnly') {
@@ -87,7 +86,6 @@ var Input = function Input(_ref) {
     height: height,
     language: language,
     dateFormat: dateFormat,
-    onChange: onChange,
     showCalendar: showCalendar
   }), /*#__PURE__*/React.createElement(InputHelperText, {
     label: helperText,

package/dist-web/components/input/Input.types.d.ts

@@ -67,7 +67,6 @@ export interface InputProps {
     backgroundColor?: ColorValue;
     language?: LanguageFormat;
     dateFormat?: DateFormat;
-    onChange?: (event: any) => void;
     showCalendar?: boolean;
 }
 export interface InputTitleProps {
@@ -112,7 +111,6 @@ export interface InputFieldProps {
     onFocus: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     onBlur: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     dateFormat?: any;
-    onChange?: (event: any) => void;
     showCalendar?: boolean;
 }
 export interface InputHelperProps {

package/dist-web/components/input/components/InputField.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputFieldProps } from '../Input.types';
-declare const InputField: ({ type, configField, styleField, value, disabled, placeholder, placeholderPickerSearch, maxLength, keyboardType, dataPicker, displayKey, showSearchInPicker, backgroundColor, showOptionsAmount, height, onPress, onSubmit, onChangeText, onOptionSelected, onFocus, onBlur, language, onChange, dateFormat, showCalendar, }: InputFieldProps) => React.JSX.Element;
+declare const InputField: ({ type, configField, styleField, value, disabled, placeholder, placeholderPickerSearch, maxLength, keyboardType, dataPicker, displayKey, showSearchInPicker, backgroundColor, showOptionsAmount, height, onPress, onSubmit, onChangeText, onOptionSelected, onFocus, onBlur, language, dateFormat, showCalendar, }: InputFieldProps) => React.JSX.Element;
 export default InputField;

package/dist-web/components/input/components/InputField.js

@@ -39,7 +39,6 @@ var InputField = function InputField(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     language = _ref.language,
-    onChange = _ref.onChange,
     dateFormat = _ref.dateFormat,
     showCalendar = _ref.showCalendar;
   var _useState = useState(false),
@@ -83,7 +82,7 @@ var InputField = function InputField(_ref) {
       dateFormat: dateFormat,
       language: language,
       styleField: styleField,
-      onChange: onChange,
+      onChangeText: onChangeText,
       value: value,
       showCalendar: showCalendar,
       disabled: disabled

package/package.json

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