etendo-ui-library 1.3.90 → 1.3.92

package/dist-native/components/inputBase/file-search-input/FileSearchInput.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 _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _FileSearchInput=require("./FileSearchInput.styles");var _colors=require("../../../styles/colors");var _CheckCircleIcon=require("../../../assets/images/icons/CheckCircleIcon");var _Clipboard=require("../../../assets/images/icons/Clipboard");var _DeleteIcon=require("../../../assets/images/icons/DeleteIcon");var _FileIcon=require("../../../assets/images/icons/FileIcon");var _button=require("../../button");var _alert=require("../../alert");var _ErrorIcon=require("../../../assets/images/icons/ErrorIcon");var _secondaryComponents=require("../../secondaryComponents");var _functions_utils=require("../../../helpers/functions_utils");var _excluded=["value","placeholder","onChangeText","onSubmit","setFile","uploadConfig","maxFileSize"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/file-search-input/FileSearchInput.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 DocumentPicker=null;if(!(0,_functions_utils.isWebPlatform)()){try{import('react-native-document-picker').then(function(module){DocumentPicker=module.default;}).catch(function(error){console.error('Cannot load DocumentPicker',error);});}catch(error){console.error('Error importing DocumentPicker',error);}}var FileSearchInput=function FileSearchInput(_ref){var value=_ref.value,placeholder=_ref.placeholder,onChangeText=_ref.onChangeText,onSubmit=_ref.onSubmit,setFile=_ref.setFile,uploadConfig=_ref.uploadConfig,_ref$maxFileSize=_ref.maxFileSize,maxFileSize=_ref$maxFileSize===void 0?512:_ref$maxFileSize,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),progress=_useState2[0],setProgress=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),file=_useState4[0],setLocalFile=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),loadingFile=_useState6[0],setLoadingFile=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isFileValid=_useState8[0],setIsFileValid=_useState8[1];var _useState9=(0,_react.useState)('none'),_useState10=(0,_slicedToArray2.default)(_useState9,2),fileStatus=_useState10[0],setFileStatus=_useState10[1];var dropAreaRef=(0,_react.useRef)(null);var fileInputRef=(0,_react.useRef)(null);var resetProgress=function resetProgress(){setLocalFile(null);setIsFileValid(false);setLoadingFile(false);setProgress(0);setFileStatus("none");};var handleDrop=function handleDrop(event){event.preventDefault();var files=event.dataTransfer.files;if(files.length>0){var _file=files[0];startLoading(_file);if(!!setFile)setFile(_file);}};var completeProgress=function completeProgress(){setProgress(100);animateProgress(100);setLoadingFile(false);setIsFileValid(true);setTimeout(function(){setFileStatus("loaded");setProgress(0);},100);};var animateProgress=function animateProgress(toValue){setProgress(toValue);};var startLoading=function startLoading(pickedFile){setLoadingFile(true);if(!!setFile)pickedFile;setLocalFile(pickedFile);setProgress(25);animateProgress(25);};var validateAndLoadFile=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(pickedFile){resetProgress();if(maxFileSize&&pickedFile.size>maxFileSize*1024*1024){(0,_alert.show)("File size should not exceed "+maxFileSize+" MB",'error');setIsFileValid(false);setLoadingFile(false);setLocalFile(null);return false;}setIsFileValid(true);setLoadingFile(true);setLocalFile(pickedFile);startLoading(pickedFile);try{if(!!uploadFile)yield uploadFile(pickedFile);}catch(error){console.error('Error uploading file:',error);(0,_alert.show)('Error uploading file','error');}return true;});return function validateAndLoadFile(_x){return _ref2.apply(this,arguments);};}();var handleFileButtonClick=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){if((0,_functions_utils.isWebPlatform)()){fileInputRef.current.click();}else{if(!DocumentPicker){console.error('DocumentPicker is not available on this platform.');return;}try{var response=yield DocumentPicker.pick({type:[DocumentPicker.types.allFiles]});var pickedFile={name:response[0].name,size:response[0].size,type:response[0].type,uri:response[0].uri};validateAndLoadFile(pickedFile);}catch(err){if(!DocumentPicker.isCancel(err)){console.error(err);}}}});return function handleFileButtonClick(){return _ref3.apply(this,arguments);};}();var handleSendMessage=function handleSendMessage(){if(!loadingFile&&value.trim()!==''){onSubmit==null?void 0:onSubmit(value,isFileValid?file:null);resetProgress();if(!!setFile)setFile(null);setLocalFile(null);setIsFileValid(false);}else{var errorMessage='Please wait for the file to finish loading.';if(value.trim()===''){errorMessage='Message cannot be empty.';}else if(file&&!isFileValid){errorMessage="File size should not exceed "+maxFileSize+" MB.";}(0,_alert.show)(errorMessage,'error');}};var rightButtons=[];if(!!uploadConfig){rightButtons.push(_react.default.createElement(_button.Button,{width:48,typeStyle:"white",onPress:handleFileButtonClick,iconLeft:_react.default.createElement(_Clipboard.ClipboardIcon,{style:{width:24,height:24},fill:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:11}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:7}}));}var handleFileSelect=function(){var _ref4=(0,_asyncToGenerator2.default)(function*(event){var file=event.target.files[0];if(file){if(yield validateAndLoadFile(file)){startLoading(file);if(!!setFile)setFile(file);setLocalFile(file);}}event.target.value=null;});return function handleFileSelect(_x2){return _ref4.apply(this,arguments);};}();var uploadFile=function(){var _ref5=(0,_asyncToGenerator2.default)(function*(pickedFile){if(!!uploadConfig){var formData=new FormData();formData.append("file",pickedFile);var response;try{response=yield fetch(uploadConfig.url,{method:uploadConfig.method,body:formData,headers:uploadConfig.headers});if(response.ok){setFileStatus('loaded');}else{throw new Error('Failed to upload file');}}catch(error){console.error('Error uploading file:',error);setFileStatus('error');}}});return function uploadFile(_x3){return _ref5.apply(this,arguments);};}();var handleDeleteFile=function handleDeleteFile(){resetProgress();setProgress(0);animateProgress(0);setLocalFile(null);setLoadingFile(false);if(!!setFile)setFile(null);setFileStatus("none");if(fileInputRef.current){fileInputRef.current.value=null;}};(0,_react.useEffect)(function(){if(fileStatus==="loaded"){completeProgress();}},[fileStatus]);return _react.default.createElement(_reactNative.SafeAreaView,{style:_FileSearchInput.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:5}},_react.default.createElement(_alert.Alert,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:7}}),file&&isFileValid&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLoadedLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:11}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:{height:(0,_functions_utils.isWebPlatform)()?undefined:28,width:"80%"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:13}},_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,numberOfLines:1,ellipsizeMode:"tail",__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,columnNumber:15}},file.name),progress>0&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.progressBarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:17}},_react.default.createElement(_secondaryComponents.SkeletonItem,{width:progress+"%",height:8,color:_colors.NEUTRAL_1000,borderRadius:16,__self:_this,__source:{fileName:_jsxFileName,lineNumber:278,columnNumber:19}})))),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameRightContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:11}},fileStatus==='loaded'&&_react.default.createElement(_CheckCircleIcon.CheckCircleIcon,{style:_FileSearchInput.styles.checkCircleIcon,fill:_colors.SUCCESS_600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:285,columnNumber:15}}),fileStatus==='error'&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:291,columnNumber:15}},_react.default.createElement(_ErrorIcon.ErrorIcon,{style:_FileSearchInput.styles.errorIcon,fill:_colors.DANGER_700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:292,columnNumber:17}})),fileStatus==='none'&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:299,columnNumber:15}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:300,columnNumber:17}})))),_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:307,columnNumber:7}},(0,_functions_utils.isWebPlatform)()?_react.default.createElement("div",{ref:dropAreaRef,onDrop:handleDrop,__self:_this,__source:{fileName:_jsxFileName,lineNumber:309,columnNumber:11}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,placeholder:placeholder,__self:_this,__source:{fileName:_jsxFileName,lineNumber:310,columnNumber:13}})),_react.default.createElement("input",{type:"file",ref:fileInputRef,style:{display:'none'},onChange:handleFileSelect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:319,columnNumber:13}})):_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,placeholder:placeholder,__self:_this,__source:{fileName:_jsxFileName,lineNumber:327,columnNumber:11}}))));};var _default=exports.default=FileSearchInput;
+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 _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _FileSearchInput=require("./FileSearchInput.styles");var _colors=require("../../../styles/colors");var _CheckCircleIcon=require("../../../assets/images/icons/CheckCircleIcon");var _Clipboard=require("../../../assets/images/icons/Clipboard");var _DeleteIcon=require("../../../assets/images/icons/DeleteIcon");var _FileIcon=require("../../../assets/images/icons/FileIcon");var _button=require("../../button");var _secondaryComponents=require("../../secondaryComponents");var _functions_utils=require("../../../helpers/functions_utils");var _excluded=["value","placeholder","onChangeText","onSubmit","setFile","uploadConfig","maxFileSize"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/file-search-input/FileSearchInput.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 DocumentPicker=null;if(!(0,_functions_utils.isWebPlatform)()){try{import('react-native-document-picker').then(function(module){DocumentPicker=module.default;}).catch(function(error){console.error('Cannot load DocumentPicker',error);});}catch(error){console.error('Error importing DocumentPicker',error);}}var FileSearchInput=function FileSearchInput(_ref){var value=_ref.value,placeholder=_ref.placeholder,onChangeText=_ref.onChangeText,onSubmit=_ref.onSubmit,setFile=_ref.setFile,uploadConfig=_ref.uploadConfig,_ref$maxFileSize=_ref.maxFileSize,maxFileSize=_ref$maxFileSize===void 0?512:_ref$maxFileSize,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),progress=_useState2[0],setProgress=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),file=_useState4[0],setLocalFile=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),loadingFile=_useState6[0],setLoadingFile=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isFileValid=_useState8[0],setIsFileValid=_useState8[1];var _useState9=(0,_react.useState)('none'),_useState10=(0,_slicedToArray2.default)(_useState9,2),fileStatus=_useState10[0],setFileStatus=_useState10[1];var dropAreaRef=(0,_react.useRef)(null);var fileInputRef=(0,_react.useRef)(null);var resetProgress=function resetProgress(){setLocalFile(null);setIsFileValid(false);setLoadingFile(false);setProgress(0);setFileStatus("none");};var handleDragOver=function handleDragOver(event){event.preventDefault();};var handleDrop=function handleDrop(event){event.preventDefault();var files=event.dataTransfer.files;if(files.length>0){var _file=files[0];validateAndLoadFile(_file);}};var completeProgress=function completeProgress(){setProgress(100);animateProgress(100);setLoadingFile(false);setIsFileValid(true);setTimeout(function(){setFileStatus("loaded");setProgress(0);},100);};var animateProgress=function animateProgress(toValue){setProgress(toValue);};var startLoading=function startLoading(pickedFile){setLoadingFile(true);if(!!setFile)pickedFile;setLocalFile(pickedFile);setProgress(25);animateProgress(25);};var validateAndLoadFile=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(pickedFile){resetProgress();if(maxFileSize&&pickedFile.size>maxFileSize*1024*1024){setIsFileValid(false);setLoadingFile(false);setLocalFile(null);return false;}setIsFileValid(true);setLoadingFile(true);setLocalFile(pickedFile);startLoading(pickedFile);try{if(!!uploadFile)yield uploadFile(pickedFile);}catch(error){console.error('Error uploading file:',error);}return true;});return function validateAndLoadFile(_x){return _ref2.apply(this,arguments);};}();var handleFileButtonClick=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){if((0,_functions_utils.isWebPlatform)()){fileInputRef.current.click();}else{if(!DocumentPicker){console.error('DocumentPicker is not available on this platform.');return;}try{var response=yield DocumentPicker.pick({type:[DocumentPicker.types.allFiles]});var pickedFile={name:response[0].name,size:response[0].size,type:response[0].type,uri:response[0].uri};validateAndLoadFile(pickedFile);}catch(err){if(!DocumentPicker.isCancel(err)){console.error(err);}}}});return function handleFileButtonClick(){return _ref3.apply(this,arguments);};}();var handleSendMessage=function handleSendMessage(){if(!loadingFile&&value.trim()!==''){onSubmit==null?void 0:onSubmit(value,isFileValid?file:null);resetProgress();if(!!setFile)setFile(null);setLocalFile(null);setIsFileValid(false);}else{var errorMessage='Please wait for the file to finish loading.';if(value.trim()===''){errorMessage='Message cannot be empty.';}else if(file&&!isFileValid){errorMessage="File size should not exceed "+maxFileSize+" MB.";}}};var rightButtons=[];if(!!uploadConfig){rightButtons.push(_react.default.createElement(_button.Button,{width:48,typeStyle:"white",onPress:handleFileButtonClick,iconLeft:_react.default.createElement(_Clipboard.ClipboardIcon,{style:{width:24,height:24},fill:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:11}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:7}}));}var handleFileSelect=function(){var _ref4=(0,_asyncToGenerator2.default)(function*(event){var file=event.target.files[0];if(file){if(yield validateAndLoadFile(file)){startLoading(file);if(!!setFile)setFile(file);setLocalFile(file);}}event.target.value=null;});return function handleFileSelect(_x2){return _ref4.apply(this,arguments);};}();var uploadFile=function(){var _ref5=(0,_asyncToGenerator2.default)(function*(pickedFile){if(!!uploadConfig){var formData=new FormData();formData.append("file",pickedFile);var response;try{response=yield fetch(uploadConfig.url,{method:uploadConfig.method,body:formData,headers:uploadConfig.headers});if(response.ok){setFileStatus('loaded');}else{throw new Error('Failed to upload file');}}catch(error){console.error('Error uploading file:',error);setFileStatus('error');}}});return function uploadFile(_x3){return _ref5.apply(this,arguments);};}();var handleDeleteFile=function handleDeleteFile(){resetProgress();setProgress(0);animateProgress(0);setLocalFile(null);setLoadingFile(false);if(!!setFile)setFile(null);setFileStatus("none");if(fileInputRef.current){fileInputRef.current.value=null;}};(0,_react.useEffect)(function(){if(fileStatus==="loaded"){completeProgress();}},[fileStatus]);return _react.default.createElement(_reactNative.SafeAreaView,{style:_FileSearchInput.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:5}},file&&isFileValid&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLoadedLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:11}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:{height:(0,_functions_utils.isWebPlatform)()?undefined:28,width:"80%"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:13}},_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,numberOfLines:1,ellipsizeMode:"tail",__self:_this,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:15}},file.name),progress>0&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.progressBarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:275,columnNumber:17}},_react.default.createElement(_secondaryComponents.SkeletonItem,{width:progress+"%",height:8,color:_colors.NEUTRAL_1000,borderRadius:16,__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:19}})))),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameRightContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:11}},fileStatus==='loaded'&&_react.default.createElement(_CheckCircleIcon.CheckCircleIcon,{style:_FileSearchInput.styles.checkCircleIcon,fill:_colors.SUCCESS_600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:15}}),fileStatus==='none'||fileStatus==='error'&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:15}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:290,columnNumber:17}})))),_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:297,columnNumber:7}},(0,_functions_utils.isWebPlatform)()?_react.default.createElement("div",{ref:dropAreaRef,onDrop:handleDrop,onDragOver:handleDragOver,onDragEnter:handleDragOver,onDragLeave:handleDragOver,__self:_this,__source:{fileName:_jsxFileName,lineNumber:299,columnNumber:11}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,placeholder:placeholder,__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:13}})),_react.default.createElement("input",{type:"file",ref:fileInputRef,style:{display:'none'},onChange:handleFileSelect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:315,columnNumber:13}})):_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,placeholder:placeholder,__self:_this,__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:11}}))));};var _default=exports.default=FileSearchInput;

