@react-md/form
Version:
This package is for creating all the different form input types.
89 lines • 3.25 kB
JavaScript
;
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFieldStates = void 0;
var react_1 = require("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
*/
function useFieldStates(_a) {
var onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue;
var _b = __read((0, react_1.useState)(false), 2), focused = _b[0], setFocused = _b[1];
var _c = __read((0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
}, [onFocus]);
var handleChange = (0, react_1.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 = (0, react_1.useRef)(value);
(0, react_1.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,
};
}
exports.useFieldStates = useFieldStates;
//# sourceMappingURL=useFieldStates.js.map