etendo-ui-library 1.3.12 → 1.3.13

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,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;
+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'}}:{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:537,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.modalContent,{width:_DatePicker3.MODAL_CONTENT_WIDTH},calendarDirection==='downwards'?null:_DatePicker.styles.modalContentUpwards],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:541,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:550,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:558,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:565,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:566,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:568,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:569,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:572,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:582,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:586,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:593,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:594,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:596,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:597,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:607,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:608,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:618,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:619,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:625,columnNumber:15}}))))));};var _default=exports.default=DatePicker;

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

@@ -71,9 +71,12 @@ export declare const styles: {
         backgroundColor: string;
         borderRadius: number;
         elevation: number;
-        width: "100%" | "90%";
         borderWidth: number;
         borderColor: string;
+        alignSelf: "center" | "flex-end";
+        width: 360 | "90%";
+        marginTop: number | undefined;
+        boxShadow: string | undefined;
     };
     header: {
         flexDirection: "row";

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

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.CALENDAR_HEIGHT=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var CALENDAR_HEIGHT=exports.CALENDAR_HEIGHT=260;var styles=exports.styles=_reactNative.StyleSheet.create({container:{flex:1},datePickerButton:{borderWidth:1,borderColor:'gray',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:12,borderRadius:4,backgroundColor:'white',flexDirection:'row',justifyContent:'space-between',alignItems:'center'},inputWrapper:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:16,backgroundColor:_colors.NEUTRAL_50},invalidDateInputWrapper:{borderColor:_colors.DESTRUCTIVE_100},disabledInput:{opacity:0.2},datePickerInput:{textAlign:'left',fontSize:18,outlineStyle:'none',height:20,flex:1},inputContainerWrapper:{backgroundColor:'transparent',padding:6,height:_reactNative.Platform.OS!==_utilsTypes.AppPlatform.web?63:undefined,borderRadius:8},monthAndYearContainer:{flexDirection:'row',alignItems:'center',gap:8},monthAndYearContent:{flexDirection:'row',marginHorizontal:12,alignItems:'center',gap:8},inputWrapperFocused:{backgroundColor:_colors.QUATERNARY_50},invalidDateWrapperFocused:{backgroundColor:_colors.DESTRUCTIVE_10},calendarIcon:{width:24},modalContainer:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0,0,0,0.5)'},modalContent:{backgroundColor:_colors.NEUTRAL_50,borderRadius:8,elevation:5,width:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'100%':'90%',borderWidth:1,borderColor:_colors.NEUTRAL_300},header:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:20,paddingTop:15,paddingBottom:10},monthText:{fontSize:16,color:_colors.PRIMARY_100},arrow:{fontSize:24,color:_colors.NEUTRAL_400},dayHeader:{flexDirection:'row',justifyContent:'space-between',paddingVertical:16},dayHeaderText:{width:'14.28%',textAlign:'center',color:'NEUTRAL_800'},notCurrentMonthStyle:{color:_colors.NEUTRAL_400},calendarContainer:{height:CALENDAR_HEIGHT,paddingHorizontal:10},dayItem:{width:'14.28%',justifyContent:'center',alignItems:'center',marginVertical:2},dayItemText:{padding:8,marginVertical:2,borderRadius:100,textAlign:'center',width:34,height:34},dayItemTextHover:{backgroundColor:_colors.NEUTRAL_200},todayItemTextHover:{backgroundColor:_colors.TERTIARY_70,borderWidth:1,borderColor:_colors.PRIMARY_100},selectedDayBackground:{backgroundColor:_colors.PRIMARY_100,borderRadius:100,padding:8,height:34,width:34,justifyContent:'center',alignItems:'center'},selectedDayText:{color:'white'},dayText:{color:'black'},currentDayBorder:{borderWidth:1,borderColor:_colors.PRIMARY_100,borderRadius:100,justifyContent:'center',alignItems:'center'},list:{height:CALENDAR_HEIGHT,paddingHorizontal:10,paddingVertical:5},item:{justifyContent:'center',padding:10,margin:2},yearText:{fontSize:16,width:40},selectedItem:{backgroundColor:_colors.TERTIARY_70,borderRadius:8},optionsContainer:{width:'100%',flexDirection:'row',justifyContent:'flex-end',marginTop:12,gap:4,padding:10},modalContentUpwards:{position:'absolute',bottom:70,boxShadow:'0px 0px 5px 0px rgba(0,0,0,0.2)'},disabledButtonStyle:{opacity:0.2}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.CALENDAR_HEIGHT=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.utils");var CALENDAR_HEIGHT=exports.CALENDAR_HEIGHT=260;var styles=exports.styles=_reactNative.StyleSheet.create({container:{flex:1},datePickerButton:{borderWidth:1,borderColor:'gray',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:12,borderRadius:4,backgroundColor:'white',flexDirection:'row',justifyContent:'space-between',alignItems:'center'},inputWrapper:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:16,backgroundColor:_colors.NEUTRAL_50},invalidDateInputWrapper:{borderColor:_colors.DESTRUCTIVE_100},disabledInput:{opacity:0.2},datePickerInput:{textAlign:'left',fontSize:18,outlineStyle:'none',height:20,flex:1},inputContainerWrapper:{backgroundColor:'transparent',padding:6,height:_reactNative.Platform.OS!==_utilsTypes.AppPlatform.web?63:undefined,borderRadius:8},monthAndYearContainer:{flexDirection:'row',alignItems:'center',gap:8},monthAndYearContent:{flexDirection:'row',marginHorizontal:12,alignItems:'center',gap:8},inputWrapperFocused:{backgroundColor:_colors.QUATERNARY_50},invalidDateWrapperFocused:{backgroundColor:_colors.DESTRUCTIVE_10},calendarIcon:{width:24},modalContainer:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0,0,0,0.5)'},modalContent:{backgroundColor:_colors.NEUTRAL_50,borderRadius:8,elevation:5,borderWidth:1,borderColor:_colors.NEUTRAL_300,alignSelf:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'flex-end':'center',width:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_DatePicker.MODAL_CONTENT_WIDTH:'90%',marginTop:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:undefined,boxShadow:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'0px 1px 1.41px rgba(0, 0, 0, 0.20)':undefined},header:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:20,paddingTop:15,paddingBottom:10},monthText:{fontSize:16,color:_colors.PRIMARY_100},arrow:{fontSize:24,color:_colors.NEUTRAL_400},dayHeader:{flexDirection:'row',justifyContent:'space-between',paddingVertical:16},dayHeaderText:{width:'14.28%',textAlign:'center',color:'NEUTRAL_800'},notCurrentMonthStyle:{color:_colors.NEUTRAL_400},calendarContainer:{height:CALENDAR_HEIGHT,paddingHorizontal:10},dayItem:{width:'14.28%',justifyContent:'center',alignItems:'center',marginVertical:2},dayItemText:{padding:8,marginVertical:2,borderRadius:100,textAlign:'center',width:34,height:34},dayItemTextHover:{backgroundColor:_colors.NEUTRAL_200},todayItemTextHover:{backgroundColor:_colors.TERTIARY_70,borderWidth:1,borderColor:_colors.PRIMARY_100},selectedDayBackground:{backgroundColor:_colors.PRIMARY_100,borderRadius:100,padding:8,height:34,width:34,justifyContent:'center',alignItems:'center'},selectedDayText:{color:'white'},dayText:{color:'black'},currentDayBorder:{borderWidth:1,borderColor:_colors.PRIMARY_100,borderRadius:100,justifyContent:'center',alignItems:'center'},list:{height:CALENDAR_HEIGHT,paddingHorizontal:10,paddingVertical:5},item:{justifyContent:'center',padding:10,margin:2},yearText:{fontSize:16,width:40},selectedItem:{backgroundColor:_colors.TERTIARY_70,borderRadius:8},optionsContainer:{width:'100%',flexDirection:'row',justifyContent:'flex-end',marginTop:12,gap:4,padding:10},modalContentUpwards:{position:'absolute',bottom:70,boxShadow:'0px 0px 5px 0px rgba(0,0,0,0.2)'},disabledButtonStyle:{opacity:0.2}});

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

