@geekyhawks/react-native-ui-components
Version:
Lightweight, reusable React Native UI components with built-in theming — including Text, TextInput, FloatingLabelTextInput, Button, and more. Fully typed with TypeScript and easy to integrate into any project.
207 lines • 12 kB
JavaScript
"use strict";
/**
* FloatingLabelTextInput
*
* A text input with a floating label that animates above the field
* when focused or when a value is present. Supports style variants,
* size variants, multiline input, and theme integration.
*
* Author: Geeky Hawks FZE LLC
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const theme_1 = require("../../theme");
const Text_1 = require("../Text");
const resolveThemeColor_1 = require("../../theme/utils/resolveThemeColor");
/** Animated Text */
const AnimatedText = react_native_1.Animated.createAnimatedComponent(Text_1.Text);
/**
* FloatingLabelTextInput
*
* A customizable wrapper around React Native's `TextInput` with a floating label.
* Applies default styleVariants, sizeVariants, theme colors, error/helper text handling,
* and supports multiline input.
*/
const FloatingLabelTextInput = (_a) => {
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
var { accessible = true, accessibilityLabel, accessibilityState, containerStyle, disabled = false, error, errorPosition = "left", errorTextStyle, fontFamily, fullWidth = true, helperText, helperTextStyle, inputContainerStyle, inputStyle, label, labelStyle, loading = false, multiline = false, numberOfLines = 1, passwordToggleIcons, secureTextEntry, size = "md", variant = "outline" } = _a, rest = __rest(_a, ["accessible", "accessibilityLabel", "accessibilityState", "containerStyle", "disabled", "error", "errorPosition", "errorTextStyle", "fontFamily", "fullWidth", "helperText", "helperTextStyle", "inputContainerStyle", "inputStyle", "label", "labelStyle", "loading", "multiline", "numberOfLines", "passwordToggleIcons", "secureTextEntry", "size", "variant"]);
const { theme, floatingLabelTextInputStyleVariants, floatingLabelTextInputSizeVariants, } = (0, theme_1.useTheme)();
const isControlled = rest.value != null;
const [isFocused, setFocused] = (0, react_1.useState)(false);
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)("");
const [showPassword, setShowPassword] = (0, react_1.useState)(false);
const sizeVariant = floatingLabelTextInputSizeVariants[size] || floatingLabelTextInputSizeVariants.md;
const styleVariant = floatingLabelTextInputStyleVariants[variant] ||
floatingLabelTextInputStyleVariants.outline;
const inputValue = isControlled ? rest.value : uncontrolledValue;
const isError = !!error;
const hasText = inputValue.length > 0;
const containerHeight = Number((_c = (_b = styleVariant.container) === null || _b === void 0 ? void 0 : _b.minHeight) !== null && _c !== void 0 ? _c : 48);
const labelAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
const focusAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
// Animate label lineHeight so that when shown as placeholder it occupies the full container height
// and centers vertically. When floating, lineHeight collapses to labelFontSize.
const labelLineHeight = labelAnim.interpolate({
inputRange: [0, 1],
outputRange: [containerHeight, sizeVariant.labelFontSize],
});
// Animate font size
const labelFontSize = labelAnim.interpolate({
inputRange: [0, 1],
outputRange: [sizeVariant.fontSize, sizeVariant.labelFontSize],
});
// Animate label color
const labelColor = labelAnim.interpolate({
inputRange: [0, 1],
outputRange: [
theme.colors.muted,
isError ? theme.colors.error : theme.colors.primary,
],
});
const initialBorderColor = (_e = (0, resolveThemeColor_1.resolveThemeColor)((_d = styleVariant.container) === null || _d === void 0 ? void 0 : _d.borderColor, theme)) !== null && _e !== void 0 ? _e : theme.colors.border;
const focusedBorderColor = (isError ? theme.colors.error : theme.colors.primary);
// Animate border color
const borderColor = focusAnim.interpolate({
inputRange: [0, 1],
outputRange: [initialBorderColor, focusedBorderColor],
});
const containerBackgroundColor = (_g = (0, resolveThemeColor_1.resolveThemeColor)((_f = styleVariant.container) === null || _f === void 0 ? void 0 : _f.backgroundColor, theme)) !== null && _g !== void 0 ? _g : "transparent";
const inputTextColor = (_j = (0, resolveThemeColor_1.resolveThemeColor)((_h = styleVariant.input) === null || _h === void 0 ? void 0 : _h.color, theme)) !== null && _j !== void 0 ? _j : theme.colors.text;
const _l = (_k = styleVariant.input) !== null && _k !== void 0 ? _k : {}, { color: _discardColor } = _l, inputStyleVariant = __rest(_l, ["color"]);
(0, react_1.useEffect)(() => {
react_native_1.Animated.parallel([
react_native_1.Animated.timing(focusAnim, {
toValue: isError || isFocused ? 1 : 0,
duration: 200,
useNativeDriver: false,
}),
react_native_1.Animated.timing(labelAnim, {
toValue: hasText || isFocused ? 1 : 0,
duration: 200,
useNativeDriver: false,
}),
]).start();
}, [hasText, isError, isFocused]);
return (react_1.default.createElement(react_native_1.View, { style: [{ width: fullWidth ? "100%" : undefined }, containerStyle], accessible: accessible, accessibilityLabel: label || rest.placeholder, accessibilityState: Object.assign({ disabled }, (error ? { invalid: true } : {})) },
react_1.default.createElement(react_native_1.Animated.View, { style: [
styleVariant.container,
{
opacity: disabled ? 0.6 : 1,
flexDirection: "row",
alignItems: multiline ? "flex-start" : "center",
borderColor: ["outline", "filled"].includes(variant) ? borderColor : undefined,
borderBottomColor: variant === "underline" ? borderColor : undefined,
backgroundColor: containerBackgroundColor,
},
fullWidth && { width: "100%" },
inputContainerStyle,
] },
react_1.default.createElement(AnimatedText, { style: [
Object.assign({ position: "absolute", left: 0, transform: [
{
translateY: labelAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, multiline ? -8 : -containerHeight / 2],
}),
},
], fontSize: labelFontSize, lineHeight: labelLineHeight, color: labelColor }, (["outline", "filled"].includes(variant) && (hasText || isFocused)
? {
backgroundColor: theme.colors.background,
}
: {})),
styleVariant.label,
fontFamily ? { fontFamily } : {},
labelStyle,
] }, label),
react_1.default.createElement(react_native_1.TextInput, Object.assign({}, rest, { style: [
{ flex: 1, color: theme.colors.text, fontFamily: theme.fontFamily },
{
fontSize: sizeVariant.fontSize,
paddingVertical: sizeVariant.paddingVertical,
paddingHorizontal: 0,
textAlignVertical: multiline ? "top" : "center",
minHeight: multiline
? (sizeVariant.fontSize + sizeVariant.paddingVertical * 2) * (numberOfLines || 1)
: undefined,
},
inputStyleVariant,
{ color: inputTextColor },
fontFamily ? { fontFamily } : {},
inputStyle,
], secureTextEntry: secureTextEntry && !showPassword, placeholder: "", editable: !disabled && !loading, multiline: multiline, numberOfLines: numberOfLines, value: inputValue, onChangeText: (text) => {
var _a;
if (!isControlled)
setUncontrolledValue(text);
(_a = rest.onChangeText) === null || _a === void 0 ? void 0 : _a.call(rest, text);
}, onFocus: (e) => {
var _a;
setFocused(true);
(_a = rest.onFocus) === null || _a === void 0 ? void 0 : _a.call(rest, e);
}, onBlur: (e) => {
var _a;
setFocused(false);
(_a = rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
} })),
secureTextEntry ? (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: () => setShowPassword((prev) => !prev) }, passwordToggleIcons ? (showPassword
? passwordToggleIcons.hide || null
: passwordToggleIcons.show || null) : (react_1.default.createElement(Text_1.Text, { variant: "caption", color: theme.colors.primary, style: [
fontFamily ? { fontFamily } : {},
] }, showPassword ? "Hide" : "Show")))) : null,
loading && (react_1.default.createElement(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.primary }))),
isError ? (react_1.default.createElement(Text_1.Text, { variant: "caption", color: theme.colors.error, style: [
{ marginTop: 4, textAlign: errorPosition },
fontFamily ? { fontFamily } : {},
errorTextStyle
] }, error)) : helperText ? (react_1.default.createElement(Text_1.Text, { variant: "caption", color: theme.colors.muted, style: [
{ marginTop: 4 },
fontFamily ? { fontFamily } : {},
helperTextStyle
] }, helperText)) : null));
};
exports.default = FloatingLabelTextInput;
//# sourceMappingURL=FloatingLabelTextInput.js.map