@nexara/nativeflow/lib/commonjs/components/UserInput/UserInput.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

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,
  textScale = {
    label: 'sm',
    inputText: 'sm',
    helperText: 'xs'
  },
  inputTextColor,
  strokeColor,
  cursorColor,
  placeholderColor,
  inputFs,
  labelFs,
  helperTextFS,
  placeholder = 'Please enter...',
  disabled = false,
  isError = false,
  helperText,
  multiline = false,
  renderLeftIcon,
  renderRightIcon,
  styles,
  ...rest
}, ref) => {
  const [isFocused, setIsFocused] = (0, _react.useState)(false);
  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.states.disabled || isFocused && theme.colors.states.focus || (bg ?? theme.colors.background.default),
      borderColor: isError && theme.colors.semantic.danger || isFocused && theme.colors.brand.primary || (strokeColor ?? theme.colors.border.default),
      borderWidth: variant === 'standard' ? 0 : stroke,
      borderBottomWidth: stroke,
      borderRadius: (0, _ResponsiveCalculations.verticalScale)(br),
      height: multiline ? undefined : (0, _ResponsiveCalculations.verticalScale)(47),
      paddingVertical: multiline ? (0, _ResponsiveCalculations.horizontalScale)(10) : undefined
    },
    INPUT: {
      color: disabled ? theme.colors.typography.disabled : isError ? theme.colors.semantic.danger : inputTextColor ?? theme.colors.typography.primary,
      //@ts-ignore
      fontSize: (0, _ResponsiveCalculations.responsiveFontSize)(inputFs ?? theme.sizes.typography[textScale.inputText]),
      textAlignVertical: multiline ? 'top' : 'center',
      minHeight: multiline ? 100 : undefined,
      maxHeight: multiline ? 150 : undefined
    },
    ERROR_HELPER_TEXT: {
      color: theme.colors.semantic.danger
    }
  };
  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, {
        fScale: textScale?.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,
          onFocus: () => setIsFocused(true),
          onBlur: () => setIsFocused(false),
          ...rest
        }), renderRightIcon]
      }), isError && helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StyledText, {
        fScale: textScale?.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