@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
246 lines (245 loc) • 8.99 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as n from "react";
import a from "prop-types";
import { FormContext as y } from "./FormContext.mjs";
import { clone as c, guid as _, getter as g, setter as A, validatePackage as U, getLicenseMessage as T, cloneObject as f, WatermarkOverlay as b } from "@progress/kendo-react-common";
import { packageMetadata as v } from "./package-metadata.mjs";
const B = 0, u = class u extends n.Component {
/**
* @hidden
*/
constructor(o) {
super(o), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._values = {}, this._fields = {}, this._unmounted = !1, this._submitted = !1, this.showLicenseWatermark = !1, this.isValid = () => this.isFormValid(this.errors), this.accumulatedForceUpdate = () => {
this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), this._accumulatorTimeout = window.setTimeout(() => {
this._accumulatorTimeout = void 0, this.forceUpdate();
}, B);
}, this.resetForm = () => {
this.values = c(this.props.initialValues), this._key = _(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
}, this.onReset = () => this.resetForm(), this.addField = (t) => {
this._fields[t] = !0;
}, this.onSubmit = (t) => {
const i = {}, s = this.fields;
t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), s.forEach((d) => {
i[d] = !0;
}), this.visited = { ...i }, this.touched = { ...i };
const e = this.values, h = this.isFormValid(this.errors), r = this.isFormModified(this.modified, s);
this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
values: e,
isValid: h,
isModified: r,
event: t
}), h && (this.props.ignoreModified || r) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0, e, t)), this.forceUpdate();
}, this.onChange = (t, i) => {
const { value: s } = i;
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t, s), this.props.onChange && this.props.onChange(t, s, this.valueGetter), this.forceUpdate();
}, this.onFocus = (t, i) => {
this.visited[t] || (this.visited = { ...this.visited, [t]: !0 }, i || this.forceUpdate());
}, this.onBlur = (t, i) => {
this.touched[t] || (this.onFocus(t, i), this.touched = { ...this.touched, [t]: !0 }, i || this.forceUpdate());
}, this.onFieldRegister = (t, i) => {
this.addField(t);
const s = this.validatorsByField[t] || [], e = s.findIndex((d) => d === void 0), h = [...s];
e >= 0 ? h[e] = i : h.push(i);
const r = e >= 0 ? e : h.length - 1;
return this.validatorsByField = { ...this.validatorsByField, [t]: h }, this.accumulatedForceUpdate(), () => {
const d = [...this.validatorsByField[t] || []], l = !!d[r];
d[r] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: d }, l && !this._unmounted && this.accumulatedForceUpdate();
};
}, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((s) => t[s]), this.isFormHasNotTouched = (t, i) => i.some((s) => !t[s]), this.isFormTouched = (t, i) => i.some((s) => t[s]), this.isFormVisited = (t, i) => i.some((s) => t[s]), this.valueGetter = (t) => g(t)(this.values), this.valueSetter = (t, i) => A(t)(this.values, i), this.onArrayAction = (t) => {
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.onBlur(t, !0);
}, this.onInsert = (t, i) => {
this.onArrayAction(t);
const s = [...this.valueGetter(t) || []];
s.splice(i.index, 0, i.value), this.valueSetter(t, s), this.forceUpdate();
}, this.onUnshift = (t, i) => {
this.onInsert(t, {
value: i.value,
index: 0
});
}, this.onPush = (t, i) => {
this.onArrayAction(t);
const s = [...this.valueGetter(t) || [], i.value];
this.valueSetter(t, s), this.forceUpdate();
}, this.onPop = (t) => {
this.onArrayAction(t);
const i = [...this.valueGetter(t) || []], s = i.pop();
return this.valueSetter(t, i), this.forceUpdate(), s;
}, this.onRemove = (t, i) => {
this.onArrayAction(t);
const s = [...this.valueGetter(t) || []], e = s.splice(i.index, 1);
return this.valueSetter(t, s), this.forceUpdate(), e;
}, this.onReplace = (t, i) => {
this.onArrayAction(t);
const s = [...this.valueGetter(t) || []];
s.splice(i.index, 1, i.value), this.valueSetter(t, s), this.forceUpdate();
}, this.onMove = (t, i) => {
this.onArrayAction(t);
const s = [...this.valueGetter(t) || []], e = s[i.prevIndex];
s.splice(i.prevIndex, 1), s.splice(i.nextIndex, 0, e), this.valueSetter(t, s), this.forceUpdate();
}, this.showLicenseWatermark = !U(v, { component: "Form" }), this.licenseMessage = T(v), this.values = c(o.initialValues);
}
/**
* @hidden
*/
get touched() {
return this._touched;
}
/**
* @hidden
*/
set touched(o) {
this._touched = o;
}
/**
* @hidden
*/
get visited() {
return this._visited;
}
/**
* @hidden
*/
set visited(o) {
this._visited = o;
}
/**
* @hidden
*/
get modified() {
return this._modified;
}
/**
* @hidden
*/
set modified(o) {
this._modified = o;
}
/**
* @hidden
*/
get validatorsByField() {
return this._validatorsByField;
}
/**
* @hidden
*/
set validatorsByField(o) {
this._validatorsByField = o;
}
/**
* @hidden
*/
get values() {
return this._values;
}
/**
* @hidden
*/
set values(o) {
this._values = o;
}
/**
* @hidden
*/
get fields() {
return Object.keys(this._fields);
}
/**
* @hidden
*/
get formErrors() {
if (this.props.validator)
return this.props.validator(this.values, this.valueGetter);
}
/**
* @hidden
*/
get errors() {
const o = {}, t = this.fields, i = this.validatorsByField;
t.forEach((e) => {
if (o[e] = "", i[e]) {
const h = [];
i[e].forEach((r) => {
Array.isArray(r) ? h.push(...r) : h.push(r);
}), h.find((r) => {
if (r) {
const d = r(this.valueGetter(e), this.valueGetter, { name: e });
if (d)
return o[e] = d, !0;
}
return !1;
});
}
});
const s = this.formErrors;
return s && f(s, o), this.props.errors && f(this.props.errors, o), o;
}
/**
* @hidden
*/
componentWillUnmount() {
this._unmounted = !0, this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout);
}
/**
* @hidden
*/
render() {
const { render: o } = this.props, t = this.touched, i = this.visited, s = this.modified, e = this.fields, h = this.errors, r = this.isFormValid(h), d = this.isFormModified(s, e), l = this.isFormTouched(t, e), p = this.isFormVisited(i, e), F = this.isFormHasNotTouched(t, e) && !r || r && (this.props.ignoreModified || d);
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
y.Provider,
{
key: this._key || this.props.id,
value: {
id: this.props.id,
valueGetter: this.valueGetter,
errors: h,
modified: s,
touched: t,
visited: i,
registerField: this.onFieldRegister,
onSubmit: this.onSubmit,
onChange: this.onChange,
onFocus: this.onFocus,
onBlur: this.onBlur,
onUnshift: this.onUnshift,
onPush: this.onPush,
onInsert: this.onInsert,
onPop: this.onPop,
onRemove: this.onRemove,
onReplace: this.onReplace,
onMove: this.onMove
}
},
o({
valid: r,
modified: d,
touched: l,
visited: p,
submitted: this._submitted,
valueGetter: this.valueGetter,
errors: h,
allowSubmit: F,
onChange: this.onChange,
onSubmit: this.onSubmit,
onFormReset: this.resetForm
})
), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(b, { message: this.licenseMessage }));
}
};
u.displayName = "KendoReactForm", u.propTypes = {
initialValues: a.any,
onSubmit: a.func,
onSubmitClick: a.func,
render: a.func.isRequired,
id: a.string
};
let m = u;
export {
m as Form
};