@nexara/nativeflow
Version:
Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.
121 lines (120 loc) • 4.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _ResponsiveCalculations = require("../../helpers/ResponsiveCalculations.js");
var _index = require("../../hooks/index.js");
var _index2 = require("../StyledComponents/index.js");
var _generateColors = _interopRequireDefault(require("./generateColors.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const UserInput = /*#__PURE__*/(0, _react.forwardRef)(({
variant = 'standard',
label,
bg,
br = 10,
stroke = 1,
labelColor,
textVariant = {
label: 'h5',
inputText: 'h5',
helperText: 'h6'
},
inputTextColor,
strokeColor,
cursorColor,
placeholderColor,
inputFs = 13,
labelFs,
helperTextFS,
placeholder = 'Please enter...',
disabled = false,
isError = false,
helperText = '',
multiline = false,
renderLeftIcon,
renderRightIcon,
styles,
...rest
}, ref) => {
const theme = (0, _index.useTheme)();
const STYLES = (0, _react.useMemo)(Styles, []);
const {
computedCursorColor,
computedPlaceholderColor,
computedLabelColor
} = (0, _react.useMemo)(() => (0, _generateColors.default)(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
const dynamicStyles = {
INPUT_CONT: {
alignItems: multiline ? 'flex-start' : 'center',
backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
borderWidth: variant === 'standard' ? 0 : stroke,
borderBottomWidth: stroke,
borderRadius: (0, _ResponsiveCalculations.verticalScale)(br),
height: multiline ? undefined : (0, _ResponsiveCalculations.verticalScale)(48),
paddingVertical: multiline ? (0, _ResponsiveCalculations.horizontalScale)(10) : undefined
},
INPUT: {
color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
//@ts-ignore
fontSize: (0, _ResponsiveCalculations.responsiveFontSize)(theme.typography.variantSizes[textVariant.inputText] ?? inputFs),
textAlignVertical: multiline ? 'top' : 'center',
minHeight: multiline ? 100 : undefined,
maxHeight: multiline ? 150 : undefined
},
ERROR_HELPER_TEXT: {
color: theme.colors.error
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.StyledView, {
gap: (0, _ResponsiveCalculations.verticalScale)(5),
style: styles?.mainContainer,
w: "100%",
children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StyledText, {
variant: textVariant?.label,
fs: labelFs,
color: computedLabelColor,
style: styles?.label,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.StyledView, {
style: [STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer],
children: [renderLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
ref: ref,
style: [STYLES.INPUT, dynamicStyles.INPUT, styles?.input],
placeholder: placeholder,
placeholderTextColor: computedPlaceholderColor,
editable: !disabled,
multiline: multiline,
cursorColor: computedCursorColor,
...rest
}), renderRightIcon]
}), isError && helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StyledText, {
variant: textVariant?.helperText,
fs: helperTextFS,
style: [STYLES.ERROR_HELPER_TEXT, dynamicStyles.ERROR_HELPER_TEXT, styles?.helperText],
children: helperText
})]
})
});
});
var _default = exports.default = UserInput;
const Styles = () => _reactNative.StyleSheet.create({
INPUT_CONT: {
flexDirection: 'row',
paddingHorizontal: (0, _ResponsiveCalculations.horizontalScale)(14),
gap: (0, _ResponsiveCalculations.horizontalScale)(10)
},
INPUT: {
padding: 0,
flex: 1
},
ERROR_HELPER_TEXT: {
paddingHorizontal: 5
}
});
//# sourceMappingURL=UserInput.js.map