Merge pull request #360 from PSPDFKit/reinhard/property-inspector-sample

Add support for hiding the main toolbar

android/src/main/java/com/pspdfkit/react/ReactPdfViewManager.java

@@ -153,6 +153,11 @@ public void setShowNavigationButtonInToolbar(@NonNull final PdfView view, final
         view.setShowNavigationButtonInToolbar(showNavigationButtonInToolbar);
     }
 
+    @ReactProp(name= "hideDefaultToolbar")
+    public void setHideDefaultToolbar(@NonNull final PdfView view,final boolean hideDefaultToolbar) {
+        view.setHideDefaultToolbar(hideDefaultToolbar);
+    }
+
     @Nullable
     @Override
     public Map getExportedCustomDirectEventTypeConstants() {

android/src/main/java/com/pspdfkit/views/PdfView.java

@@ -28,6 +28,7 @@
 import com.pspdfkit.forms.TextFormElement;
 import com.pspdfkit.listeners.OnVisibilityChangedListener;
 import com.pspdfkit.listeners.SimpleDocumentListener;
+import com.pspdfkit.react.R;
 import com.pspdfkit.react.events.PdfViewAnnotationChangedEvent;
 import com.pspdfkit.react.events.PdfViewAnnotationTappedEvent;
 import com.pspdfkit.react.events.PdfViewDataReturnedEvent;
@@ -43,6 +44,7 @@
 import com.pspdfkit.ui.PdfUiFragmentBuilder;
 import com.pspdfkit.ui.search.PdfSearchView;
 import com.pspdfkit.ui.search.PdfSearchViewInline;
+import com.pspdfkit.ui.toolbar.MainToolbar;
 import com.pspdfkit.ui.toolbar.grouping.MenuItemGroupingRule;
 
 import org.json.JSONArray;
@@ -234,14 +236,36 @@ public void setMenuItemGroupingRule(@NonNull MenuItemGroupingRule groupingRule)
     public void setShowNavigationButtonInToolbar(final boolean showNavigationButtonInToolbar) {
         isNavigationButtonShown = showNavigationButtonInToolbar;
         pendingFragmentActions.add(getCurrentPdfUiFragment()
-            .observeOn(Schedulers.io())
+            .observeOn(AndroidSchedulers.mainThread())
             .subscribe(pdfUiFragment -> {
                 if (!isSearchViewShown) {
                     ((ReactPdfUiFragment) pdfUiFragment).setShowNavigationButtonInToolbar(showNavigationButtonInToolbar);
                 }
             }));
     }
 
+    public void setHideDefaultToolbar(boolean hideDefaultToolbar) {
+        pendingFragmentActions.add(getCurrentPdfUiFragment()
+            .observeOn(AndroidSchedulers.mainThread())
+            .subscribe(pdfUiFragment -> {
+                final View views = pdfUiFragment.getView();
+                if (views != null) {
+                    final ReactMainToolbar mainToolbar = views.findViewById(R.id.pspdf__toolbar_main);
+                    if (hideDefaultToolbar) {
+                        // If hiding the toolbar is requested we force the visibility to gone, this way it will never be shown.
+                        mainToolbar.setForcedVisibility(GONE);
+                    } else {
+                        // To reset we undo our forcing, and if the UI is supposed to be shown right
+                        // now we manually set the visibility to visible so it's immediately shown.
+                        mainToolbar.setForcedVisibility(null);
+                        if (pdfUiFragment.isUserInterfaceVisible()) {
+                            mainToolbar.setVisibility(VISIBLE);
+                        }
+                    }
+                }
+            }));
+    }
+
     private void setupFragment() {
         if (fragmentTag != null && configuration != null && document != null) {
             PdfUiFragment pdfFragment = (PdfUiFragment) fragmentManager.findFragmentByTag(fragmentTag);
@@ -647,7 +671,7 @@ public Maybe<PdfFragment> getActivePdfFragment() {
     }
 
     /**
-     * This returns {@link PdfFragment} as they become available. If the user changes the view configuration of the fragment is replaced for other reasons a new {@link PdfFragment} is emitted.
+     * This returns {@link PdfFragment} as they become available. If the user changes the view configuration or the fragment is replaced for other reasons a new {@link PdfFragment} is emitted.
      */
     public Observable<PdfFragment> getPdfFragment() {
         return pdfUiFragmentGetter

android/src/main/java/com/pspdfkit/views/ReactMainToolbar.java

@@ -0,0 +1,48 @@
+package com.pspdfkit.views;
+
+import android.content.Context;
+import android.util.AttributeSet;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.pspdfkit.ui.toolbar.MainToolbar;
+
+/** Custom toolbar that allows us to force a visibility. */
+public class ReactMainToolbar extends MainToolbar {
+
+    private @Nullable Integer forcedVisibility;
+
+    public ReactMainToolbar(@NonNull Context context) {
+        super(context);
+    }
+
+    public ReactMainToolbar(@NonNull Context context, @Nullable AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public ReactMainToolbar(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+
+    /**
+     * Sets a forced visibility that will override all future calls to {@link #setVisibility(int)}. The visibility will also immediately be applied.
+     *
+     * @param visibility The visibility to force or {@code null} to not force any specific visibility.
+     */
+    public void setForcedVisibility(@Nullable final Integer visibility) {
+        forcedVisibility = visibility;
+        if (forcedVisibility != null) {
+            setVisibility(forcedVisibility);
+        }
+    }
+
+    @Override
+    public void setVisibility(int visibility) {
+        if (forcedVisibility == null) {
+            super.setVisibility(visibility);
+        } else {
+            super.setVisibility(forcedVisibility);
+        }
+    }
+}

android/src/main/java/com/pspdfkit/views/ReactPdfUiFragment.java

@@ -33,7 +33,6 @@ public void performApplyConfiguration(@NonNull PdfActivityConfiguration configur
         }
     }
 
-
     /** When set to true will add a navigation arrow to the toolbar. */
     void setShowNavigationButtonInToolbar(final boolean showNavigationButtonInToolbar) {
         if (getView() == null) {

android/src/main/res/layout/pspdf__toolbar_main.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ pspdf__toolbar_main.xml
+  ~
+  ~   PSPDFKit
+  ~
+  ~   Copyright © 2014-2020 PSPDFKit GmbH. All rights reserved.
+  ~
+  ~   THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
+  ~   AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
+  ~   UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
+  ~   This notice may not be removed from this file.
+  -->
+
+<com.pspdfkit.views.ReactMainToolbar xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/pspdf__toolbar_main"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/actionBarSize"
+    android:elevation="@dimen/pspdf__toolbar_elevation"
+    android:focusable="true"
+    android:focusableInTouchMode="true"
+    app:contentInsetEnd="16dp"
+    app:contentInsetRight="16dp"
+    tools:ignore="Overdraw,UnusedAttribute" />

ios/RCTPSPDFKit/RCTPSPDFKitView.m

@@ -118,7 +118,7 @@ - (UIViewController *)pspdf_parentViewController {
 
 - (BOOL)enterAnnotationCreationMode {
   [self.pdfController setViewMode:PSPDFViewModeDocument animated:YES];
-  [self.pdfController.annotationToolbarController updateHostView:nil container:nil viewController:self.pdfController];
+  [self.pdfController.annotationToolbarController updateHostView:self container:nil viewController:self.pdfController];
   return [self.pdfController.annotationToolbarController showToolbarAnimated:YES completion:NULL];
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-pspdfkit",
-  "version": "1.28.5",
+  "version": "1.28.6",
   "description": "A React Native module for the PSPDFKit library.",
   "keywords": [
     "react native",

samples/Catalog/Catalog.android.js

@@ -50,7 +50,7 @@ const CONFIGURATION = {
   // Settings this to false will disable all annotation editing
   enableAnnotationEditing: true,
   // Only stamps and square annotations will be editable, others can not be selected or otherwise modified.
-  editableAnnotationTypes: ['Stamp', 'Square']
+  editableAnnotationTypes: ["Stamp", "Square"]
 };
 
 const examples = [
@@ -61,8 +61,9 @@ const examples = [
     action: () => {
       PSPDFKit.present("file:///android_asset/Annual Report.pdf", {})
         .then(loaded => {
-          console.log("Document was loaded successfully.")
-        }).catch(error => {
+          console.log("Document was loaded successfully.");
+        })
+        .catch(error => {
           console.log(error);
         });
       PSPDFKit.setPageIndex(3, false);
@@ -166,6 +167,17 @@ const examples = [
         component.props.navigation.push("AnnotationProcessing");
       });
     }
+  },
+  {
+    key: "item13",
+    name: "Hiding Toolbar",
+    description:
+      "Shows how to hide the main toolbar while keeping the thumbnail bar visible.",
+    action: component => {
+      extractFromAssetsIfMissing("Annual Report.pdf", function() {
+        component.props.navigation.push("HidingToolbar");
+      });
+    }
   }
 ];
 
@@ -289,7 +301,7 @@ class PdfViewScreen extends Component<{}> {
 
     return {
       // Since the PSPDFKitView provides it's own toolbar and back button we don't need a header.
-      header: null,
+      header: null
     };
   };
 
@@ -342,7 +354,7 @@ class PdfViewScreen extends Component<{}> {
           fragmentTag="PDF1"
           showNavigationButtonInToolbar={true}
           onNavigationButtonClicked={event => {
-            this.props.navigation.goBack()
+            this.props.navigation.goBack();
           }}
           menuItemGrouping={[
             "freetext",
@@ -569,7 +581,10 @@ class PdfViewInstantJsonScreen extends Component<{}> {
                     lineWidth: 5,
                     name: "my annotation",
                     lines: {
-                      intensities: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5]],
+                      intensities: [
+                        [0.5, 0.5, 0.5],
+                        [0.5, 0.5, 0.5]
+                      ],
                       points: [
                         [
                           [92.08633422851562, 101.07916259765625],
@@ -960,6 +975,74 @@ class AnnotationProcessing extends Component {
   }
 }
 
+class HidingToolbar extends Component {
+  static navigationOptions = ({ navigation }) => {
+    const params = navigation.state.params || {};
+    return {
+      title: "Hidden Toolbar",
+      headerRight: (
+        <Button
+          onPress={() => params.handleAnnotationButtonPress()}
+          title="Annotations"
+        />
+      )
+    };
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      annotationCreationActive: false,
+      annotationEditingActive: false
+    };
+  }
+
+  componentDidMount() {
+    this.props.navigation.setParams({
+      handleAnnotationButtonPress: () => {
+        if (
+          this.state.annotationCreationActive ||
+          this.state.annotationEditingActive
+        ) {
+          this.refs.pdfView.exitCurrentlyActiveMode();
+        } else {
+          this.refs.pdfView.enterAnnotationCreationMode();
+        }
+      }
+    });
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <PSPDFKitView
+          ref="pdfView"
+          document={DOCUMENT}
+          configuration={{
+            backgroundColor: processColor("lightgrey"),
+            showThumbnailBar: "scrollable",
+            // If you want to hide the toolbar it's essential to also hide the document label overlay.
+            documentLabelEnabled: false,
+            // We want to keep the thumbnail bar always visible, but the automatic mode is also supported with hideDefaultToolbar.
+            userInterfaceViewMode: "alwaysVisible"
+          }}
+          // This will just hide the toolbar, keeping the thumbnail bar visible.
+          hideDefaultToolbar={true}
+          disableAutomaticSaving={true}
+          fragmentTag="PDF1"
+          onStateChanged={event => {
+            this.setState({
+              annotationCreationActive: event.annotationCreationActive,
+              annotationEditingActive: event.annotationEditingActive
+            });
+          }}
+          style={{ flex: 1, color: pspdfkitColor }}
+        />
+      </View>
+    );
+  }
+}
+
 export default createAppContainer(
   createStackNavigator(
     {
@@ -983,6 +1066,9 @@ export default createAppContainer(
       },
       AnnotationProcessing: {
         screen: AnnotationProcessing
+      },
+      HidingToolbar: {
+        screen: HidingToolbar
       }
     },
     {