document-upload-qsi
Version:
## Installation
1 lines • 18.3 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _lodash=_interopRequireDefault(require("lodash"));var _reactNativeImageCropPicker=_interopRequireDefault(require("react-native-image-crop-picker"));var _reactNativeDocumentPicker=_interopRequireDefault(require("react-native-document-picker"));var _reactNativeTransformableImage=_interopRequireDefault(require("react-native-transformable-image"));var _reactNativeElevatedView=_interopRequireDefault(require("react-native-elevated-view"));var _QIcon=_interopRequireDefault(require("./component/icon/QIcon"));var _QModal=_interopRequireDefault(require("./component/modal/QModal"));var _QModalConfirm=_interopRequireDefault(require("./component/modal/QModalConfirm"));var _jsxFileName="D:\\RNComponent\\qsi-document-upload\\index.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var WINDOW=Dimensions.get('screen');var imageCam=require('../component/Images/Camera.png');var imageAtc=require('../component/Images/Attach_file.png');var pptIdentifier=_reactNative.Platform.OS==='android'?'application/vnd.ms-powerpoint':'com.microsoft.powerpoint.ppt';var pptxIdentifier=_reactNative.Platform.OS==='android'?'application/vnd.openxmlformats-officedocument.presentationml.presentation':'org.openxmlformats.presentationml.presentation';var docIdentifier=_reactNative.Platform.OS==='android'?'application/msword':'com.microsoft.word.doc';var docxIdentifier=_reactNative.Platform.OS==='android'?'application/vnd.openxmlformats-officedocument.wordprocessingml.document':'org.openxmlformats.wordprocessingml.document';var xlsIdentifier=_reactNative.Platform.OS==='android'?'application/vnd.ms-excel':'com.microsoft.excel.xls';var xlsxIdentifier=_reactNative.Platform.OS==='android'?'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':'org.openxmlformats.spreadsheetml.sheet';var QsiDocumentUpload=function(_Component){(0,_inherits2.default)(QsiDocumentUpload,_Component);function QsiDocumentUpload(props){var _this;(0,_classCallCheck2.default)(this,QsiDocumentUpload);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(QsiDocumentUpload).call(this,props));_this.requestStoragePermission=function _callee(){var granted;return _regenerator.default.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return _regenerator.default.awrap(_reactNative.PermissionsAndroid.requestMultiple([_reactNative.PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,_reactNative.PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE]));case 3:granted=_context.sent;if(granted===_reactNative.PermissionsAndroid.RESULTS.GRANTED){}else{}_context.next=9;break;case 7:_context.prev=7;_context.t0=_context["catch"](0);case 9:case"end":return _context.stop();}}},null,null,[[0,7]]);};_this.detectFileType=function(file){file.toLowerCase();if(file.indexOf('.png')>=0||file.indexOf('.jpg')>=0||file.indexOf('.gif')>=0||file.indexOf('.jpeg')>=0){return'file-photo-o';}if(file.indexOf('.zip')>=0||file.indexOf('.rar')>=0||file.indexOf('.gz')>=0||file.indexOf('.7z')>=0){return'file-archive-o';}if(file.indexOf('.docx')>=0||file.indexOf('.doc')>=0){return'file-word-o';}if(file.indexOf('.xls')>=0||file.indexOf('.xlsx')>=0||file.indexOf('.xlsm')>=0){return'file-excel-o';}if(file.indexOf('.ppt')>=0||file.indexOf('.pptx')>=0){return'file-powerpoint-o';}if(file.indexOf('.pdf')>=0){return'file-pdf-o';}return'file-text-o';};_this.deleteFile=function(index){var files=_this.state.files;var onFilePicked=_this.props.onFilePicked;files.splice(index,1);_this.setState({files:files,showConfirm:false},function(){if(onFilePicked)onFilePicked(files);});};_this.renderListFiles=function(_ref){var item=_ref.item,index=_ref.index;return _react.default.createElement(_reactNativeElevatedView.default,{elevation:2,style:{marginVertical:4,height:50,borderRadius:10,backgroundColor:'#F6F6F6'},__source:{fileName:_jsxFileName,lineNumber:103}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flex:1},__source:{fileName:_jsxFileName,lineNumber:112}},_react.default.createElement(_reactNative.View,{flex:0.2,style:{justifyContent:'center',alignItems:'center',paddingVertical:16,height:50,borderBottomLeftRadius:10,borderTopLeftRadius:10},__source:{fileName:_jsxFileName,lineNumber:113}},_this.detectFileType(item.fileName).indexOf('photo')>=0?_react.default.createElement(_reactNative.TouchableOpacity,{activeOpacity:0.7,onPress:function onPress(){_this.setState({preview:item},function(){_this.popup.open();});},__source:{fileName:_jsxFileName,lineNumber:126}},_react.default.createElement(_reactNative.Image,{style:{width:30,height:30,resizeMode:'cover'},source:{uri:item.uri},__source:{fileName:_jsxFileName,lineNumber:137}})):_react.default.createElement(_QIcon.default,{name:_this.detectFileType(item.fileName),type:_QIcon.default.TYPE_FONTAWESOME,size:30,color:"#666",__source:{fileName:_jsxFileName,lineNumber:147}})),_react.default.createElement(_reactNative.View,{flex:0.6,style:{padding:6,height:50,borderRadius:10},__source:{fileName:_jsxFileName,lineNumber:156}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:157}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:158}},""+item.fileName.substring(0,18))),_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:162}},_react.default.createElement(_reactNative.Text,{style:{fontSize:10,color:'#939393'},__source:{fileName:_jsxFileName,lineNumber:163}},(item.fileSize/1048576).toFixed(2)+" MB"))),_react.default.createElement(_reactNative.View,{flex:0.2,flexDirection:"row",style:{justifyContent:'center',alignItems:'center',padding:6},__source:{fileName:_jsxFileName,lineNumber:168}},_react.default.createElement(_QIcon.default,{color:"#6f6f6f",onPress:function onPress(){return _this.setState({index:index,showConfirm:true});},containerStyle:{flex:0.5,justifyContent:'center',alignItems:'center'},name:"circle-with-cross",size:24,__source:{fileName:_jsxFileName,lineNumber:169}}))));};_this.storeFile=function(res){var files=_this.state.files;var onFilePicked=_this.props.onFilePicked;if(_reactNative.Platform.OS==='android'){files.push(_objectSpread({},res));}else{}_this.setState({files:files});if(onFilePicked)onFilePicked(files);};_this.openFileCamera=function(){_this.modal.close();_reactNativeImageCropPicker.default.openCamera({cropping:true,freeStyleCropEnabled:true,compressImageQuality:0.9,compressImageMaxWidth:1024,compressImageMaxHeight:1024}).then(function(v){var paths=v.path.split('/');var res={uri:v.path,fileSize:v.size,type:v.mime,fileName:paths[paths.length-1]};if(res.fileSize>=5242880){var onDocumentExceedLimit=_this.props.onDocumentExceedLimit;if(onDocumentExceedLimit)onDocumentExceedLimit();}else{_this.storeFile(res);}}).catch(function(){});};_this.openFilePicker=function _callee2(){var res;return _regenerator.default.async(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return _regenerator.default.awrap(_this.requestStoragePermission());case 2:_context2.prev=2;_context2.next=5;return _regenerator.default.awrap(_reactNativeDocumentPicker.default.pick({type:[_reactNativeDocumentPicker.default.types.images,_reactNativeDocumentPicker.default.types.pdf,docIdentifier,docxIdentifier,xlsIdentifier,xlsxIdentifier,'video/*','audio/*',pptIdentifier,pptxIdentifier]}));case 5:res=_context2.sent;if(res!==null&&res!==undefined){_this.modal.close();if(!res.fileName)res.fileName=res.name;if(!res.fileSize)res.fileSize=res.size;if(res.type.toLowerCase().indexOf('image')>=0){_reactNativeImageCropPicker.default.openCropper({path:res.uri,cropping:true,freeStyleCropEnabled:true,compressImageQuality:0.9,compressImageMaxWidth:1024,compressImageMaxHeight:1024}).then(function(v){var paths=v.path.split('/');var mRes={uri:_reactNative.Platform.OS==='android'?v.path:v.sourceURL,fileSize:v.size,type:v.mime,fileName:paths[paths.length-1]};if(mRes.fileSize>=5242880){var onDocumentExceedLimit=_this.props.onDocumentExceedLimit;if(onDocumentExceedLimit)onDocumentExceedLimit();}else{_this.storeFile(mRes);}}).catch(function(){});}else{_this.storeFile(res);}}_context2.next=16;break;case 9:_context2.prev=9;_context2.t0=_context2["catch"](2);if(!_reactNativeDocumentPicker.default.isCancel(_context2.t0)){_context2.next=15;break;}_this.modal.close();_context2.next=16;break;case 15:throw _context2.t0;case 16:case"end":return _context2.stop();}}},null,null,[[2,9]]);};_this.componentWillReceiveProps=function(nextProps){var value=_this.props.value;var files=_this.state.files;var newFiles=[];if(_lodash.default.isObject(value)&&!_lodash.default.find(files,function(item){return item.fileName===value.fileName;})){if(!Array.isArray(nextProps.value)){newFiles.push(nextProps.value);}else{newFiles=nextProps.value;}_this.setState({files:newFiles});}};_this.state={files:[],preview:{}};return _this;}(0,_createClass2.default)(QsiDocumentUpload,[{key:"render",value:function render(){var _this2=this;var _this$state=this.state,files=_this$state.files,preview=_this$state.preview,index=_this$state.index,showConfirm=_this$state.showConfirm,showError=_this$state.showError,errorMessage=_this$state.errorMessage;var _this$props=this.props,showModal=_this$props.showModal,maxFiles=_this$props.maxFiles,contentFlatlistStyle=_this$props.contentFlatlistStyle,containerStyle=_this$props.containerStyle,containerFlatlistStyle=_this$props.containerFlatlistStyle;return _react.default.createElement(_reactNative.View,{style:[{padding:20,backgroundColor:'#FFFFFF'},containerStyle],__source:{fileName:_jsxFileName,lineNumber:313}},_react.default.createElement(_reactNative.View,{style:[{marginBottom:10,backgroundColor:'#FFFFFF'},containerFlatlistStyle],__source:{fileName:_jsxFileName,lineNumber:314}},files&&files.length>0?_react.default.createElement(_reactNative.FlatList,{contentContainerStyle:[contentFlatlistStyle],keyExtractor:function keyExtractor(item,id){return id.toString();},data:files,extraData:this.props,renderItem:this.renderListFiles,__source:{fileName:_jsxFileName,lineNumber:318}}):null),!files||files.length<maxFiles||maxFiles===0?_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){return _this2.modal.open();},style:{height:50,borderWidth:1,borderRadius:10,borderStyle:'dashed',justifyContent:'center',alignItems:'center',flexDirection:'row',borderColor:'#707070'},__source:{fileName:_jsxFileName,lineNumber:333}},_react.default.createElement(_reactNative.View,{style:{backgroundColor:'#3566AE',width:20,height:20,borderRadius:20,alignItems:'center',justifyContent:'center',marginRight:15},__source:{fileName:_jsxFileName,lineNumber:346}},_react.default.createElement(_reactNative.Text,{style:{color:'#FFFFFF',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:356}},"+")),_react.default.createElement(_reactNative.Text,{style:{color:'#939393',fontSize:10},__source:{fileName:_jsxFileName,lineNumber:358}},'.pdf, .jpg/jpeg, .png, .doc, .xls\n\t\t\tMax file size: 5 Mb')):null,_react.default.createElement(_QModal.default,{animationIn:"slideInUp",animationOut:"slideOutDown",ref:function ref(v){_this2.modal=v;},show:showModal,style:{borderRadius:10,position:'absolute',bottom:8,left:8,right:8},width:"92%",height:165,showBackdrop:true,backToClose:true,backdropClose:true,headerContent:_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:381}}),backgroundColor:"#fff",headerStyle:{padding:0},footerStyle:{padding:0,borderTopWidth:0.5,borderTopColor:'#B4B4B4'},containerStyle:{justifyContent:'center',alignItems:'center'},buttons:[{icon:null,text:'Cancel',onPress:function onPress(){_this2.modal.close();},color:'#D82D2D',style:{borderRadius:30,flex:1,alignSelf:'center'}}],__source:{fileName:_jsxFileName,lineNumber:364}},_react.default.createElement(_reactNative.View,{style:{justifyContent:'center',alignItems:'center',flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:396}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:this.openFilePicker,style:{flex:0.4,alignItems:'center',justifyContent:'center'},__source:{fileName:_jsxFileName,lineNumber:397}},_react.default.createElement(_reactNative.Image,{style:{width:50,height:50},resizeMode:"cover",source:imageAtc,__source:{fileName:_jsxFileName,lineNumber:398}}),_react.default.createElement(_reactNative.Text,{style:{fontSize:10,color:'#606060',marginTop:5},__source:{fileName:_jsxFileName,lineNumber:406}},"Document")),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:this.openFileCamera,style:{flex:0.4,alignItems:'center',justifyContent:'center'},__source:{fileName:_jsxFileName,lineNumber:408}},_react.default.createElement(_reactNative.Image,{style:{width:50,height:50},resizeMode:"cover",source:imageCam,__source:{fileName:_jsxFileName,lineNumber:409}}),_react.default.createElement(_reactNative.Text,{style:{fontSize:10,color:'#606060',marginTop:5},__source:{fileName:_jsxFileName,lineNumber:417}},"Camera")))),_react.default.createElement(_QModal.default,{ref:function ref(v){_this2.popup=v;},style:{borderRadius:10,position:'absolute',left:16,right:16,backgroundColor:'rgba(0, 0, 0, 0)'},width:"92%",height:WINDOW.height*0.5,showBackdrop:true,backToClose:true,backdropClose:true,headerContent:_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:435}}),footerContent:_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:436}}),headerStyle:{},footerStyle:{},containerStyle:{justifyContent:'center',alignItems:'center'},buttons:[],__source:{fileName:_jsxFileName,lineNumber:421}},_react.default.createElement(_reactNative.View,{style:{justifyContent:'center',alignItems:'center',flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:442}},_react.default.createElement(_reactNative.View,{style:{marginBottom:16,width:WINDOW.width,height:WINDOW.height*0.5,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:443}},_react.default.createElement(_reactNativeTransformableImage.default,{style:{flex:1,width:WINDOW.width},source:{uri:preview.uri},__source:{fileName:_jsxFileName,lineNumber:451}}),_react.default.createElement(_QIcon.default,{name:"circle-with-cross",size:24,color:"#fff",onPress:function onPress(){return _this2.popup.close();},containerStyle:{position:'absolute',top:0,right:16},__source:{fileName:_jsxFileName,lineNumber:456}})))),_react.default.createElement(_QModalConfirm.default,{onClose:function onClose(){return _this2.setState({showConfirm:false});},show:showConfirm,contentHeader:null,headerContent:_react.default.createElement(_reactNative.Text,{style:{justifyContent:'center',alignSelf:'center',fontSize:12,color:'#000000',marginTop:8},__source:{fileName:_jsxFileName,lineNumber:474}},'Delete file?'),style:{width:270,height:115},headerStyle:{width:'100%',height:0},containerStyle:{width:'100%',height:0},containerButton:{paddingBottom:50},contentTextStyle:{color:'#000000',opacity:1},buttons:[{icon:null,text:'Cancel',onPress:function onPress(){return _this2.setState({showConfirm:false});},color:'#000000',style:{borderRadius:30,flex:0.4,alignSelf:'center',marginBottom:10},textStyle:{fontSize:14}},{icon:null,text:'Delete',onPress:function onPress(){return _this2.deleteFile(index);},backgroundColor:'#FFFFFF',color:'#D82D2D',style:{borderRadius:30,flex:0.4,alignSelf:'center',marginBottom:10},textStyle:{fontSize:14}}],__source:{fileName:_jsxFileName,lineNumber:468}}),_react.default.createElement(_QModalConfirm.default,{onClose:function onClose(){return _this2.setState({showError:false});},show:showError,contentHeader:null,headerContent:_react.default.createElement(_reactNative.Text,{style:{justifyContent:'center',alignSelf:'center',fontSize:12,color:'#000000',marginTop:8},__source:{fileName:_jsxFileName,lineNumber:535}},"Cannot delete file. "+errorMessage),style:{width:270,height:115},headerStyle:{width:'100%',height:0},containerStyle:{width:'100%',height:0},containerButton:{paddingBottom:50},contentTextStyle:{color:'#000000',opacity:1},buttons:[{icon:null,text:'Delete',onPress:function onPress(){return _this2.setState({showError:false});},backgroundColor:'#FFFFFF',color:'#000',style:{borderRadius:30,flex:0.4,alignSelf:'center',marginBottom:10},textStyle:{fontSize:14}}],__source:{fileName:_jsxFileName,lineNumber:529}}));}}]);return QsiDocumentUpload;}(_react.Component);exports.default=QsiDocumentUpload;QsiDocumentUpload.defaultProps={maxFiles:0};