@ffsm/native-ui/dist/input/index.js

UI Components for React Native

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;
};
import { forwardRef, useState } from 'react';
import { DEFAULT_NATIVEUI_THEME } from '../theme';
import { flattenStyle } from '../flatten-style';
import { Adornment } from '../adornment';
import { StyleSheet, TextInput, View, } from 'react-native';
export const Input = forwardRef(function Input(props, ref) {
    const { leftSection, rightSection, value = '', name, onChangeText, onChange, onFocus, onBlur, type = 'text', disabled, selectTextOnFocus, contextMenuHidden, style, styles = {} } = props, rest = __rest(props, ["leftSection", "rightSection", "value", "name", "onChangeText", "onChange", "onFocus", "onBlur", "type", "disabled", "selectTextOnFocus", "contextMenuHidden", "style", "styles"]);
    const [currentValue, setCurrentValue] = useState(value);
    const [isFocused, setIsFocused] = useState(false);
    const handleChangeText = (text) => {
        setCurrentValue(text);
        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
        onChange === null || onChange === void 0 ? void 0 : onChange({
            name,
            target: {
                value: text,
            },
        });
    };
    const handleFocus = (e) => {
        setIsFocused(true);
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
    };
    const handleBlur = (e) => {
        setIsFocused(false);
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
    };
    return (<View style={flattenStyle(_styles.root, isFocused ? _styles.rootFocused : _styles.rootNonFocused, !leftSection && _styles.noLeftSection, !rightSection && _styles.noRightSection, style)} pointerEvents={disabled ? 'none' : 'auto'}>
        {leftSection !== undefined && (<Adornment style={styles.leftSection}>
            {leftSection}
          </Adornment>)}
        <TextInput {...rest} ref={ref} value={currentValue} onChangeText={handleChangeText} onFocus={handleFocus} onBlur={handleBlur} secureTextEntry={type === 'password'} editable={!disabled} selectTextOnFocus={!disabled || type !== 'password' || selectTextOnFocus} contextMenuHidden={disabled || type === 'password' || contextMenuHidden} style={flattenStyle(_styles.input, styles.input)}/>
        {rightSection !== undefined && (<Adornment style={styles.rightSection}>
            {rightSection}
          </Adornment>)}
      </View>);
});
const _styles = StyleSheet.create({
    root: {
        width: '100%',
        flexDirection: 'row',
        borderWidth: 1,
        borderStyle: 'solid',
    },
    rootNonFocused: {
        borderColor: DEFAULT_NATIVEUI_THEME.colors.slate[300],
    },
    rootFocused: {
        borderColor: DEFAULT_NATIVEUI_THEME.colors.slate[500],
    },
    noLeftSection: {
        paddingLeft: 8,
    },
    noRightSection: {
        paddingRight: 8,
    },
    input: {
        flex: 1,
        height: 40,
        width: '100%',
    },
});