Skip to content

Commit

Permalink
Re-implement Css Customization (#221)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
nickwinder authored May 7, 2019
1 parent fec925d commit b2b0e17
Show file tree
Hide file tree
Showing 14 changed files with 91 additions and 155 deletions.
18 changes: 18 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
53 changes: 4 additions & 49 deletions index.windows.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}/>
/>
);
}

Expand Down Expand Up @@ -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.
Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
55 changes: 35 additions & 20 deletions samples/Catalog/Catalog.windows.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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<{}> {
Expand Down Expand Up @@ -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"/>
Expand Down Expand Up @@ -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}
Expand All @@ -482,7 +498,6 @@ class PdfViewStyleScreen extends Component<{}> {
}
}


export default StackNavigator(
{
Catalog: {
Expand All @@ -502,7 +517,7 @@ export default StackNavigator(
},
PdfViewStyle: {
screen: PdfViewStyleScreen
},
}
},
{
initialRouteName: "Catalog"
Expand Down
2 changes: 1 addition & 1 deletion samples/Catalog/package.json
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
8 changes: 8 additions & 0 deletions samples/Catalog/windows/Catalog/Assets/css/greenTheme.css
Original file line number Diff line number Diff line change
@@ -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 */
}
3 changes: 2 additions & 1 deletion samples/Catalog/windows/Catalog/Catalog.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -280,4 +281,4 @@
<Target Name="AfterBuild">
</Target>
-->
</Project>
</Project>
1 change: 1 addition & 0 deletions samples/Catalog/windows/Catalog/MainReactNativeHost.cs
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
using System;
using ReactNative;
using ReactNative.Modules.Core;
using ReactNative.Shell;
Expand Down

This file was deleted.

23 changes: 0 additions & 23 deletions windows/ReactNativePSPDFKit/ReactNativePSPDFKit/ColorUtils.cs

This file was deleted.

16 changes: 16 additions & 0 deletions windows/ReactNativePSPDFKit/ReactNativePSPDFKit/PSPDFKitPackage.cs
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,22 @@ public class PSPDFKitPackage : IReactPackage
{
private readonly PSPDFKitViewManger _pspdfkitViewManger = new PSPDFKitViewManger();

/// <summary>
/// Creates a PSPDFKit package with the default settings.
/// </summary>
public PSPDFKitPackage()
{
}

/// <summary>
/// Creates a PSPDFKit package with a theming css.
/// <param name="cssResource">CSS theming file.</param>
/// </summary>
public PSPDFKitPackage(Uri cssResource)
{
_pspdfkitViewManger.PdfViewPage.Pdfview.Css = cssResource;
}

/// <summary>
/// Creates the PSPDFKitModule native modules to register with the react
/// instance.
Expand Down
Loading

0 comments on commit b2b0e17

Please sign in to comment.