react-native-signature-canvas 4.6.1 → 4.7.1
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.
- package/README.md +39 -37
- package/h5/html.js +1 -1
- package/index.d.ts +2 -0
- package/index.js +9 -2
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -50,43 +50,45 @@ import SignatureScreen from 'react-native-signature-canvas';
|
|
|
50
50
|
|
|
51
51
|
---
|
|
52
52
|
|
|
53
|
-
| Prop |
|
|
54
|
-
|
|
55
|
-
| androidHardwareAccelerationDisabled |
|
|
56
|
-
| autoClear |
|
|
57
|
-
| backgroundColor |
|
|
58
|
-
| bgHeight |
|
|
59
|
-
| bgWidth |
|
|
60
|
-
| bgSrc |
|
|
61
|
-
| clearText |
|
|
62
|
-
| confirmText |
|
|
63
|
-
| customHtml | `(injectedJavaScript: string) => string` | html string that lets you modify things like the layout or elements
|
|
64
|
-
| dataURL |
|
|
65
|
-
| descriptionText |
|
|
66
|
-
| dotSize |
|
|
67
|
-
| imageType |
|
|
68
|
-
| minWidth |
|
|
69
|
-
| maxWidth |
|
|
70
|
-
| onOK |
|
|
71
|
-
| onEmpty |
|
|
72
|
-
| onClear |
|
|
73
|
-
|onGetData
|
|
74
|
-
| onBegin |
|
|
75
|
-
| onEnd |
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
53
|
+
| Prop | Type | Description |
|
|
54
|
+
|:------------------------------------|:----------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
55
|
+
| androidHardwareAccelerationDisabled | `boolean` | androidHardwareAccelerationDisabled for react-native-webview. Default is false |
|
|
56
|
+
| autoClear | `boolean` | should auto clear the signature after clicking the Confirm button |
|
|
57
|
+
| backgroundColor | `string` | default is "rgba(255,255,255,0)" (_transparent_), background color of the canvas |
|
|
58
|
+
| bgHeight | `number` | height of the background image |
|
|
59
|
+
| bgWidth | `number` | width of the background image |
|
|
60
|
+
| bgSrc | `string` | background image source uri (_url_) |
|
|
61
|
+
| clearText | `string` | clear button text |
|
|
62
|
+
| confirmText | `string` | save button text |
|
|
63
|
+
| customHtml | `(injectedJavaScript: string) => string` | html string that lets you modify things like the layout or elements |
|
|
64
|
+
| dataURL | `string` | default is "", Base64 string, draws saved signature from dataURL. |
|
|
65
|
+
| descriptionText | `string` | description text for signature |
|
|
66
|
+
| dotSize | `number` | radius of a single dot _(not stroke width)_ |
|
|
67
|
+
| imageType | `string` | "image/png" (_default_), "image/jpeg"、"image/svg+xml", imageType of exported signature |
|
|
68
|
+
| minWidth | `number` | minimum width of a line. Defaults to 0.5 |
|
|
69
|
+
| maxWidth | `number` | maximum width of a line. Defaults to 2.5 |
|
|
70
|
+
| onOK | `function` | callback function after saving non-empty signature |
|
|
71
|
+
| onEmpty | `function` | callback function after trying to save an empty signature |
|
|
72
|
+
| onClear | `function` | callback function after clearing the signature |
|
|
73
|
+
| onGetData | `function` | callback function when getData() is called
|
|
74
|
+
| onBegin | `function` | callback function when a new stroke is started |
|
|
75
|
+
| onEnd | `function` | callback function when the stroke has ended |
|
|
76
|
+
| onLoadEnd | `function` | callback function when the webview canvas load ended |
|
|
77
|
+
| onUndo | `function` | callback function when undo() is called |
|
|
78
|
+
| onRedo | `function` | callback function when redo() is called |
|
|
79
|
+
| onDraw | `function` | callback function when drawing is enabled |
|
|
80
|
+
| onErase | `function` | callback function when erasing is enabled |
|
|
81
|
+
| onChangePenColor | `function` | callback function after changing the pen color |
|
|
82
|
+
| onChangePenSize | `function` | callback function after changing the pen size
|
|
83
|
+
| overlayHeight | `number` | height of the overlay image |
|
|
84
|
+
| overlayWidth | `number` | width of the overlay image |
|
|
85
|
+
| overlaySrc | `string` | overlay image source uri (url) _must be .png with a transparent background_
|
|
86
|
+
| penColor | `string` | default is "black", color of pen |
|
|
87
|
+
| rotated | `boolean` | rotate signature pad 90 degrees |
|
|
88
|
+
| style | `object` | style of wrapper view |
|
|
89
|
+
| trimWhitespace | `boolean` | trim image whitespace |
|
|
90
|
+
| webStyle | `string` | webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |
|
|
91
|
+
| androidLayerType | `none、software、hardware` | Sets the android webview layerType |
|
|
90
92
|
|
|
91
93
|
## Methods
|
|
92
94
|
|
package/h5/html.js
CHANGED
|
@@ -3,7 +3,7 @@ export default (script) =>
|
|
|
3
3
|
<html lang="en">
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8">
|
|
6
|
-
<title>Signature
|
|
6
|
+
<title>Signature Canvas</title>
|
|
7
7
|
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
|
|
8
8
|
|
|
9
9
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
package/index.d.ts
CHANGED
|
@@ -36,6 +36,7 @@ declare module "react-native-signature-canvas" {
|
|
|
36
36
|
onChangePenSize?: () => void;
|
|
37
37
|
onBegin?: () => void;
|
|
38
38
|
onEnd?: () => void;
|
|
39
|
+
onLoadEnd?: () => void;
|
|
39
40
|
overlayHeight?: number;
|
|
40
41
|
overlayWidth?: number;
|
|
41
42
|
overlaySrc?: string;
|
|
@@ -46,6 +47,7 @@ declare module "react-native-signature-canvas" {
|
|
|
46
47
|
trimWhitespace?: boolean;
|
|
47
48
|
webStyle?: string;
|
|
48
49
|
webviewContainerStyle?: StyleProp<ViewStyle>;
|
|
50
|
+
androidLayerType?: "none" | "software" | "hardware";
|
|
49
51
|
}
|
|
50
52
|
|
|
51
53
|
export type SignatureViewRef = {
|
package/index.js
CHANGED
|
@@ -61,6 +61,7 @@ const SignatureView = forwardRef(
|
|
|
61
61
|
onChangePenSize = () => {},
|
|
62
62
|
onBegin = () => {},
|
|
63
63
|
onEnd = () => {},
|
|
64
|
+
onLoadEnd = () => {},
|
|
64
65
|
overlayHeight = 0,
|
|
65
66
|
overlayWidth = 0,
|
|
66
67
|
overlaySrc = null,
|
|
@@ -71,6 +72,7 @@ const SignatureView = forwardRef(
|
|
|
71
72
|
trimWhitespace = false,
|
|
72
73
|
webStyle = "",
|
|
73
74
|
webviewContainerStyle = null,
|
|
75
|
+
androidLayerType = "hardware",
|
|
74
76
|
},
|
|
75
77
|
ref
|
|
76
78
|
) => {
|
|
@@ -253,13 +255,18 @@ const SignatureView = forwardRef(
|
|
|
253
255
|
const renderError = ({ nativeEvent }) =>
|
|
254
256
|
console.warn("WebView error: ", nativeEvent);
|
|
255
257
|
|
|
258
|
+
const handleLoadEnd = () => {
|
|
259
|
+
setLoading(false);
|
|
260
|
+
onLoadEnd();
|
|
261
|
+
}
|
|
262
|
+
|
|
256
263
|
return (
|
|
257
264
|
<View style={[styles.webBg, style]}>
|
|
258
265
|
<WebView
|
|
259
266
|
bounces={false}
|
|
260
267
|
style={[webviewContainerStyle]}
|
|
261
268
|
scrollEnabled={scrollable}
|
|
262
|
-
androidLayerType=
|
|
269
|
+
androidLayerType={androidLayerType}
|
|
263
270
|
androidHardwareAccelerationDisabled={
|
|
264
271
|
androidHardwareAccelerationDisabled
|
|
265
272
|
}
|
|
@@ -269,7 +276,7 @@ const SignatureView = forwardRef(
|
|
|
269
276
|
onMessage={getSignature}
|
|
270
277
|
javaScriptEnabled={true}
|
|
271
278
|
onError={renderError}
|
|
272
|
-
onLoadEnd={
|
|
279
|
+
onLoadEnd={handleLoadEnd}
|
|
273
280
|
/>
|
|
274
281
|
{loading && (
|
|
275
282
|
<View style={styles.loadingOverlayContainer}>
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-signature-canvas",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.1",
|
|
4
4
|
"description": "React Native Signature Component based Canvas for Android && IOS && expo",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"publish": "npm publish",
|
|
8
7
|
"genlog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
|
|
9
8
|
"postversion": "git push --follow-tags"
|
|
10
9
|
},
|