Re-implement Css Customization (#221)

As explained in #219 (comment) due to limitations with file permissions in UWP it was necessary to rework the CSS customization. Therefore now the viable solution is to provide a native option.

In this PR I have reverted the previous CSS work and added the option to start the PSPDFKit react native package with a Uri parameter which will be passed as the CSS resource. Within this CSS resource, it's possible to set the main colors of the toolbar. As before.

Author: nickwinder

README.md

@@ -794,6 +794,24 @@ Opens a document in the available `<PSPDFKitView>`. If the element is not displa
 PSPDFKit.Present("ms-appx:///Assets/pdf/Business Report.pdf");
 ```
 
+#### Theming support
+
+It is possible to theme/customize the PdfView with the use of a CSS file. To do this simple pass a `Uri` within the web context to the instantiated [`PSPDFKitPackage`](https://github.com/PSPDFKit/react-native/blob/master/windows/ReactNativePSPDFKit/ReactNativePSPDFKit/PSPDFKitPackage.cs#L32).
+
+To see this in action, make the following changes in [`samples/Catalog/windows/Catalog/MainReactNativeHost.cs`](https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/windows/Catalog/MainReactNativeHost.cs) and run the catalog the catalog.
+```diff
+protected override List<IReactPackage> Packages => new List<IReactPackage>
+{
+    new MainReactPackage(),
+-   new ReactNativePSPDFKit.PSPDFKitPackage(),
++   new ReactNativePSPDFKit.PSPDFKitPackage(new Uri("ms-appx-web:///Assets/css/greenTheme.css")),
+    new RNFSPackage()
+};
+```
+The code above will pass an asset held in the `Catalog` project's `Assets/css` to the web context of PSPDFKit for Windows. The file can then be used to theme the view.
+
+For more information on CSS Customization in PSPDFKit for Windows please refer to [CSS Customization](https://pspdfkit.com/guides/windows/current/customizing-the-interface/css-customization/)
+
 ## License
 
 This project can be used for evaluation or if you have a valid PSPDFKit license.  

index.windows.js

@@ -11,48 +11,22 @@ import {
   requireNativeComponent,
   ViewPropTypes,
   findNodeHandle,
-  UIManager,
-  processColor
+  UIManager
 } from "react-native";
 
 class PSPDFKitView extends React.Component {
   _nextRequestId = 1;
   _requestMap = new Map();
 
-  state = {
-    pdfStyle: {
-      highlightColor: null,
-      primaryColor: null,
-      primaryDarkColor: null
-    },
-    style: ViewPropTypes.style
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state.pdfStyle.highlightColor = processColor(props.style.highlightColor);
-    delete props.style.highlightColor;
-    this.state.pdfStyle.primaryColor = processColor(props.style.primaryColor);
-    delete props.style.primaryColor;
-    this.state.pdfStyle.primaryDarkColor = processColor(props.style.primaryDarkColor);
-    delete props.style.primaryDarkColor;
-
-    this.state.style = props.style;
-  }
-
   render() {
     return (
       <RCTPSPDFKitView
         ref="pdfView"
-        document={this.props.document}
-        pageIndex={this.props.pageIndex}
-        hideNavigationBar={this.props.hideNavigationBar}
+        {...this.props}
         onAnnotationsChanged={this._onAnnotationsChanged}
         onDataReturned={this._onDataReturned}
         onOperationResult={this._onOperationResult}
-        pdfStyle={this.state.pdfStyle}
-        style={this.state.style}/>
+      />
     );
   }
 
@@ -256,13 +230,6 @@ class PSPDFKitView extends React.Component {
   }
 }
 
-const PDFStylePropTypes = PropTypes.shape({
-  highlightColor: PropTypes.string,
-  primaryColor: PropTypes.string,
-  primaryDarkColor: PropTypes.string,
-  ...ViewPropTypes.style
-});
-
 PSPDFKitView.propTypes = {
   /**
    * Path to the PDF file that should be displayed.
@@ -285,19 +252,7 @@ PSPDFKitView.propTypes = {
    * }
    */
   onAnnotationsChanged: PropTypes.func,
-  /**
-   * Holds the standard style properties as expected plus extra pdf view style specific properties.
-   * Styles the pdf view in accordance to https://pspdfkit.com/guides/windows/current/customizing-the-interface/css-customization/
-   *
-   * Expects optional values of.
-   * {
-   *    highlightColor: PropTypes.string,  | Highlight or hover color.
-   *    primaryColor: PropTypes.string,    | Color for the main toolbar
-   *    primaryDarkColor: PropTypes.string | Color for the second toolbar
-   *    ...ViewPropTypes.style             | Standard style props
-   * }
-   */
-  style: PDFStylePropTypes
+  ...ViewPropTypes
 };
 
 const RCTPSPDFKitView = requireNativeComponent(

package-lock.json

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

package.json

@@ -15,7 +15,8 @@ import {
   Image,
   TouchableHighlight,
   NativeModules,
-  Button
+  Button,
+  Linking 
 } from "react-native";
 import {StackNavigator} from "react-navigation";
 import PSPDFKitView from "react-native-pspdfkit";
@@ -86,15 +87,15 @@ const examples = [
   {
     key: "item1",
     name: "Open assets document",
-    description: "Opens a document from your project assets folder",
+    description: "Open document from your project assets folder",
     action: component => {
       component.props.navigation.navigate("PdfView");
     }
   },
   {
     key: "item2",
     name: "Present a file from source",
-    description: "Opens a document from assets with Present",
+    description: "Open document from source",
     action: component => {
       component.props.navigation.navigate("PdfView");
       // Present can only take files loaded in the Visual studio Project's Assets. Please use RNFS.
@@ -177,20 +178,13 @@ const examples = [
   {
     key: "item8",
     name: "Custom colors",
-    description: "Supplies different colors for Pdf View Toolbar.",
+    description: "Explains how to theme your UWP react native application.",
     action: component => {
       component.props.navigation.navigate("PdfViewStyle");
     }
   }
 ];
 
-const pdfStyle = {
-  flex: 1,
-  highlightColor: "#61D800", /* Highlight or hover color. */
-  primaryColor: "red", /* Color for the main toolbar */
-  primaryDarkColor: "rgb(255, 0, 255)" /* Color for the second toolbar */
-};
-
 const styles = StyleSheet.create({
   page: {
     flex: 1,
@@ -249,7 +243,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center"
-  }
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: "white",
+  },
+  stlyeExplanation: {
+    color: "#666666",
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 50
+  },
 });
 
 class CatalogScreen extends Component<{}> {
@@ -310,7 +316,8 @@ class PdfViewScreen extends Component<{}> {
           ref="pdfView"
           style={styles.pdfView}
           // The default file to open.
-          document="ms-appx:///Assets/pdf/annualReport.pdf"/>
+          document="ms-appx:///Assets/pdf/annualReport.pdf"
+        />
         <View style={styles.footer}>
           <View style={styles.button}>
             <Button onPress={() => PSPDFKit.OpenFilePicker()} title="Open"/>
@@ -463,12 +470,21 @@ class PdfViewStyleScreen extends Component<{}> {
   render() {
     return (
       <View style={styles.page}>
-        <PSPDFKitView
-          ref="pdfView"
-          style={pdfStyle}
-          // The default file to open.
-          document="ms-appx:///Assets/pdf/annualReport.pdf"/>
+        <View style={styles.container}>
+          <Text style={styles.stlyeExplanation}>
+            Native changes are needed to customize the PdfView. Please follow the setups shown in the{" "}
+            <Text
+              style={{color: 'blue'}}
+              onPress={() => {
+                Linking.openURL('https://github.com/PSPDFKit/react-native/blob/master/README.md#theming-support')
+              }}
+            >
+              README
+            </Text>
+          </Text>
+        </View>
         <View style={styles.footer}>
+
           <Image
             source={require("./assets/logo-flat.png")}
             style={styles.logo}
@@ -482,7 +498,6 @@ class PdfViewStyleScreen extends Component<{}> {
   }
 }
 
-
 export default StackNavigator(
   {
     Catalog: {
@@ -502,7 +517,7 @@ export default StackNavigator(
     },
     PdfViewStyle: {
       screen: PdfViewStyleScreen
-    },
+    }
   },
   {
     initialRouteName: "Catalog"

samples/Catalog/Catalog.windows.js

@@ -1,6 +1,6 @@
 {
   "name": "Catalog",
-  "version": "1.23.9",
+  "version": "1.23.10",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"

samples/Catalog/package.json

@@ -0,0 +1,8 @@
+/* Main Toolbar */
+@import url("../pspdfkit/windows.css");
+
+:root {
+    --primary: #61D800; /* Hightlight or hover color. */
+    --primary-dark-1: #09AF00; /* Color for the main toolbar */
+    --primary-dark-2: #008B00; /* Color for the secondard toolbar */
+}

samples/Catalog/windows/Catalog/Assets/css/greenTheme.css

@@ -188,6 +188,7 @@
     <AppxManifest Include="Package.appxmanifest">
       <SubType>Designer</SubType>
     </AppxManifest>
+    <Content Include="Assets\css\greenTheme.css" />
     <Content Include="Assets\pdf\annualReport.pdf">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -280,4 +281,4 @@
   <Target Name="AfterBuild">
   </Target>
   -->
-</Project>
+</Project>

samples/Catalog/windows/Catalog/Catalog.csproj

@@ -1,3 +1,4 @@
+using System;
 using ReactNative;
 using ReactNative.Modules.Core;
 using ReactNative.Shell;