Skip to content

Commit 54660c3

Browse files
authored
Major Windows refactor (#126)
This is a PR to try and align windows with iOS and Android. Callbacks and events called in a very similar way to Android, which is having a ref to the PdfView and calling through the UIManager. Not all functions from Android are implemented currently as the paradigms do not transfer.
1 parent b8dd2a3 commit 54660c3

14 files changed

+920
-104
lines changed

README.md

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -577,7 +577,7 @@ Shows the pdf `document` from the local device filesystem, or your app's assets.
577577
- Visual Studio Community 2017 or greater
578578
- git
579579
- cmake
580-
- npm
580+
- yarn
581581
- PSPDFKit for Windows.vsix (installed)
582582
- PowerShell
583583
@@ -586,16 +586,16 @@ Shows the pdf `document` from the local device filesystem, or your app's assets.
586586
Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.
587587
588588
1. Open `PowerShell` as administrator.
589-
2. Make sure `react-native-cli` is installed: `npm install -g react-native-cli`.
590-
3. Install Windows Tool for React Native: `npm install --global --production windows-build-tools`.
589+
2. Make sure `react-native-cli` is installed: `yarn global add react-native-cli`.
590+
3. Install Windows Tool for React Native: `yarn add global windows-build-tools`.
591591
4. Open `x64 Native Tools Command Prompt for VS 2017` program.
592592
5. Create the app with `react-native init --version=0.53.0 YourApp` in a location of your choice.
593593
6. Step into your newly created app folder: `cd YourApp`.
594-
7. Install the Windows helper plugin: `npm install --save-dev rnpm-plugin-windows`.
595-
8. Install `react-native-pspdfkit` from GitHub: `npm add github:PSPDFKit/react-native`.
596-
9. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`.
597-
10. Initialize the windows project: `react-native windows`.
598-
11. Install all modules for Windows: `npm install`.
594+
7. Install the Windows helper plugin: `yarn add --dev rnpm-plugin-windows`.
595+
8. Install `react-native-pspdfkit` from GitHub: `yarn add github:PSPDFKit/react-native`.
596+
9. Install all modules for Windows: `yarn install`. (Because of a [bug](https://github.com/yarnpkg/yarn/issues/2165) you may need to clean `yarn`'s cache with `yarn cache clean` before.)
597+
10. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`. (Note: On windows yarn does not link correctly, therefore any chages made in the ReactNativePSPDFKit project will have to be manually copied to the `windows` folder at the base of the repo in order to commit changes.)
598+
11. Initialize the windows project: `react-native windows`.
599599
12. Open the Visual Studio solution in `react-native\YourApp\windows`.
600600
13. Accept and install any required extensions when prompted.
601601
14. If the settings window opens, click on `Developer` and select `yes`.
@@ -673,15 +673,17 @@ to navigate the file system.
673673
674674
render() {
675675
return (
676-
<View style={styles.page}>
677-
<PSPDFKitView style={styles.pdfView} />
678-
<View style={styles.footer}>
679-
<View style={styles.button}>
680-
<Button onPress={() => PSPDFKit.OpenFile()} title="Open" />
681-
</View>
682-
<Text style={styles.version}>SDK Version : {PSPDFKit.versionString}</Text>
683-
</View>
684-
</View>
676+
<View style={styles.page}>
677+
<PSPDFKitView
678+
ref="pdfView"
679+
style={styles.pdfView} />
680+
<View style={styles.footer}>
681+
<View style={styles.button}>
682+
<Button onPress={() => PSPDFKit.OpenFilePicker()} title="Open" />
683+
</View>
684+
<Text style={styles.version}>SDK Version : {PSPDFKit.versionString}</Text>
685+
</View>
686+
</View>
685687
);
686688
}
687689
}
@@ -718,7 +720,7 @@ to navigate the file system.
718720
719721
1. Clone the repository. `git clone https://github.com/PSPDFKit/react-native.git`.
720722
2. From the command promt `cd react-native\samples\Catalog`.
721-
3. Make sure `react-native-cli` is installed: `npm install -g react-native-cli`.
723+
2. Make sure `react-native-cli` is installed: `yarn global add react-native-cli`.
722724
4. Edit `package.json` to change the version of `react-native` to `0.53.0` and refernce the react-native
723725
pspdfkit repo online.
724726
```diff
@@ -732,7 +734,7 @@ pspdfkit repo online.
732734
"react-navigation": "^1.0.3"
733735
}
734736
```
735-
5. run `npm install`.
737+
5. run `yarn install`. (Because of a [bug](https://github.com/yarnpkg/yarn/issues/2165) you may need to clean `yarn`'s cache with `yarn cache clean` before.)
736738
6. Open the UWP catalog solution in `react-native\samples\Catalog\windows`.
737739
7. Accept and install any required extensions when prompted.
738740
8. If the settings windows opens, click on `Developer` and selected `yes`.
@@ -757,10 +759,17 @@ The following constants are available on the PSPDFKit export:
757759
758760
- `versionString` (`String`) PSPDFKit version number.
759761
760-
##### `OpenFile() : void`
762+
##### `OpenFilePicker() : void`
761763
762764
Opens a file picker for the user to select a pdf from. When the user selects an item it will be displayed in the `<PSPDFKitView>`.
763765
766+
##### `Present(document : string) : void`
767+
768+
Opens a document in the available `<PSPDFKitView>`. If the element is not displayed `Present` will fail. The document has to be accessible by the application, for example needs to be located in the application assets.
769+
```javascript
770+
PSPDFKit.Present("ms-appx:///Assets/pdf/Business Report.pdf");
771+
```
772+
764773
## License
765774
766775
This project can be used for evaluation or if you have a valid PSPDFKit license.

index.windows.js

Lines changed: 158 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,166 @@
1-
// Copyright © 2018 PSPDFKit GmbH. All rights reserved.
1+
// Copyright © 2018 PSPDFKit GmbH. All rights reserved.
22
//
33
// THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
44
// AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
55
// UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
66
// This notice may not be removed from this file.
77
//
8-
import { requireNativeComponent, ViewPropTypes } from "react-native";
9-
import PropTypes from 'prop-types';
10-
11-
var iface = {
12-
name: 'PSPDFKitView',
13-
propTypes: {
14-
/**
15-
* Path to the PDF file that should be displayed.
16-
*/
17-
document: PropTypes.string,
18-
/**
19-
* Page index of the document that will be shown.
20-
*/
21-
pageIndex: PropTypes.number,
22-
/**
23-
* Controls wheter a navigation bar is created and shown or not. Defaults to showing a navigation bar (false).
24-
*/
25-
hideNavigationBar: PropTypes.bool,
26-
...ViewPropTypes
27-
},
8+
import PropTypes from "prop-types";
9+
import React from "react";
10+
import {
11+
requireNativeComponent,
12+
ViewPropTypes,
13+
findNodeHandle,
14+
UIManager
15+
} from "react-native";
16+
17+
class PSPDFKitView extends React.Component {
18+
_nextRequestId = 1;
19+
_requestMap = new Map();
20+
21+
render() {
22+
return (
23+
<RCTPSPDFKitView
24+
ref="pdfView"
25+
{...this.props}
26+
onAnnotationsChanged={this._onAnnotationsChanged}
27+
onDocumentSaved={this._onDocumentSaved}
28+
onDocumentSaveFailed={this._onDocumentSaveFailed}
29+
onDataReturned={this._onDataReturned}/>
30+
);
31+
}
32+
33+
_onAnnotationsChanged = (event) => {
34+
if (this.props.onAnnotationsChanged) {
35+
this.props.onAnnotationsChanged(event.nativeEvent);
36+
}
37+
};
38+
39+
_onDocumentSaved = (event) => {
40+
if (this.props.onDocumentSaved) {
41+
this.props.onDocumentSaved(event.nativeEvent);
42+
}
43+
};
44+
45+
_onDocumentSaveFailed = (event) => {
46+
if (this.props.onDocumentSaveFailed) {
47+
this.props.onDocumentSaveFailed(event.nativeEvent);
48+
}
49+
};
50+
51+
_onDataReturned = (event) => {
52+
let {requestId, result, error} = event.nativeEvent
53+
let promise = this._requestMap[requestId]
54+
if (result) {
55+
promise.resolve(result)
56+
} else {
57+
promise.reject(error)
58+
}
59+
this._requestMap.delete(requestId)
60+
}
61+
62+
/**
63+
* Enters the annotation creation mode, showing the annotation creation toolbar.
64+
*
65+
*/
66+
enterAnnotationCreationMode = function () {
67+
UIManager.dispatchViewManagerCommand(
68+
findNodeHandle(this.refs.pdfView),
69+
UIManager.RCTPSPDFKitView.Commands.enterAnnotationCreationMode,
70+
[]
71+
);
72+
};
73+
74+
/**
75+
* Exits the currently active mode, hiding all toolbars.
76+
*/
77+
exitCurrentlyActiveMode = function () {
78+
UIManager.dispatchViewManagerCommand(
79+
findNodeHandle(this.refs.pdfView),
80+
UIManager.RCTPSPDFKitView.Commands.exitCurrentlyActiveMode,
81+
[]
82+
);
83+
};
84+
85+
/**
86+
* Saves the currently opened document.
87+
*/
88+
saveCurrentDocument = function () {
89+
UIManager.dispatchViewManagerCommand(
90+
findNodeHandle(this.refs.pdfView),
91+
UIManager.RCTPSPDFKitView.Commands.saveCurrentDocument,
92+
[]
93+
);
94+
}
95+
96+
/**
97+
* Gets all annotations of the given type from the page.
98+
*
99+
* @param pageIndex The page to get the annotations for.
100+
*
101+
* Returns a promise resolving an array with the following structure:
102+
* {'annotations' : [instantJson]}
103+
*/
104+
getAnnotations = function (pageIndex) {
105+
let requestId = this._nextRequestId++
106+
let requestMap = this._requestMap;
107+
108+
// We create a promise here that will be resolved once onDataReturned is called.
109+
let promise = new Promise(function (resolve, reject) {
110+
requestMap[requestId] = {'resolve': resolve, 'reject': reject}
111+
})
112+
113+
UIManager.dispatchViewManagerCommand(
114+
findNodeHandle(this.refs.pdfView),
115+
UIManager.RCTPSPDFKitView.Commands.getAnnotations,
116+
[requestId, pageIndex]
117+
);
118+
119+
return promise
120+
}
121+
122+
/**
123+
* Adds a new annotation to the current document.
124+
*
125+
* @param annotation InstantJson of the annotation to add.
126+
*/
127+
addAnnotation = function (annotation) {
128+
UIManager.dispatchViewManagerCommand(
129+
findNodeHandle(this.refs.pdfView),
130+
UIManager.RCTPSPDFKitView.Commands.addAnnotation,
131+
[annotation]
132+
);
133+
}
134+
}
135+
136+
PSPDFKitView.propTypes = {
137+
/**
138+
* Path to the PDF file that should be displayed.
139+
*/
140+
document: PropTypes.string,
141+
/**
142+
* Page index of the document that will be shown.
143+
*/
144+
pageIndex: PropTypes.number,
145+
/**
146+
* Controls whether a navigation bar is created and shown or not. Defaults to showing a navigation bar (false).
147+
*/
148+
hideNavigationBar: PropTypes.bool,
149+
/**
150+
* Callback that is called when an annotation is added, changed, or removed.
151+
* Returns an object with the following structure:
152+
* {
153+
* change: "changed"|"added"|"removed",
154+
* annotations: [instantJson]
155+
* }
156+
*/
157+
onAnnotationsChanged: PropTypes.func,
158+
...ViewPropTypes
28159
};
29160

30-
module.exports = requireNativeComponent("ReactPSPDFKitView", iface);
161+
var RCTPSPDFKitView = requireNativeComponent(
162+
"RCTPSPDFKitView",
163+
PSPDFKitView,
164+
{}
165+
);
166+
module.exports = PSPDFKitView;

0 commit comments

Comments
 (0)