@fovestta2/mobile-react-native 1.0.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/dist/components/FvCheckbox.d.ts +14 -0
- package/dist/components/FvCheckbox.d.ts.map +1 -0
- package/dist/components/FvCheckbox.js +73 -0
- package/dist/components/FvCheckbox.js.map +1 -0
- package/dist/components/FvDateField.d.ts +22 -0
- package/dist/components/FvDateField.d.ts.map +1 -0
- package/dist/components/FvDateField.js +117 -0
- package/dist/components/FvDateField.js.map +1 -0
- package/dist/components/FvDropdown.d.ts +25 -0
- package/dist/components/FvDropdown.d.ts.map +1 -0
- package/dist/components/FvDropdown.js +213 -0
- package/dist/components/FvDropdown.js.map +1 -0
- package/dist/components/FvEntryField.d.ts +21 -0
- package/dist/components/FvEntryField.d.ts.map +1 -0
- package/dist/components/FvEntryField.js +124 -0
- package/dist/components/FvEntryField.js.map +1 -0
- package/dist/components/FvFileSelector.d.ts +28 -0
- package/dist/components/FvFileSelector.d.ts.map +1 -0
- package/dist/components/FvFileSelector.js +205 -0
- package/dist/components/FvFileSelector.js.map +1 -0
- package/dist/components/FvImageSelector.d.ts +32 -0
- package/dist/components/FvImageSelector.d.ts.map +1 -0
- package/dist/components/FvImageSelector.js +268 -0
- package/dist/components/FvImageSelector.js.map +1 -0
- package/dist/components/FvMonthYearField.d.ts +22 -0
- package/dist/components/FvMonthYearField.d.ts.map +1 -0
- package/dist/components/FvMonthYearField.js +115 -0
- package/dist/components/FvMonthYearField.js.map +1 -0
- package/dist/components/FvNumberField.d.ts +23 -0
- package/dist/components/FvNumberField.d.ts.map +1 -0
- package/dist/components/FvNumberField.js +140 -0
- package/dist/components/FvNumberField.js.map +1 -0
- package/dist/components/FvRadioGroup.d.ts +20 -0
- package/dist/components/FvRadioGroup.d.ts.map +1 -0
- package/dist/components/FvRadioGroup.js +95 -0
- package/dist/components/FvRadioGroup.js.map +1 -0
- package/dist/components/FvRichTextEditor.d.ts +25 -0
- package/dist/components/FvRichTextEditor.d.ts.map +1 -0
- package/dist/components/FvRichTextEditor.js +246 -0
- package/dist/components/FvRichTextEditor.js.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +27 -0
- package/dist/index.js.map +1 -0
- package/package.json +36 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ViewStyle, TextStyle } from "react-native";
|
|
3
|
+
export interface FvCheckboxProps {
|
|
4
|
+
label: string;
|
|
5
|
+
value: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
onChange: (value: boolean) => void;
|
|
9
|
+
containerStyle?: ViewStyle;
|
|
10
|
+
labelStyle?: TextStyle;
|
|
11
|
+
checkboxStyle?: ViewStyle;
|
|
12
|
+
}
|
|
13
|
+
export declare const FvCheckbox: React.FC<FvCheckboxProps>;
|
|
14
|
+
//# sourceMappingURL=FvCheckbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/FvCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKH,SAAS,EACT,SAAS,EACZ,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuChD,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.FvCheckbox = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const react_native_1 = require("react-native");
|
|
9
|
+
const FvCheckbox = ({ label, value, disabled = false, required = false, onChange, containerStyle, labelStyle, checkboxStyle, }) => {
|
|
10
|
+
const toggleCheckbox = () => {
|
|
11
|
+
if (!disabled) {
|
|
12
|
+
onChange(!value);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
return (<react_native_1.TouchableOpacity activeOpacity={0.7} disabled={disabled} onPress={toggleCheckbox} style={[styles.container, containerStyle]}>
|
|
16
|
+
<react_native_1.View style={[
|
|
17
|
+
styles.checkbox,
|
|
18
|
+
value && styles.checkboxActive,
|
|
19
|
+
disabled && styles.checkboxDisabled,
|
|
20
|
+
checkboxStyle,
|
|
21
|
+
]}>
|
|
22
|
+
{value && <react_native_1.View style={styles.checkmark}/>}
|
|
23
|
+
</react_native_1.View>
|
|
24
|
+
<react_native_1.Text style={[styles.label, disabled && styles.labelDisabled, labelStyle]}>
|
|
25
|
+
{label}
|
|
26
|
+
{required && <react_native_1.Text style={styles.requiredAsterisk}> *</react_native_1.Text>}
|
|
27
|
+
</react_native_1.Text>
|
|
28
|
+
</react_native_1.TouchableOpacity>);
|
|
29
|
+
};
|
|
30
|
+
exports.FvCheckbox = FvCheckbox;
|
|
31
|
+
const styles = react_native_1.StyleSheet.create({
|
|
32
|
+
container: {
|
|
33
|
+
flexDirection: "row",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
marginBottom: 16,
|
|
36
|
+
},
|
|
37
|
+
checkbox: {
|
|
38
|
+
width: 20,
|
|
39
|
+
height: 20,
|
|
40
|
+
borderWidth: 2,
|
|
41
|
+
borderColor: "#667eea",
|
|
42
|
+
borderRadius: 4,
|
|
43
|
+
marginRight: 10,
|
|
44
|
+
justifyContent: "center",
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
backgroundColor: "#ffffff",
|
|
47
|
+
},
|
|
48
|
+
checkboxActive: {
|
|
49
|
+
backgroundColor: "#667eea",
|
|
50
|
+
},
|
|
51
|
+
checkboxDisabled: {
|
|
52
|
+
borderColor: "#cccccc",
|
|
53
|
+
backgroundColor: "#f5f5f5",
|
|
54
|
+
},
|
|
55
|
+
checkmark: {
|
|
56
|
+
width: 10,
|
|
57
|
+
height: 10,
|
|
58
|
+
backgroundColor: "#ffffff",
|
|
59
|
+
borderRadius: 2,
|
|
60
|
+
},
|
|
61
|
+
label: {
|
|
62
|
+
fontSize: 14,
|
|
63
|
+
color: "#333333",
|
|
64
|
+
},
|
|
65
|
+
labelDisabled: {
|
|
66
|
+
color: "#999999",
|
|
67
|
+
},
|
|
68
|
+
requiredAsterisk: {
|
|
69
|
+
color: "#dc3545",
|
|
70
|
+
fontWeight: "bold",
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
//# sourceMappingURL=FvCheckbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvCheckbox.js","sourceRoot":"","sources":["../../src/components/FvCheckbox.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AAaf,MAAM,UAAU,GAA8B,CAAC,EAClD,KAAK,EACL,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,aAAa,GAChB,EAAE,EAAE;IACD,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,CAAC,+BAAgB,CACb,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAE1C;YAAA,CAAC,mBAAI,CACD,KAAK,CAAC,CAAC;YACH,MAAM,CAAC,QAAQ;YACf,KAAK,IAAI,MAAM,CAAC,cAAc;YAC9B,QAAQ,IAAI,MAAM,CAAC,gBAAgB;YACnC,aAAa;SAChB,CAAC,CAEF;gBAAA,CAAC,KAAK,IAAI,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAG,CAC/C;YAAA,EAAE,mBAAI,CACN;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CACtE;gBAAA,CAAC,KAAK,CACN;gBAAA,CAAC,QAAQ,IAAI,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAE,EAAC,EAAE,mBAAI,CAAC,CAChE;YAAA,EAAE,mBAAI,CACV;QAAA,EAAE,+BAAgB,CAAC,CACtB,CAAC;AACN,CAAC,CAAC;AAvCW,QAAA,UAAU,cAuCrB;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC7B,SAAS,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,EAAE;KACnB;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,SAAS;KAC7B;IACD,cAAc,EAAE;QACZ,eAAe,EAAE,SAAS;KAC7B;IACD,gBAAgB,EAAE;QACd,WAAW,EAAE,SAAS;QACtB,eAAe,EAAE,SAAS;KAC7B;IACD,SAAS,EAAE;QACP,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;KAClB;IACD,KAAK,EAAE;QACH,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,SAAS;KACnB;IACD,aAAa,EAAE;QACX,KAAK,EAAE,SAAS;KACnB;IACD,gBAAgB,EAAE;QACd,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,MAAM;KACrB;CACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ViewStyle, TextStyle } from "react-native";
|
|
3
|
+
import { ValidationSchema } from "@fovestta2/validation-engine";
|
|
4
|
+
export interface FvDateFieldProps {
|
|
5
|
+
label?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
value: string;
|
|
8
|
+
schema?: ValidationSchema;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
readonly?: boolean;
|
|
11
|
+
min?: string;
|
|
12
|
+
max?: string;
|
|
13
|
+
onChange: (value: string) => void;
|
|
14
|
+
onBlur?: () => void;
|
|
15
|
+
onFocus?: () => void;
|
|
16
|
+
containerStyle?: ViewStyle;
|
|
17
|
+
inputStyle?: TextStyle;
|
|
18
|
+
labelStyle?: TextStyle;
|
|
19
|
+
errorStyle?: TextStyle;
|
|
20
|
+
}
|
|
21
|
+
export declare const FvDateField: React.FC<FvDateFieldProps>;
|
|
22
|
+
//# sourceMappingURL=FvDateField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvDateField.d.ts","sourceRoot":"","sources":["../../src/components/FvDateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAKH,SAAS,EACT,SAAS,EACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoFlD,CAAC"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.FvDateField = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const react_native_1 = require("react-native");
|
|
29
|
+
const validation_engine_1 = require("@fovestta2/validation-engine");
|
|
30
|
+
const FvDateField = ({ label, placeholder = "YYYY-MM-DD", value, schema, disabled = false, readonly = false, onChange, onBlur, onFocus, containerStyle, inputStyle, labelStyle, errorStyle, }) => {
|
|
31
|
+
const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
if (schema) {
|
|
34
|
+
const result = validation_engine_1.Validator.validate(value, schema);
|
|
35
|
+
setErrorMessage(result.errorKey);
|
|
36
|
+
}
|
|
37
|
+
}, [value, schema]);
|
|
38
|
+
const handleChange = (text) => {
|
|
39
|
+
onChange(text);
|
|
40
|
+
};
|
|
41
|
+
const handleBlur = () => {
|
|
42
|
+
onBlur?.();
|
|
43
|
+
};
|
|
44
|
+
const getErrorMessage = () => {
|
|
45
|
+
if (!errorMessage)
|
|
46
|
+
return "";
|
|
47
|
+
const errorMessages = {
|
|
48
|
+
ERR_REQUIRED: "Date is required",
|
|
49
|
+
ERR_MIN_DATE: "Date is too early",
|
|
50
|
+
ERR_MAX_DATE: "Date is too late",
|
|
51
|
+
ERR_MIN_AGE: "Age requirement not met (too young)",
|
|
52
|
+
ERR_MAX_AGE: "Age requirement not met (too old)",
|
|
53
|
+
};
|
|
54
|
+
return errorMessages[errorMessage] || errorMessage;
|
|
55
|
+
};
|
|
56
|
+
const isRequired = schema?.rules?.some((r) => r.name === "required" && r.params?.enabled);
|
|
57
|
+
return (<react_native_1.View style={[styles.container, containerStyle]}>
|
|
58
|
+
{label && (<react_native_1.View style={styles.labelContainer}>
|
|
59
|
+
<react_native_1.Text style={[styles.label, labelStyle]}>
|
|
60
|
+
{label}
|
|
61
|
+
{isRequired && <react_native_1.Text style={styles.requiredAsterisk}> *</react_native_1.Text>}
|
|
62
|
+
</react_native_1.Text>
|
|
63
|
+
</react_native_1.View>)}
|
|
64
|
+
|
|
65
|
+
<react_native_1.TextInput style={[
|
|
66
|
+
styles.input,
|
|
67
|
+
errorMessage && styles.inputError,
|
|
68
|
+
disabled && styles.inputDisabled,
|
|
69
|
+
inputStyle,
|
|
70
|
+
]} value={value} placeholder={placeholder} onChangeText={handleChange} onBlur={handleBlur} onFocus={onFocus} editable={!disabled && !readonly} placeholderTextColor="#999999"/>
|
|
71
|
+
|
|
72
|
+
{errorMessage && (<react_native_1.Text style={[styles.errorText, errorStyle]}>
|
|
73
|
+
⚠ {getErrorMessage()}
|
|
74
|
+
</react_native_1.Text>)}
|
|
75
|
+
</react_native_1.View>);
|
|
76
|
+
};
|
|
77
|
+
exports.FvDateField = FvDateField;
|
|
78
|
+
const styles = react_native_1.StyleSheet.create({
|
|
79
|
+
container: {
|
|
80
|
+
marginBottom: 16,
|
|
81
|
+
width: "100%",
|
|
82
|
+
},
|
|
83
|
+
labelContainer: {
|
|
84
|
+
marginBottom: 6,
|
|
85
|
+
},
|
|
86
|
+
label: {
|
|
87
|
+
fontSize: 14,
|
|
88
|
+
fontWeight: "500",
|
|
89
|
+
color: "#333333",
|
|
90
|
+
},
|
|
91
|
+
requiredAsterisk: {
|
|
92
|
+
color: "#dc3545",
|
|
93
|
+
fontWeight: "bold",
|
|
94
|
+
},
|
|
95
|
+
input: {
|
|
96
|
+
padding: 10,
|
|
97
|
+
borderWidth: 1,
|
|
98
|
+
borderColor: "#cccccc",
|
|
99
|
+
borderRadius: 4,
|
|
100
|
+
fontSize: 14,
|
|
101
|
+
backgroundColor: "#ffffff",
|
|
102
|
+
color: "#333333",
|
|
103
|
+
},
|
|
104
|
+
inputError: {
|
|
105
|
+
borderColor: "#dc3545",
|
|
106
|
+
},
|
|
107
|
+
inputDisabled: {
|
|
108
|
+
backgroundColor: "#f5f5f5",
|
|
109
|
+
opacity: 0.6,
|
|
110
|
+
},
|
|
111
|
+
errorText: {
|
|
112
|
+
marginTop: 4,
|
|
113
|
+
fontSize: 12,
|
|
114
|
+
color: "#dc3545",
|
|
115
|
+
},
|
|
116
|
+
});
|
|
117
|
+
//# sourceMappingURL=FvDateField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvDateField.js","sourceRoot":"","sources":["../../src/components/FvDateField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ViewStyle, TextStyle } from "react-native";
|
|
3
|
+
import { ValidationSchema } from "@fovestta2/validation-engine";
|
|
4
|
+
export interface DropdownOption {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string | number;
|
|
7
|
+
}
|
|
8
|
+
export interface FvDropdownProps {
|
|
9
|
+
label?: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
value: string | number;
|
|
12
|
+
options: DropdownOption[];
|
|
13
|
+
schema?: ValidationSchema;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
onChange: (value: string | number) => void;
|
|
16
|
+
onBlur?: () => void;
|
|
17
|
+
containerStyle?: ViewStyle;
|
|
18
|
+
dropdownStyle?: ViewStyle;
|
|
19
|
+
labelStyle?: TextStyle;
|
|
20
|
+
errorStyle?: TextStyle;
|
|
21
|
+
optionStyle?: ViewStyle;
|
|
22
|
+
optionTextStyle?: TextStyle;
|
|
23
|
+
}
|
|
24
|
+
export declare const FvDropdown: React.FC<FvDropdownProps>;
|
|
25
|
+
//# sourceMappingURL=FvDropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FvDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAMH,SAAS,EACT,SAAS,EAEZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4IhD,CAAC"}
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.FvDropdown = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const react_native_1 = require("react-native");
|
|
29
|
+
const validation_engine_1 = require("@fovestta2/validation-engine");
|
|
30
|
+
const FvDropdown = ({ label, placeholder = "Select an option", value, options, schema, disabled = false, onChange, onBlur, containerStyle, dropdownStyle, labelStyle, errorStyle, optionStyle, optionTextStyle, }) => {
|
|
31
|
+
const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
|
|
32
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
33
|
+
const [dropdownLayout, setDropdownLayout] = (0, react_1.useState)({ x: 0, y: 0, width: 0, height: 0 });
|
|
34
|
+
const buttonRef = (0, react_1.useRef)(null);
|
|
35
|
+
(0, react_1.useEffect)(() => {
|
|
36
|
+
if (schema) {
|
|
37
|
+
const result = validation_engine_1.Validator.validate(value, schema);
|
|
38
|
+
setErrorMessage(result.errorKey);
|
|
39
|
+
}
|
|
40
|
+
}, [value, schema]);
|
|
41
|
+
const toggleDropdown = () => {
|
|
42
|
+
if (disabled)
|
|
43
|
+
return;
|
|
44
|
+
if (!isOpen) {
|
|
45
|
+
buttonRef.current?.measure((x, y, width, height, pageX, pageY) => {
|
|
46
|
+
setDropdownLayout({ x: pageX, y: pageY, width, height });
|
|
47
|
+
setIsOpen(true);
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
setIsOpen(false);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const handleSelect = (selectedValue) => {
|
|
55
|
+
onChange(selectedValue);
|
|
56
|
+
setIsOpen(false);
|
|
57
|
+
onBlur?.();
|
|
58
|
+
};
|
|
59
|
+
const getErrorMessage = () => {
|
|
60
|
+
if (!errorMessage)
|
|
61
|
+
return "";
|
|
62
|
+
const errorMessages = {
|
|
63
|
+
ERR_REQUIRED: "This field is required",
|
|
64
|
+
ERR_INVALID_VALUE: "Invalid selection",
|
|
65
|
+
};
|
|
66
|
+
return errorMessages[errorMessage] || errorMessage;
|
|
67
|
+
};
|
|
68
|
+
const isRequired = schema?.rules?.some((r) => r.name === "required" && r.params?.enabled);
|
|
69
|
+
const selectedOption = options.find((opt) => opt.value === value);
|
|
70
|
+
const displayText = selectedOption ? selectedOption.label : placeholder;
|
|
71
|
+
return (<react_native_1.View style={[styles.container, containerStyle]}>
|
|
72
|
+
{label && (<react_native_1.View style={styles.labelContainer}>
|
|
73
|
+
<react_native_1.Text style={[styles.label, labelStyle]}>
|
|
74
|
+
{label}
|
|
75
|
+
{isRequired && <react_native_1.Text style={styles.requiredAsterisk}> *</react_native_1.Text>}
|
|
76
|
+
</react_native_1.Text>
|
|
77
|
+
</react_native_1.View>)}
|
|
78
|
+
|
|
79
|
+
<react_native_1.TouchableOpacity ref={buttonRef} style={[
|
|
80
|
+
styles.dropdown,
|
|
81
|
+
errorMessage && styles.dropdownError,
|
|
82
|
+
disabled && styles.dropdownDisabled,
|
|
83
|
+
dropdownStyle,
|
|
84
|
+
]} onPress={toggleDropdown} disabled={disabled}>
|
|
85
|
+
<react_native_1.Text style={[styles.dropdownText, !selectedOption && styles.placeholderText]}>
|
|
86
|
+
{displayText}
|
|
87
|
+
</react_native_1.Text>
|
|
88
|
+
<react_native_1.Text style={styles.arrow}>{isOpen ? "▲" : "▼"}</react_native_1.Text>
|
|
89
|
+
</react_native_1.TouchableOpacity>
|
|
90
|
+
|
|
91
|
+
<react_native_1.Modal visible={isOpen} transparent animationType="none" onRequestClose={() => setIsOpen(false)}>
|
|
92
|
+
<react_native_1.TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setIsOpen(false)}>
|
|
93
|
+
<react_native_1.View style={[
|
|
94
|
+
styles.dropdownList,
|
|
95
|
+
{
|
|
96
|
+
position: 'absolute',
|
|
97
|
+
top: dropdownLayout.y + dropdownLayout.height,
|
|
98
|
+
left: dropdownLayout.x,
|
|
99
|
+
width: dropdownLayout.width,
|
|
100
|
+
}
|
|
101
|
+
]}>
|
|
102
|
+
<react_native_1.FlatList data={options} keyExtractor={(item) => item.value.toString()} renderItem={({ item }) => (<react_native_1.TouchableOpacity style={[
|
|
103
|
+
styles.option,
|
|
104
|
+
item.value === value && styles.selectedOption,
|
|
105
|
+
optionStyle,
|
|
106
|
+
]} onPress={() => handleSelect(item.value)}>
|
|
107
|
+
<react_native_1.Text style={[
|
|
108
|
+
styles.optionText,
|
|
109
|
+
item.value === value && styles.selectedOptionText,
|
|
110
|
+
optionTextStyle,
|
|
111
|
+
]}>
|
|
112
|
+
{item.label}
|
|
113
|
+
</react_native_1.Text>
|
|
114
|
+
</react_native_1.TouchableOpacity>)} scrollEnabled={true}/>
|
|
115
|
+
</react_native_1.View>
|
|
116
|
+
</react_native_1.TouchableOpacity>
|
|
117
|
+
</react_native_1.Modal>
|
|
118
|
+
|
|
119
|
+
{errorMessage && (<react_native_1.Text style={[styles.errorText, errorStyle]}>
|
|
120
|
+
⚠ {getErrorMessage()}
|
|
121
|
+
</react_native_1.Text>)}
|
|
122
|
+
</react_native_1.View>);
|
|
123
|
+
};
|
|
124
|
+
exports.FvDropdown = FvDropdown;
|
|
125
|
+
const styles = react_native_1.StyleSheet.create({
|
|
126
|
+
container: {
|
|
127
|
+
marginBottom: 16,
|
|
128
|
+
width: "100%",
|
|
129
|
+
},
|
|
130
|
+
labelContainer: {
|
|
131
|
+
marginBottom: 6,
|
|
132
|
+
},
|
|
133
|
+
label: {
|
|
134
|
+
fontSize: 14,
|
|
135
|
+
fontWeight: "500",
|
|
136
|
+
color: "#333333",
|
|
137
|
+
},
|
|
138
|
+
requiredAsterisk: {
|
|
139
|
+
color: "#dc3545",
|
|
140
|
+
fontWeight: "bold",
|
|
141
|
+
},
|
|
142
|
+
dropdown: {
|
|
143
|
+
padding: 10,
|
|
144
|
+
borderWidth: 1,
|
|
145
|
+
borderColor: "#cccccc",
|
|
146
|
+
borderRadius: 4,
|
|
147
|
+
backgroundColor: "#ffffff",
|
|
148
|
+
flexDirection: "row",
|
|
149
|
+
justifyContent: "space-between",
|
|
150
|
+
alignItems: "center",
|
|
151
|
+
minHeight: 45,
|
|
152
|
+
},
|
|
153
|
+
dropdownError: {
|
|
154
|
+
borderColor: "#dc3545",
|
|
155
|
+
},
|
|
156
|
+
dropdownDisabled: {
|
|
157
|
+
backgroundColor: "#f5f5f5",
|
|
158
|
+
opacity: 0.6,
|
|
159
|
+
},
|
|
160
|
+
dropdownText: {
|
|
161
|
+
fontSize: 14,
|
|
162
|
+
color: "#333333",
|
|
163
|
+
flex: 1,
|
|
164
|
+
},
|
|
165
|
+
placeholderText: {
|
|
166
|
+
color: "#999999",
|
|
167
|
+
},
|
|
168
|
+
arrow: {
|
|
169
|
+
fontSize: 10,
|
|
170
|
+
color: "#666666",
|
|
171
|
+
marginLeft: 8,
|
|
172
|
+
},
|
|
173
|
+
errorText: {
|
|
174
|
+
marginTop: 4,
|
|
175
|
+
fontSize: 12,
|
|
176
|
+
color: "#dc3545",
|
|
177
|
+
},
|
|
178
|
+
modalOverlay: {
|
|
179
|
+
flex: 1,
|
|
180
|
+
backgroundColor: "transparent",
|
|
181
|
+
},
|
|
182
|
+
dropdownList: {
|
|
183
|
+
backgroundColor: "#ffffff",
|
|
184
|
+
borderWidth: 1,
|
|
185
|
+
borderColor: "#cccccc",
|
|
186
|
+
borderRadius: 4,
|
|
187
|
+
marginTop: 2,
|
|
188
|
+
maxHeight: 250,
|
|
189
|
+
elevation: 10,
|
|
190
|
+
shadowColor: "#000",
|
|
191
|
+
shadowOffset: { width: 0, height: 4 },
|
|
192
|
+
shadowOpacity: 0.3,
|
|
193
|
+
shadowRadius: 5,
|
|
194
|
+
},
|
|
195
|
+
option: {
|
|
196
|
+
padding: 15,
|
|
197
|
+
borderBottomWidth: 1,
|
|
198
|
+
borderBottomColor: "#eeeeee",
|
|
199
|
+
backgroundColor: "#ffffff",
|
|
200
|
+
},
|
|
201
|
+
selectedOption: {
|
|
202
|
+
backgroundColor: "#f0f7ff",
|
|
203
|
+
},
|
|
204
|
+
optionText: {
|
|
205
|
+
fontSize: 14,
|
|
206
|
+
color: "#333333",
|
|
207
|
+
},
|
|
208
|
+
selectedOptionText: {
|
|
209
|
+
fontWeight: "600",
|
|
210
|
+
color: "#007bff",
|
|
211
|
+
},
|
|
212
|
+
});
|
|
213
|
+
//# sourceMappingURL=FvDropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvDropdown.js","sourceRoot":"","sources":["../../src/components/FvDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ViewStyle, TextStyle } from "react-native";
|
|
3
|
+
import { ValidationSchema } from "@fovestta2/validation-engine";
|
|
4
|
+
export interface FvEntryFieldProps {
|
|
5
|
+
label?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
value: string;
|
|
8
|
+
schema?: ValidationSchema;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
readonly?: boolean;
|
|
11
|
+
type?: "text" | "password" | "email";
|
|
12
|
+
onChange: (value: string) => void;
|
|
13
|
+
onBlur?: () => void;
|
|
14
|
+
onFocus?: () => void;
|
|
15
|
+
containerStyle?: ViewStyle;
|
|
16
|
+
inputStyle?: TextStyle;
|
|
17
|
+
labelStyle?: TextStyle;
|
|
18
|
+
errorStyle?: TextStyle;
|
|
19
|
+
}
|
|
20
|
+
export declare const FvEntryField: React.FC<FvEntryFieldProps>;
|
|
21
|
+
//# sourceMappingURL=FvEntryField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FvEntryField.d.ts","sourceRoot":"","sources":["../../src/components/FvEntryField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAML,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+FpD,CAAC"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.FvEntryField = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const react_native_1 = require("react-native");
|
|
29
|
+
const validation_engine_1 = require("@fovestta2/validation-engine");
|
|
30
|
+
const FvEntryField = ({ label, placeholder, value, schema, disabled = false, readonly = false, type = "text", onChange, onBlur, onFocus, containerStyle, inputStyle, labelStyle, errorStyle, }) => {
|
|
31
|
+
const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
if (schema) {
|
|
34
|
+
const result = validation_engine_1.Validator.validate(value, schema);
|
|
35
|
+
setErrorMessage(result.errorKey);
|
|
36
|
+
}
|
|
37
|
+
}, [value, schema]);
|
|
38
|
+
const handleChange = (text) => {
|
|
39
|
+
onChange(text);
|
|
40
|
+
};
|
|
41
|
+
const handleBlur = () => {
|
|
42
|
+
onBlur?.();
|
|
43
|
+
};
|
|
44
|
+
const getErrorMessage = () => {
|
|
45
|
+
if (!errorMessage)
|
|
46
|
+
return "";
|
|
47
|
+
const errorMessages = {
|
|
48
|
+
ERR_REQUIRED: "This field is required",
|
|
49
|
+
ERR_MIN_LENGTH: "Value is too short",
|
|
50
|
+
ERR_MAX_LENGTH: "Value is too long",
|
|
51
|
+
ERR_REGEX_MISMATCH: "Invalid format",
|
|
52
|
+
};
|
|
53
|
+
return errorMessages[errorMessage] || errorMessage;
|
|
54
|
+
};
|
|
55
|
+
const isRequired = schema?.rules?.some((r) => r.name === "required" && r.params.enabled);
|
|
56
|
+
// Determine secure text entry for password
|
|
57
|
+
const secureTextEntry = type === "password";
|
|
58
|
+
// Determine keyboard type
|
|
59
|
+
const getKeyboardType = () => {
|
|
60
|
+
if (type === "email")
|
|
61
|
+
return "email-address";
|
|
62
|
+
return "default";
|
|
63
|
+
};
|
|
64
|
+
return (<react_native_1.View style={[styles.container, containerStyle]}>
|
|
65
|
+
{label && (<react_native_1.View style={styles.labelContainer}>
|
|
66
|
+
<react_native_1.Text style={[styles.label, labelStyle]}>
|
|
67
|
+
{label}
|
|
68
|
+
{isRequired && <react_native_1.Text style={styles.requiredAsterisk}> *</react_native_1.Text>}
|
|
69
|
+
</react_native_1.Text>
|
|
70
|
+
</react_native_1.View>)}
|
|
71
|
+
|
|
72
|
+
<react_native_1.TextInput style={[
|
|
73
|
+
styles.input,
|
|
74
|
+
errorMessage && styles.inputError,
|
|
75
|
+
disabled && styles.inputDisabled,
|
|
76
|
+
inputStyle,
|
|
77
|
+
]} value={value} placeholder={placeholder} onChangeText={handleChange} onBlur={handleBlur} onFocus={onFocus} editable={!disabled && !readonly} secureTextEntry={secureTextEntry} keyboardType={getKeyboardType()} placeholderTextColor="#999999"/>
|
|
78
|
+
|
|
79
|
+
{errorMessage && (<react_native_1.Text style={[styles.errorText, errorStyle]}>
|
|
80
|
+
⚠ {getErrorMessage()}
|
|
81
|
+
</react_native_1.Text>)}
|
|
82
|
+
</react_native_1.View>);
|
|
83
|
+
};
|
|
84
|
+
exports.FvEntryField = FvEntryField;
|
|
85
|
+
const styles = react_native_1.StyleSheet.create({
|
|
86
|
+
container: {
|
|
87
|
+
marginBottom: 16,
|
|
88
|
+
width: "100%",
|
|
89
|
+
},
|
|
90
|
+
labelContainer: {
|
|
91
|
+
marginBottom: 6,
|
|
92
|
+
},
|
|
93
|
+
label: {
|
|
94
|
+
fontSize: 14,
|
|
95
|
+
fontWeight: "500",
|
|
96
|
+
color: "#333333",
|
|
97
|
+
},
|
|
98
|
+
requiredAsterisk: {
|
|
99
|
+
color: "#dc3545",
|
|
100
|
+
fontWeight: "bold",
|
|
101
|
+
},
|
|
102
|
+
input: {
|
|
103
|
+
padding: 10,
|
|
104
|
+
borderWidth: 1,
|
|
105
|
+
borderColor: "#cccccc",
|
|
106
|
+
borderRadius: 4,
|
|
107
|
+
fontSize: 14,
|
|
108
|
+
backgroundColor: "#ffffff",
|
|
109
|
+
color: "#333333",
|
|
110
|
+
},
|
|
111
|
+
inputError: {
|
|
112
|
+
borderColor: "#dc3545",
|
|
113
|
+
},
|
|
114
|
+
inputDisabled: {
|
|
115
|
+
backgroundColor: "#f5f5f5",
|
|
116
|
+
opacity: 0.6,
|
|
117
|
+
},
|
|
118
|
+
errorText: {
|
|
119
|
+
marginTop: 4,
|
|
120
|
+
fontSize: 12,
|
|
121
|
+
color: "#dc3545",
|
|
122
|
+
},
|
|
123
|
+
});
|
|
124
|
+
//# sourceMappingURL=FvEntryField.js.map
|