ferns-ui 0.39.6 → 0.41.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.
- package/dist/Common.d.ts +4 -1
- package/dist/Field.d.ts +1 -1
- package/dist/Field.js +34 -9
- package/dist/Field.js.map +1 -1
- package/dist/Signature.d.ts +7 -0
- package/dist/Signature.js +23 -0
- package/dist/Signature.js.map +1 -0
- package/dist/Signature.native.d.ts +8 -0
- package/dist/Signature.native.js +28 -0
- package/dist/Signature.native.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +7 -3
- package/src/Common.ts +4 -0
- package/src/Field.tsx +36 -5
- package/src/Signature.native.tsx +49 -0
- package/src/Signature.tsx +36 -0
- package/src/index.tsx +1 -0
package/dist/Common.d.ts
CHANGED
|
@@ -947,10 +947,13 @@ export interface FieldProps extends FieldWithLabelsProps {
|
|
|
947
947
|
name?: string;
|
|
948
948
|
label?: string;
|
|
949
949
|
height?: number;
|
|
950
|
-
type?: "address" | "boolean" | "currency" | "customSelect" | "date" | "datetime" | "email" | "multiselect" | "number" | "password" | "percent" | "phoneNumber" | "select" | "text" | "textarea" | "time" | "url";
|
|
950
|
+
type?: "address" | "boolean" | "currency" | "customSelect" | "date" | "datetime" | "email" | "multiselect" | "number" | "password" | "percent" | "phoneNumber" | "select" | "signature" | "text" | "textarea" | "time" | "url";
|
|
951
951
|
rows?: number;
|
|
952
952
|
value?: any;
|
|
953
953
|
onChange?: any;
|
|
954
|
+
onBlur?: any;
|
|
955
|
+
onStart?: any;
|
|
956
|
+
onEnd?: any;
|
|
954
957
|
options?: SelectListOptions;
|
|
955
958
|
placeholder?: string;
|
|
956
959
|
disabled?: boolean;
|
package/dist/Field.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FieldProps } from "./Common";
|
|
3
|
-
export declare const Field: ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, includeCounty, googleMapsApiKey, googlePlacesMobileStyles, testID, }: FieldProps) => React.JSX.Element;
|
|
3
|
+
export declare const Field: ({ name, label, labelColor, height, type, rows, value, onChange, onBlur, onStart, onEnd, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, includeCounty, googleMapsApiKey, googlePlacesMobileStyles, testID, }: FieldProps) => React.JSX.Element;
|
package/dist/Field.js
CHANGED
|
@@ -5,20 +5,23 @@ import { USSTATESLIST } from "./Constants";
|
|
|
5
5
|
import { CustomSelect } from "./CustomSelect";
|
|
6
6
|
import { FieldWithLabels } from "./FieldWithLabels";
|
|
7
7
|
import { SelectList } from "./SelectList";
|
|
8
|
+
import { Signature } from "./Signature";
|
|
8
9
|
import { Switch } from "./Switch";
|
|
9
10
|
import { Text } from "./Text";
|
|
10
11
|
import { TextArea } from "./TextArea";
|
|
11
12
|
import { TextField } from "./TextField";
|
|
12
13
|
import { UnifiedAddressAutoCompleteField } from "./UnifiedAddressAutoComplete";
|
|
13
|
-
export const Field = ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, includeCounty = false, googleMapsApiKey, googlePlacesMobileStyles, testID, }) => {
|
|
14
|
+
export const Field = ({ name, label, labelColor, height, type, rows, value, onChange, onBlur, onStart, onEnd, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, includeCounty = false, googleMapsApiKey, googlePlacesMobileStyles, testID, }) => {
|
|
14
15
|
const handleAddressChange = (field, newValue) => {
|
|
15
16
|
onChange(Object.assign(Object.assign({}, value), { [field]: newValue }));
|
|
17
|
+
onBlur && onBlur(Object.assign(Object.assign({}, value), { [field]: newValue }));
|
|
16
18
|
};
|
|
17
19
|
const handleAutoCompleteChange = (newValue) => {
|
|
18
20
|
onChange(Object.assign(Object.assign({}, value), newValue));
|
|
19
21
|
};
|
|
20
22
|
const handleSwitchChange = (switchValue) => {
|
|
21
23
|
onChange(switchValue);
|
|
24
|
+
onBlur && onBlur(switchValue);
|
|
22
25
|
};
|
|
23
26
|
const renderField = () => {
|
|
24
27
|
if (type === "select") {
|
|
@@ -26,7 +29,10 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
26
29
|
console.error("Field with type=select require options");
|
|
27
30
|
return undefined;
|
|
28
31
|
}
|
|
29
|
-
return (React.createElement(SelectList, { disabled: disabled, id: name, options: options, placeholder: placeholder, testID: testID, value: value, onChange:
|
|
32
|
+
return (React.createElement(SelectList, { disabled: disabled, id: name, options: options, placeholder: placeholder, testID: testID, value: value, onChange: (result) => {
|
|
33
|
+
onChange(result);
|
|
34
|
+
onBlur && onBlur(result);
|
|
35
|
+
} }));
|
|
30
36
|
}
|
|
31
37
|
else if (type === "multiselect") {
|
|
32
38
|
if (options === undefined) {
|
|
@@ -50,16 +56,21 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
50
56
|
newValue = value.filter((v) => v !== o.value);
|
|
51
57
|
}
|
|
52
58
|
onChange(newValue);
|
|
59
|
+
onBlur && onBlur(newValue);
|
|
53
60
|
} })))))));
|
|
54
61
|
}
|
|
55
62
|
else if (type === "textarea") {
|
|
56
|
-
return (React.createElement(TextArea, { disabled: disabled, height: height !== null && height !== void 0 ? height : 100, id: name, placeholder: Boolean(value) ? "" : placeholder, rows: rows, testID: testID, value: String(value), onChange: (result) => onChange(result.value) }));
|
|
63
|
+
return (React.createElement(TextArea, { disabled: disabled, height: height !== null && height !== void 0 ? height : 100, id: name, placeholder: Boolean(value) ? "" : placeholder, rows: rows, testID: testID, value: String(value), onBlur: onBlur, onChange: (result) => onChange(result.value) }));
|
|
57
64
|
}
|
|
58
65
|
else if (type === "boolean") {
|
|
59
|
-
return (React.createElement(Switch, { disabled: disabled, id: name, name: name, switched: Boolean(value), testID: testID, onChange: (result) =>
|
|
66
|
+
return (React.createElement(Switch, { disabled: disabled, id: name, name: name, switched: Boolean(value), testID: testID, onChange: (result) => {
|
|
67
|
+
handleSwitchChange(result);
|
|
68
|
+
} }));
|
|
60
69
|
}
|
|
61
70
|
else if (type && ["date", "time", "datetime"].includes(type)) {
|
|
62
|
-
return (React.createElement(TextField, { disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: type, value: value,
|
|
71
|
+
return (React.createElement(TextField, { disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: type, value: value, onBlur: (result) => {
|
|
72
|
+
onBlur && onBlur(result.value);
|
|
73
|
+
}, onChange: (result) => onChange(result.value) }));
|
|
63
74
|
}
|
|
64
75
|
else if (type === "address") {
|
|
65
76
|
const addressValue = value ? value : {};
|
|
@@ -68,7 +79,9 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
68
79
|
React.createElement(UnifiedAddressAutoCompleteField, { disabled: disabled, googleMapsApiKey: googleMapsApiKey, googlePlacesMobileStyles: googlePlacesMobileStyles, handleAddressChange: (result) => handleAddressChange("address1", result.value), handleAutoCompleteChange: (result) => handleAutoCompleteChange(result), includeCounty: includeCounty, inputValue: address1, testID: `${testID}-address1` }),
|
|
69
80
|
React.createElement(TextField, { disabled: disabled, id: "address2", label: "Apt, suite, etc", testID: `${testID}-address2`, type: "text", value: address2, onChange: (result) => handleAddressChange("address2", result.value) }),
|
|
70
81
|
React.createElement(TextField, { disabled: disabled, id: "city", label: "City", testID: `${testID}-city`, type: "text", value: city, onChange: (result) => handleAddressChange("city", result.value) }),
|
|
71
|
-
React.createElement(SelectList, { disabled: disabled, id: "state", label: "State", options: USSTATESLIST, placeholder: "Select state", style: { borderRadius: 16 }, testID: `${testID}-state`, value: state, onChange: (result) =>
|
|
82
|
+
React.createElement(SelectList, { disabled: disabled, id: "state", label: "State", options: USSTATESLIST, placeholder: "Select state", style: { borderRadius: 16 }, testID: `${testID}-state`, value: state, onChange: (result) => {
|
|
83
|
+
handleAddressChange("state", result);
|
|
84
|
+
} }),
|
|
72
85
|
React.createElement(TextField, { disabled: disabled, id: "zipcode", label: "Zipcode", testID: `${testID}-zip`, type: "text", value: zipcode, onChange: (result) => handleAddressChange("zipcode", result.value) }),
|
|
73
86
|
includeCounty && (React.createElement(React.Fragment, null,
|
|
74
87
|
React.createElement(TextField, { disabled: disabled, id: "countyName", label: "County Name", testID: `${testID}-county`, type: "text", value: countyName, onChange: (result) => handleAddressChange("countyName", result.value) }),
|
|
@@ -79,10 +92,20 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
79
92
|
console.error("Field with type=customSelect require options");
|
|
80
93
|
return null;
|
|
81
94
|
}
|
|
82
|
-
return (React.createElement(CustomSelect, { disabled: disabled, options: options, placeholder: placeholder, value: value, onChange:
|
|
95
|
+
return (React.createElement(CustomSelect, { disabled: disabled, options: options, placeholder: placeholder, value: value, onChange: (val) => {
|
|
96
|
+
onChange(val);
|
|
97
|
+
onBlur && onBlur(val);
|
|
98
|
+
} }));
|
|
83
99
|
}
|
|
84
100
|
else if (type === "number") {
|
|
85
|
-
return (React.createElement(TextField, { disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: "number", value: value,
|
|
101
|
+
return (React.createElement(TextField, { disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: "number", value: value, onBlur: (result) => {
|
|
102
|
+
onBlur && onBlur(result.value);
|
|
103
|
+
}, onChange: (result) => {
|
|
104
|
+
onChange(result.value);
|
|
105
|
+
} }));
|
|
106
|
+
}
|
|
107
|
+
else if (type === "signature") {
|
|
108
|
+
return React.createElement(Signature, { onChange: onChange, onEnd: onEnd, onStart: onStart });
|
|
86
109
|
}
|
|
87
110
|
else {
|
|
88
111
|
let tfType = "text";
|
|
@@ -109,7 +132,9 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
109
132
|
else if (type === "currency") {
|
|
110
133
|
tfValue = `$${Number(value).toFixed(2)}`;
|
|
111
134
|
}
|
|
112
|
-
return (React.createElement(TextField, { autoComplete: autoComplete, disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: tfType, value: tfValue,
|
|
135
|
+
return (React.createElement(TextField, { autoComplete: autoComplete, disabled: disabled, id: name, placeholder: placeholder, testID: testID, type: tfType, value: tfValue, onBlur: (result) => {
|
|
136
|
+
onBlur && onBlur(result.value);
|
|
137
|
+
}, onChange: (result) => onChange(result.value) }));
|
|
113
138
|
}
|
|
114
139
|
};
|
|
115
140
|
const children = renderField();
|
package/dist/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,aAAa,GAAG,KAAK,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,MAAM,GACK,EAAE,EAAE;IACf,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAE,EAAE;QAC9D,QAAQ,iCAAK,KAAK,KAAE,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
|
+
import SignatureCanvas from "react-signature-canvas";
|
|
3
|
+
import { Box } from "./Box";
|
|
4
|
+
import { Button } from "./Button";
|
|
5
|
+
export function Signature({ onChange }) {
|
|
6
|
+
const ref = useRef(null);
|
|
7
|
+
const onClear = () => {
|
|
8
|
+
var _a;
|
|
9
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clear();
|
|
10
|
+
};
|
|
11
|
+
const onUpdatedSignature = () => {
|
|
12
|
+
var _a;
|
|
13
|
+
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.toDataURL()) {
|
|
14
|
+
onChange(ref.current.toDataURL());
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
return (React.createElement(Box, { width: 300 },
|
|
18
|
+
React.createElement(Box, { border: "black" },
|
|
19
|
+
React.createElement(SignatureCanvas, { ref: ref, backgroundColor: "white", onEnd: onUpdatedSignature })),
|
|
20
|
+
React.createElement(Box, { direction: "row" },
|
|
21
|
+
React.createElement(Button, { color: "gray", text: "Clear", onClick: onClear }))));
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=Signature.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Signature.js","sourceRoot":"","sources":["../src/Signature.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,MAAM,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,eAAe,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAQhC,MAAM,UAAU,SAAS,CAAC,EAAC,QAAQ,EAAiB;IAClD,MAAM,GAAG,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;;QAC9B,IAAI,MAAA,GAAG,CAAC,OAAO,0CAAE,SAAS,EAAE,EAAE,CAAC;YAC7B,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAE,GAAG;QACb,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO;YACjB,oBAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,eAAe,EAAC,OAAO,EAAC,KAAK,EAAE,kBAAkB,GAAI,CAC5E;QACN,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK;YAClB,oBAAC,MAAM,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,GAAI,CAClD,CACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
|
+
import SignatureScreen from "react-native-signature-canvas";
|
|
3
|
+
import { Box } from "./Box";
|
|
4
|
+
import { Button } from "./Button";
|
|
5
|
+
const style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
|
|
6
|
+
export const Signature = ({ onChange, onStart, onEnd }) => {
|
|
7
|
+
const ref = useRef(null);
|
|
8
|
+
const handleClear = () => {
|
|
9
|
+
var _a;
|
|
10
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clearSignature();
|
|
11
|
+
};
|
|
12
|
+
const onBegin = () => {
|
|
13
|
+
onStart && onStart();
|
|
14
|
+
};
|
|
15
|
+
// Called after end of stroke. Kind of goofy if you ask me,
|
|
16
|
+
// but you need this in order to trigger the 'onOK' callback that gives us the actual image.
|
|
17
|
+
const handleEnd = () => {
|
|
18
|
+
var _a;
|
|
19
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.readSignature();
|
|
20
|
+
onEnd && onEnd();
|
|
21
|
+
};
|
|
22
|
+
return (React.createElement(Box, null,
|
|
23
|
+
React.createElement(Box, { border: "black", height: 100 },
|
|
24
|
+
React.createElement(SignatureScreen, { ref: ref, webStyle: style, onBegin: onBegin, onEnd: handleEnd, onOK: (img) => onChange(img) })),
|
|
25
|
+
React.createElement(Box, { direction: "row" },
|
|
26
|
+
React.createElement(Button, { text: "Clear", onClick: handleClear }))));
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Signature.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Signature.native.js","sourceRoot":"","sources":["../src/Signature.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,MAAM,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,eAAmC,MAAM,+BAA+B,CAAC;AAEhF,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAQhC,MAAM,KAAK,GAAG,wDAAwD,CAAC;AAEvE,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAQ,EAAE,EAAE;IAC9E,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;;QACvB,MAAA,GAAG,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,OAAO,IAAI,OAAO,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,2DAA2D;IAC3D,4FAA4F;IAC5F,MAAM,SAAS,GAAG,GAAG,EAAE;;QACrB,MAAA,GAAG,CAAC,OAAO,0CAAE,aAAa,EAAE,CAAC;QAC7B,KAAK,IAAI,KAAK,EAAE,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG;QACF,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG;YAC7B,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,GAC5B,CACE;QACN,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK;YAClB,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,WAAW,GAAI,CACzC,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ferns-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.41.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"scripts": {
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
"@types/mdurl": "^1.0.4",
|
|
126
126
|
"@types/react": "~18.2.43",
|
|
127
127
|
"@types/react-datetime-picker": "^5.0.0",
|
|
128
|
+
"@types/react-signature-canvas": "^1.0.5",
|
|
128
129
|
"@types/react-time-picker": "^6.0.0",
|
|
129
130
|
"@typescript-eslint/eslint-plugin": "^6.13.2",
|
|
130
131
|
"@typescript-eslint/parser": "^6.13.2",
|
|
@@ -140,7 +141,7 @@
|
|
|
140
141
|
"eslint-plugin-react-native": "^4.1.0",
|
|
141
142
|
"eslint-plugin-simple-import-sort": "^10.0.0",
|
|
142
143
|
"eslint-plugin-unused-imports": "3.0.0",
|
|
143
|
-
"mdurl": "^
|
|
144
|
+
"mdurl": "^2.0.0",
|
|
144
145
|
"prettier": "^3.1.1",
|
|
145
146
|
"react": "18.2.0",
|
|
146
147
|
"react-app-polyfill": "^3.0.0",
|
|
@@ -189,10 +190,13 @@
|
|
|
189
190
|
"react-native-permissions": "^3.10.0",
|
|
190
191
|
"react-native-picker-select": "^8.1.0",
|
|
191
192
|
"react-native-portalize": "^1.0.7",
|
|
192
|
-
"react-native-reanimated": "~3.
|
|
193
|
+
"react-native-reanimated": "~3.6.2",
|
|
194
|
+
"react-native-signature-canvas": "^4.7.1",
|
|
193
195
|
"react-native-svg": "13.9.0",
|
|
194
196
|
"react-native-swiper-flatlist": "^3.1.1",
|
|
195
197
|
"react-native-toast-notifications": "^3.4.0",
|
|
198
|
+
"react-native-webview": "13.2.2",
|
|
199
|
+
"react-signature-canvas": "^1.0.6",
|
|
196
200
|
"react-time-picker": "^6.5.2"
|
|
197
201
|
}
|
|
198
202
|
}
|
package/src/Common.ts
CHANGED
|
@@ -2708,6 +2708,7 @@ export interface FieldProps extends FieldWithLabelsProps {
|
|
|
2708
2708
|
| "percent"
|
|
2709
2709
|
| "phoneNumber"
|
|
2710
2710
|
| "select"
|
|
2711
|
+
| "signature"
|
|
2711
2712
|
| "text"
|
|
2712
2713
|
| "textarea"
|
|
2713
2714
|
| "time"
|
|
@@ -2715,6 +2716,9 @@ export interface FieldProps extends FieldWithLabelsProps {
|
|
|
2715
2716
|
rows?: number;
|
|
2716
2717
|
value?: any;
|
|
2717
2718
|
onChange?: any;
|
|
2719
|
+
onBlur?: any;
|
|
2720
|
+
onStart?: any;
|
|
2721
|
+
onEnd?: any;
|
|
2718
2722
|
options?: SelectListOptions;
|
|
2719
2723
|
placeholder?: string;
|
|
2720
2724
|
disabled?: boolean;
|
package/src/Field.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import {USSTATESLIST} from "./Constants";
|
|
|
7
7
|
import {CustomSelect} from "./CustomSelect";
|
|
8
8
|
import {FieldWithLabels} from "./FieldWithLabels";
|
|
9
9
|
import {SelectList} from "./SelectList";
|
|
10
|
+
import {Signature} from "./Signature";
|
|
10
11
|
import {Switch} from "./Switch";
|
|
11
12
|
import {Text} from "./Text";
|
|
12
13
|
import {TextArea} from "./TextArea";
|
|
@@ -22,6 +23,9 @@ export const Field = ({
|
|
|
22
23
|
rows,
|
|
23
24
|
value,
|
|
24
25
|
onChange,
|
|
26
|
+
onBlur,
|
|
27
|
+
onStart,
|
|
28
|
+
onEnd,
|
|
25
29
|
options,
|
|
26
30
|
placeholder,
|
|
27
31
|
disabled,
|
|
@@ -36,6 +40,7 @@ export const Field = ({
|
|
|
36
40
|
}: FieldProps) => {
|
|
37
41
|
const handleAddressChange = (field: string, newValue: string) => {
|
|
38
42
|
onChange({...value, [field]: newValue});
|
|
43
|
+
onBlur && onBlur({...value, [field]: newValue});
|
|
39
44
|
};
|
|
40
45
|
|
|
41
46
|
const handleAutoCompleteChange = (newValue: AddressInterface) => {
|
|
@@ -44,6 +49,7 @@ export const Field = ({
|
|
|
44
49
|
|
|
45
50
|
const handleSwitchChange = (switchValue: boolean) => {
|
|
46
51
|
onChange(switchValue);
|
|
52
|
+
onBlur && onBlur(switchValue);
|
|
47
53
|
};
|
|
48
54
|
|
|
49
55
|
const renderField = (): ReactChildren => {
|
|
@@ -60,7 +66,10 @@ export const Field = ({
|
|
|
60
66
|
placeholder={placeholder}
|
|
61
67
|
testID={testID}
|
|
62
68
|
value={value}
|
|
63
|
-
onChange={
|
|
69
|
+
onChange={(result) => {
|
|
70
|
+
onChange(result);
|
|
71
|
+
onBlur && onBlur(result);
|
|
72
|
+
}}
|
|
64
73
|
/>
|
|
65
74
|
);
|
|
66
75
|
} else if (type === "multiselect") {
|
|
@@ -101,6 +110,7 @@ export const Field = ({
|
|
|
101
110
|
newValue = value.filter((v: string) => v !== o.value);
|
|
102
111
|
}
|
|
103
112
|
onChange(newValue);
|
|
113
|
+
onBlur && onBlur(newValue);
|
|
104
114
|
}}
|
|
105
115
|
/>
|
|
106
116
|
</Box>
|
|
@@ -118,6 +128,7 @@ export const Field = ({
|
|
|
118
128
|
rows={rows}
|
|
119
129
|
testID={testID}
|
|
120
130
|
value={String(value)}
|
|
131
|
+
onBlur={onBlur}
|
|
121
132
|
onChange={(result) => onChange(result.value)}
|
|
122
133
|
/>
|
|
123
134
|
);
|
|
@@ -129,7 +140,9 @@ export const Field = ({
|
|
|
129
140
|
name={name}
|
|
130
141
|
switched={Boolean(value)}
|
|
131
142
|
testID={testID}
|
|
132
|
-
onChange={(result) =>
|
|
143
|
+
onChange={(result) => {
|
|
144
|
+
handleSwitchChange(result);
|
|
145
|
+
}}
|
|
133
146
|
/>
|
|
134
147
|
);
|
|
135
148
|
} else if (type && ["date", "time", "datetime"].includes(type)) {
|
|
@@ -141,6 +154,9 @@ export const Field = ({
|
|
|
141
154
|
testID={testID}
|
|
142
155
|
type={type as "date" | "time" | "datetime"}
|
|
143
156
|
value={value}
|
|
157
|
+
onBlur={(result) => {
|
|
158
|
+
onBlur && onBlur(result.value);
|
|
159
|
+
}}
|
|
144
160
|
onChange={(result) => onChange(result.value)}
|
|
145
161
|
/>
|
|
146
162
|
);
|
|
@@ -194,7 +210,9 @@ export const Field = ({
|
|
|
194
210
|
style={{borderRadius: 16}}
|
|
195
211
|
testID={`${testID}-state`}
|
|
196
212
|
value={state}
|
|
197
|
-
onChange={(result) =>
|
|
213
|
+
onChange={(result) => {
|
|
214
|
+
handleAddressChange("state", result);
|
|
215
|
+
}}
|
|
198
216
|
/>
|
|
199
217
|
<TextField
|
|
200
218
|
disabled={disabled}
|
|
@@ -240,7 +258,10 @@ export const Field = ({
|
|
|
240
258
|
options={options}
|
|
241
259
|
placeholder={placeholder}
|
|
242
260
|
value={value}
|
|
243
|
-
onChange={
|
|
261
|
+
onChange={(val) => {
|
|
262
|
+
onChange(val);
|
|
263
|
+
onBlur && onBlur(val);
|
|
264
|
+
}}
|
|
244
265
|
/>
|
|
245
266
|
);
|
|
246
267
|
} else if (type === "number") {
|
|
@@ -252,9 +273,16 @@ export const Field = ({
|
|
|
252
273
|
testID={testID}
|
|
253
274
|
type="number"
|
|
254
275
|
value={value}
|
|
255
|
-
|
|
276
|
+
onBlur={(result) => {
|
|
277
|
+
onBlur && onBlur(result.value);
|
|
278
|
+
}}
|
|
279
|
+
onChange={(result) => {
|
|
280
|
+
onChange(result.value);
|
|
281
|
+
}}
|
|
256
282
|
/>
|
|
257
283
|
);
|
|
284
|
+
} else if (type === "signature") {
|
|
285
|
+
return <Signature onChange={onChange} onEnd={onEnd} onStart={onStart} />;
|
|
258
286
|
} else {
|
|
259
287
|
let tfType: TextFieldType = "text";
|
|
260
288
|
let tfValue: string = value;
|
|
@@ -299,6 +327,9 @@ export const Field = ({
|
|
|
299
327
|
| "url"
|
|
300
328
|
}
|
|
301
329
|
value={tfValue}
|
|
330
|
+
onBlur={(result) => {
|
|
331
|
+
onBlur && onBlur(result.value);
|
|
332
|
+
}}
|
|
302
333
|
onChange={(result) => onChange(result.value)}
|
|
303
334
|
/>
|
|
304
335
|
);
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React, {useRef} from "react";
|
|
2
|
+
import SignatureScreen, {SignatureViewRef} from "react-native-signature-canvas";
|
|
3
|
+
|
|
4
|
+
import {Box} from "./Box";
|
|
5
|
+
import {Button} from "./Button";
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
onChange: (signature: string) => void;
|
|
9
|
+
onStart?: () => void;
|
|
10
|
+
onEnd?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
|
|
14
|
+
|
|
15
|
+
export const Signature: React.FC<Props> = ({onChange, onStart, onEnd}: Props) => {
|
|
16
|
+
const ref = useRef<SignatureViewRef>(null);
|
|
17
|
+
|
|
18
|
+
const handleClear = () => {
|
|
19
|
+
ref.current?.clearSignature();
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const onBegin = () => {
|
|
23
|
+
onStart && onStart();
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
// Called after end of stroke. Kind of goofy if you ask me,
|
|
27
|
+
// but you need this in order to trigger the 'onOK' callback that gives us the actual image.
|
|
28
|
+
const handleEnd = () => {
|
|
29
|
+
ref.current?.readSignature();
|
|
30
|
+
onEnd && onEnd();
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<Box>
|
|
35
|
+
<Box border="black" height={100}>
|
|
36
|
+
<SignatureScreen
|
|
37
|
+
ref={ref}
|
|
38
|
+
webStyle={style}
|
|
39
|
+
onBegin={onBegin}
|
|
40
|
+
onEnd={handleEnd}
|
|
41
|
+
onOK={(img) => onChange(img)}
|
|
42
|
+
/>
|
|
43
|
+
</Box>
|
|
44
|
+
<Box direction="row">
|
|
45
|
+
<Button text="Clear" onClick={handleClear} />
|
|
46
|
+
</Box>
|
|
47
|
+
</Box>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, {ReactElement, useRef} from "react";
|
|
2
|
+
import SignatureCanvas from "react-signature-canvas";
|
|
3
|
+
|
|
4
|
+
import {Box} from "./Box";
|
|
5
|
+
import {Button} from "./Button";
|
|
6
|
+
|
|
7
|
+
export interface SignatureProps {
|
|
8
|
+
onChange: (signature: string) => void;
|
|
9
|
+
onStart?: () => void;
|
|
10
|
+
onEnd?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function Signature({onChange}: SignatureProps): ReactElement | null {
|
|
14
|
+
const ref = useRef<SignatureCanvas>(null);
|
|
15
|
+
|
|
16
|
+
const onClear = () => {
|
|
17
|
+
ref.current?.clear();
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const onUpdatedSignature = () => {
|
|
21
|
+
if (ref.current?.toDataURL()) {
|
|
22
|
+
onChange(ref.current.toDataURL());
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<Box width={300}>
|
|
28
|
+
<Box border="black">
|
|
29
|
+
<SignatureCanvas ref={ref} backgroundColor="white" onEnd={onUpdatedSignature} />
|
|
30
|
+
</Box>
|
|
31
|
+
<Box direction="row">
|
|
32
|
+
<Button color="gray" text="Clear" onClick={onClear} />
|
|
33
|
+
</Box>
|
|
34
|
+
</Box>
|
|
35
|
+
);
|
|
36
|
+
}
|
package/src/index.tsx
CHANGED