@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, useMemo } 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',
    READONLY: 'sf-readonly',
    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 = useMemo(() => [CLASS_NAMES.INPUT, className].filter(Boolean).join(' '), [className]);
    const handleFocus = useCallback((event) => {
        if (onFocus) {
            onFocus(event);
        }
    }, [onFocus]);
    const handleBlur = useCallback((event) => {
        if (onBlur) {
            onBlur(event);
        }
    }, [onBlur]);
    const handleKeyDown = useCallback((event) => {
        if (onKeyDown) {
            onKeyDown(event);
        }
    }, [onKeyDown]);
    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 {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) || '', id: id ? `label_${id}` : undefined, children: placeholder }) }));
};
/**
 * Renders a adornment element inside the input.
 *
 * @param {ReactNode} adornment - The ReactNode to render as an input adornment.
 * @returns {JSX.Element | null} A span element wrapping the adornment, or null if adornment is null/undefined.
 */
export const renderAdornmentElement = (adornment) => {
    if (adornment == null) {
        return null;
    }
    return _jsx("span", { className: "sf-no-hover sf-input-icon sf-input-adornment-icon", children: adornment });
};
/**
 * 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 {Function} clearInput - The function to call when the clear button is clicked.
 * @param {boolean|ReactNode} [clearIcon] - If true shows default icon, if false renders nothing, if ReactNode renders the provided node.
 * @param {string} [componentName] - The name of the component for localization.
 * @param {string} [locale] - The locale to use for localization.
 * @returns {JSX.Element|null} The clear button element or null if clearIcon 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) }));
};