package/dist-native/components/inputBase/file-search-input/FileSearchInput.styles.d.ts

@@ -1,7 +1,6 @@
 export declare const styles: {
     container: {
         width: "100%";
-        height: "10%";
     };
     inputContainer: {
         flex: number;
@@ -14,12 +13,10 @@ export declare const styles: {
         borderWidth: number;
         flexDirection: "row";
         gap: number;
-        height: "100%";
-        flex: number;
         justifyContent: "space-between";
         marginBottom: number;
         paddingHorizontal: number;
-        paddingVertical: number;
+        height: number;
     };
     fileNameLeftContainer: {
         flexDirection: "row";
@@ -69,7 +66,6 @@ export declare const styles: {
         overflow: "hidden";
         whiteSpace: string;
         width: "100%";
-        flex: number;
         marginLeft: number | undefined;
     };
     fileIcon: {
@@ -84,7 +80,6 @@ export declare const styles: {
     progressBarFill: {
         backgroundColor: string;
         borderRadius: number;
-        height: "100%";
     };
     progressBarContainer: {
         backgroundColor: string;
@@ -93,7 +88,6 @@ export declare const styles: {
         width: "100%";
     };
     progressBar: {
-        height: "100%";
         backgroundColor: string;
         borderRadius: number;
     };

package/dist-native/components/inputBase/file-search-input/FileSearchInput.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:"100%",height:"10%"},inputContainer:{flex:1},fileNameContainer:{alignItems:'center',backgroundColor:_colors.NEUTRAL_50,borderColor:_colors.NEUTRAL_400,borderRadius:8,borderWidth:1,flexDirection:"row",gap:4,height:"100%",flex:1,justifyContent:"space-between",marginBottom:4,paddingHorizontal:8,paddingVertical:_reactNative.Platform.OS==="web"?16:32},fileNameLeftContainer:{flexDirection:"row",gap:4},fileNameRightContainer:{flexDirection:"row"},fileNameLeftContent:{height:24,width:"85%"},fileNameLoadedLeftContainer:{alignItems:"center",flexDirection:"row",gap:4,width:_reactNative.Platform.OS==="web"?"80%":"85%"},checkCircleIcon:{height:24,width:24,marginRight:8},errorIcon:{height:20,width:20},deleteIcon:{height:20,width:20},loadingContainer:{alignItems:"center",justifyContent:"center",paddingHorizontal:8,paddingVertical:16,width:"100%"},loadingText:{fontSize:14},fileNameText:{color:_colors.NEUTRAL_1000,fontWeight:"500",fontSize:_reactNative.Platform.OS==="web"?14:16,paddingBottom:_reactNative.Platform.OS==="web"?4:undefined,overflow:'hidden',whiteSpace:'nowrap',width:"100%",flex:1,marginLeft:_reactNative.Platform.OS==="web"?undefined:8},fileIcon:{height:36,width:36},fileContainer:{height:_reactNative.Platform.OS==="web"?undefined:28,width:"100%",backgroundColor:"red"},progressBarFill:{backgroundColor:_colors.NEUTRAL_100,borderRadius:10,height:'100%'},progressBarContainer:{backgroundColor:_colors.NEUTRAL_300,borderRadius:16,marginLeft:_reactNative.Platform.OS==="web"?undefined:8,width:"100%"},progressBar:{height:'100%',backgroundColor:_colors.NEUTRAL_1000,borderRadius:2}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:"100%"},inputContainer:{flex:1},fileNameContainer:{alignItems:'center',backgroundColor:_colors.NEUTRAL_50,borderColor:_colors.NEUTRAL_400,borderRadius:8,borderWidth:1,flexDirection:"row",gap:4,justifyContent:"space-between",marginBottom:4,paddingHorizontal:8,height:64},fileNameLeftContainer:{flexDirection:"row",gap:4},fileNameRightContainer:{flexDirection:"row"},fileNameLeftContent:{height:24,width:"85%"},fileNameLoadedLeftContainer:{alignItems:"center",flexDirection:"row",gap:4,width:_reactNative.Platform.OS==="web"?"80%":"85%"},checkCircleIcon:{height:24,width:24,marginRight:8},errorIcon:{height:20,width:20},deleteIcon:{height:20,width:20},loadingContainer:{alignItems:"center",justifyContent:"center",paddingHorizontal:8,paddingVertical:16,width:"100%"},loadingText:{fontSize:14},fileNameText:{color:_colors.NEUTRAL_1000,fontWeight:"500",fontSize:_reactNative.Platform.OS==="web"?14:16,paddingBottom:_reactNative.Platform.OS==="web"?4:undefined,overflow:'hidden',whiteSpace:'nowrap',width:"100%",marginLeft:_reactNative.Platform.OS==="web"?undefined:8},fileIcon:{height:36,width:36},fileContainer:{height:_reactNative.Platform.OS==="web"?undefined:28,width:"100%",backgroundColor:"red"},progressBarFill:{backgroundColor:_colors.NEUTRAL_100,borderRadius:10},progressBarContainer:{backgroundColor:_colors.NEUTRAL_300,borderRadius:16,marginLeft:_reactNative.Platform.OS==="web"?undefined:8,width:"100%"},progressBar:{backgroundColor:_colors.NEUTRAL_1000,borderRadius:2}});

package/dist-native/components/inputBase/file-search-input/FileSearchInput.types.d.ts

@@ -4,7 +4,7 @@ interface UploadConfig {
     file: any;
     url: string;
     method: string;
-    headers: HeadersInit_;
+    headers?: HeadersInit_;
 }
 export interface FileSearchInputProps extends IInputBase {
     value: string;

package/dist-web/components/inputBase/file-search-input/FileSearchInput.js

@@ -18,7 +18,7 @@ import InputBase from "../InputBase";
 
 // Import styles
 import { styles } from "./FileSearchInput.styles";
-import { DANGER_700, NEUTRAL_1000, PRIMARY_100, SUCCESS_600 } from "../../../styles/colors";
+import { NEUTRAL_1000, PRIMARY_100, SUCCESS_600 } from "../../../styles/colors";
 
 // Import icons
 import { CheckCircleIcon } from "../../../assets/images/icons/CheckCircleIcon";
@@ -29,8 +29,6 @@ import { FileIcon } from "../../../assets/images/icons/FileIcon";
 // Import types
 
 import { Button } from "../../button";
-import { Alert, show } from "../../alert";
-import { ErrorIcon } from "../../../assets/images/icons/ErrorIcon";
 import { SkeletonItem } from "../../secondaryComponents";
 import { isWebPlatform } from "../../../helpers/functions_utils";
 
@@ -92,14 +90,18 @@ var FileSearchInput = function FileSearchInput(_ref) {
     setFileStatus("none");
   };
 
+  // Prevent default behavior
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+  };
+
   // Handles file drop events, typically from drag-and-drop actions
   var handleDrop = function handleDrop(event) {
     event.preventDefault();
     var files = event.dataTransfer.files;
     if (files.length > 0) {
       var _file = files[0];
-      startLoading(_file);
-      if (!!setFile) setFile(_file);
+      validateAndLoadFile(_file);
     }
   };
 
@@ -137,41 +139,39 @@ var FileSearchInput = function FileSearchInput(_ref) {
           case 0:
             resetProgress();
             if (!(maxFileSize && pickedFile.size > maxFileSize * 1024 * 1024)) {
-              _context.next = 7;
+              _context.next = 6;
               break;
             }
-            show("File size should not exceed ".concat(maxFileSize, " MB"), 'error');
             setIsFileValid(false);
             setLoadingFile(false);
             setLocalFile(null);
             return _context.abrupt("return", false);
-          case 7:
+          case 6:
             setIsFileValid(true);
             setLoadingFile(true);
             setLocalFile(pickedFile);
             startLoading(pickedFile);
-            _context.prev = 11;
+            _context.prev = 10;
             if (!uploadFile) {
-              _context.next = 15;
+              _context.next = 14;
               break;
             }
-            _context.next = 15;
+            _context.next = 14;
             return uploadFile(pickedFile);
-          case 15:
-            _context.next = 21;
+          case 14:
+            _context.next = 19;
             break;
-          case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](11);
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](10);
             console.error('Error uploading file:', _context.t0);
-            show('Error uploading file', 'error');
-          case 21:
+          case 19:
             return _context.abrupt("return", true);
-          case 22:
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[11, 17]]);
+      }, _callee, null, [[10, 16]]);
     }));
     return function validateAndLoadFile(_x) {
       return _ref2.apply(this, arguments);
@@ -248,7 +248,6 @@ var FileSearchInput = function FileSearchInput(_ref) {
       } else if (file && !isFileValid) {
         errorMessage = "File size should not exceed ".concat(maxFileSize, " MB.");
       }
-      show(errorMessage, 'error');
     }
   };
 
