@herca/rn-kit 0.1.97 → 0.1.99
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { useRef } from 'react';
|
|
4
|
-
import { StyleSheet,
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
5
5
|
import SignatureCanvas from 'react-native-signature-canvas';
|
|
6
|
-
import Icon from "../Icon/index.js";
|
|
7
6
|
import Button from "../Button/Button.js";
|
|
8
7
|
import Color from "../Color/Color.js";
|
|
8
|
+
import Icon from "../Icon/index.js";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
const Drawing = ({
|
|
11
11
|
onChange,
|
|
@@ -14,6 +14,11 @@ const Drawing = ({
|
|
|
14
14
|
dataURL
|
|
15
15
|
}) => {
|
|
16
16
|
const ref = useRef(null);
|
|
17
|
+
const [internalDataURL, setInternalDataURL] = useState(null);
|
|
18
|
+
const [stepCount, setStepCount] = useState(0);
|
|
19
|
+
const [undoCount, setUndoCount] = useState(0);
|
|
20
|
+
const canUndo = dataURL ? stepCount - undoCount > 1 : stepCount - undoCount > 0;
|
|
21
|
+
const canRedo = undoCount > 0;
|
|
17
22
|
const handleSignature = signature => {
|
|
18
23
|
if (signature && onChange) {
|
|
19
24
|
onChange(signature);
|
|
@@ -29,6 +34,8 @@ const Drawing = ({
|
|
|
29
34
|
console.error('Signature pad error:', error);
|
|
30
35
|
};
|
|
31
36
|
const handleEnd = () => {
|
|
37
|
+
setStepCount(prev => prev + 1);
|
|
38
|
+
setUndoCount(0);
|
|
32
39
|
refreshSignature();
|
|
33
40
|
if (onEnd) {
|
|
34
41
|
onEnd();
|
|
@@ -40,19 +47,33 @@ const Drawing = ({
|
|
|
40
47
|
}
|
|
41
48
|
};
|
|
42
49
|
const undo = () => {
|
|
50
|
+
if (!canUndo) return;
|
|
43
51
|
ref.current?.undo();
|
|
52
|
+
setUndoCount(prev => prev + 1);
|
|
44
53
|
refreshSignature();
|
|
45
54
|
};
|
|
46
55
|
const redo = () => {
|
|
56
|
+
if (!canRedo) return;
|
|
47
57
|
ref.current?.redo();
|
|
58
|
+
setUndoCount(prev => prev - 1);
|
|
48
59
|
refreshSignature();
|
|
49
60
|
};
|
|
50
61
|
const clear = () => {
|
|
51
62
|
ref.current?.clearSignature();
|
|
52
63
|
if (onChange) {
|
|
53
64
|
onChange(null);
|
|
65
|
+
setInternalDataURL('');
|
|
54
66
|
}
|
|
67
|
+
setStepCount(0);
|
|
68
|
+
setUndoCount(0);
|
|
55
69
|
};
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
onChange?.(dataURL);
|
|
72
|
+
setInternalDataURL(dataURL);
|
|
73
|
+
setStepCount(dataURL ? 1 : 0);
|
|
74
|
+
setUndoCount(0);
|
|
75
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
76
|
+
}, [dataURL]);
|
|
56
77
|
return /*#__PURE__*/_jsxs(View, {
|
|
57
78
|
style: styles.container,
|
|
58
79
|
children: [/*#__PURE__*/_jsx(SignatureCanvas, {
|
|
@@ -77,18 +98,22 @@ const Drawing = ({
|
|
|
77
98
|
cacheEnabled: true,
|
|
78
99
|
androidLayerType: 'hardware'
|
|
79
100
|
},
|
|
80
|
-
dataURL:
|
|
101
|
+
dataURL: internalDataURL
|
|
81
102
|
}), /*#__PURE__*/_jsxs(View, {
|
|
82
103
|
style: styles.footerConteiner,
|
|
83
104
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
84
105
|
style: styles.actionButtonContainer,
|
|
85
106
|
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
|
|
86
107
|
onPress: undo,
|
|
108
|
+
disabled: !canUndo,
|
|
109
|
+
style: !canUndo && styles.disabledButton,
|
|
87
110
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
88
111
|
name: "ArrowBackAlt"
|
|
89
112
|
})
|
|
90
113
|
}), /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
91
114
|
onPress: redo,
|
|
115
|
+
disabled: !canRedo,
|
|
116
|
+
style: !canRedo && styles.disabledButton,
|
|
92
117
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
93
118
|
name: "ArrowForwardAlt"
|
|
94
119
|
})
|
|
@@ -117,6 +142,9 @@ const styles = StyleSheet.create({
|
|
|
117
142
|
flexDirection: 'row',
|
|
118
143
|
gap: 10
|
|
119
144
|
},
|
|
145
|
+
disabledButton: {
|
|
146
|
+
opacity: 0.3
|
|
147
|
+
},
|
|
120
148
|
preview: {
|
|
121
149
|
width: 335,
|
|
122
150
|
height: 114,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","StyleSheet","TouchableOpacity","View","SignatureCanvas","Button","Color","Icon","jsx","_jsx","jsxs","_jsxs","Drawing","onChange","onEnd","onStart","dataURL","ref","internalDataURL","setInternalDataURL","stepCount","setStepCount","undoCount","setUndoCount","canUndo","canRedo","handleSignature","signature","refreshSignature","requestAnimationFrame","current","readSignature","handleEmpty","handleError","error","console","handleEnd","prev","handleBegin","undo","redo","clear","clearSignature","style","styles","container","children","onBegin","onOK","onEmpty","onError","descriptionText","webStyle","gray","clearText","penColor","backgroundColor","base","white100","webviewProps","cacheEnabled","androidLayerType","footerConteiner","actionButtonContainer","onPress","disabled","disabledButton","name","variant","color","title","size","create","height","flexDirection","justifyContent","alignContent","alignItems","gap","opacity","preview","width","marginTop"],"sourceRoot":"../../../src","sources":["Drawing/Drawing.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawing.d.ts","sourceRoot":"","sources":["../../../../src/Drawing/Drawing.tsx"],"names":[],"mappings":"AASA,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,GAAI,uCAAuC,YAAY,
|
|
1
|
+
{"version":3,"file":"Drawing.d.ts","sourceRoot":"","sources":["../../../../src/Drawing/Drawing.tsx"],"names":[],"mappings":"AASA,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,GAAI,uCAAuC,YAAY,4CAoInE,CAAC;AA6BF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
package/src/Drawing/Drawing.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
2
|
-
import { StyleSheet,
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
3
3
|
import SignatureCanvas, {
|
|
4
4
|
type SignatureViewRef,
|
|
5
5
|
} from 'react-native-signature-canvas';
|
|
6
|
-
import Icon from '../Icon';
|
|
7
6
|
import Button from '../Button/Button';
|
|
8
7
|
import Color from '../Color/Color';
|
|
8
|
+
import Icon from '../Icon';
|
|
9
9
|
|
|
10
10
|
interface DrawingProps {
|
|
11
11
|
onChange?: (value?: string | undefined | null) => void;
|
|
@@ -17,6 +17,15 @@ interface DrawingProps {
|
|
|
17
17
|
const Drawing = ({ onChange, onEnd, onStart, dataURL }: DrawingProps) => {
|
|
18
18
|
const ref = useRef<SignatureViewRef | null>(null);
|
|
19
19
|
|
|
20
|
+
const [internalDataURL, setInternalDataURL] = useState<any>(null);
|
|
21
|
+
const [stepCount, setStepCount] = useState(0);
|
|
22
|
+
const [undoCount, setUndoCount] = useState(0);
|
|
23
|
+
|
|
24
|
+
const canUndo = dataURL
|
|
25
|
+
? stepCount - undoCount > 1
|
|
26
|
+
: stepCount - undoCount > 0;
|
|
27
|
+
const canRedo = undoCount > 0;
|
|
28
|
+
|
|
20
29
|
const handleSignature = (signature: string) => {
|
|
21
30
|
if (signature && onChange) {
|
|
22
31
|
onChange(signature);
|
|
@@ -37,6 +46,8 @@ const Drawing = ({ onChange, onEnd, onStart, dataURL }: DrawingProps) => {
|
|
|
37
46
|
};
|
|
38
47
|
|
|
39
48
|
const handleEnd = () => {
|
|
49
|
+
setStepCount((prev) => prev + 1);
|
|
50
|
+
setUndoCount(0);
|
|
40
51
|
refreshSignature();
|
|
41
52
|
if (onEnd) {
|
|
42
53
|
onEnd();
|
|
@@ -50,12 +61,16 @@ const Drawing = ({ onChange, onEnd, onStart, dataURL }: DrawingProps) => {
|
|
|
50
61
|
};
|
|
51
62
|
|
|
52
63
|
const undo = () => {
|
|
64
|
+
if (!canUndo) return;
|
|
53
65
|
ref.current?.undo();
|
|
66
|
+
setUndoCount((prev) => prev + 1);
|
|
54
67
|
refreshSignature();
|
|
55
68
|
};
|
|
56
69
|
|
|
57
70
|
const redo = () => {
|
|
71
|
+
if (!canRedo) return;
|
|
58
72
|
ref.current?.redo();
|
|
73
|
+
setUndoCount((prev) => prev - 1);
|
|
59
74
|
refreshSignature();
|
|
60
75
|
};
|
|
61
76
|
|
|
@@ -63,9 +78,21 @@ const Drawing = ({ onChange, onEnd, onStart, dataURL }: DrawingProps) => {
|
|
|
63
78
|
ref.current?.clearSignature();
|
|
64
79
|
if (onChange) {
|
|
65
80
|
onChange(null);
|
|
81
|
+
setInternalDataURL('');
|
|
66
82
|
}
|
|
83
|
+
setStepCount(0);
|
|
84
|
+
setUndoCount(0);
|
|
67
85
|
};
|
|
68
86
|
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
onChange?.(dataURL);
|
|
89
|
+
setInternalDataURL(dataURL);
|
|
90
|
+
|
|
91
|
+
setStepCount(dataURL ? 1 : 0);
|
|
92
|
+
setUndoCount(0);
|
|
93
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
94
|
+
}, [dataURL]);
|
|
95
|
+
|
|
69
96
|
return (
|
|
70
97
|
<View style={styles.container}>
|
|
71
98
|
<SignatureCanvas
|
|
@@ -90,14 +117,22 @@ const Drawing = ({ onChange, onEnd, onStart, dataURL }: DrawingProps) => {
|
|
|
90
117
|
cacheEnabled: true,
|
|
91
118
|
androidLayerType: 'hardware',
|
|
92
119
|
}}
|
|
93
|
-
dataURL={
|
|
120
|
+
dataURL={internalDataURL}
|
|
94
121
|
/>
|
|
95
122
|
<View style={styles.footerConteiner}>
|
|
96
123
|
<View style={styles.actionButtonContainer}>
|
|
97
|
-
<TouchableOpacity
|
|
124
|
+
<TouchableOpacity
|
|
125
|
+
onPress={undo}
|
|
126
|
+
disabled={!canUndo}
|
|
127
|
+
style={!canUndo && styles.disabledButton}
|
|
128
|
+
>
|
|
98
129
|
<Icon name="ArrowBackAlt" />
|
|
99
130
|
</TouchableOpacity>
|
|
100
|
-
<TouchableOpacity
|
|
131
|
+
<TouchableOpacity
|
|
132
|
+
onPress={redo}
|
|
133
|
+
disabled={!canRedo}
|
|
134
|
+
style={!canRedo && styles.disabledButton}
|
|
135
|
+
>
|
|
101
136
|
<Icon name="ArrowForwardAlt" />
|
|
102
137
|
</TouchableOpacity>
|
|
103
138
|
</View>
|
|
@@ -127,6 +162,9 @@ const styles = StyleSheet.create({
|
|
|
127
162
|
flexDirection: 'row',
|
|
128
163
|
gap: 10,
|
|
129
164
|
},
|
|
165
|
+
disabledButton: {
|
|
166
|
+
opacity: 0.3,
|
|
167
|
+
},
|
|
130
168
|
preview: {
|
|
131
169
|
width: 335,
|
|
132
170
|
height: 114,
|