design-react-kit/dist/Input/utils.js

Componenti React per Bootstrap 5

import classNames from 'classnames';
import { useCallback, useState } from 'react';
import { mapToCssModules } from '../utils';
function getFormControlClassInternal({ plaintext, staticInput, type = 'text', normalized }) {
    const formControlClass = 'form-control';
    if (plaintext || staticInput || normalized) {
        return `${formControlClass}-plaintext`;
    }
    if (type === 'file') {
        return `${formControlClass}-file`;
    }
    if (['radio', 'checkbox'].indexOf(type) > -1) {
        return null;
    }
    return formControlClass;
}
export function getFormControlClass(props, cssModule) {
    return mapToCssModules(getFormControlClassInternal(props), cssModule);
}
export function getValidationTextControlClass({ valid }, cssModule) {
    return mapToCssModules(classNames({
        'form-text': true,
        'form-feedback just-validate-error-label': valid == false
    }), cssModule);
}
export function getTag({ tag, plaintext, staticInput, type = 'text' }) {
    if (tag) {
        return tag;
    }
    if (['radio', 'checkbox'].indexOf(type) > -1) {
        return 'input';
    }
    if (plaintext || staticInput) {
        return 'p';
    }
    return 'input';
}
export function getClasses(className, type, { isFocused, valid, bsSize, placeholder, value, label, validationText, normalized, inputPassword, formControlClass, validationTextControlClass, originalWrapperClass }, cssModule) {
    const hasPlainCondition = placeholder || label || validationText;
    const baseCondition = hasPlainCondition && !normalized && !inputPassword;
    const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;
    const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;
    const classes = mapToCssModules(classNames(className, {
        'is-invalid': valid == false,
        'just-validate-success-field': valid,
        [`form-control-${bsSize}`]: bsSize
    }, formControlClass), cssModule);
    const wrapperClass = mapToCssModules(classNames(originalWrapperClass, 'form-group'), cssModule);
    const validationTextClass = mapToCssModules(classNames({
        'valid-feedback': valid,
        'invalid-feedback form-feedback just-validate-error-label': valid == false
    }, validationTextControlClass), cssModule);
    const inputClasses = mapToCssModules(classNames(classes, !baseCondition && {
        // we can model here only if stylings
        'form-control-plaintext': normalizedOnlyCondition,
        'form-control': passwordOnlyCondition,
        'input-password': passwordOnlyCondition
    }), cssModule);
    const activeClass = mapToCssModules(classNames({
        active: isFocused || placeholder || value || ['date', 'time'].includes(type)
    }), cssModule);
    const extraLabelClass = mapToCssModules(classNames({
        'input-number-label': ['number', 'currency', 'adaptive', 'percentage'].includes(type)
    }));
    return {
        wrapperClass,
        inputClasses,
        activeClass,
        extraLabelClass,
        validationTextClass
    };
}
export function useFocus({ onFocus, onBlur }) {
    const [isFocused, setFocus] = useState(false);
    const toggleFocusLabel = useCallback((e) => {
        setFocus(true);
        onFocus?.(e);
    }, [onFocus]);
    const toggleBlurLabel = useCallback((e) => {
        if (e.target.value === '') {
            setFocus(!isFocused);
        }
        onBlur?.(e);
    }, [isFocused, onBlur]);
    return { toggleFocusLabel, toggleBlurLabel, isFocused };
}
//# sourceMappingURL=utils.js.map