@syncfusion/react-inputs/src/common/inputbase.js

Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, forwardRef } from 'react';
import { L10n, Variant, Size } from '@syncfusion/react-base';
import { CloseIcon } from '@syncfusion/react-icons';
export { Variant, Size };
/**
 * Constant object containing CSS class names used throughout the component.
 */
export const CLASS_NAMES = {
    RTL: 'sf-rtl',
    DISABLE: 'sf-disabled',
    WRAPPER: 'sf-control-wrapper',
    INPUT: 'sf-input',
    INPUTGROUP: 'sf-input-group',
    FLOATINPUT: 'sf-float-input',
    FLOATTEXT: 'sf-float-text',
    CLEARICON: 'sf-clear-icon',
    CLEARICONHIDE: 'sf-clear-icon-hide',
    LABELTOP: 'sf-label-top',
    LABELBOTTOM: 'sf-label-bottom',
    VALIDINPUT: 'sf-valid-input',
    TEXTBOX_FOCUS: 'sf-input-focus'
};
export const InputBase = forwardRef(({ type, readOnly = false, disabled = false, floatLabelType = 'Never', onFocus, className = '', onBlur, placeholder, onKeyDown, value, defaultValue, onChange, ...rest }, ref) => {
    const inputClassNames = () => {
        return classArray.join(' ');
    };
    const classArray = [CLASS_NAMES.INPUT, className];
    const handleFocus = useCallback((event) => {
        if (onFocus) {
            onFocus(event);
        }
    }, [onFocus]);
    const handleBlur = useCallback((event) => {
        if (onBlur) {
            onBlur(event);
        }
    }, [onBlur]);
    const handleKeyDown = (event) => {
        if (onKeyDown) {
            onKeyDown(event);
        }
    };
    const handleChange = useCallback((event) => {
        if (onChange) {
            onChange(event);
        }
    }, [onChange]);
    const isControlled = value !== undefined;
    const inputValue = isControlled ? { value } : { defaultValue };
    return (_jsx("input", { ref: ref, type: type || 'text', className: inputClassNames(), readOnly: readOnly, disabled: disabled, placeholder: floatLabelType === 'Never' ? placeholder : '', onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, onChange: handleChange, ...inputValue, ...rest }));
});
/**
 * Renders the float label element.
 *
 * @param {LabelMode} floatLabelType - The type of float label.
 * @param {boolean} isFocused - Whether the input is focused.
 * @param {string} inputValue - The current input value.
 * @param {string} placeholder - The placeholder text.
 * @param {any} id - The reference to the input element.
 * @returns {React.ReactElement | null} A React element representing the float label, or null if not applicable.
 */
export const renderFloatLabelElement = (floatLabelType, isFocused, inputValue, placeholder = '', id) => {
    if (floatLabelType === 'Never') {
        return null;
    }
    return (_jsx(_Fragment, { children: _jsx("label", { className: `${CLASS_NAMES.FLOATTEXT} ${(floatLabelType === 'Always' || (floatLabelType === 'Auto' && (isFocused || inputValue))) ? CLASS_NAMES.LABELTOP : CLASS_NAMES.LABELBOTTOM}`, htmlFor: (id) || '', children: placeholder }) }));
};
/**
 * Renders a clear button for an input field that allows the user to clear the input.
 *
 * @param {string} inputValue - The current value of the input field.
 * @param {() => void} clearInput - The function to call when the clear button is clicked.
 * @param {boolean | ReactNode} clearButton - Determines how the clear button is rendered:
 *   - If `true` (default): Shows the default clear icon.
 *   - If `false`: Doesn't render anything.
 *   - If a ReactNode: Renders the provided ReactNode instead of the default icon.
 * @returns {JSX.Element | null} The clear button element or null if clearButton is false.
 */
export const renderClearButton = (inputValue, clearInput, clearIcon = true, componentName, locale) => {
    if (clearIcon === false) {
        return null;
    }
    const l10n = L10n(componentName, {
        clear: 'Clear'
    }, locale);
    const clear = l10n.getConstant('clear');
    return (_jsx("span", { className: `${CLASS_NAMES.CLEARICON} sf-input-icon sf-no-hover ${inputValue === '' ? CLASS_NAMES.CLEARICONHIDE : ''}`, "aria-label": clear, title: clear, role: "button", onMouseDown: clearInput, children: clearIcon === true ? (_jsx(CloseIcon, {})) : (clearIcon) }));
};