react-use-simple-form
Version:
A React hook which manages and validates form state.
65 lines (64 loc) • 2.37 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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSimpleForm = void 0;
var react_1 = require("react");
var utils_1 = require("./utils");
var PASS = function () { return true; };
var toValidator = function (validationMethod) {
if (typeof validationMethod === 'undefined')
return PASS;
if (validationMethod instanceof RegExp)
return function (text) { return typeof text === 'string' && validationMethod.test(text); };
return validationMethod;
};
var UpdateType;
(function (UpdateType) {
UpdateType["Field"] = "field";
UpdateType["Whole"] = "whole";
})(UpdateType || (UpdateType = {}));
function reduceFromState(state, payload) {
var _a;
if (payload.type === UpdateType.Field) {
return __assign(__assign({}, state), (_a = {}, _a[payload.field] = payload.value, _a));
}
else {
return __assign({}, payload.state);
}
}
var useSimpleForm = function (defaultState, validators) {
if (validators === void 0) { validators = {}; }
var _a = (0, react_1.useReducer)(reduceFromState, defaultState), state = _a[0], dispatch = _a[1];
var manager = (0, utils_1.mapObject)(state, function (key, value) {
var validator = toValidator(validators[key]);
return {
value: value,
isValid: validator(value, state),
validate: function (testValue) { return validator(testValue, state); },
set: function (nextValue) {
dispatch({ type: UpdateType.Field, field: key, value: nextValue });
}
};
});
var isValid = Object.values(manager).every(function (field) { return field.isValid; });
var setAll = (0, react_1.useCallback)(function (newState) {
dispatch({ type: UpdateType.Whole, state: newState });
}, [dispatch]);
return {
state: state,
manager: manager,
isValid: isValid,
set: setAll,
};
};
exports.useSimpleForm = useSimpleForm;