@@ -376,7 +375,7 @@ var FileSearchInput = function FileSearchInput(_ref) {
   }, [fileStatus]);
   return /*#__PURE__*/React.createElement(SafeAreaView, {
     style: styles.container
-  }, /*#__PURE__*/React.createElement(Alert, null), file && isFileValid && /*#__PURE__*/React.createElement(View, {
+  }, file && isFileValid && /*#__PURE__*/React.createElement(View, {
     style: styles.fileNameContainer
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.fileNameLoadedLeftContainer
@@ -403,18 +402,16 @@ var FileSearchInput = function FileSearchInput(_ref) {
   }, fileStatus === 'loaded' && /*#__PURE__*/React.createElement(CheckCircleIcon, {
     style: styles.checkCircleIcon,
     fill: SUCCESS_600
-  }), fileStatus === 'error' && /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: handleDeleteFile
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
-    style: styles.errorIcon,
-    fill: DANGER_700
-  })), fileStatus === 'none' && /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }), fileStatus === 'none' || fileStatus === 'error' && /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: handleDeleteFile
   }, /*#__PURE__*/React.createElement(DeleteIcon, {
     style: styles.deleteIcon
   })))), /*#__PURE__*/React.createElement(View, null, isWebPlatform() ? /*#__PURE__*/React.createElement("div", {
     ref: dropAreaRef,
-    onDrop: handleDrop
+    onDrop: handleDrop,
+    onDragOver: handleDragOver,
+    onDragEnter: handleDragOver,
+    onDragLeave: handleDragOver
   }, /*#__PURE__*/React.createElement(InputBase, _extends({}, inputBaseProps, {
     value: value,
     onChangeText: onChangeText,

package/dist-web/components/inputBase/file-search-input/FileSearchInput.styles.d.ts

@@ -1,7 +1,6 @@
 export declare const styles: {
     container: {
         width: "100%";
-        height: "10%";
     };
     inputContainer: {
         flex: number;
@@ -14,12 +13,10 @@ export declare const styles: {
         borderWidth: number;
         flexDirection: "row";
         gap: number;
-        height: "100%";
-        flex: number;
         justifyContent: "space-between";
         marginBottom: number;
         paddingHorizontal: number;
-        paddingVertical: number;
+        height: number;
     };
     fileNameLeftContainer: {
         flexDirection: "row";
@@ -69,7 +66,6 @@ export declare const styles: {
         overflow: "hidden";
         whiteSpace: string;
         width: "100%";
-        flex: number;
         marginLeft: number | undefined;
     };
     fileIcon: {
@@ -84,7 +80,6 @@ export declare const styles: {
     progressBarFill: {
         backgroundColor: string;
         borderRadius: number;
-        height: "100%";
     };
     progressBarContainer: {
         backgroundColor: string;
@@ -93,7 +88,6 @@ export declare const styles: {
         width: "100%";
     };
     progressBar: {
-        height: "100%";
         backgroundColor: string;
         borderRadius: number;
     };

package/dist-web/components/inputBase/file-search-input/FileSearchInput.styles.js

@@ -2,8 +2,7 @@ import { StyleSheet, Platform } from "react-native-web";
 import { NEUTRAL_100, NEUTRAL_1000, NEUTRAL_300, NEUTRAL_400, NEUTRAL_50 } from "../../../styles/colors";
 export var styles = StyleSheet.create({
   container: {
-    width: "100%",
-    height: "10%"
+    width: "100%"
   },
   inputContainer: {
     flex: 1
@@ -16,12 +15,10 @@ export var styles = StyleSheet.create({
     borderWidth: 1,
     flexDirection: "row",
     gap: 4,
-    height: "100%",
-    flex: 1,
     justifyContent: "space-between",
     marginBottom: 4,
     paddingHorizontal: 8,
-    paddingVertical: Platform.OS === "web" ? 16 : 32
+    height: 64
   },
   fileNameLeftContainer: {
     flexDirection: "row",
@@ -71,7 +68,6 @@ export var styles = StyleSheet.create({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     width: "100%",
-    flex: 1,
     marginLeft: Platform.OS === "web" ? undefined : 8
   },
   fileIcon: {
@@ -85,8 +81,7 @@ export var styles = StyleSheet.create({
   },
   progressBarFill: {
     backgroundColor: NEUTRAL_100,
-    borderRadius: 10,
-    height: '100%'
+    borderRadius: 10
   },
   progressBarContainer: {
     backgroundColor: NEUTRAL_300,
@@ -95,7 +90,6 @@ export var styles = StyleSheet.create({
     width: "100%"
   },
   progressBar: {
-    height: '100%',
     backgroundColor: NEUTRAL_1000,
     borderRadius: 2
   }

package/dist-web/components/inputBase/file-search-input/FileSearchInput.types.d.ts

@@ -4,7 +4,7 @@ interface UploadConfig {
     file: any;
     url: string;
     method: string;
-    headers: HeadersInit_;
+    headers?: HeadersInit_;
 }
 export interface FileSearchInputProps extends IInputBase {
     value: string;

package/package.json

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