@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
244 lines (243 loc) • 8.71 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 u from "react";
import a from "prop-types";
import { FormContext as p } from "./FormContext.mjs";
import { clone as l, guid as F, getter as y, setter as _, validatePackage as g, cloneObject as A, WatermarkOverlay as U } from "@progress/kendo-react-common";
import { packageMetadata as T } from "./package-metadata.mjs";
const b = 0, n = class n extends u.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 = l(this.props.initialValues), this._key = F(), 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 = {}, e = this.fields;
t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), e.forEach((d) => {
i[d] = !0;
}), this.visited = { ...i }, this.touched = { ...i };
const s = this.values, h = this.isFormValid(this.errors), r = this.isFormModified(this.modified, e);
this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
values: s,
isValid: h,
isModified: r,
event: t
}), h && (this.props.ignoreModified || r) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0, s, t)), this.forceUpdate();
}, this.onChange = (t, i) => {
const { value: e } = i;
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t, e), 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 e = this.validatorsByField[t] || [], s = e.length;
return this.validatorsByField = { ...this.validatorsByField, [t]: [...e, i] }, this.accumulatedForceUpdate(), () => {
if (this._unmounted)
return;
const h = [...this.validatorsByField[t] || []], r = !!h[s];
h[s] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: h }, r && this.accumulatedForceUpdate();
};
}, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((e) => t[e]), this.isFormHasNotTouched = (t, i) => i.some((e) => !t[e]), this.isFormTouched = (t, i) => i.some((e) => t[e]), this.isFormVisited = (t, i) => i.some((e) => t[e]), this.valueGetter = (t) => y(t)(this.values), this.valueSetter = (t, i) => _(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 e = [...this.valueGetter(t) || []];
e.splice(i.index, 0, i.value), this.valueSetter(t, e), this.forceUpdate();
}, this.onUnshift = (t, i) => {
this.onInsert(t, {
value: i.value,
index: 0
});
}, this.onPush = (t, i) => {
this.onArrayAction(t);
const e = [...this.valueGetter(t) || [], i.value];
this.valueSetter(t, e), this.forceUpdate();
}, this.onPop = (t) => {
this.onArrayAction(t);
const i = [...this.valueGetter(t) || []], e = i.pop();
return this.valueSetter(t, i), this.forceUpdate(), e;
}, this.onRemove = (t, i) => {
this.onArrayAction(t);
const e = [...this.valueGetter(t) || []], s = e.splice(i.index, 1);
return this.valueSetter(t, e), this.forceUpdate(), s;
}, this.onReplace = (t, i) => {
this.onArrayAction(t);
const e = [...this.valueGetter(t) || []];
e.splice(i.index, 1, i.value), this.valueSetter(t, e), this.forceUpdate();
}, this.onMove = (t, i) => {
this.onArrayAction(t);
const e = [...this.valueGetter(t) || []], s = e[i.prevIndex];
e.splice(i.prevIndex, 1), e.splice(i.nextIndex, 0, s), this.valueSetter(t, e), this.forceUpdate();
}, this.showLicenseWatermark = !g(T, { component: "Form" }), this.values = l(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;
return t.forEach((s) => {
if (o[s] = "", i[s]) {
const h = [];
i[s].forEach((r) => {
Array.isArray(r) ? h.push(...r) : h.push(r);
}), h.find((r) => {
if (r) {
const d = r(this.valueGetter(s), this.valueGetter, { name: s });
if (d)
return o[s] = d, !0;
}
return !1;
});
}
}), this.formErrors && A(this.formErrors, 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, e = this.modified, s = this.fields, h = this.errors, r = this.isFormValid(h), d = this.isFormModified(e, s), f = this.isFormTouched(t, s), m = this.isFormVisited(i, s), v = this.isFormHasNotTouched(t, s) && !r || r && (this.props.ignoreModified || d);
return /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
p.Provider,
{
key: this._key || this.props.id,
value: {
id: this.props.id,
valueGetter: this.valueGetter,
errors: h,
modified: e,
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: f,
visited: m,
submitted: this._submitted,
valueGetter: this.valueGetter,
errors: h,
allowSubmit: v,
onChange: this.onChange,
onSubmit: this.onSubmit,
onFormReset: this.resetForm
})
), this.showLicenseWatermark && /* @__PURE__ */ u.createElement(U, null));
}
};
n.displayName = "KendoReactForm", n.propTypes = {
initialValues: a.any,
onSubmit: a.func,
onSubmitClick: a.func,
render: a.func.isRequired,
id: a.string
};
let c = n;
export {
c as Form
};