etendo-ui-library 1.3.71 → 1.3.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-native/components/inputBase/InputBase.d.ts +1 -1
- package/dist-native/components/inputBase/InputBase.js +1 -1
- package/dist-native/components/inputBase/InputBase.styles.d.ts +0 -1
- package/dist-native/components/inputBase/InputBase.styles.js +1 -1
- package/dist-native/components/inputBase/InputBase.types.d.ts +6 -5
- package/dist-native/components/inputBase/file-search-input/FileSearchInput.d.ts +1 -1
- package/dist-native/components/inputBase/file-search-input/FileSearchInput.js +1 -1
- package/dist-native/components/inputBase/file-search-input/FileSearchInput.types.d.ts +18 -16
- package/dist-native/components/inputBase/file-search-input/FileStatusDisplay.d.ts +4 -0
- package/dist-native/components/inputBase/file-search-input/FileStatusDisplay.js +1 -0
- package/dist-web/components/inputBase/InputBase.d.ts +1 -1
- package/dist-web/components/inputBase/InputBase.js +13 -5
- package/dist-web/components/inputBase/InputBase.styles.d.ts +0 -1
- package/dist-web/components/inputBase/InputBase.styles.js +1 -2
- package/dist-web/components/inputBase/InputBase.types.d.ts +6 -5
- package/dist-web/components/inputBase/file-search-input/FileSearchInput.d.ts +1 -1
- package/dist-web/components/inputBase/file-search-input/FileSearchInput.js +108 -79
- package/dist-web/components/inputBase/file-search-input/FileSearchInput.types.d.ts +18 -16
- package/dist-web/components/inputBase/file-search-input/FileStatusDisplay.d.ts +4 -0
- package/dist-web/components/inputBase/file-search-input/FileStatusDisplay.js +35 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IInputBase } from './InputBase.types';
|
|
3
|
-
declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, }: IInputBase) => React.JSX.Element;
|
|
3
|
+
declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, isLoading, }: IInputBase) => React.JSX.Element;
|
|
4
4
|
export default InputBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _containers=require("../containers");var _button=require("../button");var _CornerDownRightIcon=require("../../assets/images/icons/CornerDownRightIcon");var _InputBase=require("./InputBase.styles");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.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 InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onSubmit=_ref.onSubmit;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),buttons=_useState4[0],setButtons=_useState4[1];var onFocusChange=function onFocusChange(){setIsFocused(true);};var onBlurChange=function onBlurChange(){setIsFocused(false);};var borderWidth=isFocused?3:1;var paddingVertical=13-(borderWidth-1);var paddingHorizontal=12-(borderWidth-1);var borderStyle=function borderStyle(){if(!value&&!isFocused){return _InputBase.styles.containerPlaceholder;}if(isDisabled){return _InputBase.styles.containerIsDisabled;}if(isError){return _InputBase.styles.containerIsError;}};var iconColorStyle=function iconColorStyle(){if(!value){return _InputBase.styles.iconPlaceholder.color;}if(isDisabled){return _InputBase.styles.iconIsDisabled.color;}if(isFocused){return _InputBase.styles.iconIsFocus.color;}if(isError){return _InputBase.styles.iconIsError.color;}};var textColorStyle=function textColorStyle(){if(!value){return _InputBase.styles.textPlaceholder;}if(isDisabled){return _InputBase.styles.textIsDisabled;}if(isFocused){return _InputBase.styles.textIsFocus;}if(isError&&!isFocused){return _InputBase.styles.textIsError;}};(0,_react.useEffect)(function(){setButtons([].concat((0,_toConsumableArray2.default)(rightButtons!=null?rightButtons:[]),[onSubmit!==undefined&&_react.default.createElement(_button.Button,{width:48,typeStyle:"white",onPress:onSubmit,iconLeft:_react.default.createElement(_CornerDownRightIcon.CornerDownRightIcon,{style:_InputBase.styles.iconSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _containers=require("../containers");var _button=require("../button");var _CornerDownRightIcon=require("../../assets/images/icons/CornerDownRightIcon");var _InputBase=require("./InputBase.styles");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.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 InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onSubmit=_ref.onSubmit,isLoading=_ref.isLoading;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),buttons=_useState4[0],setButtons=_useState4[1];var onFocusChange=function onFocusChange(){setIsFocused(true);};var onBlurChange=function onBlurChange(){setIsFocused(false);};var borderWidth=isFocused?3:1;var paddingVertical=13-(borderWidth-1);var paddingHorizontal=12-(borderWidth-1);var borderStyle=function borderStyle(){if(!value&&!isFocused){return _InputBase.styles.containerPlaceholder;}if(isDisabled){return _InputBase.styles.containerIsDisabled;}if(isError){return _InputBase.styles.containerIsError;}};var iconColorStyle=function iconColorStyle(){if(!value){return _InputBase.styles.iconPlaceholder.color;}if(isDisabled){return _InputBase.styles.iconIsDisabled.color;}if(isFocused){return _InputBase.styles.iconIsFocus.color;}if(isError){return _InputBase.styles.iconIsError.color;}};var textColorStyle=function textColorStyle(){if(!value){return _InputBase.styles.textPlaceholder;}if(isDisabled){return _InputBase.styles.textIsDisabled;}if(isFocused){return _InputBase.styles.textIsFocus;}if(isError&&!isFocused){return _InputBase.styles.textIsError;}};var textInputStyle=[_InputBase.styles.textInput,textColorStyle()];if(_reactNative.Platform.OS==='web'){textInputStyle.push({outlineWidth:0});}(0,_react.useEffect)(function(){setButtons([].concat((0,_toConsumableArray2.default)(rightButtons!=null?rightButtons:[]),[onSubmit!==undefined&&_react.default.createElement(_button.Button,{width:48,typeStyle:"white",onPress:onSubmit,iconLeft:_react.default.createElement(_CornerDownRightIcon.CornerDownRightIcon,{style:_InputBase.styles.iconSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:21}}),disabled:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:9}})]));},[onSubmit,isLoading,rightButtons]);return _react.default.createElement(_react.default.Fragment,null,!!title&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:_InputBase.styles.title,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:9}},title),_react.default.createElement(_reactNative.View,{style:[_InputBase.styles.container,borderStyle(),{borderWidth:borderWidth,paddingVertical:paddingVertical,paddingHorizontal:paddingHorizontal}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:7}},!!icon&&_react.default.createElement(_reactNative.TouchableOpacity,{disabled:!icon.onPress||isDisabled,onPress:function onPress(){if(icon.onPress){icon.onPress();}},style:{marginRight:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}},_react.default.cloneElement(icon.icon,{style:icon.icon.props.style||_InputBase.styles.iconRight,fill:iconColorStyle()})),_react.default.createElement(_reactNative.TextInput,{value:value,onChangeText:onChangeText,placeholder:placeholder,editable:!isDisabled,onFocus:onFocusChange,onBlur:onBlurChange,style:textInputStyle,onSubmitEditing:onSubmit||function(){},__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:9}}),!!buttons&&_react.default.createElement(_containers.ButtonContainer,{style:_InputBase.styles.buttonContainer,buttons:buttons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:11}})),!!helperText&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:_InputBase.styles.helperText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:9}},helperText));};var _default=exports.default=InputBase;
|
|
@@ -1 +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({title:{fontFamily:'Inter',fontSize:16,fontWeight:'600',lineHeight:24,letterSpacing:-0.16,color:_colors.NEUTRAL_800},container:{backgroundColor:_colors.NEUTRAL_0,height:48,borderRadius:8,borderColor:_colors.PRIMARY_100,overflow:'hidden',justifyContent:'center',alignItems:'center',flexDirection:'row'},containerIsError:{borderColor:_colors.DANGER_600},containerIsDisabled:{borderColor:_colors.NEUTRAL_400},containerPlaceholder:{borderColor:_colors.NEUTRAL_400},iconPlaceholder:{color:_colors.NEUTRAL_800},iconIsDisabled:{color:_colors.NEUTRAL_500},iconIsError:{color:_colors.NEUTRAL_800},iconIsFocus:{color:_colors.NEUTRAL_1000},textPlaceholder:{color:_colors.NEUTRAL_500},textIsError:{color:_colors.DANGER_700},textIsFocus:{color:_colors.NEUTRAL_800},textIsDisabled:{color:_colors.NEUTRAL_500},textInput:{paddingHorizontal:0,height:48,backgroundColor:'white',fontFamily:'Inter',fontSize:16,fontStyle:'normal',fontWeight:'500',lineHeight:22,letterSpacing:-0.16,color:_colors.PRIMARY_100,flex: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({title:{fontFamily:'Inter',fontSize:16,fontWeight:'600',lineHeight:24,letterSpacing:-0.16,color:_colors.NEUTRAL_800},container:{backgroundColor:_colors.NEUTRAL_0,height:48,borderRadius:8,borderColor:_colors.PRIMARY_100,overflow:'hidden',justifyContent:'center',alignItems:'center',flexDirection:'row'},containerIsError:{borderColor:_colors.DANGER_600},containerIsDisabled:{borderColor:_colors.NEUTRAL_400},containerPlaceholder:{borderColor:_colors.NEUTRAL_400},iconPlaceholder:{color:_colors.NEUTRAL_800},iconIsDisabled:{color:_colors.NEUTRAL_500},iconIsError:{color:_colors.NEUTRAL_800},iconIsFocus:{color:_colors.NEUTRAL_1000},textPlaceholder:{color:_colors.NEUTRAL_500},textIsError:{color:_colors.DANGER_700},textIsFocus:{color:_colors.NEUTRAL_800},textIsDisabled:{color:_colors.NEUTRAL_500},textInput:{paddingHorizontal:0,height:48,backgroundColor:'white',fontFamily:'Inter',fontSize:16,fontStyle:'normal',fontWeight:'500',lineHeight:22,letterSpacing:-0.16,color:_colors.PRIMARY_100,flex:1},helperText:{fontFamily:'Inter',fontSize:14,fontWeight:'500',lineHeight:22,letterSpacing:-0.14,color:_colors.NEUTRAL_800},iconLeft:{width:24,height:24,marginRight:8},iconRight:{width:24,height:24,marginLeft:8},iconSize:{width:24,height:24},buttonContainer:{flexDirection:'row',paddingVertical:0,gap:0,marginLeft:5}});
|
|
@@ -4,14 +4,15 @@ export interface IInputButtons {
|
|
|
4
4
|
onPress?: () => void;
|
|
5
5
|
}
|
|
6
6
|
export interface IInputBase {
|
|
7
|
-
value?: string;
|
|
8
|
-
placeholder?: string;
|
|
9
|
-
title?: string;
|
|
10
7
|
helperText?: string;
|
|
8
|
+
icon?: IInputButtons;
|
|
11
9
|
isDisabled?: boolean;
|
|
12
10
|
isError?: boolean;
|
|
11
|
+
isLoading?: boolean;
|
|
13
12
|
onChangeText?: (value: string) => void;
|
|
14
|
-
icon?: IInputButtons;
|
|
15
|
-
rightButtons?: ReactNode[];
|
|
16
13
|
onSubmit?: (...params: any[]) => void;
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
rightButtons?: ReactNode[];
|
|
16
|
+
title?: string;
|
|
17
|
+
value?: string;
|
|
17
18
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FileSearchInputProps } from './FileSearchInput.types';
|
|
3
|
-
declare const FileSearchInput: ({ value,
|
|
3
|
+
declare const FileSearchInput: ({ value, placeholder, onChangeText, onSubmit, setFile, fetchData, ...inputBaseProps }: FileSearchInputProps) => React.JSX.Element;
|
|
4
4
|
export default FileSearchInput;
|
|
@@ -1 +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 _excluded=["value","onSubmit","setLoadingFile","loadingFile","onLoadingFile","file","setFile"];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(_reactNative.Platform.OS!=='web'){DocumentPicker=require('react-native-document-picker').default;}var FileSearchInput=function FileSearchInput(_ref){var value=_ref.value,onSubmit=_ref.onSubmit,setLoadingFile=_ref.setLoadingFile,loadingFile=_ref.loadingFile,onLoadingFile=_ref.onLoadingFile,file=_ref.file,setFile=_ref.setFile,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 dropAreaRef=(0,_react.useRef)(null);var fileInputRef=(0,_react.useRef)(null);var progressAnim=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var progressSteps=[5,25,50,70,90];var currentStep=0;(0,_react.useEffect)(function(){if(!loadingFile&&progress===90){completeProgress();}},[loadingFile,progress]);var handleDrop=function handleDrop(event){event.preventDefault();var files=event.dataTransfer.files;if(files.length>0){var _file=files[0];startLoading(_file);if(onLoadingFile&&typeof onLoadingFile==='function'){onLoadingFile(_file,function(){return setFile(_file);});}else{setFile(_file);}}};var completeProgress=function completeProgress(){setProgress(100);animateProgress(100);setTimeout(function(){setProgress(0);animateProgress(0);},2000);};var animateProgress=function animateProgress(toValue){_reactNative.Animated.timing(progressAnim,{toValue:toValue,duration:500,useNativeDriver:false}).start();};var startLoading=function startLoading(pickedFile){currentStep=0;setFile(pickedFile);setProgress(progressSteps[0]);animateProgress(progressSteps[0]);var progressInterval=setInterval(function(){if(currentStep<progressSteps.length-1){currentStep++;setProgress(progressSteps[currentStep]);animateProgress(progressSteps[currentStep]);}else{clearInterval(progressInterval);if(!loadingFile){completeProgress();}}},1000);};var handleFileButtonClick=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){if(_reactNative.Platform.OS==='web'){fileInputRef.current.click();}else if(_reactNative.Platform.OS==='android'||_reactNative.Platform.OS==='ios'){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};startLoading(pickedFile);if(onLoadingFile&&typeof onLoadingFile==='function'){onLoadingFile(pickedFile,function(){return setFile(pickedFile);});}else{setFile(pickedFile);}}catch(err){if(!DocumentPicker.isCancel(err)){console.error(err);}}}});return function handleFileButtonClick(){return _ref2.apply(this,arguments);};}();var handleSendMessage=function handleSendMessage(){if(!loadingFile&&(value==null?void 0:value.trim())!==''){if(onSubmit){onSubmit(fileInputRef.current);setProgress(0);animateProgress(0);setLoadingFile(false);}}else{_reactNative.Alert.alert("Message Incomplete","Please wait for the file to finish loading or ensure the message is not empty.");}};var rightButtons=[_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:162,columnNumber:23}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:9}})];var handleFileSelect=function handleFileSelect(event){var file=event.target.files[0];if(file){startLoading(file);if(onLoadingFile&&typeof onLoadingFile==='function'){onLoadingFile(file,function(){return setFile(file);});}else{setFile(file);}}event.target.value=null;};var handleDeleteFile=function handleDeleteFile(){setFile(null);setProgress(0);animateProgress(0);if(fileInputRef.current){fileInputRef.current.value=null;}};return _react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:9}},file&&loadingFile?_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:17}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:21}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:25}}),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLeftContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:25}},_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:199,columnNumber:29}},file.name),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.progressBarBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:29}},_react.default.createElement(_reactNative.Animated.View,{style:[_FileSearchInput.styles.progressBarFill,{width:progressAnim.interpolate({inputRange:[0,100],outputRange:['0%','100%']})}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:33}})))),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:21}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:211,columnNumber:25}}))):file&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:216,columnNumber:21}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLoadedLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:25}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:29}}),_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:29}},file.name)),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameRightContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:25}},_react.default.createElement(_CheckCircleIcon.CheckCircleIcon,{style:_FileSearchInput.styles.checkCircleIcon,fill:_colors.SUCCESS_600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:222,columnNumber:29}}),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:223,columnNumber:29}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:33}})))),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.inputContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:230,columnNumber:13}},_reactNative.Platform.OS==="web"?_react.default.createElement("div",{ref:dropAreaRef,onDrop:handleDrop,__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:21}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({value:value},inputBaseProps,{onSubmit:handleSendMessage,rightButtons:rightButtons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:236,columnNumber:25}})),_react.default.createElement("input",{type:"file",ref:fileInputRef,style:{display:'none'},onChange:handleFileSelect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:25}})):_react.default.createElement(_InputBase.default,(0,_extends2.default)({value:value},inputBaseProps,{onSubmit:handleSendMessage,rightButtons:rightButtons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:21}}))));};var _default=exports.default=FileSearchInput;
|
|
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 _FileStatusDisplay=_interopRequireDefault(require("./FileStatusDisplay"));var _excluded=["value","placeholder","onChangeText","onSubmit","setFile","fetchData"];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(_reactNative.Platform.OS!=='web'){DocumentPicker=require('react-native-document-picker').default;}var FileSearchInput=function FileSearchInput(_ref){var value=_ref.value,placeholder=_ref.placeholder,onChangeText=_ref.onChangeText,onSubmit=_ref.onSubmit,setFile=_ref.setFile,fetchData=_ref.fetchData,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),file=_useState2[0],setLocalFile=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),loadingFile=_useState4[0],setLoadingFile=_useState4[1];var _useState5=(0,_react.useState)(0),_useState6=(0,_slicedToArray2.default)(_useState5,2),progress=_useState6[0],setProgress=_useState6[1];var dropAreaRef=(0,_react.useRef)(null);var fileInputRef=(0,_react.useRef)(null);var progressAnim=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var progressSteps=[5,25,50,70,90];var currentStep=0;(0,_react.useEffect)(function(){if(!loadingFile&&progress===90){completeProgress();}},[loadingFile,progress]);var handleDrop=function handleDrop(event){event.preventDefault();var files=event.dataTransfer.files;if(files.length>0){var _file=files[0];startLoading(_file);setFile(_file);}};var completeProgress=function completeProgress(){setProgress(100);animateProgress(100);setLoadingFile(false);setTimeout(function(){setProgress(0);animateProgress(0);},2000);};var animateProgress=function animateProgress(toValue){_reactNative.Animated.timing(progressAnim,{toValue:toValue,duration:500,useNativeDriver:false}).start();};var startLoading=function startLoading(pickedFile){currentStep=0;setLoadingFile(true);setFile(pickedFile);setLocalFile(pickedFile);setProgress(progressSteps[0]);animateProgress(progressSteps[0]);var progressInterval=setInterval(function(){if(currentStep<progressSteps.length-1){currentStep++;setProgress(progressSteps[currentStep]);animateProgress(progressSteps[currentStep]);}else{clearInterval(progressInterval);if(!loadingFile){completeProgress();}}},1000);};var handleFileButtonClick=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){if(_reactNative.Platform.OS==='web'){fileInputRef.current.click();}else if(_reactNative.Platform.OS==='android'||_reactNative.Platform.OS==='ios'){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};startLoading(pickedFile);setFile(pickedFile);}catch(err){if(!DocumentPicker.isCancel(err)){console.error(err);}}}});return function handleFileButtonClick(){return _ref2.apply(this,arguments);};}();var handleSendMessage=function handleSendMessage(){if(!loadingFile&&(value==null?void 0:value.trim())!==''){if(onSubmit){onSubmit(value,fileInputRef.current);setProgress(0);animateProgress(0);setLoadingFile(false);setLocalFile(null);}}else{_reactNative.Alert.alert('Message Incomplete','Please wait for the file to finish loading or ensure the message is not empty.');}};var rightButtons=[];if(fetchData){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:168,columnNumber:11}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:7}}));}var handleFileSelect=function handleFileSelect(event){var file=event.target.files[0];if(file){startLoading(file);setFile(file);setLocalFile(file);uploadFile(file);}event.target.value=null;};var handleDeleteFile=function handleDeleteFile(){setFile(null);setLocalFile(null);setProgress(0);animateProgress(0);setLoadingFile(false);if(fileInputRef.current){fileInputRef.current.value=null;}};var uploadFile=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(file){if(!fetchData||!fetchData.url||!fetchData.method){_reactNative.Alert.alert('Fetch data is not properly defined.');return;}var formData=new FormData();formData.append(fetchData.file||'file',file);try{var response=yield fetch(fetchData.url,{method:fetchData.method,body:formData});var result=yield response.json();setFile(result);completeProgress();}catch(error){console.error('Error uploading file:',error);}});return function uploadFile(_x){return _ref3.apply(this,arguments);};}();return _react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:5}},file&&loadingFile?_react.default.createElement(_FileStatusDisplay.default,{file:file,progressAnim:progressAnim,handleDeleteFile:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:9}}):file&&_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:231,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLoadedLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:13}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:15}}),_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:234,columnNumber:15}},file.name)),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameRightContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:236,columnNumber:13}},_react.default.createElement(_CheckCircleIcon.CheckCircleIcon,{style:_FileSearchInput.styles.checkCircleIcon,fill:_colors.SUCCESS_600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:237,columnNumber:15}}),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:241,columnNumber:15}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:17}})))),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.inputContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:7}},_reactNative.Platform.OS==='web'?_react.default.createElement("div",{ref:dropAreaRef,onDrop:handleDrop,__self:_this,__source:{fileName:_jsxFileName,lineNumber:251,columnNumber:11}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:252,columnNumber:13}})),_react.default.createElement("input",{type:"file",ref:fileInputRef,style:{display:'none'},onChange:handleFileSelect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:13}})):_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:value,onChangeText:onChangeText,onSubmit:handleSendMessage,rightButtons:rightButtons,isLoading:loadingFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:11}}))));};var _default=exports.default=FileSearchInput;
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import { IInputBase } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
1
|
+
import { Animated } from 'react-native';
|
|
2
|
+
import { IInputBase } from '../InputBase.types';
|
|
3
|
+
export type FetchData = {
|
|
4
|
+
file: any;
|
|
5
|
+
url: string;
|
|
6
|
+
method: string;
|
|
7
|
+
};
|
|
9
8
|
export interface FileSearchInputProps extends IInputBase {
|
|
10
|
-
value
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
value: string;
|
|
10
|
+
setFile: (file: any) => void;
|
|
11
|
+
onChangeText: (text: string) => void;
|
|
12
|
+
onSubmit: (message: string, file?: any) => void;
|
|
13
|
+
placeholder: string;
|
|
14
|
+
fetchData?: FetchData;
|
|
15
|
+
}
|
|
16
|
+
export interface FileStatusDisplayProps {
|
|
17
|
+
file: any;
|
|
18
|
+
progressAnim: Animated.Value;
|
|
19
|
+
handleDeleteFile: () => void;
|
|
17
20
|
}
|
|
18
|
-
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _FileSearchInput=require("./FileSearchInput.styles");var _DeleteIcon=require("../../../assets/images/icons/DeleteIcon");var _FileIcon=require("../../../assets/images/icons/FileIcon");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/file-search-input/FileStatusDisplay.tsx";var FileStatusDisplay=function FileStatusDisplay(_ref){var file=_ref.file,progressAnim=_ref.progressAnim,handleDeleteFile=_ref.handleDeleteFile;return _react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:14,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLeftContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:13}},_react.default.createElement(_FileIcon.FileIcon,{style:_FileSearchInput.styles.fileIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:17}}),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.fileNameLeftContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:17,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_FileSearchInput.styles.fileNameText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:21}},file.name),_react.default.createElement(_reactNative.View,{style:_FileSearchInput.styles.progressBarBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:19,columnNumber:21}},_react.default.createElement(_reactNative.Animated.View,{style:[_FileSearchInput.styles.progressBarFill,{width:progressAnim.interpolate({inputRange:[0,100],outputRange:['0%','100%']})}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:25}})))),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handleDeleteFile,__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:13}},_react.default.createElement(_DeleteIcon.DeleteIcon,{style:_FileSearchInput.styles.deleteIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:17}})));};var _default=exports.default=FileStatusDisplay;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IInputBase } from './InputBase.types';
|
|
3
|
-
declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, }: IInputBase) => React.JSX.Element;
|
|
3
|
+
declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, isLoading, }: IInputBase) => React.JSX.Element;
|
|
4
4
|
export default InputBase;
|
|
@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
8
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
9
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
-
import { Text, TextInput, TouchableOpacity, View } from "react-native-web";
|
|
11
|
+
import { Platform, Text, TextInput, TouchableOpacity, View } from "react-native-web";
|
|
12
12
|
import React, { useEffect, useState } from 'react';
|
|
13
13
|
import { ButtonContainer } from "../containers";
|
|
14
14
|
import { Button } from "../button";
|
|
@@ -24,7 +24,8 @@ var InputBase = function InputBase(_ref) {
|
|
|
24
24
|
onChangeText = _ref.onChangeText,
|
|
25
25
|
icon = _ref.icon,
|
|
26
26
|
rightButtons = _ref.rightButtons,
|
|
27
|
-
onSubmit = _ref.onSubmit
|
|
27
|
+
onSubmit = _ref.onSubmit,
|
|
28
|
+
isLoading = _ref.isLoading;
|
|
28
29
|
var _useState = useState(false),
|
|
29
30
|
_useState2 = _slicedToArray(_useState, 2),
|
|
30
31
|
isFocused = _useState2[0],
|
|
@@ -81,6 +82,12 @@ var InputBase = function InputBase(_ref) {
|
|
|
81
82
|
return styles.textIsError;
|
|
82
83
|
}
|
|
83
84
|
};
|
|
85
|
+
var textInputStyle = [styles.textInput, textColorStyle()];
|
|
86
|
+
if (Platform.OS === 'web') {
|
|
87
|
+
textInputStyle.push({
|
|
88
|
+
outlineWidth: 0
|
|
89
|
+
});
|
|
90
|
+
}
|
|
84
91
|
useEffect(function () {
|
|
85
92
|
setButtons([].concat(_toConsumableArray(rightButtons !== null && rightButtons !== void 0 ? rightButtons : []), [onSubmit !== undefined && /*#__PURE__*/React.createElement(Button, {
|
|
86
93
|
width: 48,
|
|
@@ -88,9 +95,10 @@ var InputBase = function InputBase(_ref) {
|
|
|
88
95
|
onPress: onSubmit,
|
|
89
96
|
iconLeft: /*#__PURE__*/React.createElement(CornerDownRightIcon, {
|
|
90
97
|
style: styles.iconSize
|
|
91
|
-
})
|
|
98
|
+
}),
|
|
99
|
+
disabled: isLoading
|
|
92
100
|
})]));
|
|
93
|
-
}, [onSubmit, rightButtons]);
|
|
101
|
+
}, [onSubmit, isLoading, rightButtons]);
|
|
94
102
|
return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Text, {
|
|
95
103
|
numberOfLines: 1,
|
|
96
104
|
ellipsizeMode: "tail",
|
|
@@ -121,7 +129,7 @@ var InputBase = function InputBase(_ref) {
|
|
|
121
129
|
editable: !isDisabled,
|
|
122
130
|
onFocus: onFocusChange,
|
|
123
131
|
onBlur: onBlurChange,
|
|
124
|
-
style:
|
|
132
|
+
style: textInputStyle,
|
|
125
133
|
onSubmitEditing: onSubmit || function () {}
|
|
126
134
|
}), !!buttons && /*#__PURE__*/React.createElement(ButtonContainer, {
|
|
127
135
|
style: styles.buttonContainer,
|
|
@@ -4,14 +4,15 @@ export interface IInputButtons {
|
|
|
4
4
|
onPress?: () => void;
|
|
5
5
|
}
|
|
6
6
|
export interface IInputBase {
|
|
7
|
-
value?: string;
|
|
8
|
-
placeholder?: string;
|
|
9
|
-
title?: string;
|
|
10
7
|
helperText?: string;
|
|
8
|
+
icon?: IInputButtons;
|
|
11
9
|
isDisabled?: boolean;
|
|
12
10
|
isError?: boolean;
|
|
11
|
+
isLoading?: boolean;
|
|
13
12
|
onChangeText?: (value: string) => void;
|
|
14
|
-
icon?: IInputButtons;
|
|
15
|
-
rightButtons?: ReactNode[];
|
|
16
13
|
onSubmit?: (...params: any[]) => void;
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
rightButtons?: ReactNode[];
|
|
16
|
+
title?: string;
|
|
17
|
+
value?: string;
|
|
17
18
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FileSearchInputProps } from './FileSearchInput.types';
|
|
3
|
-
declare const FileSearchInput: ({ value,
|
|
3
|
+
declare const FileSearchInput: ({ value, placeholder, onChangeText, onSubmit, setFile, fetchData, ...inputBaseProps }: FileSearchInputProps) => React.JSX.Element;
|
|
4
4
|
export default FileSearchInput;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["value", "
|
|
2
|
+
var _excluded = ["value", "placeholder", "onChangeText", "onSubmit", "setFile", "fetchData"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
5
5
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
@@ -29,6 +29,7 @@ import { FileIcon } from "../../../assets/images/icons/FileIcon";
|
|
|
29
29
|
// Import types
|
|
30
30
|
|
|
31
31
|
import { Button } from "../../button";
|
|
32
|
+
import FileStatusDisplay from "./FileStatusDisplay";
|
|
32
33
|
|
|
33
34
|
// Import DocumentPicker for mobile platforms only
|
|
34
35
|
var DocumentPicker = null;
|
|
@@ -37,17 +38,24 @@ if (Platform.OS !== 'web') {
|
|
|
37
38
|
}
|
|
38
39
|
var FileSearchInput = function FileSearchInput(_ref) {
|
|
39
40
|
var value = _ref.value,
|
|
41
|
+
placeholder = _ref.placeholder,
|
|
42
|
+
onChangeText = _ref.onChangeText,
|
|
40
43
|
onSubmit = _ref.onSubmit,
|
|
41
|
-
setLoadingFile = _ref.setLoadingFile,
|
|
42
|
-
loadingFile = _ref.loadingFile,
|
|
43
|
-
onLoadingFile = _ref.onLoadingFile,
|
|
44
|
-
file = _ref.file,
|
|
45
44
|
setFile = _ref.setFile,
|
|
45
|
+
fetchData = _ref.fetchData,
|
|
46
46
|
inputBaseProps = _objectWithoutProperties(_ref, _excluded);
|
|
47
|
-
var _useState = useState(
|
|
47
|
+
var _useState = useState(null),
|
|
48
48
|
_useState2 = _slicedToArray(_useState, 2),
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
file = _useState2[0],
|
|
50
|
+
setLocalFile = _useState2[1];
|
|
51
|
+
var _useState3 = useState(false),
|
|
52
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
53
|
+
loadingFile = _useState4[0],
|
|
54
|
+
setLoadingFile = _useState4[1];
|
|
55
|
+
var _useState5 = useState(0),
|
|
56
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
57
|
+
progress = _useState6[0],
|
|
58
|
+
setProgress = _useState6[1];
|
|
51
59
|
var dropAreaRef = useRef(null);
|
|
52
60
|
var fileInputRef = useRef(null);
|
|
53
61
|
var progressAnim = useRef(new Animated.Value(0)).current;
|
|
@@ -62,20 +70,15 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
62
70
|
event.preventDefault();
|
|
63
71
|
var files = event.dataTransfer.files;
|
|
64
72
|
if (files.length > 0) {
|
|
65
|
-
var _file = files[0];
|
|
73
|
+
var _file = files[0];
|
|
66
74
|
startLoading(_file);
|
|
67
|
-
|
|
68
|
-
onLoadingFile(_file, function () {
|
|
69
|
-
return setFile(_file);
|
|
70
|
-
});
|
|
71
|
-
} else {
|
|
72
|
-
setFile(_file);
|
|
73
|
-
}
|
|
75
|
+
setFile(_file);
|
|
74
76
|
}
|
|
75
77
|
};
|
|
76
78
|
var completeProgress = function completeProgress() {
|
|
77
79
|
setProgress(100);
|
|
78
80
|
animateProgress(100);
|
|
81
|
+
setLoadingFile(false);
|
|
79
82
|
setTimeout(function () {
|
|
80
83
|
setProgress(0);
|
|
81
84
|
animateProgress(0);
|
|
@@ -90,7 +93,9 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
90
93
|
};
|
|
91
94
|
var startLoading = function startLoading(pickedFile) {
|
|
92
95
|
currentStep = 0;
|
|
96
|
+
setLoadingFile(true);
|
|
93
97
|
setFile(pickedFile);
|
|
98
|
+
setLocalFile(pickedFile);
|
|
94
99
|
setProgress(progressSteps[0]);
|
|
95
100
|
animateProgress(progressSteps[0]);
|
|
96
101
|
var progressInterval = setInterval(function () {
|
|
@@ -147,15 +152,7 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
147
152
|
uri: response[0].uri
|
|
148
153
|
};
|
|
149
154
|
startLoading(pickedFile);
|
|
150
|
-
|
|
151
|
-
// If an onLoadingFile function is provided, call it
|
|
152
|
-
if (onLoadingFile && typeof onLoadingFile === 'function') {
|
|
153
|
-
onLoadingFile(pickedFile, function () {
|
|
154
|
-
return setFile(pickedFile);
|
|
155
|
-
});
|
|
156
|
-
} else {
|
|
157
|
-
setFile(pickedFile);
|
|
158
|
-
}
|
|
155
|
+
setFile(pickedFile);
|
|
159
156
|
_context.next = 20;
|
|
160
157
|
break;
|
|
161
158
|
case 17:
|
|
@@ -179,42 +176,42 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
179
176
|
var handleSendMessage = function handleSendMessage() {
|
|
180
177
|
if (!loadingFile && (value === null || value === void 0 ? void 0 : value.trim()) !== '') {
|
|
181
178
|
if (onSubmit) {
|
|
182
|
-
onSubmit(fileInputRef.current);
|
|
179
|
+
onSubmit(value, fileInputRef.current);
|
|
183
180
|
setProgress(0);
|
|
184
181
|
animateProgress(0);
|
|
185
182
|
setLoadingFile(false);
|
|
183
|
+
setLocalFile(null);
|
|
186
184
|
}
|
|
187
185
|
} else {
|
|
188
|
-
Alert.alert(
|
|
186
|
+
Alert.alert('Message Incomplete', 'Please wait for the file to finish loading or ensure the message is not empty.');
|
|
189
187
|
}
|
|
190
188
|
};
|
|
191
189
|
|
|
192
190
|
// Define the right buttons for the input
|
|
193
|
-
var rightButtons = [
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
191
|
+
var rightButtons = [];
|
|
192
|
+
if (fetchData) {
|
|
193
|
+
rightButtons.push( /*#__PURE__*/React.createElement(Button, {
|
|
194
|
+
width: 48,
|
|
195
|
+
typeStyle: "white",
|
|
196
|
+
onPress: handleFileButtonClick,
|
|
197
|
+
iconLeft: /*#__PURE__*/React.createElement(ClipboardIcon, {
|
|
198
|
+
style: {
|
|
199
|
+
width: 24,
|
|
200
|
+
height: 24
|
|
201
|
+
},
|
|
202
|
+
fill: PRIMARY_100
|
|
203
|
+
})
|
|
204
|
+
}));
|
|
205
|
+
}
|
|
205
206
|
|
|
206
207
|
// Handle file selection from the input - Web specific
|
|
207
208
|
var handleFileSelect = function handleFileSelect(event) {
|
|
208
209
|
var file = event.target.files[0];
|
|
209
210
|
if (file) {
|
|
210
211
|
startLoading(file);
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
});
|
|
215
|
-
} else {
|
|
216
|
-
setFile(file);
|
|
217
|
-
}
|
|
212
|
+
setFile(file);
|
|
213
|
+
setLocalFile(file);
|
|
214
|
+
uploadFile(file);
|
|
218
215
|
}
|
|
219
216
|
event.target.value = null;
|
|
220
217
|
};
|
|
@@ -222,38 +219,68 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
222
219
|
// Function to handle file deletion
|
|
223
220
|
var handleDeleteFile = function handleDeleteFile() {
|
|
224
221
|
setFile(null);
|
|
222
|
+
setLocalFile(null);
|
|
225
223
|
setProgress(0);
|
|
226
224
|
animateProgress(0);
|
|
225
|
+
setLoadingFile(false);
|
|
227
226
|
if (fileInputRef.current) {
|
|
228
227
|
fileInputRef.current.value = null;
|
|
229
228
|
}
|
|
230
229
|
};
|
|
230
|
+
|
|
231
|
+
// Manejo de la carga de archivos
|
|
232
|
+
var uploadFile = /*#__PURE__*/function () {
|
|
233
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
|
|
234
|
+
var formData, response, result;
|
|
235
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
236
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
237
|
+
case 0:
|
|
238
|
+
if (!(!fetchData || !fetchData.url || !fetchData.method)) {
|
|
239
|
+
_context2.next = 3;
|
|
240
|
+
break;
|
|
241
|
+
}
|
|
242
|
+
Alert.alert('Fetch data is not properly defined.');
|
|
243
|
+
return _context2.abrupt("return");
|
|
244
|
+
case 3:
|
|
245
|
+
formData = new FormData();
|
|
246
|
+
formData.append(fetchData.file || 'file', file);
|
|
247
|
+
_context2.prev = 5;
|
|
248
|
+
_context2.next = 8;
|
|
249
|
+
return fetch(fetchData.url, {
|
|
250
|
+
method: fetchData.method,
|
|
251
|
+
body: formData
|
|
252
|
+
});
|
|
253
|
+
case 8:
|
|
254
|
+
response = _context2.sent;
|
|
255
|
+
_context2.next = 11;
|
|
256
|
+
return response.json();
|
|
257
|
+
case 11:
|
|
258
|
+
result = _context2.sent;
|
|
259
|
+
setFile(result);
|
|
260
|
+
completeProgress();
|
|
261
|
+
_context2.next = 19;
|
|
262
|
+
break;
|
|
263
|
+
case 16:
|
|
264
|
+
_context2.prev = 16;
|
|
265
|
+
_context2.t0 = _context2["catch"](5);
|
|
266
|
+
console.error('Error uploading file:', _context2.t0);
|
|
267
|
+
case 19:
|
|
268
|
+
case "end":
|
|
269
|
+
return _context2.stop();
|
|
270
|
+
}
|
|
271
|
+
}, _callee2, null, [[5, 16]]);
|
|
272
|
+
}));
|
|
273
|
+
return function uploadFile(_x) {
|
|
274
|
+
return _ref3.apply(this, arguments);
|
|
275
|
+
};
|
|
276
|
+
}();
|
|
231
277
|
return /*#__PURE__*/React.createElement(View, {
|
|
232
278
|
style: styles.container
|
|
233
|
-
}, file && loadingFile ? /*#__PURE__*/React.createElement(
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
}
|
|
238
|
-
style: styles.fileIcon
|
|
239
|
-
}), /*#__PURE__*/React.createElement(View, {
|
|
240
|
-
style: styles.fileNameLeftContent
|
|
241
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
242
|
-
style: styles.fileNameText
|
|
243
|
-
}, file.name), /*#__PURE__*/React.createElement(View, {
|
|
244
|
-
style: styles.progressBarBackground
|
|
245
|
-
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
246
|
-
style: [styles.progressBarFill, {
|
|
247
|
-
width: progressAnim.interpolate({
|
|
248
|
-
inputRange: [0, 100],
|
|
249
|
-
outputRange: ['0%', '100%']
|
|
250
|
-
})
|
|
251
|
-
}]
|
|
252
|
-
})))), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
253
|
-
onPress: handleDeleteFile
|
|
254
|
-
}, /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
255
|
-
style: styles.deleteIcon
|
|
256
|
-
}))) : file && /*#__PURE__*/React.createElement(View, {
|
|
279
|
+
}, file && loadingFile ? /*#__PURE__*/React.createElement(FileStatusDisplay, {
|
|
280
|
+
file: file,
|
|
281
|
+
progressAnim: progressAnim,
|
|
282
|
+
handleDeleteFile: handleDeleteFile
|
|
283
|
+
}) : file && /*#__PURE__*/React.createElement(View, {
|
|
257
284
|
style: styles.fileNameContainer
|
|
258
285
|
}, /*#__PURE__*/React.createElement(View, {
|
|
259
286
|
style: styles.fileNameLoadedLeftContainer
|
|
@@ -272,14 +299,15 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
272
299
|
style: styles.deleteIcon
|
|
273
300
|
})))), /*#__PURE__*/React.createElement(View, {
|
|
274
301
|
style: styles.inputContainer
|
|
275
|
-
}, Platform.OS ===
|
|
302
|
+
}, Platform.OS === 'web' ? /*#__PURE__*/React.createElement("div", {
|
|
276
303
|
ref: dropAreaRef,
|
|
277
304
|
onDrop: handleDrop
|
|
278
|
-
}, /*#__PURE__*/React.createElement(InputBase, _extends({
|
|
279
|
-
value: value
|
|
280
|
-
|
|
305
|
+
}, /*#__PURE__*/React.createElement(InputBase, _extends({}, inputBaseProps, {
|
|
306
|
+
value: value,
|
|
307
|
+
onChangeText: onChangeText,
|
|
281
308
|
onSubmit: handleSendMessage,
|
|
282
|
-
rightButtons: rightButtons
|
|
309
|
+
rightButtons: rightButtons,
|
|
310
|
+
isLoading: loadingFile
|
|
283
311
|
})), /*#__PURE__*/React.createElement("input", {
|
|
284
312
|
type: "file",
|
|
285
313
|
ref: fileInputRef,
|
|
@@ -287,11 +315,12 @@ var FileSearchInput = function FileSearchInput(_ref) {
|
|
|
287
315
|
display: 'none'
|
|
288
316
|
},
|
|
289
317
|
onChange: handleFileSelect
|
|
290
|
-
})) : /*#__PURE__*/React.createElement(InputBase, _extends({
|
|
291
|
-
value: value
|
|
292
|
-
|
|
318
|
+
})) : /*#__PURE__*/React.createElement(InputBase, _extends({}, inputBaseProps, {
|
|
319
|
+
value: value,
|
|
320
|
+
onChangeText: onChangeText,
|
|
293
321
|
onSubmit: handleSendMessage,
|
|
294
|
-
rightButtons: rightButtons
|
|
322
|
+
rightButtons: rightButtons,
|
|
323
|
+
isLoading: loadingFile
|
|
295
324
|
}))));
|
|
296
325
|
};
|
|
297
326
|
export default FileSearchInput;
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import { IInputBase } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
1
|
+
import { Animated } from 'react-native';
|
|
2
|
+
import { IInputBase } from '../InputBase.types';
|
|
3
|
+
export type FetchData = {
|
|
4
|
+
file: any;
|
|
5
|
+
url: string;
|
|
6
|
+
method: string;
|
|
7
|
+
};
|
|
9
8
|
export interface FileSearchInputProps extends IInputBase {
|
|
10
|
-
value
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
value: string;
|
|
10
|
+
setFile: (file: any) => void;
|
|
11
|
+
onChangeText: (text: string) => void;
|
|
12
|
+
onSubmit: (message: string, file?: any) => void;
|
|
13
|
+
placeholder: string;
|
|
14
|
+
fetchData?: FetchData;
|
|
15
|
+
}
|
|
16
|
+
export interface FileStatusDisplayProps {
|
|
17
|
+
file: any;
|
|
18
|
+
progressAnim: Animated.Value;
|
|
19
|
+
handleDeleteFile: () => void;
|
|
17
20
|
}
|
|
18
|
-
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, Text, TouchableOpacity, Animated } from "react-native-web";
|
|
3
|
+
import { styles } from "./FileSearchInput.styles";
|
|
4
|
+
import { DeleteIcon } from "../../../assets/images/icons/DeleteIcon";
|
|
5
|
+
import { FileIcon } from "../../../assets/images/icons/FileIcon";
|
|
6
|
+
var FileStatusDisplay = function FileStatusDisplay(_ref) {
|
|
7
|
+
var file = _ref.file,
|
|
8
|
+
progressAnim = _ref.progressAnim,
|
|
9
|
+
handleDeleteFile = _ref.handleDeleteFile;
|
|
10
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
11
|
+
style: styles.fileNameContainer
|
|
12
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
13
|
+
style: styles.fileNameLeftContainer
|
|
14
|
+
}, /*#__PURE__*/React.createElement(FileIcon, {
|
|
15
|
+
style: styles.fileIcon
|
|
16
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
17
|
+
style: styles.fileNameLeftContent
|
|
18
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
19
|
+
style: styles.fileNameText
|
|
20
|
+
}, file.name), /*#__PURE__*/React.createElement(View, {
|
|
21
|
+
style: styles.progressBarBackground
|
|
22
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
23
|
+
style: [styles.progressBarFill, {
|
|
24
|
+
width: progressAnim.interpolate({
|
|
25
|
+
inputRange: [0, 100],
|
|
26
|
+
outputRange: ['0%', '100%']
|
|
27
|
+
})
|
|
28
|
+
}]
|
|
29
|
+
})))), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
30
|
+
onPress: handleDeleteFile
|
|
31
|
+
}, /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
32
|
+
style: styles.deleteIcon
|
|
33
|
+
})));
|
|
34
|
+
};
|
|
35
|
+
export default FileStatusDisplay;
|