@react-native-ohos/react-native-pdf 6.7.7-rc.1

package/DoubleTapView.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import React, {Component} from 'react';
+import {
+    View,
+    PanResponder
+} from 'react-native';
+import PropTypes from 'prop-types';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+export default class DoubleTapView extends Component {
+
+    static propTypes = {
+        ...ViewPropTypes,
+        delay: PropTypes.number,
+        radius: PropTypes.number,
+        onSingleTap: PropTypes.func,
+        onDoubleTap: PropTypes.func,
+    };
+
+    static defaultProps = {
+        delay: 300,
+        radius: 50,
+        onSingleTap: () => {
+        },
+        onDoubleTap: () => {
+        },
+    };
+
+    constructor() {
+        super();
+
+        this.gestureHandlers = PanResponder.create({
+            onStartShouldSetPanResponder: (evt, gestureState) => (gestureState.numberActiveTouches === 1),
+            onStartShouldSetResponderCapture: (evt, gestureState) => (gestureState.numberActiveTouches === 1),
+            onMoveShouldSetPanResponder: (evt, gestureState) => (false),
+            onMoveShouldSetResponderCapture: (evt, gestureState) => (false),
+            onPanResponderTerminationRequest: (evt, gestureState) => false,
+            onPanResponderRelease: this.handlePanResponderRelease,
+
+        });
+
+        this.prevTouchInfo = {
+            prevTouchX: 0,
+            prevTouchY: 0,
+            prevTouchTimeStamp: 0,
+        };
+
+        this.timer = null;
+
+    }
+
+
+    distance = (x0, y0, x1, y1) => {
+        return Math.sqrt(Math.pow((x1 - x0), 2) + Math.pow((y1 - y0), 2)).toFixed(1);
+    };
+
+    isDoubleTap = (currentTouchTimeStamp, {x0, y0}) => {
+        const {prevTouchX, prevTouchY, prevTouchTimeStamp} = this.prevTouchInfo;
+        const dt = currentTouchTimeStamp - prevTouchTimeStamp;
+        const {delay, radius} = this.props;
+
+        return (prevTouchTimeStamp > 0 && dt < delay && this.distance(prevTouchX, prevTouchY, x0, y0) < radius);
+    };
+
+    handlePanResponderRelease = (evt, gestureState) => {
+
+        const currentTouchTimeStamp = Date.now();
+        const x = evt.nativeEvent.locationX;
+        const y = evt.nativeEvent.locationY; 
+
+        if (this.timer) {
+
+            if (this.isDoubleTap(currentTouchTimeStamp, gestureState)) {
+
+                clearTimeout(this.timer);
+                this.timer = null;
+                this.props.onDoubleTap();
+
+            } else {
+
+                const {prevTouchX, prevTouchY, prevTouchTimeStamp} = this.prevTouchInfo;
+                const {radius} = this.props;
+
+                // if not in radius, it's a move
+                if (this.distance(prevTouchX, prevTouchY, gestureState.x0, gestureState.y0) < radius) {
+                    this.timer = null;
+                    this.props.onSingleTap(x, y);
+                }
+
+            }
+        } else {
+            // do not count scroll gestures as taps
+            if (this.distance(0, gestureState.dx, 0, gestureState.dy) < 10) {
+
+                this.timer = setTimeout(() => {
+                    this.props.onSingleTap(x, y);
+                    this.timer = null;
+                }, this.props.delay);
+            }
+        }
+
+
+        this.prevTouchInfo = {
+            prevTouchX: gestureState.x0,
+            prevTouchY: gestureState.y0,
+            prevTouchTimeStamp: currentTouchTimeStamp,
+        };
+
+    };
+
+    render() {
+        return (
+            <View {...this.props} {...this.gestureHandlers.panHandlers}>
+                {this.props.children}
+            </View>
+        );
+    }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Wonday (@wonday.org)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PdfManager.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const PdfManagerNative = require('react-native').NativeModules.PdfManager;
+
+export default class PdfManager {
+
+    static loadFile(path, password) {
+        if (typeof path !== 'string') {
+            throw new TypeError('path must be a valid string.');
+        }
+
+        if (password === undefined) {
+            password = "";
+        }
+
+        return PdfManagerNative.loadFile(path, password);
+    }
+}

package/PdfPageView.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+'use strict';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {
+    requireNativeComponent,
+} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+export default class PdfPageView extends PureComponent {
+    _getStylePropsProps = () => {
+        const {width, height} = this.props;
+        if (width || height) {
+            return {width, height};
+        }
+        return {};
+    };
+
+    render() {
+        const {
+            style,
+            ...restProps
+        } = this.props;
+        return (
+            <PdfPageViewCustom
+                {...restProps}
+                style={[style, this._getStylePropsProps()]}
+            />
+        );
+
+    }
+}
+
+PdfPageView.propTypes = {
+    ...ViewPropTypes,
+    fileNo: PropTypes.number,
+    page: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number
+};
+
+PdfPageView.defaultProps = {
+    style: {}
+};
+
+let PdfPageViewCustom = requireNativeComponent('RCTPdfPageView', PdfPageView, {nativeOnly: {}});

package/PdfView.js

@@ -0,0 +1,417 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import React, {Component} from 'react';
+import {ScrollView, View, StyleSheet} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+import PropTypes from 'prop-types';
+
+import PdfManager from './PdfManager';
+import PdfPageView from './PdfPageView';
+import DoubleTapView from './DoubleTapView';
+import PinchZoomView from './PinchZoomView';
+import PdfViewFlatList from './PdfViewFlatList';
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 3;
+
+const VIEWABILITYCONFIG = {minimumViewTime: 500, itemVisiblePercentThreshold: 10, waitForInteraction: false};
+
+export default class PdfView extends Component {
+
+    static propTypes = {
+        ...ViewPropTypes,
+        path: PropTypes.string,
+        password: PropTypes.string,
+        scale: PropTypes.number,
+        minScale: PropTypes.number,
+        maxScale: PropTypes.number,
+        spacing: PropTypes.number,
+        fitPolicy: PropTypes.number,
+        horizontal: PropTypes.bool,
+        page: PropTypes.number,
+        currentPage: PropTypes.number,
+        singlePage: PropTypes.bool,
+        onPageSingleTap: PropTypes.func,
+        onScaleChanged: PropTypes.func,
+    };
+
+    static defaultProps = {
+        path: "",
+        password: "",
+        scale: 1,
+        minScale: MIN_SCALE,
+        maxScale: MAX_SCALE,
+        spacing: 10,
+        style: {},
+        progressContainerStyle: {},
+        fitPolicy: 2,
+        horizontal: false,
+        centerContent: false,
+        page: 1,
+        currentPage: -1,
+        enablePaging: false,
+        singlePage: false,
+        onPageSingleTap: (page, x, y) => {
+        },
+        onScaleChanged: (scale) => {
+        },
+    };
+
+    constructor(props) {
+
+        super(props);
+        this.state = {
+            pdfLoaded: false,
+            fileNo: -1,
+            numberOfPages: 0,
+            page: -1,
+            currentPage: -1,
+            pageAspectRate: 0.5,
+            pdfPageSize: {width: 0, height: 0},
+            contentContainerSize: {width: 0, height: 0},
+            scale: this.props.scale,
+            contentOffset: {x: 0, y: 0},
+            newContentOffset: {x: 0, y: 0},
+        };
+
+        this._flatList = null;
+        this._scaleTimer = null;
+        this._scrollTimer = null;
+        this._mounted = false;
+
+    }
+
+    componentDidMount() {
+        this._mounted = true;
+        PdfManager.loadFile(this.props.path, this.props.password)
+            .then((pdfInfo) => {
+                if (this._mounted) {
+                    const fileNo = pdfInfo[0];
+                    const numberOfPages = pdfInfo[1];
+                    const width = pdfInfo[2];
+                    const height = pdfInfo[3];
+                    const pageAspectRatio = height === 0 ? 1 : width / height;
+
+                    this.setState({
+                        pdfLoaded: true,
+                        fileNo,
+                        numberOfPages,
+                        pageAspectRate: pageAspectRatio,
+                        pdfPageSize: {width, height},
+                        centerContent: numberOfPages > 1 ? false : true
+                    });
+                    if (this.props.onLoadComplete) {
+                        this.props.onLoadComplete(numberOfPages, this.props.path, {width, height});
+                    }
+                }
+
+            })
+            .catch((error) => {
+                this.props.onError(error);
+            });
+
+        clearTimeout(this._scrollTimer);
+        this._scrollTimer = setTimeout(() => {
+            if (this._flatList) {
+                this._flatList.scrollToIndex({animated: false, index: this.props.page < 1 ? 0 : this.props.page - 1});
+            }
+        }, 200);
+    }
+
+    componentDidUpdate(prevProps) {
+
+        if (this.props.scale !== this.state.scale) {
+            this._onScaleChanged({
+                scale: this.props.scale / this.state.scale,
+                pageX: this.state.contentContainerSize.width / 2,
+                pageY: this.state.contentContainerSize.height / 2
+            });
+        }
+
+        if (this.props.horizontal !== prevProps.horizontal || this.props.page !== prevProps.page) {
+            let page = (this.props.page) < 1 ? 1 : this.props.page;
+            page = page > this.state.numberOfPages ? this.state.numberOfPages : page;
+
+            if (this._flatList) {
+                clearTimeout(this._scrollTimer);
+                this._scrollTimer = setTimeout(() => {
+                    this._flatList.scrollToIndex({animated: false, index: page - 1});
+                }, 200);
+            }
+        }
+
+    }
+
+    componentWillUnmount() {
+        this._mounted = false;
+        clearTimeout(this._scaleTimer);
+        clearTimeout(this._scrollTimer);
+
+    }
+
+    _keyExtractor = (item, index) => "pdf-page-" + index;
+
+    _getPageWidth = () => {
+
+        let fitPolicy = this.props.fitPolicy;
+
+        // if only one page, show whole page in center
+        if (this.state.numberOfPages === 1 || this.props.singlePage) {
+            fitPolicy = 2;
+        }
+
+
+        switch (fitPolicy) {
+            case 0:  //fit width
+                return this.state.contentContainerSize.width * this.state.scale;
+            case 1:  //fit height
+                return this.state.contentContainerSize.height * this.state.pageAspectRate * this.state.scale;
+            case 2: //fit both
+            default: {
+                if (this.state.contentContainerSize.width/this.state.contentContainerSize.height<this.state.pageAspectRate) {
+                    return this.state.contentContainerSize.width * this.state.scale;
+                } else {
+                    return this.state.contentContainerSize.height * this.state.pageAspectRate * this.state.scale;
+                }
+            }
+        }
+
+    };
+
+    _getPageHeight = () => {
+
+        let fitPolicy = this.props.fitPolicy;
+
+        // if only one page, show whole page in center
+        if (this.state.numberOfPages === 1 || this.props.singlePage) {
+            fitPolicy = 2;
+        }
+
+        switch (fitPolicy) {
+            case 0: //fit width
+                return this.state.contentContainerSize.width * (1 / this.state.pageAspectRate) * this.state.scale;
+            case 1: //fit height
+                return this.state.contentContainerSize.height * this.state.scale;
+            case 2: //fit both
+            default: {
+                if (this.state.contentContainerSize.width/this.state.contentContainerSize.height<this.state.pageAspectRate) {
+                    return this.state.contentContainerSize.width * (1 / this.state.pageAspectRate) * this.state.scale;
+                } else {
+                    return this.state.contentContainerSize.height * this.state.scale;
+                }
+            }
+        }
+
+    };
+
+    _renderSeparator = () => (
+        <View style={this.props.horizontal ? {
+            width: this.props.spacing * this.state.scale,
+            backgroundColor: 'transparent'
+        } : {
+            height: this.props.spacing * this.state.scale,
+            backgroundColor: 'transparent'
+        }}/>
+    );
+
+    _onItemSingleTap = (index, x, y) => {
+
+        this.props.onPageSingleTap(index + 1, x, y);
+
+    };
+
+    _onItemDoubleTap = (index) => {
+
+        if (this.state.scale >= this.props.maxScale) {
+            this._onScaleChanged({
+                scale: 1 / this.state.scale,
+                pageX: this.state.contentContainerSize.width / 2,
+                pageY: this.state.contentContainerSize.height / 2
+            });
+        } else {
+            this._onScaleChanged({
+                scale: 1.2,
+                pageX: this.state.contentContainerSize.width / 2,
+                pageY: this.state.contentContainerSize.height / 2
+            });
+        }
+
+    };
+
+    _onScaleChanged = (pinchInfo) => {
+
+        let newScale = pinchInfo.scale * this.state.scale;
+        newScale = newScale > this.props.maxScale ? this.props.maxScale : newScale;
+        newScale = newScale < this.props.minScale ? this.props.minScale : newScale;
+        let newContentOffset = {
+            x: (this.state.contentOffset.x + pinchInfo.pageX) * (newScale / this.state.scale) - pinchInfo.pageX,
+            y: (this.state.contentOffset.y + pinchInfo.pageY) * (newScale / this.state.scale) - pinchInfo.pageY
+        }
+        this.setState({scale: newScale, newContentOffset: newContentOffset});
+        this.props.onScaleChanged(newScale);
+
+    };
+
+    _renderItem = ({item, index}) => {
+        const pageView = (
+            <PdfPageView
+                accessible={true}
+                key={item.id}
+                fileNo={this.state.fileNo}
+                page={item.key + 1}
+                width={this._getPageWidth()}
+                height={this._getPageHeight()}
+            />
+        )
+
+        if (this.props.singlePage) {
+            return (
+                <View style={{flexDirection: this.props.horizontal ? 'row' : 'column'}} >
+                    {pageView}
+                </View>
+            )
+        }
+
+        return (
+            <DoubleTapView style={{flexDirection: this.props.horizontal ? 'row' : 'column'}}
+                           onSingleTap={(x, y) => {
+                               this._onItemSingleTap(index, x, y);
+                           }}
+                           onDoubleTap={() => {
+                               this._onItemDoubleTap(index);
+                           }}
+            >
+                {pageView}
+                {(index !== this.state.numberOfPages - 1) && this._renderSeparator()}
+            </DoubleTapView>
+        );
+
+    };
+
+    _onViewableItemsChanged = (viewableInfo) => {
+
+        for (let i = 0; i < viewableInfo.viewableItems.length; i++) {
+            this._onPageChanged(viewableInfo.viewableItems[i].index + 1, this.state.numberOfPages);
+            if (viewableInfo.viewableItems.length + viewableInfo.viewableItems[0].index < this.state.numberOfPages) break;
+        }
+
+    };
+
+    _onPageChanged = (page, numberOfPages) => {
+        if (this.props.onPageChanged && this.state.currentPage !== page) {
+            this.props.onPageChanged(page, numberOfPages);
+            this.setState({currentPage: page});
+        }
+    };
+
+
+    _getRef = (ref) => this._flatList = ref;
+
+    _getItemLayout = (data, index) => ({
+        length: this.props.horizontal ? this._getPageWidth() : this._getPageHeight(),
+        offset: ((this.props.horizontal ? this._getPageWidth() : this._getPageHeight()) + this.props.spacing * this.state.scale) * index,
+        index
+    });
+
+    _onScroll = (e) => {
+        this.setState({contentOffset: e.nativeEvent.contentOffset, newContentOffset: e.nativeEvent.contentOffset});
+    };
+
+    _onListContentSizeChange = (contentWidth, contentHeight) => {
+        if (this.state.contentOffset.x != this.state.newContentOffset.x
+            || this.state.contentOffset.y != this.state.newContentOffset.y) {
+            this._flatList.scrollToXY(this.state.newContentOffset.x, this.state.newContentOffset.y);
+        }
+    };
+
+    _renderList = () => {
+        let data = [];
+
+        if (this.props.singlePage) {
+            data[0] = {key: this.props.currentPage >= 0 ? this.props.currentPage : 0}
+        } else {
+            for (let i = 0; i < this.state.numberOfPages; i++) {
+                data[i] = {key: i};
+            }
+        }
+
+        return (
+            <PdfViewFlatList
+                ref={this._getRef}
+                style={[styles.container, this.props.style]}
+                pagingEnabled={this.props.enablePaging}
+                contentContainerStyle={[{
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }, this.props.horizontal ? {height: this.state.contentContainerSize.height * this.state.scale} : {width: this.state.contentContainerSize.width * this.state.scale}]}
+                horizontal={this.props.horizontal}
+                data={data}
+                renderItem={this._renderItem}
+                keyExtractor={this._keyExtractor}
+                windowSize={11}
+                getItemLayout={this._getItemLayout}
+                maxToRenderPerBatch={1}
+                renderScrollComponent={(props) => <ScrollView
+                    {...props}
+                    centerContent={this.state.centerContent}
+                    pinchGestureEnabled={false}
+                />}
+                initialScrollIndex={this.props.page < 1 ? 0 : this.props.page - 1}
+                onViewableItemsChanged={this._onViewableItemsChanged}
+                viewabilityConfig={VIEWABILITYCONFIG}
+                onScroll={this._onScroll}
+                onContentSizeChange={this._onListContentSizeChange}
+                scrollEnabled={!this.props.singlePage}
+            />
+        );
+
+    };
+
+    _onLayout = (event) => {
+        this.setState({
+            contentContainerSize: {
+                width: event.nativeEvent.layout.width,
+                height: event.nativeEvent.layout.height
+            }
+        });
+    };
+
+
+    render() {
+        if (this.props.singlePage) {
+            return (
+                <View
+                    style={styles.container}
+                    onLayout={this._onLayout}
+                >
+                    {this.state.pdfLoaded && this._renderList()}
+                </View>
+            )
+        }
+
+        return (
+            <PinchZoomView
+                style={styles.container}
+                onLayout={this._onLayout}
+                onScaleChanged={this._onScaleChanged}
+            >
+                {this.state.pdfLoaded && this._renderList()}
+            </PinchZoomView>
+        );
+
+    }
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});

package/PdfViewFlatList.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import {
+    FlatList,
+} from 'react-native';
+
+export default class PdfViewFlatList extends FlatList {
+    /**
+     * Scrolls to a given x, y offset, either immediately or with a smooth animation.
+     *
+     * Example:
+     *
+     * `scrollTo({x: 0, y: 0, animated: true})`
+     *
+     * Note: The weird function signature is due to the fact that, for historical reasons,
+     * the function also accepts separate arguments as an alternative to the options object.
+     * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
+     */
+    scrollToXY = (x, y) => {
+        this._listRef._scrollRef.scrollTo({x: x, y: y, animated: false});
+    }
+
+}