Moved backgroundColor setting to signaturePad library as opposed to c…

…anvas.
fielded · Jun 14, 2016 · 3e9dd95 · 3e9dd95
1 parent 60e237b
commit 3e9dd95
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/index.js b/index.js
@@ -21,6 +21,7 @@ class SignaturePad extends Component {
     onError: PropTypes.func,
     style: View.propTypes.style,
     penColor: PropTypes.string,
+    exportBackgroundColor: PropTypes.string,
   };
 
   static defaultProps = {
@@ -36,8 +37,11 @@ class SignaturePad extends Component {
     super(props);
     this.state = {base64DataUrl: null};
     const { backgroundColor } = StyleSheet.flatten(props.style);
-    var injectedJavaScript = injectedExecuteNativeFunction + injectedErrorHandler + injectedSignaturePad + injectedApplication(props.penColor);
-    var html = htmlContent(injectedJavaScript, backgroundColor);
+    var injectedJavaScript = injectedExecuteNativeFunction
+      + injectedErrorHandler
+      + injectedSignaturePad
+      + injectedApplication(props.penColor, backgroundColor);
+    var html = htmlContent(injectedJavaScript);
     this.source = {html}; //We don't use WebView's injectedJavaScript because on Android, the WebView re-injects the JavaScript upon every url change. Given that we use url changes to communicate signature changes to the React Native app, the JS is re-injected every time a stroke is drawn.
   }
 

diff --git a/injectedHtml/index.js b/injectedHtml/index.js
@@ -1,4 +1,4 @@
-var content = (script, backgroundColor) =>
+var content = script =>
   `<html>
     <style>
     *
@@ -19,7 +19,7 @@ var content = (script, backgroundColor) =>
 
     </style>
     <body>
-      <canvas style="background-color: ${backgroundColor || 'rgb(255, 255, 255)'}; margin-left: 0; margin-top: 0;"></canvas>
+      <canvas style="margin-left: 0; margin-top: 0;"></canvas>
       <script>
         ${script}
       </script>

diff --git a/injectedJavaScript/application.js b/injectedJavaScript/application.js
@@ -1,4 +1,4 @@
-var content = penColor => `
+var content = (penColor, backgroundColor) => `
 
   var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
     /*We're rotating by 90% -> Flip X and Y*/
@@ -24,6 +24,7 @@ var content = penColor => `
     var enableSignaturePadFunctionality = function () {
       var signaturePad = new SignaturePad(signaturePadCanvas, {
         penColor: '${penColor || 'black'}',
+        backgroundColor: '${backgroundColor || 'white'}',
         onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
       });
       /* signaturePad.translateMouseCoordinates = function (point) {