AttachmentUpdateView.js 40.4 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    Modal,
    StyleSheet, Platform, NativeModules, ActivityIndicator, Dimensions,
} from 'react-native';
import {getFooterBottom, xnBorderWidth, xnToast} from "../utils/utils";
import RNFetchBlob from "rn-fetch-blob";
import config from "../config";
import AppService from "../service/AppService";
import {DocumentPicker, DocumentPickerUtil} from "react-native-document-picker";
import ImagePicker from "react-native-image-picker";
import ImageCropPicker from "react-native-image-crop-picker";
import XnUploadLoading from "./XnUploadLoading";
import ImageViewer from "react-native-image-zoom-viewer";

let failImage = 'data:image/png;base64,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';

const options = {
    title: '选择图片',
    storageOptions: {
        skipBackup: true,
        path: 'images',
        waitUntilSaved: true,
    },
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    quality: 0.75,
    noData: true,
};

/**
 * 附件上传
 */
export default class AttachmentUpdateView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            showSelectModal: false,
            modalVisible: false,
            attachmentList: []
        };

        // 传入参数
        this.attrData = this.props.attrData;
        // json解析后的传入参数
        this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};

        this.passportId=global.passportId;
        this.businessId= this.props.businessId;
    }

    componentWillMount() {
    }

    // 打开选择遮罩
    openSelectModal() {
        this.setState({
            showSelectModal: true,
        });
    }

    // 关闭选择遮罩
    closeSelectModal() {
        this.setState({
            showSelectModal: false,
        });
    }

    setModalVisible = () => {
        this.setState({
            modalVisible: false
        })
    }

    _setAutoProgress() {
        this.setState({
            progressNum: 0,
        });
        const self = this;
        let currProgress = 0;
        this.timer = setInterval(() => {
            if (currProgress <= 80) {
                currProgress += 10;
                self.setState({
                    progressNum: self.state.progressNum + 10,
                });
            } else if (currProgress < 95) {
                currProgress += 1;
                self.setState({
                    progressNum: self.state.progressNum + 1,
                });
            } else {
                clearTimeout(this.timer);
            }
        }, 500);
    }

    _setEndProgress() {
        const self = this;
        clearTimeout(this.timer);
        self.setState({
            progressNum: 100,
        });
    }

    // ios上传本地图片
    upLoadImage() {
        const that = this;
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                console.warn('User cancelled image picker');
            } else if (response.error) {
                console.warn('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.warn('User tapped custom button: ', response.customButton);
            } else {
                ImageCropPicker.openCropper({
                    path: response.uri,
                    width: 600,
                    height: 600,
                    compressImageQuality: 0.75,
                }).then((image) => {
                    if (Number(image.size) > 5 * 1024 * 1024) {
                        xnToast('文件大小超过5M,无法上传');
                        return;
                    }
                    const file = {
                        uri: '',
                        name: 'photo',
                        type: 'image/jpeg',
                    };
                    if (Platform.OS === 'android') {
                        file.uri = image.path;
                    } else {
                        file.uri = image.path.replace('file://', '');
                    }
                    console.log(global.passport, '+++++++++++++++++++++++');
                    that.setState({
                        showSelectModal: false,
                        isLoading: true,
                    });
                    that._setAutoProgress();
                    AppService.uploadImage(file).then((rep) => {
                        if (!!rep.url && rep.url.length > 0) {
                            AppService.uploadbyfileid({
                                fileId: rep.id,
                                businessId: this.businessId,
                                businessType:this.attrData.type=='PICTURE'? "WORKFLOW":'TEMP_TASK_ATTACHMENT',
                                businessCategory:this.attrData.type=='PICTURE'? "COMMON":'TEMP_TASK',
                            }).then((response) => {
                                that._setEndProgress();
                                that.setState({
                                    isLoading: false,
                                }, () => {
                                    const item= response.attachment;
                                    const attachmentList= that.state.attachmentList||[];
                                    attachmentList.push({
                                        filePath: item.filePath,
                                        type: that.getAttachmentType(item.displayName),
                                        //displayName: item.displayName,
                                        filename : item.displayName.substring(0, item.displayName.lastIndexOf(".")),
                                        fileSize :  rep.fileSize,
                                        id:this.attrData.type=='PICTURE'?rep.id:item.id
                                    });
                                    that.attrData.value = JSON.stringify( attachmentList );
                                    that.setState({})
                                });
                            }).catch((err) => {
                                that.setState({
                                    isLoading: false,
                                });
                                xnToast(err.message);
                            });
                        } else {
                            that.setState({
                                isLoading: false,
                            });
                        }
                    }).catch((err) => {
                        that.setState(    {
                            isLoading: false,
                        });
                        xnToast(err.message);
                    });
                    // let fileName = image.path.substring(image.path.lastIndexOf('/') + 1);
                    //
                    // AppService.getAccess({name: fileName}).then((data) => {
                    //     if (data.message) {
                    //         xnToast(data.message);
                    //         return;
                    //     }
                    //     if (data.errors.length > 0) {
                    //         xnToast(data.errors[0].message);
                    //     } else {
                    //         NativeModules.system.simpleUpload(data.accessKeyId, data.accessKeySecret, data.securityToken, data.info.endpoint, data.info.bucket, fileName, file.uri).then((res) => {
                    //             that._setEndProgress();
                    //             that.setState({
                    //                 isLoading: false,
                    //             });
                    //
                    //             const attachmentList = that.state.attachmentList||[];
                    //             attachmentList.push({
                    //                 filePath: res,
                    //                 type: that.getAttachmentType(res),
                    //                 displayName: fileName,
                    //                 filename : fileName,
                    //                 fileSize :  0
                    //             });
                    //
                    //             this.state.item.value = JSON.stringify( attachmentList );
                    //             that.setState({
                    //                 item:null
                    //             });
                    //
                    //         }).catch((error) => {
                    //             that.setState({
                    //                 isLoading: false,
                    //             });
                    //             xnToast(err.message);
                    //         })
                    //     }
                    // }).catch((err) => {
                    //     that.setState(    {
                    //         isLoading: false,
                    //     });
                    //     xnToast(err.message);
                    // });
                });
            }
        });
    }

    upLoadFile () {
        const _this = this;
        if (Platform.OS === 'android') {
            console.log('upload', '------------android------------');

            // 安卓上传文件
            const FilePickerManager = require('NativeModules').FilePickerManager;
            FilePickerManager.showFilePicker(null, (res) => {
                console.log('Response = ', res);
                if (res.didCancel) {
                    console.log('User cancelled file picker');
                } else if (res.error) {
                    console.log('FilePickerManager Error: ', res.error);
                } else {
                    if (Number(res.fileSize) >= 5 * 1024 * 1024) {
                        xnToast('文件大小超过5M,无法上传');
                        return;
                    }
                    if (res.path && res.path.length > 0) {
                        const ext = res.path.substring(res.path.lastIndexOf('.') + 1).toLowerCase();
                        if (ext.toLowerCase() == 'pdf' || ext.toLowerCase() == 'docx' || ext.toLowerCase() == 'doc' || ext.toLowerCase() == 'rar' || ext.toLowerCase() == 'zip' || ext.toLowerCase() == 'txt'
                            || ext.toLowerCase() == 'ppt' || ext.toLowerCase() == 'xls' || ext.toLowerCase() == 'xlsx' || ext.toLowerCase() == 'jpg' || ext.toLowerCase() == 'jpeg' || ext.toLowerCase() == 'png') {
                        } else {
                            xnToast('暂不支持该格式,无法上传,文件类型支持pdf,docx,doc,rar,zip,txt,ppt,xls,xlsx,jpg,jpeg,png');
                            return;
                        }
                    } else {
                        xnToast('暂不支持该格式,无法上传,文件类型支持pdf,docx,doc,rar,zip,txt,ppt,xls,xlsx,jpg,jpeg,png');
                        return;
                    }
                    const file = {
                        uri: '',
                        name: 'ATTACHMENT',
                        type: 'file',
                    };
                    _this.setState({
                        showSelectModal: false,
                        progressNum: 0,
                        isLoading: true,
                    });

                    RNFetchBlob.fetch('POST', `${config.uploadUrl}?passportId=`+_this.passportId, {
                        // Authorization : "Bearer access-token",
                        //  otherHeader : "foo",
                        'Content-Type': 'multipart/form-data',
                    }, [
                        { name: 'File', filename: res.fileName, type: 'ATTACHMENT', data: RNFetchBlob.wrap(res.path) }, // RNFetchBlob.wrap(response.path), File:file
                        { name: 'FileName', data: res.fileName },
                        { name: 'Type', data: 'ATTACHMENT' },
                        { name: 'Ext', data: res.path ? res.path.substring(res.path.lastIndexOf('.') + 1) : 'tmp' },

                    ])
                        .uploadProgress((written, total) => {
                            _this.setState({
                                progressNum: Math.floor(written / total * 100),
                            });
                            console.log('uploaded', written / total);
                        })
                        .then((resp) => {
                            console.log(JSON.stringify(resp), '------------上传成功------------');
                            let  file=JSON.parse(JSON.parse(JSON.stringify(resp)).data);

                            AppService.uploadbyfileid({
                                fileId: file.id,
                                businessId: _this.businessId,
                                businessType:_this.attrData.type=='PICTURE'? "WORKFLOW":'TEMP_TASK_ATTACHMENT',
                                businessCategory:_this.attrData.type=='PICTURE'? "COMMON":'TEMP_TASK',
                            }).then((response) => {
                                _this._setEndProgress();
                                _this.setState({
                                    isLoading: false,
                                }, () => {
                                    const item= response.attachment;
                                    const attachmentList= _this.state.attachmentList||[];
                                    attachmentList.push({
                                        filePath: item.filePath,
                                        type: _this.getAttachmentType(item.displayName),
                                        //displayName: item.displayName,
                                        filename : item.displayName.substring(0, item.displayName.lastIndexOf(".")),
                                        fileSize :  file.fileSize,
                                        id:_this.attrData.type=='PICTURE'?file.id:item.id
                                    });
                                    _this.attrData.value = JSON.stringify( attachmentList );
                                    _this.setState({})
                                });
                            }).catch((err) => {
                                _this.setState({
                                    isLoading: false,
                                });
                                xnToast(err.message);
                            });
                        })
                        .catch((err) => {
                            _this.setState({
                                isLoading: false,
                            });
                        });
                }
            });
        } else {
            console.log('upload', '------------ios------------');

            DocumentPicker.show({
                filetype: [__IOS__ ? DocumentPickerUtil.allFiles() : 'public.content'],
            }, (error, res) => {
                if (res.fileSize >= 5 * 1024 * 1024) {
                    xnToast('文件大小超过5M,无法上传');
                    return;
                }
                if (res.fileName && res.fileName.length > 0) {
                    const ext = res.fileName.substring(res.fileName.lastIndexOf('.') + 1).toLowerCase();
                    if (ext.toLowerCase() == 'pdf' || ext.toLowerCase() == 'docx' || ext.toLowerCase() == 'doc' || ext.toLowerCase() == 'rar' || ext.toLowerCase() == 'zip' || ext.toLowerCase() == 'txt'
                        || ext.toLowerCase() == 'ppt' || ext.toLowerCase() == 'xls' || ext.toLowerCase() == 'xlsx' || ext.toLowerCase() == 'jpg' || ext.toLowerCase() == 'jpeg' || ext.toLowerCase() == 'png') {
                    } else {
                        xnToast('暂不支持该格式,无法上传,文件类型支持pdf,docx,doc,rar,zip,txt,ppt,xls,xlsx,jpg,jpeg,png');
                        return;
                    }
                } else {
                    xnToast('暂不支持该格式,无法上传,文件类型支持pdf,docx,doc,rar,zip,txt,ppt,xls,xlsx,jpg,jpeg,png');
                    return;
                }
                _this.setState({
                    showSelectModal: false,
                    isLoading: true,
                });
                _this._setAutoProgress();

                const  fun = async function () {
                    console.warn(JSON.stringify(res));
                    console.warn(JSON.stringify(res));
                    const file = {
                        uri: res.uri,
                        name: 'ATTACHMENT',
                        type: res.type,
                    };
                    const body = new FormData();
                    body.append('File', file);
                    body.append('Type', 'ATTACHMENT');
                    body.append('Ext', res.fileName ? res.fileName.substring(res.fileName.lastIndexOf('.') + 1) : 'tmp');
                    body.append('FileName', 'FileName');

                    const options = {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        },
                        body,
                    };
                    const resp = await fetch(`${config.uploadUrl}?passportId=`+_this.passportId, options);
                    const text = await resp.text();
                    console.warn('RESP:', text);
                    const json = JSON.parse(text);
                    // 如果请求失败
                    if (resp.status !== 200) {
                        _this.setState({
                            isLoading: false,
                        });
                        throw new ResponseError(json.message, resp.status, json);
                    } else {
                        _this._setEndProgress();
                        AppService.uploadbyfileid({
                            fileId: json.id,
                            businessId: _this.businessId,
                            businessType:_this.attrData.type=='PICTURE'? "WORKFLOW":'TEMP_TASK_ATTACHMENT',
                            businessCategory:_this.attrData.type=='PICTURE'? "COMMON":'TEMP_TASK',
                        }).then((response) => {
                            _this._setEndProgress();
                            setTimeout(function () {
                                _this.setState({
                                    isLoading: false,
                                }, () => {
                                    const item= response.attachment;
                                    const attachmentList= _this.state.attachmentList||[];
                                    attachmentList.push({
                                        filePath: item.filePath,
                                        type: _this.getAttachmentType(item.displayName),
                                        //displayName: item.displayName,
                                        filename : item.displayName.substring(0, item.displayName.lastIndexOf(".")),
                                        fileSize :  json.fileSize,
                                        id:_this.attrData.type=='PICTURE'?json.id:item.id
                                    });
                                    _this.attrData.value = JSON.stringify( attachmentList );
                                    _this.setState({})
                                });
                            }, 100);
                        }).catch((err) => {
                            _this.setState({
                                isLoading: false,
                            });
                            xnToast(err.message);
                        });
                    }
                };

            });
        }
    }

    viewImg = (type, filePath, fileName, size, imageList, attr, index) => {
        let _this = this;
        if (type == "img") {
            let images = [];
            images.push({"url": filePath})
            _this.setState({
                images: images,
                imagesIndex: index || 0,
                modalVisible: true
            })
        } else {
            NativeModules.system.downlaodFiles(fileName, filePath, size + "")
        }
    }

    _renderAttachmentList = (v, i) => {
        return (
            <View style={styles.attachmentsItemLayout} key={i}>
                <TouchableOpacity style={styles.attachmentsItemBox} activeOpacity={1} onPress={() => {

                    this.viewImg(v.type, v.filePath, v.filename, v.fileSize)
                }}>
                    <View style={styles.attachmentsItemBoxImg}>
                        {v.type != "img" && v.type == "folder" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/other.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "xls" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/excle.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "doc" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/word.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "ppt" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/ppt.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "txt" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/txt.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "pdf" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/pdf.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "zip" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/rar.png')}
                               resizeMode="contain"></Image>}
                        {v.type != "img" && v.type == "other" &&
                        <Image style={styles.attachmentsItemImage} source={require('../img/other.png')}
                               resizeMode="contain"></Image>}
                        {v.type == "img" && <Image style={styles.attachmentsItemImage}
                                                   source={{uri: v.filePath + "?x-oss-process=image/resize,m_lfit,w_100,h_100"}}
                                                   resizeMode="contain"></Image>}
                    </View>
                    <View style={styles.attachmentsItemName}>
                        <Text style={styles.attachmentsItemNameInfo} numberOfLines={1} ellipsizeMode='tail'>{v.filename}</Text>
                    </View>
                </TouchableOpacity>
            </View>

        )
    };

    getAttachmentType = (str) => {
        var input = "";
        if (str) {
            input = str.substring(str.lastIndexOf(".") + 1);
        } else {
            input = str;
        }
        switch (input) {
            case "folder":
                input = "folder";
                break;
            case "xlsx":
            case "xls":
                input = "xls";
                break;
            case "docx":
            case "doc":
                input = "doc";
                break;
            case "pptx":
            case "ppt":
                input = "ppt";
                break;
            case "txt":
                input = "txt";
                break;
            case "pdf":
                input = "pdf";
                break;
            case "zip":
            case "rar":
                input = "zip";
                break;
            case "jpeg":
            case "jpg":
            case "png":
            case "gif":
            case "bmp":
                input = "img";
                break;
            default:
                input = "other";
                break;
        }
        return input;
    }

    render() {
        let {name, code, type, description, isRequired, isPreview, value} = this.attrData;

        // fileType all=全部|picture=图片|video=视频|audio=音频|excel|ppt|word|pdf|txt
        // multiUpload 是否允许多文件选择
        let {buttonText, fileType, maxFileSize, showTips, multiUpload} = this.extendData;

        return (
            <View style={{paddingLeft:15,backgroundColor:'#fff',paddingTop:10}}>
                <View style={{flexDirection:'row'}}>
                    {isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
                    {isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
                    <Text style={{ fontSize: 17, color: "#000", }}>{name ||''}:</Text>
                </View>
                <View style={{flexDirection: "row", flexWrap: "wrap", paddingTop: 10}}>
                    {value && value.length > 0 && JSON.parse(value).map((v, i) => this._renderAttachmentList(v, i))}
                    <View style={styles.attachmentsItemLayout}>
                        <TouchableOpacity
                            style={styles.attachmentsItemBox}
                            activeOpacity={1}
                            onPress={() => {
                                this.state.attachmentList = JSON.parse(this.attrData.value?this.attrData.value:'[]')||[];
                                Platform.OS === 'android' ? this.upLoadFile() : this.openSelectModal();
                            }}
                        >
                            <View style={styles.attachmentsItemBoxImg}>
                                <Image style={styles.attachmentsItemImageAdd} source={require('../img/add-icon.png')}
                                       resizeMode="contain"></Image>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>

                <Modal
                    animationType="none"
                    transparent
                    visible={this.state.showSelectModal}
                    onRequestClose={() => {}}
                >
                    <View style={styles.modalWrap}>
                        <View style={styles.outerContainer}>
                            <TouchableOpacity style={styles.innerRow} onPress={() => this.upLoadImage()}>
                                <Text style={{ fontSize: 16, color: '#666666' }}>本地相册</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.innerRow} onPress={() => this.upLoadFile()}>
                                <Text style={{ fontSize: 16, color: '#666666' }}>iCloud</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.innerRow,{marginTop:5}]} onPress={() => this.closeSelectModal()}>
                                <Text style={{ fontSize: 16, color: '#6B6D75' }}>取消</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
                <Modal animationType={"slide"} transparent={true} visible={this.state.modalVisible}
                       onRequestClose={() => {
                           this.setModalVisible();
                       }}>
                    <ImageViewer imageUrls={this.state.images} loadingRender={() => {
                        return <ActivityIndicator/>
                    }} saveToLocalByLongPress={false} failImageSource={{
                        url: failImage,
                        width: Dimensions.get("window").width / 2,
                        height: Dimensions.get("window").width * 7 / 20
                    }}/>
                    <TouchableOpacity style={styles.imgCloseBox} onPress={() => {
                        this.setModalVisible()
                    }}>
                        <Image style={styles.imgClose} source={require('../img/delete.png')} resizeMode="contain"/>
                    </TouchableOpacity>
                </Modal>
                {/*{this.state.isLoading && <XnUploadLoading progressNum={this.state.progressNum}/>}*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    attachmentsItemName: {
        height: 20,
        width: 50,
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
    },
    attachmentsItemNameInfo: {
        fontSize: 10,
        color: "#333333",
        textAlign: "center",
        paddingLeft: 3,
        paddingRight: 3,
        lineHeight: 15,
        height: 15,
    },
    attachmentsItemBox: {
        //height: 70,
        width: 50,
    },
    attachmentsItemLayout: {
        width: 50,
        //height: 70,
        marginLeft: 10,
        marginBottom: 10,
        justifyContent: "center",
        flexDirection: "row",
    },
    attachmentsItemBoxImg: {
        height: 50,
        width: 50,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 3,
        borderColor: "#ddd",
        borderStyle: "solid",
        borderWidth: xnBorderWidth(),
    },
    attachmentsItemImageAdd: {
        height: 12,
        width: 12,
    },
    attachmentsItemImage: {
        height: 49,
        width: 49,
    },
    modalWrap: {
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        position: 'absolute',
        left: 0,
        top: 0,
    },
    innerRow: {
        height:50,
        borderBottomColor:"#ddd",
        borderBottomWidth:1,
        justifyContent:"center",
        alignItems:"center",
        backgroundColor: '#fff',
    },
    outerContainer: {
        width: '100%',
        height: 'auto',
        position: 'absolute',
        left: 0,
        bottom: 0,
        paddingBottom: getFooterBottom()
    },
});