@react-md/form/es/useFieldStates.js

This package is for creating all the different form input types.

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { useCallback, useEffect, useRef, useState } from "react";
/**
 * This hook is used to handle the different states for the text field based on
 * the current value and user interaction.
 *
 * @internal
 * @remarks \@since 2.5.2
 */
export function useFieldStates(_a) {
    var onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue;
    var _b = __read(useState(false), 2), focused = _b[0], setFocused = _b[1];
    var _c = __read(useState(function () {
        if (typeof value === "undefined") {
            return typeof defaultValue !== "undefined" && defaultValue.length > 0;
        }
        return value.length > 0;
    }), 2), valued = _c[0], setValued = _c[1];
    var handleBlur = useCallback(function (event) {
        if (onBlur) {
            onBlur(event);
        }
        setFocused(false);
        var input = event.currentTarget;
        if (input.getAttribute("type") === "number") {
            input.checkValidity();
            setValued(input.validity.badInput || (value !== null && value !== void 0 ? value : input.value).length > 0);
        }
    }, [onBlur, value]);
    var handleFocus = useCallback(function (event) {
        if (onFocus) {
            onFocus(event);
        }
        setFocused(true);
    }, [onFocus]);
    var handleChange = useCallback(function (event) {
        if (onChange) {
            onChange(event);
        }
        var input = event.currentTarget;
        if (input.getAttribute("type") === "number") {
            input.checkValidity();
            /* istanbul ignore next */
            if (input.validity.badInput) {
                return;
            }
        }
        setValued(input.value.length > 0);
    }, [onChange]);
    // another way to handle this could be to just make the `valued` state derived
    // based on the `value`, but it gets wonky for number fields. This technically
    // still fails right now for number fields if you don't use the
    // `useNumberField` hook since the `value` will be set back to the empty
    // string on invalid numbers.
    var prevValue = useRef(value);
    useEffect(function () {
        if (prevValue.current !== value && typeof value === "string") {
            prevValue.current = value;
            setValued(value.length > 0);
        }
    }, [value]);
    return {
        valued: valued,
        focused: focused,
        onBlur: handleBlur,
        onFocus: handleFocus,
        onChange: handleChange,
    };
}
//# sourceMappingURL=useFieldStates.js.map