From 39a5970c4ab94a9cd1b36c266431f5567f07c1de Mon Sep 17 00:00:00 2001 From: Rad Azzouz Date: Mon, 13 Apr 2020 11:37:59 -0400 Subject: [PATCH 1/3] Add Javascript API to customize the font picker on iOS --- index.js | 99 +++--- ios/RCTPSPDFKit/RCTPSPDFKitView.h | 3 + ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m | 85 +++++ samples/Catalog/Catalog.ios.js | 412 +++++++++++++---------- 4 files changed, 378 insertions(+), 221 deletions(-) diff --git a/index.js b/index.js index f1536056..c41b7873 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,7 @@ import { Platform, findNodeHandle, NativeModules, - UIManager + UIManager, } from "react-native"; class PSPDFKitView extends React.Component { @@ -23,7 +23,7 @@ class PSPDFKitView extends React.Component { render() { if (Platform.OS === "ios" || Platform.OS === "android") { const onCloseButtonPressedHandler = this.props.onCloseButtonPressed - ? event => { + ? (event) => { this.props.onCloseButtonPressed(event.nativeEvent); } : null; @@ -47,49 +47,49 @@ class PSPDFKitView extends React.Component { } } - _onStateChanged = event => { + _onStateChanged = (event) => { if (this.props.onStateChanged) { this.props.onStateChanged(event.nativeEvent); } }; - _onDocumentSaved = event => { + _onDocumentSaved = (event) => { if (this.props.onDocumentSaved) { this.props.onDocumentSaved(event.nativeEvent); } }; - _onDocumentSaveFailed = event => { + _onDocumentSaveFailed = (event) => { if (this.props.onDocumentSaveFailed) { this.props.onDocumentSaveFailed(event.nativeEvent); } }; - _onDocumentLoadFailed = event => { + _onDocumentLoadFailed = (event) => { if (this.props.onDocumentLoadFailed) { this.props.onDocumentLoadFailed(event.nativeEvent); } }; - _onAnnotationTapped = event => { + _onAnnotationTapped = (event) => { if (this.props.onAnnotationTapped) { this.props.onAnnotationTapped(event.nativeEvent); } }; - _onAnnotationsChanged = event => { + _onAnnotationsChanged = (event) => { if (this.props.onAnnotationsChanged) { this.props.onAnnotationsChanged(event.nativeEvent); } }; - _onNavigationButtonClicked = event => { + _onNavigationButtonClicked = (event) => { if (this.props.onNavigationButtonClicked) { this.props.onNavigationButtonClicked(event.nativeEvent); } }; - _onDataReturned = event => { + _onDataReturned = (event) => { let { requestId, result, error } = event.nativeEvent; let promise = this._requestMap[requestId]; if (result != undefined) { @@ -103,7 +103,7 @@ class PSPDFKitView extends React.Component { /** * Enters the annotation creation mode, showing the annotation creation toolbar. */ - enterAnnotationCreationMode = function() { + enterAnnotationCreationMode = function () { if (Platform.OS === "android") { UIManager.dispatchViewManagerCommand( findNodeHandle(this.refs.pdfView), @@ -121,7 +121,7 @@ class PSPDFKitView extends React.Component { /** * Exits the currently active mode, hiding all toolbars. */ - exitCurrentlyActiveMode = function() { + exitCurrentlyActiveMode = function () { if (Platform.OS === "android") { UIManager.dispatchViewManagerCommand( findNodeHandle(this.refs.pdfView), @@ -141,13 +141,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to true if the document was saved, and false otherwise. */ - saveCurrentDocument = function() { + saveCurrentDocument = function () { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -175,13 +175,13 @@ class PSPDFKitView extends React.Component { * Returns a promise resolving an array with the following structure: * {'annotations' : [instantJson]} */ - getAnnotations = function(pageIndex, type) { + getAnnotations = function (pageIndex, type) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -208,13 +208,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to true if the annotation was added. Otherwise, returns false if an error has occurred. */ - addAnnotation = function(annotation) { + addAnnotation = function (annotation) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -240,13 +240,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to true if the annotation was removed. Otherwise, returns false if the annotation couldn't be found. */ - removeAnnotation = function(annotation) { + removeAnnotation = function (annotation) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -270,13 +270,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to document instant json (https://pspdfkit.com/guides/android/current/importing-exporting/instant-json/#instant-document-json-api-a56628). */ - getAllUnsavedAnnotations = function() { + getAllUnsavedAnnotations = function () { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -303,13 +303,13 @@ class PSPDFKitView extends React.Component { * Returns a promise resolving an array with the following structure: * {'annotations' : [instantJson]} */ - getAllAnnotations = function(type) { + getAllAnnotations = function (type) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -336,13 +336,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to true if the annotation was added. */ - addAnnotations = function(annotations) { + addAnnotations = function (annotations) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -369,13 +369,13 @@ class PSPDFKitView extends React.Component { * Returns a promise resolving a dictionary with the following structure: * {'formElement' : value} or {'error' : 'Failed to get the form field value.'} */ - getFormFieldValue = function(fullyQualifiedName) { + getFormFieldValue = function (fullyQualifiedName) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -403,13 +403,13 @@ class PSPDFKitView extends React.Component { * * Returns a promise resolving to true if the value was set, and false otherwise. */ - setFormFieldValue = function(fullyQualifiedName, value) { + setFormFieldValue = function (fullyQualifiedName, value) { if (Platform.OS === "android") { let requestId = this._nextRequestId++; let requestMap = this._requestMap; // We create a promise here that will be resolved once onDataReturned is called. - let promise = new Promise(function(resolve, reject) { + let promise = new Promise(function (resolve, reject) { requestMap[requestId] = { resolve: resolve, reject: reject }; }); @@ -439,7 +439,7 @@ class PSPDFKitView extends React.Component { * * @platform ios */ - setLeftBarButtonItems = function(items, viewMode, animated) { + setLeftBarButtonItems = function (items, viewMode, animated) { if (Platform.OS === "ios") { NativeModules.PSPDFKitViewManager.setLeftBarButtonItems( items, @@ -458,7 +458,7 @@ class PSPDFKitView extends React.Component { * ['outlineButtonItem', 'searchButtonItem'] or a dictionary with the following error {'error' : 'Failed to get the left bar button items.'} * @platform ios */ - getLeftBarButtonItemsForViewMode = function(viewMode) { + getLeftBarButtonItemsForViewMode = function (viewMode) { if (Platform.OS === "ios") { return NativeModules.PSPDFKitViewManager.getLeftBarButtonItemsForViewMode( viewMode, @@ -476,7 +476,7 @@ class PSPDFKitView extends React.Component { * * @platform ios */ - setRightBarButtonItems = function(items, viewMode, animated) { + setRightBarButtonItems = function (items, viewMode, animated) { if (Platform.OS === "ios") { NativeModules.PSPDFKitViewManager.setRightBarButtonItems( items, @@ -495,7 +495,7 @@ class PSPDFKitView extends React.Component { * ['annotationButtonItem', 'documentEditorButtonItem'] or a dictionary with the following error {'error' : 'Failed to get the right bar button items.'} * @platform ios */ - getRightBarButtonItemsForViewMode = function(viewMode) { + getRightBarButtonItemsForViewMode = function (viewMode) { if (Platform.OS === "ios") { return NativeModules.PSPDFKitViewManager.getRightBarButtonItemsForViewMode( viewMode, @@ -504,7 +504,7 @@ class PSPDFKitView extends React.Component { } }; - _getViewManagerConfig = viewManagerName => { + _getViewManagerConfig = (viewManagerName) => { const version = NativeModules.PlatformConstants.reactNativeVersion.minor; if (version >= 58) { return UIManager.getViewManagerConfig(viewManagerName); @@ -658,7 +658,30 @@ PSPDFKitView.propTypes = { * * @platform android */ - onNavigationButtonClicked: PropTypes.func + onNavigationButtonClicked: PropTypes.func, + /** + * availableFontNames: Can be used to specfiy the available font names in the font picker. + * Note: You need to set the desired font family names as `UIFontDescriptor`. See https://developer.apple.com/documentation/uikit/uifontdescriptor?language=objc + * See `CustomFontPicker` in https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/Catalog.ios.js + * + * @platform ios + */ + availableFontNames: PropTypes.array, + /** + * selectedFontName: Can be used to specfiy the current selected font in the font picker. + * Note: You need to set the desired font family name as `UIFontDescriptor`. See https://developer.apple.com/documentation/uikit/uifontdescriptor?language=objc + * See `CustomFontPicker` in https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/Catalog.ios.js + * + * @platform ios + */ + selectedFontName: PropTypes.string, + /** + * showDownloadableFonts: Can be used to show or hide the downloadable fonts section in the font picker. Defaults to showing a the downloadable fonts (true). + * See `CustomFontPicker` in https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/Catalog.ios.js + * + * @platform ios + */ + showDownloadableFonts: PropTypes.bool, }; if (Platform.OS === "ios" || Platform.OS === "android") { @@ -674,8 +697,8 @@ if (Platform.OS === "ios" || Platform.OS === "android") { accessibilityLiveRegion: true, importantForAccessibility: true, onLayout: true, - nativeID: true - } + nativeID: true, + }, } ); module.exports = PSPDFKitView; diff --git a/ios/RCTPSPDFKit/RCTPSPDFKitView.h b/ios/RCTPSPDFKit/RCTPSPDFKitView.h index 546d96a8..530dd5ff 100644 --- a/ios/RCTPSPDFKit/RCTPSPDFKitView.h +++ b/ios/RCTPSPDFKit/RCTPSPDFKitView.h @@ -30,6 +30,9 @@ NS_ASSUME_NONNULL_BEGIN @property (nonatomic, copy) RCTBubblingEventBlock onAnnotationTapped; @property (nonatomic, copy) RCTBubblingEventBlock onAnnotationsChanged; @property (nonatomic, copy) RCTBubblingEventBlock onStateChanged; +@property (nonatomic, copy, nullable) NSArray *availableFontNames; +@property (nonatomic, copy, nullable) NSString *selectedFontName; +@property (nonatomic) BOOL showDownloadableFonts; /// Annotation Toolbar - (BOOL)enterAnnotationCreationMode; diff --git a/ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m b/ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m index 40e2a66b..fe29bcc2 100644 --- a/ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m +++ b/ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m @@ -19,6 +19,20 @@ @import PSPDFKit; @import PSPDFKitUI; +// Static variables to allow communication between the React Native View Props and the custom font picker view controller. +static NSString *staticSelectedFontName; +static NSArray*staticAvailableFontNames; + +/** Defaults to YES. + + @see https://pspdfkit.com/api/ios/Classes/PSPDFFontPickerViewController.html#/c:objc(cs)PSPDFFontPickerViewController(py)showDownloadableFonts + */ +static BOOL staticShowDownloadableFonts = YES; + +// Custom font picker subclass to allow customizations. +@interface CustomFontPickerViewController : PSPDFFontPickerViewController +@end + @implementation RCTPSPDFKitViewManager RCT_EXPORT_MODULE() @@ -107,6 +121,42 @@ @implementation RCTPSPDFKitViewManager RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTBubblingEventBlock) +RCT_CUSTOM_VIEW_PROPERTY(availableFontNames, NSArray, RCTPSPDFKitView) { + if (json && [RCTConvert NSArray:json]) { + view.availableFontNames = [RCTConvert NSArray:json]; + staticAvailableFontNames = view.availableFontNames; + + // We use a subclassed font picker view controller to customize it. + [view.pdfController updateConfigurationWithoutReloadingWithBuilder:^(PSPDFConfigurationBuilder * _Nonnull builder) { + [builder overrideClass:PSPDFFontPickerViewController.class withClass:CustomFontPickerViewController.class]; + }]; + } +} + +RCT_CUSTOM_VIEW_PROPERTY(selectedFontName, NSString, RCTPSPDFKitView) { + if (json && [RCTConvert NSString:json]) { + view.selectedFontName = [RCTConvert NSString:json]; + staticSelectedFontName = view.selectedFontName; + + // We use a subclassed font picker view controller to customize it. + [view.pdfController updateConfigurationWithoutReloadingWithBuilder:^(PSPDFConfigurationBuilder * _Nonnull builder) { + [builder overrideClass:PSPDFFontPickerViewController.class withClass:CustomFontPickerViewController.class]; + }]; + } +} + +RCT_CUSTOM_VIEW_PROPERTY(showDownloadableFonts, BOOL, RCTPSPDFKitView) { + if (json) { + view.showDownloadableFonts = [RCTConvert BOOL:json]; + staticShowDownloadableFonts = view.showDownloadableFonts; + + // We use a subclassed font picker view controller to customize it. + [view.pdfController updateConfigurationWithoutReloadingWithBuilder:^(PSPDFConfigurationBuilder * _Nonnull builder) { + [builder overrideClass:PSPDFFontPickerViewController.class withClass:CustomFontPickerViewController.class]; + }]; + } +} + RCT_EXPORT_METHOD(enterAnnotationCreationMode:(nonnull NSNumber *)reactTag resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { dispatch_async(dispatch_get_main_queue(), ^{ RCTPSPDFKitView *component = (RCTPSPDFKitView *)[self.bridge.uiManager viewForReactTag:reactTag]; @@ -288,3 +338,38 @@ - (UIView *)view { } @end + +@implementation CustomFontPickerViewController + +- (NSArray *)customFontFamilyDescriptors { + NSMutableArray *fontFamilyDescription = [NSMutableArray array]; + for (NSString *fontName in staticAvailableFontNames) { + [fontFamilyDescription addObject:[[UIFontDescriptor alloc] initWithFontAttributes:@{UIFontDescriptorNameAttribute: fontName}]]; + } + + return fontFamilyDescription; +} + +- (UIFont *)customSelectedFont { + // We bailout early if the passed selected font name is nil. + if (!staticSelectedFontName) { + return nil; + } + UIFontDescriptor *fontDescriptor = [[UIFontDescriptor alloc] initWithFontAttributes:@{UIFontDescriptorNameAttribute: staticSelectedFontName}]; + return [UIFont fontWithDescriptor:fontDescriptor size:12.0]; +} + +- (instancetype)initWithFontFamilyDescriptors:(NSArray *)fontFamilyDescriptors { + // Override the default font family descriptors. + fontFamilyDescriptors = [self customFontFamilyDescriptors]; + return [super initWithFontFamilyDescriptors:fontFamilyDescriptors]; +} + +-(void)viewWillAppear:(BOOL)animated { + [super viewWillAppear:animated]; + + // Customize the font picker before it appears. + self.showDownloadableFonts = staticShowDownloadableFonts; + self.selectedFont = [self customSelectedFont]; +} +@end diff --git a/samples/Catalog/Catalog.ios.js b/samples/Catalog/Catalog.ios.js index 884c27a4..4de854aa 100644 --- a/samples/Catalog/Catalog.ios.js +++ b/samples/Catalog/Catalog.ios.js @@ -18,7 +18,7 @@ import { NativeModules, processColor, Modal, - Dimensions + Dimensions, } from "react-native"; import { createStackNavigator, createAppContainer } from "react-navigation"; const RNFS = require("react-native-fs"); @@ -26,7 +26,7 @@ const RNFS = require("react-native-fs"); import PSPDFKitView from "react-native-pspdfkit"; const PSPDFKit = NativeModules.PSPDFKit; -PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE").then(result => { +PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE").then((result) => { if (result) { console.log("Successfully set the license key."); } else { @@ -43,14 +43,14 @@ const examples = [ name: "Open document using resource path", description: "Open document from your resource bundle with relative path.", action: () => { - PSPDFKit.present("PDFs/Annual Report.pdf", {}).then(result => { + PSPDFKit.present("PDFs/Annual Report.pdf", {}).then((result) => { if (result) { console.log("Successfully presented document."); } else { console.log(error); } }); - } + }, }, { key: "item2", @@ -64,20 +64,20 @@ const examples = [ const src = RNFS.MainBundlePath + "/PDFs/" + filename; RNFS.exists(path) - .then(exists => { + .then((exists) => { if (!exists) { return RNFS.copyFile(src, path); } }) .then(() => { - PSPDFKit.present(path, {}).then(result => { + PSPDFKit.present(path, {}).then((result) => { if (result) { console.log("Successfully presented document."); } else { console.log(error); } }); - PSPDFKit.setPageIndex(3, false).then(result => { + PSPDFKit.setPageIndex(3, false).then((result) => { if (result) { console.log("Successfully set the page index."); } else { @@ -85,10 +85,10 @@ const examples = [ } }); }) - .catch(err => { + .catch((err) => { console.log(err.message, err.code); }); - } + }, }, { key: "item3", @@ -103,83 +103,83 @@ const examples = [ pageTransition: "scrollContinuous", showPageLabels: false, showDocumentLabel: true, - inlineSearch: true - }).then(result => { + inlineSearch: true, + }).then((result) => { if (result) { console.log("Successfully presented document."); } else { console.log(error); } }); - } + }, }, { key: "item4", name: "PDF View Component", description: "Show how to use the PSPDFKitView component with Navigator.", - action: component => { + action: (component) => { component.props.navigation.push("ConfiguredPDFViewComponent"); - } + }, }, { key: "item5", name: "Event Listeners", description: "Show how to use the listeners exposed by PSPDFKitView component.", - action: component => { + action: (component) => { component.props.navigation.push("EventListeners"); - } + }, }, { key: "item6", name: "Change Pages Buttons", description: "Adds a toolbar at the bottom with buttons to change pages.", - action: component => { + action: (component) => { component.props.navigation.push("ChangePages"); - } + }, }, { key: "item7", name: "Enter and Exit the Annotation Creation Mode", description: "Adds a toolbar at the bottom with a button to toggle the annotation toolbar.", - action: component => { + action: (component) => { component.props.navigation.push("AnnotationCreationMode"); - } + }, }, { key: "item8", name: "Manual Save", description: "Adds a toolbar at the bottom with a Save button and disables automatic saving.", - action: component => { + action: (component) => { component.props.navigation.push("ManualSave"); - } + }, }, { key: "item9", name: "Split PDF", description: "Show two PDFs side by side by using PSPDFKitView components.", - action: component => { + action: (component) => { component.props.navigation.navigate("SplitPDF"); - } + }, }, { key: "item10", name: "Programmatic Annotations", description: "Shows how to get and add new annotations using Instant JSON.", - action: component => { + action: (component) => { component.props.navigation.push("ProgrammaticAnnotations"); - } + }, }, { key: "item11", name: "Programmatic Form Filling", description: "Shows how to get the value of a form element and how to programmatically fill forms.", - action: component => { + action: (component) => { component.props.navigation.push("ProgrammaticFormFilling"); - } + }, }, { key: "item12", @@ -189,7 +189,7 @@ const examples = [ action: () => { console.log(PSPDFKit); console.log(PSPDFKit.versionString); - } + }, }, { key: "item13", @@ -204,38 +204,47 @@ const examples = [ sharingConfigurations: [ { annotationOptions: ["flatten"], - pageSelectionOptions: ["all", "annotated"] - } - ] + pageSelectionOptions: ["all", "annotated"], + }, + ], }); - } + }, }, { key: "item14", name: "Customize the Toolbar", description: "Shows how to customize the buttons in the toolbar.", - action: component => { + action: (component) => { component.props.navigation.push("ToolbarCustomization"); - } + }, }, { key: "item15", name: "Annotation Processing", description: "Shows how to embed, flatten, remove, and print annotations, then present the newly processed document.", - action: component => { + action: (component) => { component.props.navigation.push("AnnotationProcessing"); - } + }, }, { key: "item16", name: "Hiding Toolbar", description: "Shows how to hide the main toolbar while keeping the thumbnail bar visible.", - action: component => { + action: (component) => { component.props.navigation.push("HidingToolbar"); - } - } + }, + }, + { + key: "item17", + name: "Custom Font Picker", + description: + "Shows how to customize the font picker for free text annotations.", + action: (component) => { + component.props.navigation.push("CustomFontPicker"); + }, + }, ]; class SplitPDF extends Component { @@ -251,7 +260,7 @@ class SplitPDF extends Component { style={{ flex: 1, flexDirection: layoutDirection, - justifyContent: "center" + justifyContent: "center", }} onLayout={this._onLayout} > @@ -259,7 +268,7 @@ class SplitPDF extends Component { document={"PDFs/Annual Report.pdf"} configuration={{ backgroundColor: processColor("lightgrey"), - showThumbnailBar: "scrollable" + showThumbnailBar: "scrollable", }} pageIndex={4} style={{ flex: 1, color: pspdfkitColor }} @@ -269,7 +278,7 @@ class SplitPDF extends Component { configuration={{ pageTransition: "scrollContinuous", pageScrollDirection: "vertical", - pageMode: "single" + pageMode: "single", }} style={{ flex: 1, color: "#9932CC" }} /> @@ -284,7 +293,7 @@ class SplitPDF extends Component { return width > 450 ? "row" : "column"; }; - _onLayout = event => { + _onLayout = (event) => { let { width, height } = event.nativeEvent.layout; this.setState({ dimensions: { width, height } }); }; @@ -301,7 +310,7 @@ class ConfiguredPDFViewComponent extends Component { showThumbnailBar: "scrubberBar", showDocumentLabel: false, useParentNavigationBar: false, - allowToolbarTitleChange: false + allowToolbarTitleChange: false, }} toolbarTitle={"Custom Title"} style={{ flex: 1, color: pspdfkitColor }} @@ -319,11 +328,11 @@ class EventListeners extends Component { document={"PDFs/Annual Report.pdf"} configuration={{ backgroundColor: processColor("lightgrey"), - showThumbnailBar: "scrollable" + showThumbnailBar: "scrollable", }} style={{ flex: 1, color: pspdfkitColor }} // Event Listeners - onAnnotationsChanged={event => { + onAnnotationsChanged={(event) => { if (event["error"]) { alert(event["error"]); } else { @@ -335,14 +344,14 @@ class EventListeners extends Component { ); } }} - onAnnotationTapped={event => { + onAnnotationTapped={(event) => { if (event["error"]) { alert(event["error"]); } else { alert("Tapped on Annotation: " + JSON.stringify(event)); } }} - onDocumentSaved={event => { + onDocumentSaved={(event) => { if (event["error"]) { alert(event["error"]); } else { @@ -360,7 +369,7 @@ class ChangePages extends Component { super(props); this.state = { currentPageIndex: 0, - pageCount: 0 + pageCount: 0, }; } @@ -371,14 +380,14 @@ class ChangePages extends Component { document={"PDFs/Annual Report.pdf"} configuration={{ backgroundColor: processColor("lightgrey"), - showThumbnailBar: "scrollable" + showThumbnailBar: "scrollable", }} pageIndex={this.state.currentPageIndex} style={{ flex: 1, color: pspdfkitColor }} - onStateChanged={event => { + onStateChanged={(event) => { this.setState({ currentPageIndex: event.currentPageIndex, - pageCount: event.pageCount + pageCount: event.pageCount, }); }} /> @@ -387,7 +396,7 @@ class ChangePages extends Component { flexDirection: "row", height: 60, alignItems: "center", - padding: 10 + padding: 10, }} > @@ -399,9 +408,9 @@ class ChangePages extends Component {