taro/src/components/input/Inputs.tsx

import { Input, View } from "@tarojs/components";
import './Inputs.scss'
import { useEffect, useState } from "react";
import { ColorType } from "@/context/themes/color";
import { IconClear } from "../basic/Icons";

interface CustomInputProps {
    placeholder?: string;
    value: string;
    onChange: (value: string) => void;
    onConfirm: Function,
    openType?: string;
    disabled?: boolean;
    isSecure?: boolean;
    autoFocus?: boolean;
    onBlur?: Function;
    onFocus?: Function;
}

export default function Component({
    placeholder,
    value,
    onChange,
    onConfirm,
    openType,
    disabled,
    isSecure,
    autoFocus,
    onBlur,
    onFocus
}: CustomInputProps) {
    const [inputValue, setInputValue] = useState(value ? value : '');
    const [isFocus, setIsFocus] = useState(false)
    const handleInputChange = (e: any) => {
        const newValue = e.target.value;
        setInputValue(newValue);
        onChange(newValue);
    };

    useEffect(() => {
        setInputValue(value ? value : '')
    }, [value])

    function clear() {
        setInputValue('')
        onChange('')
    }

    if (process.env.TARO_ENV=='rn'){
        const TextInput = require('react-native').TextInput
        return (
            <View className="input_bg">
                <TextInput className={isFocus ? "input input_focus" : "input"}
                    // style={{backgroundColor:'red'}}
                    placeholder={placeholder ? placeholder : ''}
                    value={inputValue}
                    password={isSecure ? true : false}
                    type={openType == 'nickname' ? 'nickname' : isSecure ? 'safe-password' : 'text'}
                    // type={openType?openType:'text'}
                    onInput={handleInputChange}
                    placeholderStyle='color:#ffffff66'
                    // onConfirm={() => onConfirm()}
                    focus={autoFocus}
                    confirmType="done"
                    selectionColor={global.fastColor ? global.fastColor : ColorType.fast}
                    disabled={disabled ? disabled : false}
                    onFocus={() => {
                        setIsFocus(true)
                        if (onFocus)
                            onFocus()
                    }}
                    onBlur={() => {
                        setIsFocus(false)
                        if (onBlur)
                            onBlur()
                    }}
                />
                {
                    inputValue.length > 0 && <View className="clear_bg" onClick={clear}>
                        <IconClear />
                    </View>
                }
            </View>
        )
    }

    return (
        <View className="input_bg">
            <Input className={isFocus ? "input input_focus" : "input"}
                // style={{backgroundColor:'red'}}
                placeholder={placeholder ? placeholder : ''}
                value={inputValue}
                password={isSecure ? true : false}
                type={openType == 'nickname' ? 'nickname' : isSecure ? 'safe-password' : 'text'}
                // type={openType?openType:'text'}
                onInput={handleInputChange}
                placeholderStyle='color:#ffffff66'
                // onConfirm={() => onConfirm()}
                focus={autoFocus}
                confirmType="done"
                selectionColor={global.fastColor ? global.fastColor : ColorType.fast}
                disabled={disabled ? disabled : false}
                onFocus={() => {
                    setIsFocus(true)
                    if (onFocus)
                        onFocus()
                }}
                onBlur={() => {
                    setIsFocus(false)
                    if (onBlur)
                        onBlur()
                }}
            />
            {
                inputValue.length > 0 && <View className="clear_bg" onClick={clear}>
                    <IconClear />
                </View>
            }
        </View>
    )
}