@react-md/form
Version:
This package is for creating all the different form input types.
174 lines • 6.8 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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.useTextField = void 0;
var react_1 = require("react");
var icon_1 = require("@react-md/icon");
var getErrorIcon_1 = require("./getErrorIcon");
var getErrorMessage_1 = require("./getErrorMessage");
var isErrored_1 = require("./isErrored");
var noop = function () {
// do nothing
};
function useTextField(_a) {
var id = _a.id, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, theme = _a.theme, pattern = _a.pattern, required = _a.required, minLength = _a.minLength, maxLength = _a.maxLength, _c = _a.disableMaxLength, disableMaxLength = _c === void 0 ? false : _c, onBlur = _a.onBlur, onChange = _a.onChange, helpText = _a.helpText, propErrorIcon = _a.errorIcon, _d = _a.counter, counter = _d === void 0 ? false : _d, _e = _a.disableMessage, disableMessage = _e === void 0 ? false : _e, _f = _a.validateOnChange, validateOnChange = _f === void 0 ? "recommended" : _f, _g = _a.isErrored, isErrored = _g === void 0 ? isErrored_1.defaultIsErrored : _g, _h = _a.onErrorChange, onErrorChange = _h === void 0 ? noop : _h, _j = _a.getErrorIcon, getErrorIcon = _j === void 0 ? getErrorIcon_1.defaultGetErrorIcon : _j, _k = _a.getErrorMessage, getErrorMessage = _k === void 0 ? getErrorMessage_1.defaultGetErrorMessage : _k;
var _l = __read((0, react_1.useState)(function () {
var value = typeof defaultValue === "function" ? defaultValue() : defaultValue;
return {
value: value,
error: false,
errorMessage: "",
};
}), 2), state = _l[0], setState = _l[1];
var value = state.value, error = state.error, errorMessage = state.errorMessage;
var errored = (0, react_1.useRef)(false);
var fieldRef = (0, react_1.useRef)(null);
var messageId = "".concat(id, "-message");
var isCounting = counter && typeof maxLength === "number";
var reset = (0, react_1.useCallback)(function () {
/* istanbul ignore next */
if (fieldRef.current) {
fieldRef.current.setCustomValidity("");
}
setState({
value: "",
error: false,
errorMessage: "",
});
}, []);
var updateState = (0, react_1.useCallback)(function (field, isBlurEvent) {
fieldRef.current = field;
// need to temporarily set the `maxLength` back so it can be "verified"
// through the validity api
/* istanbul ignore next */
if (isBlurEvent && disableMaxLength && typeof maxLength === "number") {
field.maxLength = maxLength;
}
var value = field.value;
field.setCustomValidity("");
field.checkValidity();
// remove the temporarily set `maxLength` attribute after checking the
// validity
/* istanbul ignore next */
if (disableMaxLength && typeof maxLength === "number") {
field.removeAttribute("maxLength");
}
var options = {
value: value,
pattern: pattern,
required: required,
minLength: minLength,
maxLength: maxLength,
isBlurEvent: isBlurEvent,
validity: field.validity,
validationMessage: field.validationMessage,
validateOnChange: validateOnChange,
};
var errorMessage = getErrorMessage(options);
var error = isErrored(__assign(__assign({}, options), { errorMessage: errorMessage }));
if (errored.current !== error) {
errored.current = error;
onErrorChange(id, error);
}
/* istanbul ignore next */
if (errorMessage !== field.validationMessage) {
field.setCustomValidity(errorMessage);
}
setState({ value: value, error: error, errorMessage: errorMessage });
}, [
disableMaxLength,
getErrorMessage,
id,
isErrored,
maxLength,
minLength,
onErrorChange,
pattern,
required,
validateOnChange,
]);
var handleBlur = (0, react_1.useCallback)(function (event) {
if (onBlur) {
onBlur(event);
}
if (event.isPropagationStopped()) {
return;
}
updateState(event.currentTarget, true);
}, [onBlur, updateState]);
var handleChange = (0, react_1.useCallback)(function (event) {
if (onChange) {
onChange(event);
}
if (event.isPropagationStopped()) {
return;
}
if (!validateOnChange ||
(Array.isArray(validateOnChange) && !validateOnChange.length)) {
setState(function (prevState) { return (__assign(__assign({}, prevState), { value: event.currentTarget.value })); });
return;
}
updateState(event.currentTarget, false);
}, [onChange, updateState, validateOnChange]);
var errorIcon = (0, icon_1.useIcon)("error", propErrorIcon);
var props = {
id: id,
value: value,
theme: theme,
error: error,
required: required,
pattern: pattern,
minLength: minLength,
maxLength: disableMaxLength ? undefined : maxLength,
rightChildren: getErrorIcon(errorMessage, error, errorIcon),
onBlur: handleBlur,
onChange: handleChange,
};
if (!disableMessage) {
props["aria-describedby"] = messageId;
props.messageProps = {
id: messageId,
error: error,
theme: theme,
length: counter ? value.length : undefined,
maxLength: isCounting ? maxLength : undefined,
children: errorMessage || helpText,
};
}
return [
value,
props,
{
reset: reset,
setState: setState,
},
];
}
exports.useTextField = useTextField;
//# sourceMappingURL=useTextField.js.map