react-native-quicklook/QuickLookView.js at master · Liruwei/react-native-quicklook · GitHub

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
/* @flow */

import React, {
    Component,
    PropTypes,
} from 'react';
import {
    AppRegistry,
    Image,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    NativeModules,
    Platform,
    requireNativeComponent
} from 'react-native';
var QuickLook = NativeModules.QuickLook;
var QuickLookIOS = requireNativeComponent('RCTQuickLook', null);

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const styles = StyleSheet.create({
    center:{
        alignItems:'center',
        justifyContent:'center',
    },
    fill:{
        flex:1,
    },
    absolute:{
        position: 'absolute',
    },
    fillAbsolute:{
        position: 'absolute',
        top:0,
        left:0,
        right:0,
        bottom:0,
    },
    fileIcon: {
        width: 100,
        height: 100,
    },
    fileName: {
        padding: 10,
        fontWeight: 'bold',
        fontSize: 15,
    }
});


export default class QuickLookView extends React.Component{

    static defaultProps = {
        fileUrl: null
    };
    static propTypes = {
        fuleUrl: PropTypes.string
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {}
    componentDidMount() {}
    componentWillUnmount(){}

    getName(fileUrl) {
        let fileName = null;
        let temp = fileUrl.split("/");;
        if (temp.length>0) {
            fileName = temp[temp.length-1];
        }
        return fileName;
    }

    getIcon(fileUrl) {
        let fileIcon = require('./sources/none.png');
        let fileName = this.getName(fileUrl);
        if (fileName) {
            let temp = fileName.split('.');
            if (temp.length > 0) {
                let type = temp[temp.length-1];
                if (type.indexOf('doc')!==-1) {
                    fileIcon = require('./sources/doc.png');
                } else if (type.indexOf('xls')!==-1) {
                    fileIcon = require('./sources/xls.png');
                } else if (type.indexOf('ppt')!==-1) {
                    fileIcon = require('./sources/ppt.png');
                } else if (type.indexOf('pdf')!==-1) {
                    fileIcon = require('./sources/pdf.png');
                } else if (type.indexOf('txt')!==-1) {
                    fileIcon = require('./sources/txt.png');
                }
            }
        }
        return fileIcon;
    }

    openFile(fileUrl) {
        QuickLook.openFile(fileUrl);
    }

    render() {
        let {style={},fileUrl=''} = this.props;
        if (Platform.OS=='android') {
            return  <View style={[styles.fill,styles.center,style]}>
                <TouchableOpacity onPress={()=>{this.openFile(fileUrl)}}>
                    <View style={styles.center}>
                        <Image style={styles.fileIcon} source={this.getIcon(fileUrl)}/>
                        <Text style={styles.fileName}>{this.getName(fileUrl)}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        } else {
            return <QuickLookIOS {...this.props}/>
        }
    }
}