react-native-signature-canvas 4.5.0 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/index.js +258 -186
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -1,4 +1,11 @@
1
- import React, { useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from "react";
1
+ import React, {
2
+ useState,
3
+ useEffect,
4
+ useMemo,
5
+ useRef,
6
+ forwardRef,
7
+ useImperativeHandle,
8
+ } from "react";
2
9
  import { View, StyleSheet, ActivityIndicator } from "react-native";
3
10
 
4
11
  import htmlContent from "./h5/html";
@@ -10,203 +17,268 @@ import { WebView } from "react-native-webview";
10
17
  const styles = StyleSheet.create({
11
18
  webBg: {
12
19
  width: "100%",
13
- backgroundColor: "#FFF",
14
- flex: 1
20
+ backgroundColor: "transparent",
21
+ flex: 1,
22
+ },
23
+ loadingOverlayContainer: {
24
+ position: "absolute",
25
+ top: 0,
26
+ bottom: 0,
27
+ left: 0,
28
+ right: 0,
29
+ alignItems: "center",
30
+ justifyContent: "center",
15
31
  },
16
- loadingOverlayContainer: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, alignItems: "center", justifyContent: "center" },
17
32
  });
18
33
 
19
- const SignatureView = forwardRef(({
20
- androidHardwareAccelerationDisabled = false,
21
- autoClear = false,
22
- backgroundColor = "",
23
- bgHeight = 0,
24
- bgWidth = 0,
25
- bgSrc = null,
26
- clearText = "Clear",
27
- confirmText = "Confirm",
28
- customHtml = null,
29
- dataURL = "",
30
- descriptionText = "Sign above",
31
- dotSize = null,
32
- imageType = "",
33
- minWidth = 0.5,
34
- maxWidth = 2.5,
35
- onOK = () => {},
36
- onEmpty = () => {},
37
- onClear = () => {},
38
- onUndo=()=>{},
39
- onRedo=()=>{},
40
- onDraw=()=>{},
41
- onErase=()=>{},
42
- onGetData=()=>{},
43
- onChangePenColor=()=>{},
44
- onChangePenSize=()=>{},
45
- onBegin = () => {},
46
- onEnd = () => {},
47
- overlayHeight = 0,
48
- overlayWidth = 0,
49
- overlaySrc = null,
50
- penColor = "",
51
- rotated = false,
52
- style = null,
53
- scrollable = false,
54
- trimWhitespace = false,
55
- webStyle = "",
56
- webviewContainerStyle = null,
57
- }, ref) => {
58
- const [loading, setLoading] = useState(true);
59
- const webViewRef = useRef();
60
- const source = useMemo(() => {
61
- let injectedJavaScript = injectedSignaturePad + injectedApplication;
62
- const htmlContentValue = customHtml ? customHtml : htmlContent;
63
- injectedJavaScript = injectedJavaScript.replace(/<%autoClear%>/g, autoClear);
64
- injectedJavaScript = injectedJavaScript.replace(/<%trimWhitespace%>/g, trimWhitespace);
65
- injectedJavaScript = injectedJavaScript.replace(/<%imageType%>/g, imageType);
66
- injectedJavaScript = injectedJavaScript.replace(/<%dataURL%>/g, dataURL);
67
- injectedJavaScript = injectedJavaScript.replace(/<%penColor%>/g, penColor);
68
- injectedJavaScript = injectedJavaScript.replace(/<%backgroundColor%>/g, backgroundColor);
69
- injectedJavaScript = injectedJavaScript.replace(/<%dotSize%>/g, dotSize);
70
- injectedJavaScript = injectedJavaScript.replace(/<%minWidth%>/g, minWidth);
71
- injectedJavaScript = injectedJavaScript.replace(/<%maxWidth%>/g, maxWidth);
34
+ const SignatureView = forwardRef(
35
+ (
36
+ {
37
+ androidHardwareAccelerationDisabled = false,
38
+ autoClear = false,
39
+ backgroundColor = "",
40
+ bgHeight = 0,
41
+ bgWidth = 0,
42
+ bgSrc = null,
43
+ clearText = "Clear",
44
+ confirmText = "Confirm",
45
+ customHtml = null,
46
+ dataURL = "",
47
+ descriptionText = "Sign above",
48
+ dotSize = null,
49
+ imageType = "",
50
+ minWidth = 0.5,
51
+ maxWidth = 2.5,
52
+ onOK = () => {},
53
+ onEmpty = () => {},
54
+ onClear = () => {},
55
+ onUndo = () => {},
56
+ onRedo = () => {},
57
+ onDraw = () => {},
58
+ onErase = () => {},
59
+ onGetData = () => {},
60
+ onChangePenColor = () => {},
61
+ onChangePenSize = () => {},
62
+ onBegin = () => {},
63
+ onEnd = () => {},
64
+ overlayHeight = 0,
65
+ overlayWidth = 0,
66
+ overlaySrc = null,
67
+ penColor = "",
68
+ rotated = false,
69
+ style = null,
70
+ scrollable = false,
71
+ trimWhitespace = false,
72
+ webStyle = "",
73
+ webviewContainerStyle = null,
74
+ },
75
+ ref
76
+ ) => {
77
+ const [loading, setLoading] = useState(true);
78
+ const webViewRef = useRef();
79
+ const source = useMemo(() => {
80
+ let injectedJavaScript = injectedSignaturePad + injectedApplication;
81
+ const htmlContentValue = customHtml ? customHtml : htmlContent;
82
+ injectedJavaScript = injectedJavaScript.replace(
83
+ /<%autoClear%>/g,
84
+ autoClear
85
+ );
86
+ injectedJavaScript = injectedJavaScript.replace(
87
+ /<%trimWhitespace%>/g,
88
+ trimWhitespace
89
+ );
90
+ injectedJavaScript = injectedJavaScript.replace(
91
+ /<%imageType%>/g,
92
+ imageType
93
+ );
94
+ injectedJavaScript = injectedJavaScript.replace(/<%dataURL%>/g, dataURL);
95
+ injectedJavaScript = injectedJavaScript.replace(
96
+ /<%penColor%>/g,
97
+ penColor
98
+ );
99
+ injectedJavaScript = injectedJavaScript.replace(
100
+ /<%backgroundColor%>/g,
101
+ backgroundColor
102
+ );
103
+ injectedJavaScript = injectedJavaScript.replace(/<%dotSize%>/g, dotSize);
104
+ injectedJavaScript = injectedJavaScript.replace(
105
+ /<%minWidth%>/g,
106
+ minWidth
107
+ );
108
+ injectedJavaScript = injectedJavaScript.replace(
109
+ /<%maxWidth%>/g,
110
+ maxWidth
111
+ );
72
112
 
73
- let html = htmlContentValue(injectedJavaScript);
74
- html = html.replace(/<%bgWidth%>/g, bgWidth);
75
- html = html.replace(/<%bgHeight%>/g, bgHeight);
76
- html = html.replace(/<%bgSrc%>/g, bgSrc);
77
- html = html.replace(/<%overlayWidth%>/g, overlayWidth);
78
- html = html.replace(/<%overlayHeight%>/g, overlayHeight);
79
- html = html.replace(/<%overlaySrc%>/g, overlaySrc);
80
- html = html.replace(/<%style%>/g, webStyle);
81
- html = html.replace(/<%description%>/g, descriptionText);
82
- html = html.replace(/<%confirm%>/g, confirmText);
83
- html = html.replace(/<%clear%>/g, clearText);
84
- html = html.replace(/<%orientation%>/g, rotated);
113
+ let html = htmlContentValue(injectedJavaScript);
114
+ html = html.replace(/<%bgWidth%>/g, bgWidth);
115
+ html = html.replace(/<%bgHeight%>/g, bgHeight);
116
+ html = html.replace(/<%bgSrc%>/g, bgSrc);
117
+ html = html.replace(/<%overlayWidth%>/g, overlayWidth);
118
+ html = html.replace(/<%overlayHeight%>/g, overlayHeight);
119
+ html = html.replace(/<%overlaySrc%>/g, overlaySrc);
120
+ html = html.replace(/<%style%>/g, webStyle);
121
+ html = html.replace(/<%description%>/g, descriptionText);
122
+ html = html.replace(/<%confirm%>/g, confirmText);
123
+ html = html.replace(/<%clear%>/g, clearText);
124
+ html = html.replace(/<%orientation%>/g, rotated);
85
125
 
86
- return { html };
87
- }, [customHtml, autoClear, trimWhitespace, rotated, imageType, webStyle, descriptionText, confirmText, clearText, dataURL, bgSrc, bgWidth, bgHeight])
126
+ return { html };
127
+ }, [
128
+ customHtml,
129
+ autoClear,
130
+ trimWhitespace,
131
+ rotated,
132
+ imageType,
133
+ webStyle,
134
+ descriptionText,
135
+ confirmText,
136
+ clearText,
137
+ dataURL,
138
+ bgSrc,
139
+ bgWidth,
140
+ bgHeight,
141
+ ]);
88
142
 
89
- useEffect(()=> {
90
- if(webViewRef.current) {
91
- webViewRef.current.reload();
92
- } }, [source]);
143
+ useEffect(() => {
144
+ if (webViewRef.current) {
145
+ webViewRef.current.reload();
146
+ }
147
+ }, [source]);
93
148
 
94
- const isJson = (str)=> {
95
- try {
149
+ const isJson = (str) => {
150
+ try {
96
151
  JSON.parse(str);
97
- } catch (e) {
152
+ } catch (e) {
98
153
  return false;
99
- }
100
- return true;
101
- }
102
-
103
- const getSignature = e => {
104
- switch (e.nativeEvent.data) {
105
- case "BEGIN":
106
- onBegin();
107
- break;
108
- case "END":
109
- onEnd();
110
- break;
111
- case "EMPTY":
112
- onEmpty();
113
- break;
114
- case "CLEAR":
115
- onClear();
116
- break;
117
- case "UNDO":
118
- onUndo();
119
- break;
120
- case "REDO":
121
- onRedo();
122
- break;
123
- case "DRAW":
124
- onDraw();
125
- break;
126
- case "ERASE":
127
- onErase();
128
- break;
129
- case "CHANGE_PEN":
130
- onChangePenColor();
131
- break;
132
- case "CHANGE_PEN_SIZE":
133
- onChangePenSize();
134
- break;
135
- default:
136
- isJson(e.nativeEvent.data)? onGetData(e.nativeEvent.data): onOK(e.nativeEvent.data);
137
- }
138
- };
139
-
140
- useImperativeHandle(ref, () => ({
141
- readSignature: () => {
142
- if (webViewRef.current) {
143
- webViewRef.current.injectJavaScript("readSignature();true;");
144
- }
145
- },
146
- clearSignature: () => {
147
- if (webViewRef.current) {
148
- webViewRef.current.injectJavaScript("clearSignature();true;");
149
- }
150
- },
151
- undo: () => {
152
- if (webViewRef.current) {
153
- webViewRef.current.injectJavaScript("undo();true;");
154
- }
155
- },
156
- redo: () => {
157
- if (webViewRef.current) {
158
- webViewRef.current.injectJavaScript("redo();true;");
159
154
  }
160
- },
161
- draw: () => {
162
- if (webViewRef.current) {
163
- webViewRef.current.injectJavaScript("draw();true;");
164
- }
165
- },
166
- erase: () => {
167
- if (webViewRef.current) {
168
- webViewRef.current.injectJavaScript("erase();true;");
169
- }
170
- },
171
- changePenColor: (color) => {
172
- if (webViewRef.current) {
173
- webViewRef.current.injectJavaScript("changePenColor('"+color+"');true;");
174
- }
175
- },
176
- changePenSize: (minW, maxW) => {
177
- if (webViewRef.current) {
178
- webViewRef.current.injectJavaScript("changePenSize("+minW+','+maxW+");true;");
179
- }
180
- },
181
- getData: () => {
182
- if (webViewRef.current) {
183
- webViewRef.current.injectJavaScript("getData();true;");
155
+ return true;
156
+ };
157
+
158
+ const getSignature = (e) => {
159
+ switch (e.nativeEvent.data) {
160
+ case "BEGIN":
161
+ onBegin();
162
+ break;
163
+ case "END":
164
+ onEnd();
165
+ break;
166
+ case "EMPTY":
167
+ onEmpty();
168
+ break;
169
+ case "CLEAR":
170
+ onClear();
171
+ break;
172
+ case "UNDO":
173
+ onUndo();
174
+ break;
175
+ case "REDO":
176
+ onRedo();
177
+ break;
178
+ case "DRAW":
179
+ onDraw();
180
+ break;
181
+ case "ERASE":
182
+ onErase();
183
+ break;
184
+ case "CHANGE_PEN":
185
+ onChangePenColor();
186
+ break;
187
+ case "CHANGE_PEN_SIZE":
188
+ onChangePenSize();
189
+ break;
190
+ default:
191
+ isJson(e.nativeEvent.data)
192
+ ? onGetData(e.nativeEvent.data)
193
+ : onOK(e.nativeEvent.data);
184
194
  }
185
- }
186
- }), [webViewRef]);
195
+ };
196
+
197
+ useImperativeHandle(
198
+ ref,
199
+ () => ({
200
+ readSignature: () => {
201
+ if (webViewRef.current) {
202
+ webViewRef.current.injectJavaScript("readSignature();true;");
203
+ }
204
+ },
205
+ clearSignature: () => {
206
+ if (webViewRef.current) {
207
+ webViewRef.current.injectJavaScript("clearSignature();true;");
208
+ }
209
+ },
210
+ undo: () => {
211
+ if (webViewRef.current) {
212
+ webViewRef.current.injectJavaScript("undo();true;");
213
+ }
214
+ },
215
+ redo: () => {
216
+ if (webViewRef.current) {
217
+ webViewRef.current.injectJavaScript("redo();true;");
218
+ }
219
+ },
220
+ draw: () => {
221
+ if (webViewRef.current) {
222
+ webViewRef.current.injectJavaScript("draw();true;");
223
+ }
224
+ },
225
+ erase: () => {
226
+ if (webViewRef.current) {
227
+ webViewRef.current.injectJavaScript("erase();true;");
228
+ }
229
+ },
230
+ changePenColor: (color) => {
231
+ if (webViewRef.current) {
232
+ webViewRef.current.injectJavaScript(
233
+ "changePenColor('" + color + "');true;"
234
+ );
235
+ }
236
+ },
237
+ changePenSize: (minW, maxW) => {
238
+ if (webViewRef.current) {
239
+ webViewRef.current.injectJavaScript(
240
+ "changePenSize(" + minW + "," + maxW + ");true;"
241
+ );
242
+ }
243
+ },
244
+ getData: () => {
245
+ if (webViewRef.current) {
246
+ webViewRef.current.injectJavaScript("getData();true;");
247
+ }
248
+ },
249
+ }),
250
+ [webViewRef]
251
+ );
187
252
 
188
- const renderError = ({nativeEvent}) => console.warn("WebView error: ", nativeEvent);
253
+ const renderError = ({ nativeEvent }) =>
254
+ console.warn("WebView error: ", nativeEvent);
189
255
 
190
- return (
191
- <View style={[styles.webBg, style]}>
192
- <WebView
193
- bounces={false}
194
- style={[webviewContainerStyle]}
195
- scrollEnabled={scrollable}
196
- androidHardwareAccelerationDisabled={androidHardwareAccelerationDisabled}
197
- ref={webViewRef}
198
- useWebKit={true}
199
- source={source}
200
- onMessage={getSignature}
201
- javaScriptEnabled={true}
202
- onError={renderError}
203
- onLoadEnd={() => setLoading(false)}
204
- />
205
- {loading && <View style={styles.loadingOverlayContainer}>
206
- <ActivityIndicator />
207
- </View>}
208
- </View>
209
- );
210
- })
256
+ return (
257
+ <View style={[styles.webBg, style]}>
258
+ <WebView
259
+ bounces={false}
260
+ style={[webviewContainerStyle]}
261
+ scrollEnabled={scrollable}
262
+ androidLayerType="hardware"
263
+ androidHardwareAccelerationDisabled={
264
+ androidHardwareAccelerationDisabled
265
+ }
266
+ ref={webViewRef}
267
+ useWebKit={true}
268
+ source={source}
269
+ onMessage={getSignature}
270
+ javaScriptEnabled={true}
271
+ onError={renderError}
272
+ onLoadEnd={() => setLoading(false)}
273
+ />
274
+ {loading && (
275
+ <View style={styles.loadingOverlayContainer}>
276
+ <ActivityIndicator color={"transparent"} />
277
+ </View>
278
+ )}
279
+ </View>
280
+ );
281
+ }
282
+ );
211
283
 
212
284
  export default SignatureView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-signature-canvas",
3
- "version": "4.5.0",
3
+ "version": "4.6.0",
4
4
  "description": "React Native Signature Component based Canvas for Android && IOS && expo",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -29,6 +29,6 @@
29
29
  },
30
30
  "homepage": "https://github.com/YanYuanFE/react-native-signature-canvas#readme",
31
31
  "peerDependencies": {
32
- "react-native-webview": ">11.18.1"
32
+ "react-native-webview": ">13.3.1"
33
33
  }
34
34
  }