rn-inputforge 0.3.1 → 0.4.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/README.md +224 -19
- package/lib/commonjs/components/FieldFlowCheckbox/FieldFlowCheckbox.js +131 -0
- package/lib/commonjs/components/FieldFlowCheckbox/FieldFlowCheckbox.js.map +1 -0
- package/lib/commonjs/components/FieldFlowCheckbox/index.js +13 -0
- package/lib/commonjs/components/FieldFlowCheckbox/index.js.map +1 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.js +536 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.js.map +1 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/index.js +13 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/index.js.map +1 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/types.js +6 -0
- package/lib/commonjs/components/FieldFlowDateTimePicker/types.js.map +1 -0
- package/lib/commonjs/components/FieldFlowDropdown/FieldFlowDropdown.js +24 -9
- package/lib/commonjs/components/FieldFlowDropdown/FieldFlowDropdown.js.map +1 -1
- package/lib/commonjs/components/FieldFlowInput/FieldFlowInput.js +55 -24
- package/lib/commonjs/components/FieldFlowInput/FieldFlowInput.js.map +1 -1
- package/lib/commonjs/components/FieldFlowInput/styles.js +32 -11
- package/lib/commonjs/components/FieldFlowInput/styles.js.map +1 -1
- package/lib/commonjs/components/FieldFlowMaskedInput/FieldFlowMaskedInput.js +66 -0
- package/lib/commonjs/components/FieldFlowMaskedInput/FieldFlowMaskedInput.js.map +1 -0
- package/lib/commonjs/components/FieldFlowMaskedInput/index.js +13 -0
- package/lib/commonjs/components/FieldFlowMaskedInput/index.js.map +1 -0
- package/lib/commonjs/components/FieldFlowMaskedInput/types.js +6 -0
- package/lib/commonjs/components/FieldFlowMaskedInput/types.js.map +1 -0
- package/lib/commonjs/components/FieldFlowOTP/FieldFlowOTP.js +255 -0
- package/lib/commonjs/components/FieldFlowOTP/FieldFlowOTP.js.map +1 -0
- package/lib/commonjs/components/FieldFlowOTP/index.js +13 -0
- package/lib/commonjs/components/FieldFlowOTP/index.js.map +1 -0
- package/lib/commonjs/components/FieldFlowOTP/types.js +6 -0
- package/lib/commonjs/components/FieldFlowOTP/types.js.map +1 -0
- package/lib/commonjs/components/FieldFlowRadio/FieldFlowRadio.js +164 -0
- package/lib/commonjs/components/FieldFlowRadio/FieldFlowRadio.js.map +1 -0
- package/lib/commonjs/components/FieldFlowRadio/index.js +13 -0
- package/lib/commonjs/components/FieldFlowRadio/index.js.map +1 -0
- package/lib/commonjs/components/FieldFlowSwitch/FieldFlowSwitch.js +152 -0
- package/lib/commonjs/components/FieldFlowSwitch/FieldFlowSwitch.js.map +1 -0
- package/lib/commonjs/components/FieldFlowSwitch/index.js +13 -0
- package/lib/commonjs/components/FieldFlowSwitch/index.js.map +1 -0
- package/lib/commonjs/hooks/index.js.map +1 -1
- package/lib/commonjs/hooks/useFieldFlowForm.js +146 -31
- package/lib/commonjs/hooks/useFieldFlowForm.js.map +1 -1
- package/lib/commonjs/icons/Icon.js +719 -30
- package/lib/commonjs/icons/Icon.js.map +1 -1
- package/lib/commonjs/icons/index.js +7 -0
- package/lib/commonjs/icons/index.js.map +1 -1
- package/lib/commonjs/icons/renderIcon.js +24 -0
- package/lib/commonjs/icons/renderIcon.js.map +1 -0
- package/lib/commonjs/index.js +127 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/utils/masks.js +130 -0
- package/lib/commonjs/utils/masks.js.map +1 -0
- package/lib/commonjs/validation/index.js +25 -0
- package/lib/commonjs/validation/index.js.map +1 -1
- package/lib/commonjs/validation/zodAdapter.js +91 -0
- package/lib/commonjs/validation/zodAdapter.js.map +1 -0
- package/lib/module/components/FieldFlowCheckbox/FieldFlowCheckbox.js +126 -0
- package/lib/module/components/FieldFlowCheckbox/FieldFlowCheckbox.js.map +1 -0
- package/lib/module/components/FieldFlowCheckbox/index.js +4 -0
- package/lib/module/components/FieldFlowCheckbox/index.js.map +1 -0
- package/lib/module/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.js +531 -0
- package/lib/module/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.js.map +1 -0
- package/lib/module/components/FieldFlowDateTimePicker/index.js +4 -0
- package/lib/module/components/FieldFlowDateTimePicker/index.js.map +1 -0
- package/lib/module/components/FieldFlowDateTimePicker/types.js +4 -0
- package/lib/module/components/FieldFlowDateTimePicker/types.js.map +1 -0
- package/lib/module/components/FieldFlowDropdown/FieldFlowDropdown.js +24 -9
- package/lib/module/components/FieldFlowDropdown/FieldFlowDropdown.js.map +1 -1
- package/lib/module/components/FieldFlowInput/FieldFlowInput.js +59 -28
- package/lib/module/components/FieldFlowInput/FieldFlowInput.js.map +1 -1
- package/lib/module/components/FieldFlowInput/styles.js +32 -11
- package/lib/module/components/FieldFlowInput/styles.js.map +1 -1
- package/lib/module/components/FieldFlowMaskedInput/FieldFlowMaskedInput.js +61 -0
- package/lib/module/components/FieldFlowMaskedInput/FieldFlowMaskedInput.js.map +1 -0
- package/lib/module/components/FieldFlowMaskedInput/index.js +4 -0
- package/lib/module/components/FieldFlowMaskedInput/index.js.map +1 -0
- package/lib/module/components/FieldFlowMaskedInput/types.js +4 -0
- package/lib/module/components/FieldFlowMaskedInput/types.js.map +1 -0
- package/lib/module/components/FieldFlowOTP/FieldFlowOTP.js +250 -0
- package/lib/module/components/FieldFlowOTP/FieldFlowOTP.js.map +1 -0
- package/lib/module/components/FieldFlowOTP/index.js +4 -0
- package/lib/module/components/FieldFlowOTP/index.js.map +1 -0
- package/lib/module/components/FieldFlowOTP/types.js +4 -0
- package/lib/module/components/FieldFlowOTP/types.js.map +1 -0
- package/lib/module/components/FieldFlowRadio/FieldFlowRadio.js +159 -0
- package/lib/module/components/FieldFlowRadio/FieldFlowRadio.js.map +1 -0
- package/lib/module/components/FieldFlowRadio/index.js +4 -0
- package/lib/module/components/FieldFlowRadio/index.js.map +1 -0
- package/lib/module/components/FieldFlowSwitch/FieldFlowSwitch.js +147 -0
- package/lib/module/components/FieldFlowSwitch/FieldFlowSwitch.js.map +1 -0
- package/lib/module/components/FieldFlowSwitch/index.js +4 -0
- package/lib/module/components/FieldFlowSwitch/index.js.map +1 -0
- package/lib/module/hooks/index.js.map +1 -1
- package/lib/module/hooks/useFieldFlowForm.js +147 -32
- package/lib/module/hooks/useFieldFlowForm.js.map +1 -1
- package/lib/module/icons/Icon.js +720 -31
- package/lib/module/icons/Icon.js.map +1 -1
- package/lib/module/icons/index.js +1 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/icons/renderIcon.js +19 -0
- package/lib/module/icons/renderIcon.js.map +1 -0
- package/lib/module/index.js +11 -3
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/masks.js +118 -0
- package/lib/module/utils/masks.js.map +1 -0
- package/lib/module/validation/index.js +1 -0
- package/lib/module/validation/index.js.map +1 -1
- package/lib/module/validation/zodAdapter.js +84 -0
- package/lib/module/validation/zodAdapter.js.map +1 -0
- package/lib/typescript/components/FieldFlowCheckbox/FieldFlowCheckbox.d.ts +36 -0
- package/lib/typescript/components/FieldFlowCheckbox/FieldFlowCheckbox.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowCheckbox/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowCheckbox/index.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.d.ts +4 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/index.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/types.d.ts +55 -0
- package/lib/typescript/components/FieldFlowDateTimePicker/types.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowDropdown/FieldFlowDropdown.d.ts.map +1 -1
- package/lib/typescript/components/FieldFlowDropdown/types.d.ts +7 -1
- package/lib/typescript/components/FieldFlowDropdown/types.d.ts.map +1 -1
- package/lib/typescript/components/FieldFlowInput/FieldFlowInput.d.ts.map +1 -1
- package/lib/typescript/components/FieldFlowInput/styles.d.ts +19 -2
- package/lib/typescript/components/FieldFlowInput/styles.d.ts.map +1 -1
- package/lib/typescript/components/FieldFlowInput/types.d.ts +24 -5
- package/lib/typescript/components/FieldFlowInput/types.d.ts.map +1 -1
- package/lib/typescript/components/FieldFlowMaskedInput/FieldFlowMaskedInput.d.ts +5 -0
- package/lib/typescript/components/FieldFlowMaskedInput/FieldFlowMaskedInput.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowMaskedInput/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowMaskedInput/index.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowMaskedInput/types.d.ts +20 -0
- package/lib/typescript/components/FieldFlowMaskedInput/types.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowOTP/FieldFlowOTP.d.ts +4 -0
- package/lib/typescript/components/FieldFlowOTP/FieldFlowOTP.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowOTP/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowOTP/index.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowOTP/types.d.ts +52 -0
- package/lib/typescript/components/FieldFlowOTP/types.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowRadio/FieldFlowRadio.d.ts +39 -0
- package/lib/typescript/components/FieldFlowRadio/FieldFlowRadio.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowRadio/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowRadio/index.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowSwitch/FieldFlowSwitch.d.ts +31 -0
- package/lib/typescript/components/FieldFlowSwitch/FieldFlowSwitch.d.ts.map +1 -0
- package/lib/typescript/components/FieldFlowSwitch/index.d.ts +3 -0
- package/lib/typescript/components/FieldFlowSwitch/index.d.ts.map +1 -0
- package/lib/typescript/hooks/index.d.ts +1 -1
- package/lib/typescript/hooks/index.d.ts.map +1 -1
- package/lib/typescript/hooks/useFieldFlowForm.d.ts +46 -7
- package/lib/typescript/hooks/useFieldFlowForm.d.ts.map +1 -1
- package/lib/typescript/icons/Icon.d.ts +2 -2
- package/lib/typescript/icons/Icon.d.ts.map +1 -1
- package/lib/typescript/icons/index.d.ts +2 -0
- package/lib/typescript/icons/index.d.ts.map +1 -1
- package/lib/typescript/icons/renderIcon.d.ts +6 -0
- package/lib/typescript/icons/renderIcon.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +20 -6
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/types/index.d.ts +4 -0
- package/lib/typescript/types/index.d.ts.map +1 -1
- package/lib/typescript/utils/masks.d.ts +37 -0
- package/lib/typescript/utils/masks.d.ts.map +1 -0
- package/lib/typescript/validation/index.d.ts +2 -0
- package/lib/typescript/validation/index.d.ts.map +1 -1
- package/lib/typescript/validation/zodAdapter.d.ts +53 -0
- package/lib/typescript/validation/zodAdapter.d.ts.map +1 -0
- package/package.json +17 -3
- package/src/components/FieldFlowCheckbox/FieldFlowCheckbox.tsx +174 -0
- package/src/components/FieldFlowCheckbox/index.ts +2 -0
- package/src/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.tsx +585 -0
- package/src/components/FieldFlowDateTimePicker/index.ts +2 -0
- package/src/components/FieldFlowDateTimePicker/types.ts +57 -0
- package/src/components/FieldFlowDropdown/FieldFlowDropdown.tsx +17 -7
- package/src/components/FieldFlowDropdown/types.ts +8 -1
- package/src/components/FieldFlowInput/FieldFlowInput.tsx +69 -26
- package/src/components/FieldFlowInput/styles.ts +41 -6
- package/src/components/FieldFlowInput/types.ts +24 -5
- package/src/components/FieldFlowMaskedInput/FieldFlowMaskedInput.tsx +76 -0
- package/src/components/FieldFlowMaskedInput/index.ts +2 -0
- package/src/components/FieldFlowMaskedInput/types.ts +22 -0
- package/src/components/FieldFlowOTP/FieldFlowOTP.tsx +305 -0
- package/src/components/FieldFlowOTP/index.ts +2 -0
- package/src/components/FieldFlowOTP/types.ts +57 -0
- package/src/components/FieldFlowRadio/FieldFlowRadio.tsx +215 -0
- package/src/components/FieldFlowRadio/index.ts +2 -0
- package/src/components/FieldFlowSwitch/FieldFlowSwitch.tsx +172 -0
- package/src/components/FieldFlowSwitch/index.ts +2 -0
- package/src/hooks/index.ts +3 -0
- package/src/hooks/useFieldFlowForm.ts +209 -33
- package/src/icons/Icon.tsx +451 -5
- package/src/icons/index.ts +2 -0
- package/src/icons/renderIcon.tsx +17 -0
- package/src/index.ts +47 -4
- package/src/types/index.ts +5 -0
- package/src/utils/masks.ts +137 -0
- package/src/validation/index.ts +7 -0
- package/src/validation/zodAdapter.ts +103 -0
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FieldFlowOTP = FieldFlowOTP;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _ThemeProvider = require("../../theme/ThemeProvider");
|
|
10
|
+
var _defaultTheme = require("../../theme/defaultTheme");
|
|
11
|
+
var _useFieldState = require("../../hooks/useFieldState");
|
|
12
|
+
var _styles = require("../FieldFlowInput/styles");
|
|
13
|
+
var _masks = require("../../utils/masks");
|
|
14
|
+
var _renderIcon = require("../../icons/renderIcon");
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
|
+
function FieldFlowOTP({
|
|
18
|
+
length = 6,
|
|
19
|
+
value,
|
|
20
|
+
onChangeText,
|
|
21
|
+
onComplete,
|
|
22
|
+
label,
|
|
23
|
+
helperText,
|
|
24
|
+
errorText,
|
|
25
|
+
hasError,
|
|
26
|
+
successText,
|
|
27
|
+
isSuccess,
|
|
28
|
+
disabled,
|
|
29
|
+
required,
|
|
30
|
+
secure = false,
|
|
31
|
+
autoFocus = true,
|
|
32
|
+
leftIcon = 'otp',
|
|
33
|
+
rightIcon,
|
|
34
|
+
iconSize = 18,
|
|
35
|
+
onLeftIconPress,
|
|
36
|
+
onRightIconPress,
|
|
37
|
+
cellGap,
|
|
38
|
+
cellSize,
|
|
39
|
+
containerStyle,
|
|
40
|
+
rowStyle,
|
|
41
|
+
cellStyle,
|
|
42
|
+
cellFocusedStyle,
|
|
43
|
+
cellTextStyle,
|
|
44
|
+
labelStyle,
|
|
45
|
+
helperStyle,
|
|
46
|
+
errorStyle,
|
|
47
|
+
theme: themeOverride,
|
|
48
|
+
testID,
|
|
49
|
+
renderCell
|
|
50
|
+
}) {
|
|
51
|
+
const contextTheme = (0, _ThemeProvider.useFieldFlowTheme)();
|
|
52
|
+
const theme = (0, _react.useMemo)(() => themeOverride ? (0, _ThemeProvider.mergeDeep)(contextTheme ?? _defaultTheme.defaultTheme, themeOverride) : contextTheme ?? _defaultTheme.defaultTheme, [contextTheme, themeOverride]);
|
|
53
|
+
const isControlled = value !== undefined;
|
|
54
|
+
const [internal, setInternal] = (0, _react.useState)('');
|
|
55
|
+
const code = (isControlled ? value ?? '' : internal).slice(0, length);
|
|
56
|
+
const digits = code.padEnd(length, ' ').split('').map(c => c === ' ' ? '' : c);
|
|
57
|
+
const [focusedIndex, setFocusedIndex] = (0, _react.useState)(autoFocus ? 0 : null);
|
|
58
|
+
const refs = (0, _react.useRef)([]);
|
|
59
|
+
const state = (0, _useFieldState.useFieldState)({
|
|
60
|
+
isFocused: focusedIndex !== null,
|
|
61
|
+
hasError: Boolean(hasError || errorText),
|
|
62
|
+
isSuccess,
|
|
63
|
+
disabled
|
|
64
|
+
});
|
|
65
|
+
const styles = (0, _react.useMemo)(() => createStyles(theme, state, cellGap ?? theme.spacing.gap, cellSize), [theme, state, cellGap, cellSize]);
|
|
66
|
+
const iconColor = state === 'focused' ? theme.colors.iconFocused : theme.colors.icon;
|
|
67
|
+
const commit = (0, _react.useCallback)(next => {
|
|
68
|
+
const clipped = (0, _masks.digitsOnly)(next).slice(0, length);
|
|
69
|
+
if (!isControlled) setInternal(clipped);
|
|
70
|
+
onChangeText?.(clipped);
|
|
71
|
+
if (clipped.length === length) onComplete?.(clipped);
|
|
72
|
+
}, [isControlled, length, onChangeText, onComplete]);
|
|
73
|
+
const focusAt = (0, _react.useCallback)(index => {
|
|
74
|
+
const clamped = Math.max(0, Math.min(length - 1, index));
|
|
75
|
+
refs.current[clamped]?.focus();
|
|
76
|
+
setFocusedIndex(clamped);
|
|
77
|
+
}, [length]);
|
|
78
|
+
const handleChangeAt = (0, _react.useCallback)((index, text) => {
|
|
79
|
+
if (disabled) return;
|
|
80
|
+
const incoming = (0, _masks.digitsOnly)(text);
|
|
81
|
+
if (incoming.length > 1) {
|
|
82
|
+
commit(incoming);
|
|
83
|
+
focusAt(Math.min(incoming.length, length) - 1);
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const next = digits.slice();
|
|
87
|
+
next[index] = incoming.slice(-1);
|
|
88
|
+
commit(next.join(''));
|
|
89
|
+
if (incoming && index < length - 1) focusAt(index + 1);
|
|
90
|
+
}, [commit, digits, disabled, focusAt, length]);
|
|
91
|
+
const handleKeyPress = (0, _react.useCallback)((index, e) => {
|
|
92
|
+
if (e.nativeEvent.key !== 'Backspace') return;
|
|
93
|
+
if (digits[index]) {
|
|
94
|
+
const next = digits.slice();
|
|
95
|
+
next[index] = '';
|
|
96
|
+
commit(next.join(''));
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
if (index > 0) {
|
|
100
|
+
const next = digits.slice();
|
|
101
|
+
next[index - 1] = '';
|
|
102
|
+
commit(next.join(''));
|
|
103
|
+
focusAt(index - 1);
|
|
104
|
+
}
|
|
105
|
+
}, [commit, digits, focusAt]);
|
|
106
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
107
|
+
style: [styles.wrapper, containerStyle],
|
|
108
|
+
testID: testID,
|
|
109
|
+
accessibilityLabel: label ?? 'One-time code',
|
|
110
|
+
children: [(label || leftIcon || rightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
111
|
+
style: styles.labelRow,
|
|
112
|
+
children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
113
|
+
onPress: onLeftIconPress,
|
|
114
|
+
disabled: !onLeftIconPress,
|
|
115
|
+
hitSlop: 8,
|
|
116
|
+
style: styles.labelIcon,
|
|
117
|
+
children: (0, _renderIcon.renderFieldFlowIcon)(leftIcon, iconColor, iconSize)
|
|
118
|
+
}) : null, label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
119
|
+
style: [styles.label, labelStyle],
|
|
120
|
+
children: [label, required ? ' *' : '']
|
|
121
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
122
|
+
style: {
|
|
123
|
+
flex: 1
|
|
124
|
+
}
|
|
125
|
+
}), rightIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
126
|
+
onPress: onRightIconPress,
|
|
127
|
+
disabled: !onRightIconPress,
|
|
128
|
+
hitSlop: 8,
|
|
129
|
+
style: styles.labelIcon,
|
|
130
|
+
children: (0, _renderIcon.renderFieldFlowIcon)(rightIcon, iconColor, iconSize)
|
|
131
|
+
}) : null]
|
|
132
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
133
|
+
style: [styles.row, rowStyle],
|
|
134
|
+
children: digits.map((digit, index) => {
|
|
135
|
+
const isFocused = focusedIndex === index;
|
|
136
|
+
if (renderCell) {
|
|
137
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
138
|
+
children: renderCell({
|
|
139
|
+
index,
|
|
140
|
+
digit,
|
|
141
|
+
isFocused,
|
|
142
|
+
onChangeText: text => handleChangeAt(index, text)
|
|
143
|
+
})
|
|
144
|
+
}, index);
|
|
145
|
+
}
|
|
146
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
147
|
+
onPress: () => !disabled && focusAt(index),
|
|
148
|
+
style: [styles.cell, {
|
|
149
|
+
borderColor: (0, _styles.borderColorFor)(theme, isFocused ? 'focused' : state),
|
|
150
|
+
borderWidth: isFocused ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth
|
|
151
|
+
}, cellStyle, isFocused ? cellFocusedStyle : null],
|
|
152
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
153
|
+
ref: r => {
|
|
154
|
+
refs.current[index] = r;
|
|
155
|
+
},
|
|
156
|
+
value: digit,
|
|
157
|
+
onChangeText: text => handleChangeAt(index, text),
|
|
158
|
+
onKeyPress: e => handleKeyPress(index, e),
|
|
159
|
+
onFocus: () => setFocusedIndex(index),
|
|
160
|
+
onBlur: () => setFocusedIndex(prev => prev === index ? null : prev),
|
|
161
|
+
editable: !disabled,
|
|
162
|
+
keyboardType: "number-pad",
|
|
163
|
+
textContentType: "oneTimeCode",
|
|
164
|
+
autoComplete: "sms-otp",
|
|
165
|
+
secureTextEntry: secure,
|
|
166
|
+
maxLength: length,
|
|
167
|
+
selectTextOnFocus: true,
|
|
168
|
+
autoFocus: autoFocus && index === 0,
|
|
169
|
+
style: [styles.cellInput, cellTextStyle],
|
|
170
|
+
caretHidden: true,
|
|
171
|
+
accessibilityLabel: `Digit ${index + 1} of ${length}`
|
|
172
|
+
})
|
|
173
|
+
}, index);
|
|
174
|
+
})
|
|
175
|
+
}), (helperText || errorText || successText) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
176
|
+
style: styles.footer,
|
|
177
|
+
children: errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
178
|
+
style: [styles.errorText, errorStyle, helperStyle],
|
|
179
|
+
children: errorText
|
|
180
|
+
}) : successText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
181
|
+
style: [styles.successText, helperStyle],
|
|
182
|
+
children: successText
|
|
183
|
+
}) : helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
184
|
+
style: [styles.helperText, helperStyle],
|
|
185
|
+
children: helperText
|
|
186
|
+
}) : null
|
|
187
|
+
})]
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
function createStyles(theme, state, gap, cellSize) {
|
|
191
|
+
return _reactNative.StyleSheet.create({
|
|
192
|
+
wrapper: {
|
|
193
|
+
marginBottom: theme.spacing.gap * 2
|
|
194
|
+
},
|
|
195
|
+
labelRow: {
|
|
196
|
+
flexDirection: 'row',
|
|
197
|
+
alignItems: 'center',
|
|
198
|
+
marginBottom: theme.spacing.gap / 1.5,
|
|
199
|
+
gap: theme.spacing.gap
|
|
200
|
+
},
|
|
201
|
+
labelIcon: {
|
|
202
|
+
alignItems: 'center',
|
|
203
|
+
justifyContent: 'center'
|
|
204
|
+
},
|
|
205
|
+
label: {
|
|
206
|
+
flex: 1,
|
|
207
|
+
fontSize: theme.typography.labelFontSize,
|
|
208
|
+
color: (0, _styles.labelColorFor)(theme, state),
|
|
209
|
+
fontWeight: '500',
|
|
210
|
+
fontFamily: theme.typography.fontFamily
|
|
211
|
+
},
|
|
212
|
+
row: {
|
|
213
|
+
flexDirection: 'row',
|
|
214
|
+
justifyContent: 'space-between',
|
|
215
|
+
gap
|
|
216
|
+
},
|
|
217
|
+
cell: {
|
|
218
|
+
flex: cellSize ? undefined : 1,
|
|
219
|
+
width: cellSize,
|
|
220
|
+
height: cellSize,
|
|
221
|
+
aspectRatio: cellSize ? undefined : 0.9,
|
|
222
|
+
maxWidth: cellSize ?? 56,
|
|
223
|
+
borderRadius: theme.spacing.borderRadius,
|
|
224
|
+
backgroundColor: state === 'disabled' ? theme.colors.backgroundDisabled : theme.colors.background,
|
|
225
|
+
alignItems: 'center',
|
|
226
|
+
justifyContent: 'center'
|
|
227
|
+
},
|
|
228
|
+
cellInput: {
|
|
229
|
+
width: '100%',
|
|
230
|
+
height: '100%',
|
|
231
|
+
textAlign: 'center',
|
|
232
|
+
fontSize: theme.typography.fontSize + 4,
|
|
233
|
+
fontWeight: '600',
|
|
234
|
+
color: theme.colors.text,
|
|
235
|
+
padding: 0,
|
|
236
|
+
fontFamily: theme.typography.fontFamily
|
|
237
|
+
},
|
|
238
|
+
footer: {
|
|
239
|
+
marginTop: theme.spacing.gap / 1.5
|
|
240
|
+
},
|
|
241
|
+
helperText: {
|
|
242
|
+
fontSize: theme.typography.helperFontSize,
|
|
243
|
+
color: theme.colors.label
|
|
244
|
+
},
|
|
245
|
+
errorText: {
|
|
246
|
+
fontSize: theme.typography.helperFontSize,
|
|
247
|
+
color: theme.colors.error
|
|
248
|
+
},
|
|
249
|
+
successText: {
|
|
250
|
+
fontSize: theme.typography.helperFontSize,
|
|
251
|
+
color: theme.colors.success
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
//# sourceMappingURL=FieldFlowOTP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_ThemeProvider","_defaultTheme","_useFieldState","_styles","_masks","_renderIcon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FieldFlowOTP","length","value","onChangeText","onComplete","label","helperText","errorText","hasError","successText","isSuccess","disabled","required","secure","autoFocus","leftIcon","rightIcon","iconSize","onLeftIconPress","onRightIconPress","cellGap","cellSize","containerStyle","rowStyle","cellStyle","cellFocusedStyle","cellTextStyle","labelStyle","helperStyle","errorStyle","theme","themeOverride","testID","renderCell","contextTheme","useFieldFlowTheme","useMemo","mergeDeep","defaultTheme","isControlled","undefined","internal","setInternal","useState","code","slice","digits","padEnd","split","map","c","focusedIndex","setFocusedIndex","refs","useRef","state","useFieldState","isFocused","Boolean","styles","createStyles","spacing","gap","iconColor","colors","iconFocused","icon","commit","useCallback","next","clipped","digitsOnly","focusAt","index","clamped","Math","max","min","current","focus","handleChangeAt","text","incoming","join","handleKeyPress","nativeEvent","key","jsxs","View","style","wrapper","accessibilityLabel","children","labelRow","jsx","Pressable","onPress","hitSlop","labelIcon","renderFieldFlowIcon","Text","flex","row","digit","cell","borderColor","borderColorFor","borderWidth","borderWidthFocused","TextInput","ref","onKeyPress","onFocus","onBlur","prev","editable","keyboardType","textContentType","autoComplete","secureTextEntry","maxLength","selectTextOnFocus","cellInput","caretHidden","footer","StyleSheet","create","marginBottom","flexDirection","alignItems","justifyContent","fontSize","typography","labelFontSize","color","labelColorFor","fontWeight","fontFamily","width","height","aspectRatio","maxWidth","borderRadius","backgroundColor","backgroundDisabled","background","textAlign","padding","marginTop","helperFontSize","error","success"],"sourceRoot":"../../../../src","sources":["components/FieldFlowOTP/FieldFlowOTP.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "FieldFlowOTP", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _FieldFlowOTP.FieldFlowOTP;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _FieldFlowOTP = require("./FieldFlowOTP");
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_FieldFlowOTP","require"],"sourceRoot":"../../../../src","sources":["components/FieldFlowOTP/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/FieldFlowOTP/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FieldFlowRadio = FieldFlowRadio;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _ThemeProvider = require("../../theme/ThemeProvider");
|
|
10
|
+
var _defaultTheme = require("../../theme/defaultTheme");
|
|
11
|
+
var _icons = require("../../icons");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
function FieldFlowRadio({
|
|
15
|
+
options,
|
|
16
|
+
value,
|
|
17
|
+
onChange,
|
|
18
|
+
label,
|
|
19
|
+
helperText,
|
|
20
|
+
errorText,
|
|
21
|
+
disabled,
|
|
22
|
+
required,
|
|
23
|
+
direction = 'vertical',
|
|
24
|
+
leftIcon,
|
|
25
|
+
selectedIcon = 'radioFilled',
|
|
26
|
+
unselectedIcon = 'radio',
|
|
27
|
+
iconSize = 20,
|
|
28
|
+
selectedColor,
|
|
29
|
+
containerStyle,
|
|
30
|
+
optionStyle,
|
|
31
|
+
labelStyle,
|
|
32
|
+
helperStyle,
|
|
33
|
+
errorStyle,
|
|
34
|
+
theme: themeOverride,
|
|
35
|
+
testID,
|
|
36
|
+
renderOption
|
|
37
|
+
}) {
|
|
38
|
+
const contextTheme = (0, _ThemeProvider.useFieldFlowTheme)();
|
|
39
|
+
const theme = (0, _react.useMemo)(() => themeOverride ? (0, _ThemeProvider.mergeDeep)(contextTheme ?? _defaultTheme.defaultTheme, themeOverride) : contextTheme ?? _defaultTheme.defaultTheme, [contextTheme, themeOverride]);
|
|
40
|
+
const styles = (0, _react.useMemo)(() => createStyles(theme, Boolean(errorText), Boolean(disabled), direction), [theme, errorText, disabled, direction]);
|
|
41
|
+
const active = selectedColor ?? theme.colors.borderFocused;
|
|
42
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
43
|
+
style: [styles.wrapper, containerStyle],
|
|
44
|
+
testID: testID,
|
|
45
|
+
accessibilityRole: "radiogroup",
|
|
46
|
+
accessibilityLabel: label,
|
|
47
|
+
children: [(label || leftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
48
|
+
style: styles.labelRow,
|
|
49
|
+
children: [leftIcon ? (0, _icons.renderFieldFlowIcon)(leftIcon, theme.colors.icon, 18) : null, label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
50
|
+
style: [styles.groupLabel, labelStyle],
|
|
51
|
+
children: [label, required ? ' *' : '']
|
|
52
|
+
}) : null]
|
|
53
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
54
|
+
style: styles.options,
|
|
55
|
+
children: options.map(option => {
|
|
56
|
+
const selected = value === option.value;
|
|
57
|
+
const itemDisabled = Boolean(disabled || option.disabled);
|
|
58
|
+
const onPress = () => onChange(option.value);
|
|
59
|
+
if (renderOption) {
|
|
60
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
61
|
+
children: renderOption({
|
|
62
|
+
option,
|
|
63
|
+
selected,
|
|
64
|
+
disabled: itemDisabled,
|
|
65
|
+
onPress
|
|
66
|
+
})
|
|
67
|
+
}, option.value);
|
|
68
|
+
}
|
|
69
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
|
|
70
|
+
onPress: () => !itemDisabled && onPress(),
|
|
71
|
+
disabled: itemDisabled,
|
|
72
|
+
style: [styles.optionRow, itemDisabled && styles.optionDisabled, optionStyle],
|
|
73
|
+
accessibilityRole: "radio",
|
|
74
|
+
accessibilityState: {
|
|
75
|
+
selected,
|
|
76
|
+
disabled: itemDisabled
|
|
77
|
+
},
|
|
78
|
+
accessibilityLabel: option.label,
|
|
79
|
+
hitSlop: 4,
|
|
80
|
+
children: [(0, _icons.renderFieldFlowIcon)(selected ? selectedIcon : unselectedIcon, selected ? active : errorText ? theme.colors.borderError : theme.colors.border, iconSize), option.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
81
|
+
style: styles.optionIcon,
|
|
82
|
+
children: (0, _icons.renderFieldFlowIcon)(option.icon, theme.colors.icon, 18)
|
|
83
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
84
|
+
style: styles.optionTextCol,
|
|
85
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
86
|
+
style: styles.optionLabel,
|
|
87
|
+
children: option.label
|
|
88
|
+
}), option.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
89
|
+
style: styles.optionDescription,
|
|
90
|
+
children: option.description
|
|
91
|
+
}) : null]
|
|
92
|
+
})]
|
|
93
|
+
}, option.value);
|
|
94
|
+
})
|
|
95
|
+
}), errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
96
|
+
style: [styles.errorText, errorStyle, helperStyle],
|
|
97
|
+
children: errorText
|
|
98
|
+
}) : helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
99
|
+
style: [styles.helperText, helperStyle],
|
|
100
|
+
children: helperText
|
|
101
|
+
}) : null]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function createStyles(theme, hasError, disabled, direction) {
|
|
105
|
+
return _reactNative.StyleSheet.create({
|
|
106
|
+
wrapper: {
|
|
107
|
+
marginBottom: theme.spacing.gap * 2,
|
|
108
|
+
opacity: disabled ? 0.6 : 1
|
|
109
|
+
},
|
|
110
|
+
labelRow: {
|
|
111
|
+
flexDirection: 'row',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
gap: theme.spacing.gap,
|
|
114
|
+
marginBottom: theme.spacing.gap
|
|
115
|
+
},
|
|
116
|
+
groupLabel: {
|
|
117
|
+
fontSize: theme.typography.labelFontSize,
|
|
118
|
+
color: hasError ? theme.colors.error : theme.colors.label,
|
|
119
|
+
fontWeight: '500',
|
|
120
|
+
fontFamily: theme.typography.fontFamily
|
|
121
|
+
},
|
|
122
|
+
options: {
|
|
123
|
+
flexDirection: direction === 'horizontal' ? 'row' : 'column',
|
|
124
|
+
flexWrap: direction === 'horizontal' ? 'wrap' : 'nowrap',
|
|
125
|
+
gap: theme.spacing.gap * 1.5
|
|
126
|
+
},
|
|
127
|
+
optionRow: {
|
|
128
|
+
flexDirection: 'row',
|
|
129
|
+
alignItems: 'flex-start',
|
|
130
|
+
gap: theme.spacing.gap,
|
|
131
|
+
minWidth: direction === 'horizontal' ? '40%' : undefined
|
|
132
|
+
},
|
|
133
|
+
optionDisabled: {
|
|
134
|
+
opacity: 0.5
|
|
135
|
+
},
|
|
136
|
+
optionIcon: {
|
|
137
|
+
marginTop: 1
|
|
138
|
+
},
|
|
139
|
+
optionTextCol: {
|
|
140
|
+
flex: 1
|
|
141
|
+
},
|
|
142
|
+
optionLabel: {
|
|
143
|
+
fontSize: theme.typography.fontSize,
|
|
144
|
+
color: theme.colors.text,
|
|
145
|
+
fontFamily: theme.typography.fontFamily
|
|
146
|
+
},
|
|
147
|
+
optionDescription: {
|
|
148
|
+
fontSize: theme.typography.helperFontSize,
|
|
149
|
+
color: theme.colors.placeholder,
|
|
150
|
+
marginTop: 2
|
|
151
|
+
},
|
|
152
|
+
helperText: {
|
|
153
|
+
marginTop: theme.spacing.gap / 1.5,
|
|
154
|
+
fontSize: theme.typography.helperFontSize,
|
|
155
|
+
color: theme.colors.label
|
|
156
|
+
},
|
|
157
|
+
errorText: {
|
|
158
|
+
marginTop: theme.spacing.gap / 1.5,
|
|
159
|
+
fontSize: theme.typography.helperFontSize,
|
|
160
|
+
color: theme.colors.error
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
//# sourceMappingURL=FieldFlowRadio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_ThemeProvider","_defaultTheme","_icons","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FieldFlowRadio","options","value","onChange","label","helperText","errorText","disabled","required","direction","leftIcon","selectedIcon","unselectedIcon","iconSize","selectedColor","containerStyle","optionStyle","labelStyle","helperStyle","errorStyle","theme","themeOverride","testID","renderOption","contextTheme","useFieldFlowTheme","useMemo","mergeDeep","defaultTheme","styles","createStyles","Boolean","active","colors","borderFocused","jsxs","View","style","wrapper","accessibilityRole","accessibilityLabel","children","labelRow","renderFieldFlowIcon","icon","Text","groupLabel","jsx","map","option","selected","itemDisabled","onPress","Pressable","optionRow","optionDisabled","accessibilityState","hitSlop","borderError","border","optionIcon","optionTextCol","optionLabel","description","optionDescription","hasError","StyleSheet","create","marginBottom","spacing","gap","opacity","flexDirection","alignItems","fontSize","typography","labelFontSize","color","error","fontWeight","fontFamily","flexWrap","minWidth","undefined","marginTop","flex","text","helperFontSize","placeholder"],"sourceRoot":"../../../../src","sources":["components/FieldFlowRadio/FieldFlowRadio.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA4E,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAqCrE,SAASkB,cAAcA,CAAC;EAC7BC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,SAAS,GAAG,UAAU;EACtBC,QAAQ;EACRC,YAAY,GAAG,aAAa;EAC5BC,cAAc,GAAG,OAAO;EACxBC,QAAQ,GAAG,EAAE;EACbC,aAAa;EACbC,cAAc;EACdC,WAAW;EACXC,UAAU;EACVC,WAAW;EACXC,UAAU;EACVC,KAAK,EAAEC,aAAa;EACpBC,MAAM;EACNC;AACmB,CAAC,EAAE;EACtB,MAAMC,YAAY,GAAG,IAAAC,gCAAiB,EAAC,CAAC;EACxC,MAAML,KAAK,GAAG,IAAAM,cAAO,EACnB,MAAOL,aAAa,GAAG,IAAAM,wBAAS,EAACH,YAAY,IAAII,0BAAY,EAAEP,aAAa,CAAC,GAAGG,YAAY,IAAII,0BAAa,EAC7G,CAACJ,YAAY,EAAEH,aAAa,CAC9B,CAAC;EACD,MAAMQ,MAAM,GAAG,IAAAH,cAAO,EACpB,MAAMI,YAAY,CAACV,KAAK,EAAEW,OAAO,CAACzB,SAAS,CAAC,EAAEyB,OAAO,CAACxB,QAAQ,CAAC,EAAEE,SAAS,CAAC,EAC3E,CAACW,KAAK,EAAEd,SAAS,EAAEC,QAAQ,EAAEE,SAAS,CACxC,CAAC;EACD,MAAMuB,MAAM,GAAGlB,aAAa,IAAIM,KAAK,CAACa,MAAM,CAACC,aAAa;EAE1D,oBACE,IAAAtD,WAAA,CAAAuD,IAAA,EAAC3D,YAAA,CAAA4D,IAAI;IACHC,KAAK,EAAE,CAACR,MAAM,CAACS,OAAO,EAAEvB,cAAc,CAAE;IACxCO,MAAM,EAAEA,MAAO;IACfiB,iBAAiB,EAAC,YAAY;IAC9BC,kBAAkB,EAAEpC,KAAM;IAAAqC,QAAA,GAEzB,CAACrC,KAAK,IAAIM,QAAQ,kBACjB,IAAA9B,WAAA,CAAAuD,IAAA,EAAC3D,YAAA,CAAA4D,IAAI;MAACC,KAAK,EAAER,MAAM,CAACa,QAAS;MAAAD,QAAA,GAC1B/B,QAAQ,GAAG,IAAAiC,0BAAmB,EAACjC,QAAQ,EAAEU,KAAK,CAACa,MAAM,CAACW,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,EACtExC,KAAK,gBACJ,IAAAxB,WAAA,CAAAuD,IAAA,EAAC3D,YAAA,CAAAqE,IAAI;QAACR,KAAK,EAAE,CAACR,MAAM,CAACiB,UAAU,EAAE7B,UAAU,CAAE;QAAAwB,QAAA,GAC1CrC,KAAK,EACLI,QAAQ,GAAG,IAAI,GAAG,EAAE;MAAA,CACjB,CAAC,GACL,IAAI;IAAA,CACJ,CACP,eAED,IAAA5B,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAA4D,IAAI;MAACC,KAAK,EAAER,MAAM,CAAC5B,OAAQ;MAAAwC,QAAA,EACzBxC,OAAO,CAAC+C,GAAG,CAACC,MAAM,IAAI;QACrB,MAAMC,QAAQ,GAAGhD,KAAK,KAAK+C,MAAM,CAAC/C,KAAK;QACvC,MAAMiD,YAAY,GAAGpB,OAAO,CAACxB,QAAQ,IAAI0C,MAAM,CAAC1C,QAAQ,CAAC;QACzD,MAAM6C,OAAO,GAAGA,CAAA,KAAMjD,QAAQ,CAAC8C,MAAM,CAAC/C,KAAK,CAAC;QAE5C,IAAIqB,YAAY,EAAE;UAChB,oBACE,IAAA3C,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAA4D,IAAI;YAAAK,QAAA,EACFlB,YAAY,CAAC;cAAE0B,MAAM;cAAEC,QAAQ;cAAE3C,QAAQ,EAAE4C,YAAY;cAAEC;YAAQ,CAAC;UAAC,GAD3DH,MAAM,CAAC/C,KAEZ,CAAC;QAEX;QAEA,oBACE,IAAAtB,WAAA,CAAAuD,IAAA,EAAC3D,YAAA,CAAA6E,SAAS;UAERD,OAAO,EAAEA,CAAA,KAAM,CAACD,YAAY,IAAIC,OAAO,CAAC,CAAE;UAC1C7C,QAAQ,EAAE4C,YAAa;UACvBd,KAAK,EAAE,CAACR,MAAM,CAACyB,SAAS,EAAEH,YAAY,IAAItB,MAAM,CAAC0B,cAAc,EAAEvC,WAAW,CAAE;UAC9EuB,iBAAiB,EAAC,OAAO;UACzBiB,kBAAkB,EAAE;YAAEN,QAAQ;YAAE3C,QAAQ,EAAE4C;UAAa,CAAE;UACzDX,kBAAkB,EAAES,MAAM,CAAC7C,KAAM;UACjCqD,OAAO,EAAE,CAAE;UAAAhB,QAAA,GAEV,IAAAE,0BAAmB,EAClBO,QAAQ,GAAGvC,YAAY,GAAGC,cAAc,EACxCsC,QAAQ,GAAGlB,MAAM,GAAG1B,SAAS,GAAGc,KAAK,CAACa,MAAM,CAACyB,WAAW,GAAGtC,KAAK,CAACa,MAAM,CAAC0B,MAAM,EAC9E9C,QACF,CAAC,EACAoC,MAAM,CAACL,IAAI,gBACV,IAAAhE,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAA4D,IAAI;YAACC,KAAK,EAAER,MAAM,CAAC+B,UAAW;YAAAnB,QAAA,EAC5B,IAAAE,0BAAmB,EAACM,MAAM,CAACL,IAAI,EAAExB,KAAK,CAACa,MAAM,CAACW,IAAI,EAAE,EAAE;UAAC,CACpD,CAAC,GACL,IAAI,eACR,IAAAhE,WAAA,CAAAuD,IAAA,EAAC3D,YAAA,CAAA4D,IAAI;YAACC,KAAK,EAAER,MAAM,CAACgC,aAAc;YAAApB,QAAA,gBAChC,IAAA7D,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAAqE,IAAI;cAACR,KAAK,EAAER,MAAM,CAACiC,WAAY;cAAArB,QAAA,EAAEQ,MAAM,CAAC7C;YAAK,CAAO,CAAC,EACrD6C,MAAM,CAACc,WAAW,gBACjB,IAAAnF,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAAqE,IAAI;cAACR,KAAK,EAAER,MAAM,CAACmC,iBAAkB;cAAAvB,QAAA,EAAEQ,MAAM,CAACc;YAAW,CAAO,CAAC,GAChE,IAAI;UAAA,CACJ,CAAC;QAAA,GAxBFd,MAAM,CAAC/C,KAyBH,CAAC;MAEhB,CAAC;IAAC,CACE,CAAC,EAENI,SAAS,gBACR,IAAA1B,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAAqE,IAAI;MAACR,KAAK,EAAE,CAACR,MAAM,CAACvB,SAAS,EAAEa,UAAU,EAAED,WAAW,CAAE;MAAAuB,QAAA,EAAEnC;IAAS,CAAO,CAAC,GAC1ED,UAAU,gBACZ,IAAAzB,WAAA,CAAAmE,GAAA,EAACvE,YAAA,CAAAqE,IAAI;MAACR,KAAK,EAAE,CAACR,MAAM,CAACxB,UAAU,EAAEa,WAAW,CAAE;MAAAuB,QAAA,EAAEpC;IAAU,CAAO,CAAC,GAChE,IAAI;EAAA,CACJ,CAAC;AAEX;AAEA,SAASyB,YAAYA,CACnBV,KAAqB,EACrB6C,QAAiB,EACjB1D,QAAiB,EACjBE,SAAoC,EACpC;EACA,OAAOyD,uBAAU,CAACC,MAAM,CAAC;IACvB7B,OAAO,EAAE;MACP8B,YAAY,EAAEhD,KAAK,CAACiD,OAAO,CAACC,GAAG,GAAG,CAAC;MACnCC,OAAO,EAAEhE,QAAQ,GAAG,GAAG,GAAG;IAC5B,CAAC;IACDmC,QAAQ,EAAE;MACR8B,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBH,GAAG,EAAElD,KAAK,CAACiD,OAAO,CAACC,GAAG;MACtBF,YAAY,EAAEhD,KAAK,CAACiD,OAAO,CAACC;IAC9B,CAAC;IACDxB,UAAU,EAAE;MACV4B,QAAQ,EAAEtD,KAAK,CAACuD,UAAU,CAACC,aAAa;MACxCC,KAAK,EAAEZ,QAAQ,GAAG7C,KAAK,CAACa,MAAM,CAAC6C,KAAK,GAAG1D,KAAK,CAACa,MAAM,CAAC7B,KAAK;MACzD2E,UAAU,EAAE,KAAK;MACjBC,UAAU,EAAE5D,KAAK,CAACuD,UAAU,CAACK;IAC/B,CAAC;IACD/E,OAAO,EAAE;MACPuE,aAAa,EAAE/D,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ;MAC5DwE,QAAQ,EAAExE,SAAS,KAAK,YAAY,GAAG,MAAM,GAAG,QAAQ;MACxD6D,GAAG,EAAElD,KAAK,CAACiD,OAAO,CAACC,GAAG,GAAG;IAC3B,CAAC;IACDhB,SAAS,EAAE;MACTkB,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,YAAY;MACxBH,GAAG,EAAElD,KAAK,CAACiD,OAAO,CAACC,GAAG;MACtBY,QAAQ,EAAEzE,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG0E;IACjD,CAAC;IACD5B,cAAc,EAAE;MACdgB,OAAO,EAAE;IACX,CAAC;IACDX,UAAU,EAAE;MACVwB,SAAS,EAAE;IACb,CAAC;IACDvB,aAAa,EAAE;MACbwB,IAAI,EAAE;IACR,CAAC;IACDvB,WAAW,EAAE;MACXY,QAAQ,EAAEtD,KAAK,CAACuD,UAAU,CAACD,QAAQ;MACnCG,KAAK,EAAEzD,KAAK,CAACa,MAAM,CAACqD,IAAI;MACxBN,UAAU,EAAE5D,KAAK,CAACuD,UAAU,CAACK;IAC/B,CAAC;IACDhB,iBAAiB,EAAE;MACjBU,QAAQ,EAAEtD,KAAK,CAACuD,UAAU,CAACY,cAAc;MACzCV,KAAK,EAAEzD,KAAK,CAACa,MAAM,CAACuD,WAAW;MAC/BJ,SAAS,EAAE;IACb,CAAC;IACD/E,UAAU,EAAE;MACV+E,SAAS,EAAEhE,KAAK,CAACiD,OAAO,CAACC,GAAG,GAAG,GAAG;MAClCI,QAAQ,EAAEtD,KAAK,CAACuD,UAAU,CAACY,cAAc;MACzCV,KAAK,EAAEzD,KAAK,CAACa,MAAM,CAAC7B;IACtB,CAAC;IACDE,SAAS,EAAE;MACT8E,SAAS,EAAEhE,KAAK,CAACiD,OAAO,CAACC,GAAG,GAAG,GAAG;MAClCI,QAAQ,EAAEtD,KAAK,CAACuD,UAAU,CAACY,cAAc;MACzCV,KAAK,EAAEzD,KAAK,CAACa,MAAM,CAAC6C;IACtB;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "FieldFlowRadio", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _FieldFlowRadio.FieldFlowRadio;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _FieldFlowRadio = require("./FieldFlowRadio");
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_FieldFlowRadio","require"],"sourceRoot":"../../../../src","sources":["components/FieldFlowRadio/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FieldFlowSwitch = FieldFlowSwitch;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _ThemeProvider = require("../../theme/ThemeProvider");
|
|
10
|
+
var _defaultTheme = require("../../theme/defaultTheme");
|
|
11
|
+
var _icons = require("../../icons");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
function FieldFlowSwitch({
|
|
15
|
+
value,
|
|
16
|
+
onChange,
|
|
17
|
+
label,
|
|
18
|
+
helperText,
|
|
19
|
+
errorText,
|
|
20
|
+
disabled,
|
|
21
|
+
required,
|
|
22
|
+
switchPosition = 'right',
|
|
23
|
+
leftIcon,
|
|
24
|
+
iconSize = 18,
|
|
25
|
+
onTrackColor,
|
|
26
|
+
offTrackColor,
|
|
27
|
+
thumbColor = '#FFFFFF',
|
|
28
|
+
trackStyle,
|
|
29
|
+
thumbStyle,
|
|
30
|
+
containerStyle,
|
|
31
|
+
labelStyle,
|
|
32
|
+
helperStyle,
|
|
33
|
+
errorStyle,
|
|
34
|
+
theme: themeOverride,
|
|
35
|
+
testID
|
|
36
|
+
}) {
|
|
37
|
+
const contextTheme = (0, _ThemeProvider.useFieldFlowTheme)();
|
|
38
|
+
const theme = (0, _react.useMemo)(() => themeOverride ? (0, _ThemeProvider.mergeDeep)(contextTheme ?? _defaultTheme.defaultTheme, themeOverride) : contextTheme ?? _defaultTheme.defaultTheme, [contextTheme, themeOverride]);
|
|
39
|
+
const styles = (0, _react.useMemo)(() => createStyles(theme, Boolean(disabled)), [theme, disabled]);
|
|
40
|
+
const anim = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
|
|
41
|
+
(0, _react.useEffect)(() => {
|
|
42
|
+
_reactNative.Animated.timing(anim, {
|
|
43
|
+
toValue: value ? 1 : 0,
|
|
44
|
+
duration: theme.animation.duration,
|
|
45
|
+
useNativeDriver: false
|
|
46
|
+
}).start();
|
|
47
|
+
}, [anim, theme.animation.duration, value]);
|
|
48
|
+
const trackColor = anim.interpolate({
|
|
49
|
+
inputRange: [0, 1],
|
|
50
|
+
outputRange: [offTrackColor ?? theme.colors.border, onTrackColor ?? theme.colors.borderFocused]
|
|
51
|
+
});
|
|
52
|
+
const thumbTranslate = anim.interpolate({
|
|
53
|
+
inputRange: [0, 1],
|
|
54
|
+
outputRange: [2, 22]
|
|
55
|
+
});
|
|
56
|
+
const switchNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
57
|
+
style: [styles.track, {
|
|
58
|
+
backgroundColor: trackColor
|
|
59
|
+
}, trackStyle],
|
|
60
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
61
|
+
style: [styles.thumb, {
|
|
62
|
+
backgroundColor: thumbColor,
|
|
63
|
+
transform: [{
|
|
64
|
+
translateX: thumbTranslate
|
|
65
|
+
}]
|
|
66
|
+
}, thumbStyle]
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
const labelNode = label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
70
|
+
style: [styles.label, labelStyle],
|
|
71
|
+
children: [label, required ? ' *' : '']
|
|
72
|
+
}) : null;
|
|
73
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
74
|
+
style: [styles.wrapper, containerStyle],
|
|
75
|
+
testID: testID,
|
|
76
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
|
|
77
|
+
onPress: () => !disabled && onChange(!value),
|
|
78
|
+
disabled: disabled,
|
|
79
|
+
style: styles.row,
|
|
80
|
+
accessibilityRole: "switch",
|
|
81
|
+
accessibilityState: {
|
|
82
|
+
checked: value,
|
|
83
|
+
disabled: Boolean(disabled)
|
|
84
|
+
},
|
|
85
|
+
accessibilityLabel: label,
|
|
86
|
+
hitSlop: 6,
|
|
87
|
+
children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
88
|
+
style: styles.leftIcon,
|
|
89
|
+
children: (0, _icons.renderFieldFlowIcon)(leftIcon, theme.colors.icon, iconSize)
|
|
90
|
+
}) : null, switchPosition === 'left' ? switchNode : null, labelNode, switchPosition === 'right' ? switchNode : null]
|
|
91
|
+
}), errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
92
|
+
style: [styles.errorText, errorStyle, helperStyle],
|
|
93
|
+
children: errorText
|
|
94
|
+
}) : helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
95
|
+
style: [styles.helperText, helperStyle],
|
|
96
|
+
children: helperText
|
|
97
|
+
}) : null]
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
function createStyles(theme, disabled) {
|
|
101
|
+
return _reactNative.StyleSheet.create({
|
|
102
|
+
wrapper: {
|
|
103
|
+
marginBottom: theme.spacing.gap * 2,
|
|
104
|
+
opacity: disabled ? 0.6 : 1
|
|
105
|
+
},
|
|
106
|
+
row: {
|
|
107
|
+
flexDirection: 'row',
|
|
108
|
+
alignItems: 'center',
|
|
109
|
+
justifyContent: 'space-between',
|
|
110
|
+
gap: theme.spacing.gap
|
|
111
|
+
},
|
|
112
|
+
leftIcon: {
|
|
113
|
+
marginRight: 2
|
|
114
|
+
},
|
|
115
|
+
label: {
|
|
116
|
+
flex: 1,
|
|
117
|
+
fontSize: theme.typography.fontSize,
|
|
118
|
+
color: theme.colors.text,
|
|
119
|
+
fontFamily: theme.typography.fontFamily
|
|
120
|
+
},
|
|
121
|
+
track: {
|
|
122
|
+
width: 44,
|
|
123
|
+
height: 26,
|
|
124
|
+
borderRadius: 13,
|
|
125
|
+
justifyContent: 'center'
|
|
126
|
+
},
|
|
127
|
+
thumb: {
|
|
128
|
+
width: 20,
|
|
129
|
+
height: 20,
|
|
130
|
+
borderRadius: 10,
|
|
131
|
+
shadowColor: '#000',
|
|
132
|
+
shadowOpacity: 0.15,
|
|
133
|
+
shadowRadius: 2,
|
|
134
|
+
shadowOffset: {
|
|
135
|
+
width: 0,
|
|
136
|
+
height: 1
|
|
137
|
+
},
|
|
138
|
+
elevation: 2
|
|
139
|
+
},
|
|
140
|
+
helperText: {
|
|
141
|
+
marginTop: theme.spacing.gap / 1.5,
|
|
142
|
+
fontSize: theme.typography.helperFontSize,
|
|
143
|
+
color: theme.colors.label
|
|
144
|
+
},
|
|
145
|
+
errorText: {
|
|
146
|
+
marginTop: theme.spacing.gap / 1.5,
|
|
147
|
+
fontSize: theme.typography.helperFontSize,
|
|
148
|
+
color: theme.colors.error
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
//# sourceMappingURL=FieldFlowSwitch.js.map
|