@@ -1,3 +1,4 @@
+export declare const MODAL_CONTENT_WIDTH = 360;
 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;

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=void 0;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.getPlaceholderDateFormat=exports.getDaysInMonth=exports.generateYearList=exports.formatterDate=exports.buildMonth=exports.MODAL_CONTENT_WIDTH=void 0;var MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_WIDTH=360;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;};

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

@@ -12,7 +12,7 @@ import { NEUTRAL_300, NEUTRAL_400, NEUTRAL_600, PRIMARY_100 } from "../../styles
 import { AppPlatform } from "../../helpers/utilsTypes";
 import { CALENDAR_HEIGHT, styles } from "./DatePicker.styles";
 import { translations } from "./DatePicker.translations";
-import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, validateDate } from "./DatePicker.utils";
+import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, validateDate, MODAL_CONTENT_WIDTH } from "./DatePicker.utils";
 
 // Button from the Etendo UI library
 import { Button } from "../button";
@@ -82,11 +82,10 @@ var DatePicker = function DatePicker(_ref) {
     currentSelectedDate = _useState26[0],
     setTempSelectedDate = _useState26[1];
 
-  // Reference for text input
+  // References for the date picker
   var inputRef = useRef(null);
-
-  // Ref for month list
   var monthListRef = useRef(null);
+
   // Toggle month selection
   var showMonthSelection = function showMonthSelection() {
     if (!isMonthSelection) setDisabledYearSelection(true);else setDisabledYearSelection(false);
@@ -477,10 +476,7 @@ var DatePicker = function DatePicker(_ref) {
     }]
   })))), /*#__PURE__*/React.createElement(PlatformComponent, Platform.OS === AppPlatform.web ? {
     style: {
-      display: isPickerShow ? 'flex' : 'none',
-      boxShadow: '0px 1px 1.41px rgba(0, 0, 0, 0.20)',
-      borderRadius: 8,
-      marginTop: 8
+      display: isPickerShow ? 'flex' : 'none'
     }
   } : {
     transparent: true,
@@ -491,7 +487,9 @@ var DatePicker = function DatePicker(_ref) {
     activeOpacity: 1,
     onPress: showPicker
   }, /*#__PURE__*/React.createElement(View, {
-    style: calendarDirection === 'downwards' ? [styles.modalContent] : [styles.modalContentUpwards, styles.modalContent],
+    style: [styles.modalContent, {
+      width: MODAL_CONTENT_WIDTH
+    }, calendarDirection === 'downwards' ? null : styles.modalContentUpwards],
     onStartShouldSetResponder: function onStartShouldSetResponder() {
       return true;
     }

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

@@ -71,9 +71,12 @@ export declare const styles: {
         backgroundColor: string;
         borderRadius: number;
         elevation: number;
-        width: "100%" | "90%";
         borderWidth: number;
         borderColor: string;
+        alignSelf: "center" | "flex-end";
+        width: 360 | "90%";
+        marginTop: number | undefined;
+        boxShadow: string | undefined;
     };
     header: {
         flexDirection: "row";

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

@@ -1,6 +1,7 @@
 import { Platform, StyleSheet } from "react-native-web";
 import { DESTRUCTIVE_10, DESTRUCTIVE_100, NEUTRAL_200, NEUTRAL_300, NEUTRAL_400, NEUTRAL_50, PRIMARY_100, QUATERNARY_50, TERTIARY_70 } from "../../styles/colors";
 import { AppPlatform } from "../../helpers/utilsTypes";
+import { MODAL_CONTENT_WIDTH } from "./DatePicker.utils";
 
 // Height of the calendar
 export var CALENDAR_HEIGHT = 260;
@@ -78,9 +79,12 @@ export var styles = StyleSheet.create({
     backgroundColor: NEUTRAL_50,
     borderRadius: 8,
     elevation: 5,
-    width: Platform.OS === AppPlatform.web ? '100%' : '90%',
     borderWidth: 1,
-    borderColor: NEUTRAL_300
+    borderColor: NEUTRAL_300,
+    alignSelf: Platform.OS === AppPlatform.web ? 'flex-end' : 'center',
+    width: Platform.OS === AppPlatform.web ? MODAL_CONTENT_WIDTH : '90%',
+    marginTop: Platform.OS === AppPlatform.web ? 8 : undefined,
+    boxShadow: Platform.OS === AppPlatform.web ? '0px 1px 1.41px rgba(0, 0, 0, 0.20)' : undefined
   },
   header: {
     flexDirection: 'row',

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

@@ -1,3 +1,4 @@
+export declare const MODAL_CONTENT_WIDTH = 360;
 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;

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

@@ -1,4 +1,7 @@
 /* Utils for DatePicker component */
+// Constants
+export var MODAL_CONTENT_WIDTH = 360;
+
 // Format date based on language
 export var formatterDate = function formatterDate(date, format) {
   if (date !== undefined) {

package/package.json

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