@jay-js/system
Version:
A powerful and flexible TypeScript library for UI, state management, lazy loading, routing and managing draggable elements in modern web applications.
265 lines (264 loc) • 8.88 kB
JavaScript
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator(fn) {
return function() {
var self = this, args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
import { State } from "../../state/index.js";
export function useForm({ defaultValues, resolver }) {
const formErrors = State({
errors: []
});
const formValues = State(defaultValues);
const formState = {
errors: (path, container)=>{
const errorText = document.createTextNode("");
formErrors.sub(path, (error)=>{
const errorFound = error.errors.find((err)=>err.path === path);
errorText.textContent = "";
if (errorFound && errorFound.message) {
errorText.textContent = errorFound.message;
}
});
return errorText;
},
setValue: (field, value)=>{
formValues.set((prev)=>{
return _object_spread_props(_object_spread({}, prev), {
[field]: value
});
});
const fieldElement = document.querySelector(`[name="${field}"]`);
if (fieldElement && fieldElement instanceof HTMLInputElement || fieldElement instanceof HTMLTextAreaElement) {
fieldElement.value = value;
}
},
setValues: (values)=>{
formValues.set(values);
for(const field in values){
const fieldElement = document.querySelector(`[name="${field}"]`);
if (fieldElement && fieldElement instanceof HTMLInputElement || fieldElement instanceof HTMLTextAreaElement) {
fieldElement.value = values[field];
}
}
},
getValue: (field)=>{
const values = formValues.get();
return values[field];
},
isValid: function() {
var _ref = _async_to_generator(function*(path) {
try {
if (!resolver) {
return true;
}
const formValuesData = formValues.get();
const result = yield resolver(formValuesData, path);
return checkValidate(result);
} catch (error) {
return checkValidate(error);
}
});
return function(path) {
return _ref.apply(this, arguments);
};
}(),
getErrors: ()=>formErrors.get(),
setError: (field, message)=>{
formErrors.set((prev)=>{
return {
errors: [
...prev.errors,
{
path: field,
message
}
]
};
});
},
setErrors: (errors)=>{
formErrors.set(errors);
}
};
function privateSetValue(field, value) {
formValues.set((prev)=>{
return _object_spread_props(_object_spread({}, prev), {
[field]: value
});
});
}
function onErrors(callback) {
formErrors.sub("onErrors", callback);
}
function onChangeValue(ev) {
return _onChangeValue.apply(this, arguments);
}
function _onChangeValue() {
_onChangeValue = _async_to_generator(function*(ev, options = {}) {
const element = ev.target;
if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
const field = element.getAttribute("name");
let value = element.value;
if (options) {
if (options.beforeChange) {
value = options.beforeChange(ev, value);
if (value === undefined) {
return;
}
}
}
element.value = value;
privateSetValue(field, value);
try {
if (!resolver) {
return;
}
const formValuesData = formValues.get();
const result = yield resolver(formValuesData, field);
validateResult(result);
} catch (error) {
validateResult(error);
}
}
});
return _onChangeValue.apply(this, arguments);
}
function validateResult(result) {
if (result.errors && result.errors.length > 0) {
formErrors.set({
errors: result.errors
});
return false;
}
formErrors.set({
errors: []
});
return true;
}
function checkValidate(result) {
if (result.errors && result.errors.length > 0) {
return false;
}
return true;
}
function register(path, options = {}) {
return {
name: path,
onchange: (ev)=>onChangeValue(ev, options),
oninput: (ev)=>onChangeValue(ev, options),
value: defaultValues[path]
};
}
function onChange(callback) {
formValues.sub("onChange", (data)=>{
callback(data, formErrors.get());
});
}
function onSubmit(callback) {
return function() {
var _ref = _async_to_generator(function*(ev) {
ev.preventDefault();
const formValuesData = formValues.get();
try {
if (!resolver) {
callback(ev, formValuesData);
return;
}
const result = yield resolver(formValuesData);
const validated = validateResult(result);
if (validated) {
callback(ev, formValuesData);
}
} catch (error) {
validateResult(error);
}
});
return function(ev) {
return _ref.apply(this, arguments);
};
}();
}
return {
formState,
register,
onChange,
onSubmit,
onErrors
};
}