rn-floating-input 0.1.1 → 0.1.2
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/lib/commonjs/ErrorText.js +26 -0
- package/lib/commonjs/ErrorText.js.map +1 -0
- package/lib/commonjs/FloatingInput.js +79 -118
- package/lib/commonjs/FloatingInput.js.map +1 -1
- package/lib/commonjs/FloatingLabel.js +27 -0
- package/lib/commonjs/FloatingLabel.js.map +1 -0
- package/lib/commonjs/defaults.js +31 -26
- package/lib/commonjs/defaults.js.map +1 -1
- package/lib/commonjs/index.js +0 -13
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/useFloatingLabel.js +86 -0
- package/lib/commonjs/useFloatingLabel.js.map +1 -0
- package/lib/module/ErrorText.js +21 -0
- package/lib/module/ErrorText.js.map +1 -0
- package/lib/module/FloatingInput.js +82 -121
- package/lib/module/FloatingInput.js.map +1 -1
- package/lib/module/FloatingLabel.js +22 -0
- package/lib/module/FloatingLabel.js.map +1 -0
- package/lib/module/defaults.js +31 -26
- package/lib/module/defaults.js.map +1 -1
- package/lib/module/index.js +1 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/useFloatingLabel.js +82 -0
- package/lib/module/useFloatingLabel.js.map +1 -0
- package/lib/typescript/ErrorText.d.ts +14 -0
- package/lib/typescript/ErrorText.d.ts.map +1 -0
- package/lib/typescript/FloatingInput.d.ts.map +1 -1
- package/lib/typescript/FloatingLabel.d.ts +17 -0
- package/lib/typescript/FloatingLabel.d.ts.map +1 -0
- package/lib/typescript/defaults.d.ts +2 -1
- package/lib/typescript/defaults.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +2 -3
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/types.d.ts +3 -5
- package/lib/typescript/types.d.ts.map +1 -1
- package/lib/typescript/useFloatingLabel.d.ts +43 -0
- package/lib/typescript/useFloatingLabel.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/ErrorText.tsx +37 -0
- package/src/FloatingInput.tsx +91 -161
- package/src/FloatingLabel.tsx +41 -0
- package/src/defaults.ts +34 -29
- package/src/index.tsx +2 -3
- package/src/types.ts +50 -49
- package/src/useFloatingLabel.ts +111 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ErrorText = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
9
|
+
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
const ErrorText = exports.ErrorText = /*#__PURE__*/_react.default.memo(function ErrorText({
|
|
13
|
+
error,
|
|
14
|
+
theme,
|
|
15
|
+
style
|
|
16
|
+
}) {
|
|
17
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
18
|
+
style: [_defaults.baseStyles.errorText, {
|
|
19
|
+
fontSize: theme.labelActiveFontSize,
|
|
20
|
+
color: theme.errorColor,
|
|
21
|
+
fontFamily: theme.fontFamily
|
|
22
|
+
}, style],
|
|
23
|
+
children: error
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
//# sourceMappingURL=ErrorText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeReanimated","_defaults","_jsxRuntime","e","__esModule","default","ErrorText","exports","React","memo","error","theme","style","jsx","Text","baseStyles","errorText","fontSize","labelActiveFontSize","color","errorColor","fontFamily","children"],"sourceRoot":"../../src","sources":["ErrorText.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,SAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYjC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,SAASH,SAASA,CAAC;EACrDI,KAAK;EACLC,KAAK;EACLC;AACc,CAAC,EAAE;EACjB,oBACE,IAAAV,WAAA,CAAAW,GAAA,EAACb,sBAAA,CAAAK,OAAQ,CAACS,IAAI;IACZF,KAAK,EAAE,CACLG,oBAAU,CAACC,SAAS,EACpB;MACEC,QAAQ,EAAEN,KAAK,CAACO,mBAAmB;MACnCC,KAAK,EAAER,KAAK,CAACS,UAAU;MACvBC,UAAU,EAAEV,KAAK,CAACU;IACpB,CAAC,EACDT,KAAK,CACL;IAAAU,QAAA,EAEDZ;EAAK,CACO,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -8,6 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
10
|
var _defaults = require("./defaults");
|
|
11
|
+
var _ErrorText = require("./ErrorText");
|
|
12
|
+
var _FloatingLabel = require("./FloatingLabel");
|
|
13
|
+
var _useFloatingLabel = require("./useFloatingLabel");
|
|
11
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
15
|
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); }
|
|
13
16
|
const FloatingInput = exports.FloatingInput = /*#__PURE__*/_react.default.forwardRef(({
|
|
@@ -31,136 +34,94 @@ const FloatingInput = exports.FloatingInput = /*#__PURE__*/_react.default.forwar
|
|
|
31
34
|
theme: themeProp,
|
|
32
35
|
styles: stylesProp,
|
|
33
36
|
style,
|
|
34
|
-
animationConfig
|
|
37
|
+
animationConfig,
|
|
35
38
|
textInputProps
|
|
36
39
|
}, ref) => {
|
|
37
40
|
const inputRef = (0, _react.useRef)(null);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
const {
|
|
42
|
+
hasError,
|
|
43
|
+
shouldBeActive,
|
|
44
|
+
theme,
|
|
45
|
+
labelAnimatedStyle,
|
|
46
|
+
handleFocus,
|
|
47
|
+
handleBlur,
|
|
48
|
+
onContainerLayout
|
|
49
|
+
} = (0, _useFloatingLabel.useFloatingLabel)({
|
|
50
|
+
value,
|
|
51
|
+
onFocus,
|
|
52
|
+
onBlur,
|
|
53
|
+
touched,
|
|
54
|
+
error,
|
|
55
|
+
theme: themeProp,
|
|
56
|
+
animationConfig
|
|
57
|
+
});
|
|
51
58
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
52
59
|
focus: () => inputRef.current?.focus(),
|
|
53
60
|
blur: () => inputRef.current?.blur(),
|
|
54
61
|
clear: () => inputRef.current?.clear(),
|
|
55
62
|
isFocused: () => inputRef.current?.isFocused() ?? false
|
|
56
63
|
}));
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
autoCapitalize,
|
|
106
|
-
secureTextEntry,
|
|
107
|
-
selectionColor: theme.selectionColor,
|
|
108
|
-
cursorColor: theme.selectionColor,
|
|
109
|
-
selectionHandleColor: theme.selectionColor,
|
|
110
|
-
underlineColorAndroid: "transparent",
|
|
111
|
-
style: [_defaults.baseStyles.input, {
|
|
112
|
-
color: theme.inputColor,
|
|
113
|
-
fontFamily: theme.fontFamily,
|
|
114
|
-
fontSize: theme.fontSize
|
|
115
|
-
}, right ? _defaults.baseStyles.inputWithRight : undefined, stylesProp?.input],
|
|
116
|
-
...textInputProps
|
|
117
|
-
};
|
|
118
|
-
const inputElement = renderInput ? renderInput(inputProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
119
|
-
...inputProps
|
|
120
|
-
});
|
|
121
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
122
|
-
style: [_defaults.baseStyles.inputContainer, {
|
|
123
|
-
backgroundColor: theme.backgroundColor,
|
|
124
|
-
borderRadius: theme.borderRadius,
|
|
125
|
-
minHeight: theme.minHeight
|
|
126
|
-
}, style, stylesProp?.inputContainer],
|
|
127
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
128
|
-
style: [_defaults.baseStyles.labelAndInputArea, stylesProp?.labelAndInputArea],
|
|
129
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
130
|
-
style: [_defaults.baseStyles.label, {
|
|
131
|
-
color: hasError ? theme.errorColor : theme.labelColor,
|
|
132
|
-
fontFamily: theme.fontFamily
|
|
133
|
-
}, labelAnimatedStyle, stylesProp?.label],
|
|
134
|
-
children: label
|
|
135
|
-
}), inputElement]
|
|
136
|
-
}), right && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
137
|
-
style: [_defaults.baseStyles.rightContainer, stylesProp?.right],
|
|
138
|
-
children: right
|
|
139
|
-
})]
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
function renderContent() {
|
|
143
|
-
if (onPress) {
|
|
144
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
145
|
-
onPress: onPress,
|
|
146
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
147
|
-
pointerEvents: "none",
|
|
148
|
-
children: renderTextInput()
|
|
149
|
-
})
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
return renderTextInput();
|
|
153
|
-
}
|
|
64
|
+
const inputProps = {
|
|
65
|
+
ref: inputRef,
|
|
66
|
+
editable,
|
|
67
|
+
autoFocus,
|
|
68
|
+
maxLength,
|
|
69
|
+
value,
|
|
70
|
+
placeholder: shouldBeActive ? placeholder : undefined,
|
|
71
|
+
placeholderTextColor: theme.placeholderColor,
|
|
72
|
+
onChangeText,
|
|
73
|
+
onBlur: handleBlur,
|
|
74
|
+
onFocus: handleFocus,
|
|
75
|
+
keyboardType,
|
|
76
|
+
autoCapitalize,
|
|
77
|
+
secureTextEntry,
|
|
78
|
+
selectionColor: hasError ? theme.errorColor : theme.selectionColor,
|
|
79
|
+
cursorColor: hasError ? theme.errorColor : theme.selectionColor,
|
|
80
|
+
selectionHandleColor: hasError ? theme.errorColor : theme.selectionColor,
|
|
81
|
+
underlineColorAndroid: "transparent",
|
|
82
|
+
style: [_defaults.baseStyles.input, {
|
|
83
|
+
color: theme.inputColor,
|
|
84
|
+
fontFamily: theme.fontFamily,
|
|
85
|
+
fontSize: theme.fontSize
|
|
86
|
+
}, right ? _defaults.baseStyles.inputWithRight : undefined, stylesProp?.input],
|
|
87
|
+
...textInputProps
|
|
88
|
+
};
|
|
89
|
+
const inputElement = renderInput ? renderInput(inputProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
90
|
+
...inputProps
|
|
91
|
+
});
|
|
92
|
+
const inputContainer = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
93
|
+
onLayout: onContainerLayout,
|
|
94
|
+
style: [_defaults.baseStyles.inputContainer, {
|
|
95
|
+
backgroundColor: theme.backgroundColor,
|
|
96
|
+
borderRadius: theme.borderRadius
|
|
97
|
+
}, style, stylesProp?.inputContainer],
|
|
98
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
99
|
+
style: [_defaults.baseStyles.labelAndInputArea, stylesProp?.labelAndInputArea],
|
|
100
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLabel.FloatingLabel, {
|
|
101
|
+
label: label,
|
|
102
|
+
hasError: hasError,
|
|
103
|
+
theme: theme,
|
|
104
|
+
labelAnimatedStyle: labelAnimatedStyle,
|
|
105
|
+
style: stylesProp?.label
|
|
106
|
+
}), inputElement]
|
|
107
|
+
}), right && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
108
|
+
style: [_defaults.baseStyles.rightContainer, stylesProp?.right],
|
|
109
|
+
children: right
|
|
110
|
+
})]
|
|
111
|
+
});
|
|
154
112
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
155
113
|
layout: _reactNativeReanimated.LinearTransition.springify(),
|
|
156
114
|
style: [_defaults.baseStyles.container, stylesProp?.container],
|
|
157
|
-
children: [
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
|
|
115
|
+
children: [onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
116
|
+
onPress: onPress,
|
|
117
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
118
|
+
pointerEvents: "none",
|
|
119
|
+
children: inputContainer
|
|
120
|
+
})
|
|
121
|
+
}) : inputContainer, hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorText.ErrorText, {
|
|
122
|
+
error: error,
|
|
123
|
+
theme: theme,
|
|
124
|
+
style: stylesProp?.error
|
|
164
125
|
})]
|
|
165
126
|
});
|
|
166
127
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_defaults","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FloatingInput","exports","React","forwardRef","value","onChangeText","onBlur","onFocus","onPress","label","placeholder","error","touched","maxLength","keyboardType","autoFocus","editable","autoCapitalize","secureTextEntry","right","renderInput","theme","themeProp","styles","stylesProp","style","animationConfig","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_defaults","_ErrorText","_FloatingLabel","_useFloatingLabel","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FloatingInput","exports","React","forwardRef","value","onChangeText","onBlur","onFocus","onPress","label","placeholder","error","touched","maxLength","keyboardType","autoFocus","editable","autoCapitalize","secureTextEntry","right","renderInput","theme","themeProp","styles","stylesProp","style","animationConfig","textInputProps","ref","inputRef","useRef","hasError","shouldBeActive","labelAnimatedStyle","handleFocus","handleBlur","onContainerLayout","useFloatingLabel","useImperativeHandle","focus","current","blur","clear","isFocused","inputProps","undefined","placeholderTextColor","placeholderColor","selectionColor","errorColor","cursorColor","selectionHandleColor","underlineColorAndroid","baseStyles","input","color","inputColor","fontFamily","fontSize","inputWithRight","inputElement","jsx","TextInput","inputContainer","jsxs","View","onLayout","backgroundColor","borderRadius","children","labelAndInputArea","FloatingLabel","rightContainer","layout","LinearTransition","springify","container","Pressable","pointerEvents","ErrorText","displayName"],"sourceRoot":"../../src","sources":["FloatingInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FloatingLabel = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
9
|
+
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
const FloatingLabel = exports.FloatingLabel = /*#__PURE__*/_react.default.memo(function FloatingLabel({
|
|
13
|
+
label,
|
|
14
|
+
hasError,
|
|
15
|
+
theme,
|
|
16
|
+
labelAnimatedStyle,
|
|
17
|
+
style
|
|
18
|
+
}) {
|
|
19
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
20
|
+
style: [_defaults.baseStyles.label, {
|
|
21
|
+
color: hasError ? theme.errorColor : theme.labelColor,
|
|
22
|
+
fontFamily: theme.fontFamily
|
|
23
|
+
}, labelAnimatedStyle, style],
|
|
24
|
+
children: label
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
//# sourceMappingURL=FloatingLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeReanimated","_defaults","_jsxRuntime","e","__esModule","default","FloatingLabel","exports","React","memo","label","hasError","theme","labelAnimatedStyle","style","jsx","Text","baseStyles","color","errorColor","labelColor","fontFamily","children"],"sourceRoot":"../../src","sources":["FloatingLabel.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,SAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAcjC,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,SAASH,aAAaA,CAAC;EAC7DI,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,kBAAkB;EAClBC;AACkB,CAAC,EAAE;EACrB,oBACE,IAAAZ,WAAA,CAAAa,GAAA,EAACf,sBAAA,CAAAK,OAAQ,CAACW,IAAI;IACZF,KAAK,EAAE,CACLG,oBAAU,CAACP,KAAK,EAChB;MACEQ,KAAK,EAAEP,QAAQ,GAAGC,KAAK,CAACO,UAAU,GAAGP,KAAK,CAACQ,UAAU;MACrDC,UAAU,EAAET,KAAK,CAACS;IACpB,CAAC,EACDR,kBAAkB,EAClBC,KAAK,CACL;IAAAQ,QAAA,EAEDZ;EAAK,CACO,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}
|
package/lib/commonjs/defaults.js
CHANGED
|
@@ -3,58 +3,63 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.baseStyles = exports.DEFAULT_THEME = exports.DEFAULT_ANIMATION = void 0;
|
|
6
|
+
exports.baseStyles = exports.INPUT_PADDING_TOP = exports.DEFAULT_THEME = exports.DEFAULT_ANIMATION = void 0;
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
|
+
const INPUT_PADDING_TOP = exports.INPUT_PADDING_TOP = 24;
|
|
9
|
+
const INPUT_PADDING_BOTTOM = 8;
|
|
10
|
+
const INPUT_PADDING_HORIZONTAL = 16;
|
|
11
|
+
const RIGHT_CONTAINER_OFFSET = 12;
|
|
12
|
+
const INPUT_WITH_RIGHT_PADDING = 48;
|
|
13
|
+
const ERROR_MARGIN_LEFT = 8;
|
|
14
|
+
const ERROR_MARGIN_TOP = 6;
|
|
8
15
|
const DEFAULT_THEME = exports.DEFAULT_THEME = {
|
|
9
|
-
backgroundColor:
|
|
10
|
-
labelColor:
|
|
11
|
-
inputColor:
|
|
12
|
-
errorColor:
|
|
13
|
-
selectionColor:
|
|
14
|
-
placeholderColor:
|
|
16
|
+
backgroundColor: "#EDEFF2",
|
|
17
|
+
labelColor: "#878A99",
|
|
18
|
+
inputColor: "#36373D",
|
|
19
|
+
errorColor: "#E3152E",
|
|
20
|
+
selectionColor: "#31BE30",
|
|
21
|
+
placeholderColor: "#878A99",
|
|
15
22
|
borderRadius: 14,
|
|
16
|
-
minHeight: 56,
|
|
17
23
|
fontSize: 16,
|
|
18
24
|
labelActiveFontSize: 12,
|
|
19
|
-
fontFamily:
|
|
25
|
+
fontFamily: "System"
|
|
20
26
|
};
|
|
21
27
|
const DEFAULT_ANIMATION = exports.DEFAULT_ANIMATION = {
|
|
22
28
|
labelDuration: 200,
|
|
23
29
|
shakeMagnitude: 2,
|
|
24
|
-
shakeDuration: 50
|
|
25
|
-
labelTranslateY: 10
|
|
30
|
+
shakeDuration: 50
|
|
26
31
|
};
|
|
27
32
|
const baseStyles = exports.baseStyles = _reactNative.StyleSheet.create({
|
|
28
33
|
container: {},
|
|
29
34
|
inputContainer: {
|
|
30
|
-
flexDirection:
|
|
31
|
-
alignItems:
|
|
35
|
+
flexDirection: "row",
|
|
36
|
+
alignItems: "center"
|
|
32
37
|
},
|
|
33
38
|
labelAndInputArea: {
|
|
34
39
|
flex: 1,
|
|
35
|
-
justifyContent:
|
|
40
|
+
justifyContent: "center"
|
|
36
41
|
},
|
|
37
42
|
label: {
|
|
38
|
-
position:
|
|
39
|
-
left:
|
|
43
|
+
position: "absolute",
|
|
44
|
+
left: INPUT_PADDING_HORIZONTAL
|
|
40
45
|
},
|
|
41
46
|
input: {
|
|
42
|
-
paddingTop:
|
|
43
|
-
paddingBottom:
|
|
44
|
-
paddingLeft:
|
|
45
|
-
paddingRight:
|
|
47
|
+
paddingTop: INPUT_PADDING_TOP,
|
|
48
|
+
paddingBottom: INPUT_PADDING_BOTTOM,
|
|
49
|
+
paddingLeft: INPUT_PADDING_HORIZONTAL,
|
|
50
|
+
paddingRight: INPUT_PADDING_HORIZONTAL
|
|
46
51
|
},
|
|
47
52
|
inputWithRight: {
|
|
48
|
-
paddingRight:
|
|
53
|
+
paddingRight: INPUT_WITH_RIGHT_PADDING
|
|
49
54
|
},
|
|
50
55
|
rightContainer: {
|
|
51
|
-
position:
|
|
52
|
-
right:
|
|
53
|
-
alignSelf:
|
|
56
|
+
position: "absolute",
|
|
57
|
+
right: RIGHT_CONTAINER_OFFSET,
|
|
58
|
+
alignSelf: "center"
|
|
54
59
|
},
|
|
55
60
|
errorText: {
|
|
56
|
-
marginLeft:
|
|
57
|
-
marginTop:
|
|
61
|
+
marginLeft: ERROR_MARGIN_LEFT,
|
|
62
|
+
marginTop: ERROR_MARGIN_TOP
|
|
58
63
|
}
|
|
59
64
|
});
|
|
60
65
|
//# sourceMappingURL=defaults.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","INPUT_PADDING_TOP","exports","INPUT_PADDING_BOTTOM","INPUT_PADDING_HORIZONTAL","RIGHT_CONTAINER_OFFSET","INPUT_WITH_RIGHT_PADDING","ERROR_MARGIN_LEFT","ERROR_MARGIN_TOP","DEFAULT_THEME","backgroundColor","labelColor","inputColor","errorColor","selectionColor","placeholderColor","borderRadius","fontSize","labelActiveFontSize","fontFamily","DEFAULT_ANIMATION","labelDuration","shakeMagnitude","shakeDuration","baseStyles","StyleSheet","create","container","inputContainer","flexDirection","alignItems","labelAndInputArea","flex","justifyContent","label","position","left","input","paddingTop","paddingBottom","paddingLeft","paddingRight","inputWithRight","rightContainer","right","alignSelf","errorText","marginLeft","marginTop"],"sourceRoot":"../../src","sources":["defaults.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,EAAE;AACnC,MAAME,oBAAoB,GAAG,CAAC;AAC9B,MAAMC,wBAAwB,GAAG,EAAE;AACnC,MAAMC,sBAAsB,GAAG,EAAE;AACjC,MAAMC,wBAAwB,GAAG,EAAE;AACnC,MAAMC,iBAAiB,GAAG,CAAC;AAC3B,MAAMC,gBAAgB,GAAG,CAAC;AAEnB,MAAMC,aAA2C,GAAAP,OAAA,CAAAO,aAAA,GAAG;EACzDC,eAAe,EAAE,SAAS;EAC1BC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,cAAc,EAAE,SAAS;EACzBC,gBAAgB,EAAE,SAAS;EAC3BC,YAAY,EAAE,EAAE;EAChBC,QAAQ,EAAE,EAAE;EACZC,mBAAmB,EAAE,EAAE;EACvBC,UAAU,EAAE;AACd,CAAC;AAEM,MAAMC,iBAAyD,GAAAlB,OAAA,CAAAkB,iBAAA,GAAG;EACvEC,aAAa,EAAE,GAAG;EAClBC,cAAc,EAAE,CAAC;EACjBC,aAAa,EAAE;AACjB,CAAC;AAEM,MAAMC,UAAU,GAAAtB,OAAA,CAAAsB,UAAA,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC1CC,SAAS,EAAE,CAAC,CAAC;EACbC,cAAc,EAAE;IACdC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDC,iBAAiB,EAAE;IACjBC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB,CAAC;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAEhC;EACR,CAAC;EACDiC,KAAK,EAAE;IACLC,UAAU,EAAErC,iBAAiB;IAC7BsC,aAAa,EAAEpC,oBAAoB;IACnCqC,WAAW,EAAEpC,wBAAwB;IACrCqC,YAAY,EAAErC;EAChB,CAAC;EACDsC,cAAc,EAAE;IACdD,YAAY,EAAEnC;EAChB,CAAC;EACDqC,cAAc,EAAE;IACdR,QAAQ,EAAE,UAAU;IACpBS,KAAK,EAAEvC,sBAAsB;IAC7BwC,SAAS,EAAE;EACb,CAAC;EACDC,SAAS,EAAE;IACTC,UAAU,EAAExC,iBAAiB;IAC7ByC,SAAS,EAAExC;EACb;AACF,CAAC,CAAC","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -3,18 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "DEFAULT_ANIMATION", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _defaults.DEFAULT_ANIMATION;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "DEFAULT_THEME", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _defaults.DEFAULT_THEME;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
6
|
Object.defineProperty(exports, "FloatingInput", {
|
|
19
7
|
enumerable: true,
|
|
20
8
|
get: function () {
|
|
@@ -22,5 +10,4 @@ Object.defineProperty(exports, "FloatingInput", {
|
|
|
22
10
|
}
|
|
23
11
|
});
|
|
24
12
|
var _FloatingInput = require("./FloatingInput");
|
|
25
|
-
var _defaults = require("./defaults");
|
|
26
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_FloatingInput","require"
|
|
1
|
+
{"version":3,"names":["_FloatingInput","require"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useFloatingLabel = useFloatingLabel;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
|
+
var _defaults = require("./defaults");
|
|
10
|
+
function useFloatingLabel({
|
|
11
|
+
value,
|
|
12
|
+
onFocus,
|
|
13
|
+
onBlur,
|
|
14
|
+
touched,
|
|
15
|
+
error,
|
|
16
|
+
theme: themeProp,
|
|
17
|
+
animationConfig: animationProp
|
|
18
|
+
}) {
|
|
19
|
+
const [isFocused, setIsFocused] = (0, _react.useState)(false);
|
|
20
|
+
const hasError = !!touched && !!error;
|
|
21
|
+
const theme = {
|
|
22
|
+
..._defaults.DEFAULT_THEME,
|
|
23
|
+
...themeProp
|
|
24
|
+
};
|
|
25
|
+
const anim = {
|
|
26
|
+
..._defaults.DEFAULT_ANIMATION,
|
|
27
|
+
...animationProp
|
|
28
|
+
};
|
|
29
|
+
const shouldBeActive = isFocused || !!value;
|
|
30
|
+
const focusAnim = (0, _reactNativeReanimated.useSharedValue)(value ? 1 : 0);
|
|
31
|
+
const shakeAnim = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
32
|
+
const containerHeight = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
33
|
+
(0, _react.useEffect)(() => {
|
|
34
|
+
focusAnim.value = (0, _reactNativeReanimated.withTiming)(shouldBeActive ? 1 : 0, {
|
|
35
|
+
duration: anim.labelDuration
|
|
36
|
+
});
|
|
37
|
+
}, [shouldBeActive]);
|
|
38
|
+
(0, _react.useEffect)(() => {
|
|
39
|
+
if (!hasError) return;
|
|
40
|
+
const mag = anim.shakeMagnitude;
|
|
41
|
+
const dur = anim.shakeDuration;
|
|
42
|
+
shakeAnim.value = (0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(-mag, {
|
|
43
|
+
duration: dur
|
|
44
|
+
}), (0, _reactNativeReanimated.withTiming)(mag, {
|
|
45
|
+
duration: dur
|
|
46
|
+
}), (0, _reactNativeReanimated.withTiming)(-mag, {
|
|
47
|
+
duration: dur
|
|
48
|
+
}), (0, _reactNativeReanimated.withTiming)(0, {
|
|
49
|
+
duration: dur
|
|
50
|
+
}));
|
|
51
|
+
}, [hasError]);
|
|
52
|
+
const labelAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
53
|
+
const h = containerHeight.value;
|
|
54
|
+
const translateY = h > 0 ? (0, _reactNativeReanimated.interpolate)(focusAnim.value, [0, 1], [0, -(h / 2 - _defaults.INPUT_PADDING_TOP / 1.75)]) : 0;
|
|
55
|
+
return {
|
|
56
|
+
transform: [{
|
|
57
|
+
translateX: shakeAnim.value
|
|
58
|
+
}, {
|
|
59
|
+
translateY
|
|
60
|
+
}],
|
|
61
|
+
fontSize: (0, _reactNativeReanimated.interpolate)(focusAnim.value, [0, 1], [theme.fontSize, theme.labelActiveFontSize])
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
function handleFocus() {
|
|
65
|
+
setIsFocused(true);
|
|
66
|
+
onFocus?.();
|
|
67
|
+
}
|
|
68
|
+
function handleBlur() {
|
|
69
|
+
setIsFocused(false);
|
|
70
|
+
onBlur?.();
|
|
71
|
+
}
|
|
72
|
+
function onContainerLayout(e) {
|
|
73
|
+
containerHeight.value = e.nativeEvent.layout.height;
|
|
74
|
+
}
|
|
75
|
+
return {
|
|
76
|
+
isFocused,
|
|
77
|
+
hasError,
|
|
78
|
+
shouldBeActive,
|
|
79
|
+
theme,
|
|
80
|
+
labelAnimatedStyle,
|
|
81
|
+
handleFocus,
|
|
82
|
+
handleBlur,
|
|
83
|
+
onContainerLayout
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
//# sourceMappingURL=useFloatingLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNativeReanimated","_defaults","useFloatingLabel","value","onFocus","onBlur","touched","error","theme","themeProp","animationConfig","animationProp","isFocused","setIsFocused","useState","hasError","DEFAULT_THEME","anim","DEFAULT_ANIMATION","shouldBeActive","focusAnim","useSharedValue","shakeAnim","containerHeight","useEffect","withTiming","duration","labelDuration","mag","shakeMagnitude","dur","shakeDuration","withSequence","labelAnimatedStyle","useAnimatedStyle","h","translateY","interpolate","INPUT_PADDING_TOP","transform","translateX","fontSize","labelActiveFontSize","handleFocus","handleBlur","onContainerLayout","e","nativeEvent","layout","height"],"sourceRoot":"../../src","sources":["useFloatingLabel.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AASA,IAAAE,SAAA,GAAAF,OAAA;AAiBO,SAASG,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,OAAO;EACPC,MAAM;EACNC,OAAO;EACPC,KAAK;EACLC,KAAK,EAAEC,SAAS;EAChBC,eAAe,EAAEC;AACM,CAAC,EAAE;EAC1B,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjD,MAAMC,QAAQ,GAAG,CAAC,CAACT,OAAO,IAAI,CAAC,CAACC,KAAK;EAErC,MAAMC,KAAK,GAAG;IAAE,GAAGQ,uBAAa;IAAE,GAAGP;EAAU,CAAC;EAChD,MAAMQ,IAAI,GAAG;IAAE,GAAGC,2BAAiB;IAAE,GAAGP;EAAc,CAAC;EAEvD,MAAMQ,cAAc,GAAGP,SAAS,IAAI,CAAC,CAACT,KAAK;EAC3C,MAAMiB,SAAS,GAAG,IAAAC,qCAAc,EAAClB,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;EAC/C,MAAMmB,SAAS,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EACnC,MAAME,eAAe,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAEzC,IAAAG,gBAAS,EAAC,MAAM;IACdJ,SAAS,CAACjB,KAAK,GAAG,IAAAsB,iCAAU,EAACN,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE;MACnDO,QAAQ,EAAET,IAAI,CAACU;IACjB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACR,cAAc,CAAC,CAAC;EAEpB,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAI,CAACT,QAAQ,EAAE;IACf,MAAMa,GAAG,GAAGX,IAAI,CAACY,cAAc;IAC/B,MAAMC,GAAG,GAAGb,IAAI,CAACc,aAAa;IAC9BT,SAAS,CAACnB,KAAK,GAAG,IAAA6B,mCAAY,EAC5B,IAAAP,iCAAU,EAAC,CAACG,GAAG,EAAE;MAAEF,QAAQ,EAAEI;IAAI,CAAC,CAAC,EACnC,IAAAL,iCAAU,EAACG,GAAG,EAAE;MAAEF,QAAQ,EAAEI;IAAI,CAAC,CAAC,EAClC,IAAAL,iCAAU,EAAC,CAACG,GAAG,EAAE;MAAEF,QAAQ,EAAEI;IAAI,CAAC,CAAC,EACnC,IAAAL,iCAAU,EAAC,CAAC,EAAE;MAAEC,QAAQ,EAAEI;IAAI,CAAC,CACjC,CAAC;EACH,CAAC,EAAE,CAACf,QAAQ,CAAC,CAAC;EAEd,MAAMkB,kBAAkB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAChD,MAAMC,CAAC,GAAGZ,eAAe,CAACpB,KAAK;IAC/B,MAAMiC,UAAU,GACdD,CAAC,GAAG,CAAC,GACD,IAAAE,kCAAW,EACTjB,SAAS,CAACjB,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAE,EAAEgC,CAAC,GAAG,CAAC,GAAGG,2BAAiB,GAAG,IAAI,CAAC,CACzC,CAAC,GACD,CAAC;IAEP,OAAO;MACLC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAElB,SAAS,CAACnB;MAAM,CAAC,EAAE;QAAEiC;MAAW,CAAC,CAAC;MAC5DK,QAAQ,EAAE,IAAAJ,kCAAW,EACnBjB,SAAS,CAACjB,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAACK,KAAK,CAACiC,QAAQ,EAAEjC,KAAK,CAACkC,mBAAmB,CAC5C;IACF,CAAC;EACH,CAAC,CAAC;EAEF,SAASC,WAAWA,CAAA,EAAG;IACrB9B,YAAY,CAAC,IAAI,CAAC;IAClBT,OAAO,GAAG,CAAC;EACb;EAEA,SAASwC,UAAUA,CAAA,EAAG;IACpB/B,YAAY,CAAC,KAAK,CAAC;IACnBR,MAAM,GAAG,CAAC;EACZ;EAEA,SAASwC,iBAAiBA,CAACC,CAAoB,EAAE;IAC/CvB,eAAe,CAACpB,KAAK,GAAG2C,CAAC,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM;EACrD;EAEA,OAAO;IACLrC,SAAS;IACTG,QAAQ;IACRI,cAAc;IACdX,KAAK;IACLyB,kBAAkB;IAClBU,WAAW;IACXC,UAAU;IACVC;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import Animated from "react-native-reanimated";
|
|
5
|
+
import { baseStyles } from "./defaults";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export const ErrorText = /*#__PURE__*/React.memo(function ErrorText({
|
|
8
|
+
error,
|
|
9
|
+
theme,
|
|
10
|
+
style
|
|
11
|
+
}) {
|
|
12
|
+
return /*#__PURE__*/_jsx(Animated.Text, {
|
|
13
|
+
style: [baseStyles.errorText, {
|
|
14
|
+
fontSize: theme.labelActiveFontSize,
|
|
15
|
+
color: theme.errorColor,
|
|
16
|
+
fontFamily: theme.fontFamily
|
|
17
|
+
}, style],
|
|
18
|
+
children: error
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=ErrorText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Animated","baseStyles","jsx","_jsx","ErrorText","memo","error","theme","style","Text","errorText","fontSize","labelActiveFontSize","color","errorColor","fontFamily","children"],"sourceRoot":"../../src","sources":["ErrorText.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,yBAAyB;AAG9C,SAASC,UAAU,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYxC,OAAO,MAAMC,SAAS,gBAAGL,KAAK,CAACM,IAAI,CAAC,SAASD,SAASA,CAAC;EACrDE,KAAK;EACLC,KAAK;EACLC;AACc,CAAC,EAAE;EACjB,oBACEL,IAAA,CAACH,QAAQ,CAACS,IAAI;IACZD,KAAK,EAAE,CACLP,UAAU,CAACS,SAAS,EACpB;MACEC,QAAQ,EAAEJ,KAAK,CAACK,mBAAmB;MACnCC,KAAK,EAAEN,KAAK,CAACO,UAAU;MACvBC,UAAU,EAAER,KAAK,CAACQ;IACpB,CAAC,EACDP,KAAK,CACL;IAAAQ,QAAA,EAEDV;EAAK,CACO,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}
|