@progress/kendo-react-form 9.5.0 → 10.0.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Form.js +1 -1
- package/Form.mjs +48 -48
- package/dist/cdn/js/kendo-react-form.js +1 -1
- package/index.d.mts +1 -0
- package/index.d.ts +1 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +3 -3
package/Form.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),a=require("prop-types"),y=require("./FormContext.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),a=require("prop-types"),y=require("./FormContext.js"),d=require("@progress/kendo-react-common"),_=require("./package-metadata.js");function g(u){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>u[t]})}}return s.default=u,Object.freeze(s)}const l=g(F),b=0,c=class c extends l.Component{constructor(s){super(s),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=d.clone(this.props.initialValues),this._key=d.guid(),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(n=>{i[n]=!0}),this.visited={...i},this.touched={...i};const o=this.values,h=this.isFormValid(this.errors),r=this.isFormModified(this.modified,e);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:o,isValid:h,isModified:r,event:t}),h&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,o,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]||[],o=e.length;return this.validatorsByField={...this.validatorsByField,[t]:[...e,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const h=[...this.validatorsByField[t]||[]],r=!!h[o];h[o]=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=>d.getter(t)(this.values),this.valueSetter=(t,i)=>d.setter(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)||[]],o=e.splice(i.index,1);return this.valueSetter(t,e),this.forceUpdate(),o},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)||[]],o=e[i.prevIndex];e.splice(i.prevIndex,1),e.splice(i.nextIndex,0,o),this.valueSetter(t,e),this.forceUpdate()},this.showLicenseWatermark=!d.validatePackage(_.packageMetadata,{component:"Form"}),this.values=d.clone(s.initialValues)}get touched(){return this._touched}set touched(s){this._touched=s}get visited(){return this._visited}set visited(s){this._visited=s}get modified(){return this._modified}set modified(s){this._modified=s}get validatorsByField(){return this._validatorsByField}set validatorsByField(s){this._validatorsByField=s}get values(){return this._values}set values(s){this._values=s}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const s={},t=this.fields,i=this.validatorsByField;return t.forEach(o=>{if(s[o]="",i[o]){const h=[];i[o].forEach(r=>{Array.isArray(r)?h.push(...r):h.push(r)}),h.find(r=>{if(r){const n=r(this.valueGetter(o),this.valueGetter,{name:o});if(n)return s[o]=n,!0}return!1})}}),this.formErrors&&d.cloneObject(this.formErrors,s),s}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:s}=this.props,t=this.touched,i=this.visited,e=this.modified,o=this.fields,h=this.errors,r=this.isFormValid(h),n=this.isFormModified(e,o),v=this.isFormTouched(t,o),m=this.isFormVisited(i,o),p=this.isFormHasNotTouched(t,o)&&!r||r&&(this.props.ignoreModified||n);return l.createElement(l.Fragment,null,l.createElement(y.FormContext.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}},s({valid:r,modified:n,touched:v,visited:m,submitted:this._submitted,valueGetter:this.valueGetter,errors:h,allowSubmit:p,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&l.createElement(d.WatermarkOverlay,null))}};c.displayName="KendoReactForm",c.propTypes={initialValues:a.any,onSubmit:a.func,onSubmitClick:a.func,render:a.func.isRequired,id:a.string};let f=c;exports.Form=f;
|
package/Form.mjs
CHANGED
|
@@ -5,58 +5,58 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import
|
|
8
|
+
import * as u from "react";
|
|
9
|
+
import a from "prop-types";
|
|
10
10
|
import { FormContext as p } from "./FormContext.mjs";
|
|
11
|
-
import { clone as l, guid as F, getter as y, setter as _, validatePackage as g, cloneObject as A } from "@progress/kendo-react-common";
|
|
12
|
-
import { packageMetadata as
|
|
13
|
-
const
|
|
11
|
+
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";
|
|
12
|
+
import { packageMetadata as T } from "./package-metadata.mjs";
|
|
13
|
+
const b = 0, n = class n extends u.Component {
|
|
14
14
|
/**
|
|
15
15
|
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
constructor(o) {
|
|
18
|
-
super(o), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._values = {}, this._fields = {}, this._unmounted = !1, this._submitted = !1, this.isValid = () => this.isFormValid(this.errors), this.accumulatedForceUpdate = () => {
|
|
18
|
+
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 = () => {
|
|
19
19
|
this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), this._accumulatorTimeout = window.setTimeout(() => {
|
|
20
20
|
this._accumulatorTimeout = void 0, this.forceUpdate();
|
|
21
|
-
},
|
|
21
|
+
}, b);
|
|
22
22
|
}, this.resetForm = () => {
|
|
23
23
|
this.values = l(this.props.initialValues), this._key = F(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
|
|
24
24
|
}, this.onReset = () => this.resetForm(), this.addField = (t) => {
|
|
25
25
|
this._fields[t] = !0;
|
|
26
26
|
}, this.onSubmit = (t) => {
|
|
27
|
-
const i = {},
|
|
28
|
-
t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()),
|
|
27
|
+
const i = {}, e = this.fields;
|
|
28
|
+
t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), e.forEach((d) => {
|
|
29
29
|
i[d] = !0;
|
|
30
30
|
}), this.visited = { ...i }, this.touched = { ...i };
|
|
31
|
-
const
|
|
31
|
+
const s = this.values, h = this.isFormValid(this.errors), r = this.isFormModified(this.modified, e);
|
|
32
32
|
this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
|
|
33
|
-
values:
|
|
33
|
+
values: s,
|
|
34
34
|
isValid: h,
|
|
35
35
|
isModified: r,
|
|
36
36
|
event: t
|
|
37
|
-
}), h && (this.props.ignoreModified || r) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0,
|
|
37
|
+
}), h && (this.props.ignoreModified || r) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0, s, t)), this.forceUpdate();
|
|
38
38
|
}, this.onChange = (t, i) => {
|
|
39
|
-
const { value:
|
|
40
|
-
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t,
|
|
39
|
+
const { value: e } = i;
|
|
40
|
+
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t, e), this.forceUpdate();
|
|
41
41
|
}, this.onFocus = (t, i) => {
|
|
42
42
|
this.visited[t] || (this.visited = { ...this.visited, [t]: !0 }, i || this.forceUpdate());
|
|
43
43
|
}, this.onBlur = (t, i) => {
|
|
44
44
|
this.touched[t] || (this.onFocus(t, i), this.touched = { ...this.touched, [t]: !0 }, i || this.forceUpdate());
|
|
45
45
|
}, this.onFieldRegister = (t, i) => {
|
|
46
46
|
this.addField(t);
|
|
47
|
-
const
|
|
48
|
-
return this.validatorsByField = { ...this.validatorsByField, [t]: [...
|
|
47
|
+
const e = this.validatorsByField[t] || [], s = e.length;
|
|
48
|
+
return this.validatorsByField = { ...this.validatorsByField, [t]: [...e, i] }, this.accumulatedForceUpdate(), () => {
|
|
49
49
|
if (this._unmounted)
|
|
50
50
|
return;
|
|
51
|
-
const h = [...this.validatorsByField[t] || []], r = !!h[
|
|
52
|
-
h[
|
|
51
|
+
const h = [...this.validatorsByField[t] || []], r = !!h[s];
|
|
52
|
+
h[s] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: h }, r && this.accumulatedForceUpdate();
|
|
53
53
|
};
|
|
54
|
-
}, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((
|
|
54
|
+
}, 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) => {
|
|
55
55
|
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.onBlur(t, !0);
|
|
56
56
|
}, this.onInsert = (t, i) => {
|
|
57
57
|
this.onArrayAction(t);
|
|
58
|
-
const
|
|
59
|
-
|
|
58
|
+
const e = [...this.valueGetter(t) || []];
|
|
59
|
+
e.splice(i.index, 0, i.value), this.valueSetter(t, e), this.forceUpdate();
|
|
60
60
|
}, this.onUnshift = (t, i) => {
|
|
61
61
|
this.onInsert(t, {
|
|
62
62
|
value: i.value,
|
|
@@ -64,25 +64,25 @@ const T = 0, n = class n extends a.Component {
|
|
|
64
64
|
});
|
|
65
65
|
}, this.onPush = (t, i) => {
|
|
66
66
|
this.onArrayAction(t);
|
|
67
|
-
const
|
|
68
|
-
this.valueSetter(t,
|
|
67
|
+
const e = [...this.valueGetter(t) || [], i.value];
|
|
68
|
+
this.valueSetter(t, e), this.forceUpdate();
|
|
69
69
|
}, this.onPop = (t) => {
|
|
70
70
|
this.onArrayAction(t);
|
|
71
|
-
const i = [...this.valueGetter(t) || []],
|
|
72
|
-
return this.valueSetter(t, i), this.forceUpdate(),
|
|
71
|
+
const i = [...this.valueGetter(t) || []], e = i.pop();
|
|
72
|
+
return this.valueSetter(t, i), this.forceUpdate(), e;
|
|
73
73
|
}, this.onRemove = (t, i) => {
|
|
74
74
|
this.onArrayAction(t);
|
|
75
|
-
const
|
|
76
|
-
return this.valueSetter(t,
|
|
75
|
+
const e = [...this.valueGetter(t) || []], s = e.splice(i.index, 1);
|
|
76
|
+
return this.valueSetter(t, e), this.forceUpdate(), s;
|
|
77
77
|
}, this.onReplace = (t, i) => {
|
|
78
78
|
this.onArrayAction(t);
|
|
79
|
-
const
|
|
80
|
-
|
|
79
|
+
const e = [...this.valueGetter(t) || []];
|
|
80
|
+
e.splice(i.index, 1, i.value), this.valueSetter(t, e), this.forceUpdate();
|
|
81
81
|
}, this.onMove = (t, i) => {
|
|
82
82
|
this.onArrayAction(t);
|
|
83
|
-
const
|
|
84
|
-
|
|
85
|
-
}, g(
|
|
83
|
+
const e = [...this.valueGetter(t) || []], s = e[i.prevIndex];
|
|
84
|
+
e.splice(i.prevIndex, 1), e.splice(i.nextIndex, 0, s), this.valueSetter(t, e), this.forceUpdate();
|
|
85
|
+
}, this.showLicenseWatermark = !g(T, { component: "Form" }), this.values = l(o.initialValues);
|
|
86
86
|
}
|
|
87
87
|
/**
|
|
88
88
|
* @hidden
|
|
@@ -162,16 +162,16 @@ const T = 0, n = class n extends a.Component {
|
|
|
162
162
|
*/
|
|
163
163
|
get errors() {
|
|
164
164
|
const o = {}, t = this.fields, i = this.validatorsByField;
|
|
165
|
-
return t.forEach((
|
|
166
|
-
if (o[
|
|
165
|
+
return t.forEach((s) => {
|
|
166
|
+
if (o[s] = "", i[s]) {
|
|
167
167
|
const h = [];
|
|
168
|
-
i[
|
|
168
|
+
i[s].forEach((r) => {
|
|
169
169
|
Array.isArray(r) ? h.push(...r) : h.push(r);
|
|
170
170
|
}), h.find((r) => {
|
|
171
171
|
if (r) {
|
|
172
|
-
const d = r(this.valueGetter(
|
|
172
|
+
const d = r(this.valueGetter(s), this.valueGetter, { name: s });
|
|
173
173
|
if (d)
|
|
174
|
-
return o[
|
|
174
|
+
return o[s] = d, !0;
|
|
175
175
|
}
|
|
176
176
|
return !1;
|
|
177
177
|
});
|
|
@@ -188,8 +188,8 @@ const T = 0, n = class n extends a.Component {
|
|
|
188
188
|
* @hidden
|
|
189
189
|
*/
|
|
190
190
|
render() {
|
|
191
|
-
const { render: o } = this.props, t = this.touched, i = this.visited,
|
|
192
|
-
return /* @__PURE__ */
|
|
191
|
+
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);
|
|
192
|
+
return /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
|
|
193
193
|
p.Provider,
|
|
194
194
|
{
|
|
195
195
|
key: this._key || this.props.id,
|
|
@@ -197,7 +197,7 @@ const T = 0, n = class n extends a.Component {
|
|
|
197
197
|
id: this.props.id,
|
|
198
198
|
valueGetter: this.valueGetter,
|
|
199
199
|
errors: h,
|
|
200
|
-
modified:
|
|
200
|
+
modified: e,
|
|
201
201
|
touched: t,
|
|
202
202
|
visited: i,
|
|
203
203
|
registerField: this.onFieldRegister,
|
|
@@ -218,24 +218,24 @@ const T = 0, n = class n extends a.Component {
|
|
|
218
218
|
valid: r,
|
|
219
219
|
modified: d,
|
|
220
220
|
touched: f,
|
|
221
|
-
visited:
|
|
221
|
+
visited: m,
|
|
222
222
|
submitted: this._submitted,
|
|
223
223
|
valueGetter: this.valueGetter,
|
|
224
224
|
errors: h,
|
|
225
|
-
allowSubmit:
|
|
225
|
+
allowSubmit: v,
|
|
226
226
|
onChange: this.onChange,
|
|
227
227
|
onSubmit: this.onSubmit,
|
|
228
228
|
onFormReset: this.resetForm
|
|
229
229
|
})
|
|
230
|
-
);
|
|
230
|
+
), this.showLicenseWatermark && /* @__PURE__ */ u.createElement(U, null));
|
|
231
231
|
}
|
|
232
232
|
};
|
|
233
233
|
n.displayName = "KendoReactForm", n.propTypes = {
|
|
234
|
-
initialValues:
|
|
235
|
-
onSubmit:
|
|
236
|
-
onSubmitClick:
|
|
237
|
-
render:
|
|
238
|
-
id:
|
|
234
|
+
initialValues: a.any,
|
|
235
|
+
onSubmit: a.func,
|
|
236
|
+
onSubmitClick: a.func,
|
|
237
|
+
render: a.func.isRequired,
|
|
238
|
+
id: a.string
|
|
239
239
|
};
|
|
240
240
|
let c = n;
|
|
241
241
|
export {
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,(function(e,t,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"$VERSION",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=class extends r.Component{constructor(e){super(e),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0,this.forceUpdate()}),0)},this.resetForm=()=>{this.values=s.clone(this.props.initialValues),this._key=s.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some((t=>!!e[t])),this.isFormModified=(e,t)=>t.some((t=>e[t])),this.isFormHasNotTouched=(e,t)=>t.some((t=>!e[t])),this.isFormTouched=(e,t)=>t.some((t=>e[t])),this.isFormVisited=(e,t)=>t.some((t=>e[t])),this.valueGetter=e=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},s.validatePackage(d),this.values=s.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,(function(e,t,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"$VERSION",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=class extends r.Component{constructor(e){super(e),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()}),0)},this.resetForm=()=>{this.values=s.clone(this.props.initialValues),this._key=s.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some((t=>!!e[t])),this.isFormModified=(e,t)=>t.some((t=>e[t])),this.isFormHasNotTouched=(e,t)=>t.some((t=>!e[t])),this.isFormTouched=(e,t)=>t.some((t=>e[t])),this.isFormVisited=(e,t)=>t.some((t=>e[t])),this.valueGetter=e=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},this.showLicenseWatermark=!s.validatePackage(d,{component:"Form"}),this.values=s.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,o=this.modified,a=this.fields,d=this.errors,l=this.isFormValid(d),h=this.isFormModified(o,a),u=this.isFormTouched(t,a),c=this.isFormVisited(i,a),m=this.isFormHasNotTouched(t,a)&&!l||l&&(this.props.ignoreModified||h);return r.createElement(r.Fragment,null,r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:d,modified:o,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}},e({valid:l,modified:h,touched:u,visited:c,submitted:this._submitted,valueGetter:this.valueGetter,errors:d,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(s.WatermarkOverlay,null))}};l.displayName="KendoReactForm",l.propTypes={initialValues:i.any,onSubmit:i.func,onSubmitClick:i.func,render:i.func.isRequired,id:i.string};let h=l;const u=e=>{const{name:t,component:i,validator:s,type:o,children:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>l.onUnshift(t,e)),[t,h]),c=r.useCallback((e=>l.onPush(t,e)),[t,h]),m=r.useCallback((e=>l.onInsert(t,e)),[t,h]),v=r.useCallback((()=>l.onPop(t)),[t,h]),p=r.useCallback((e=>l.onRemove(t,e)),[t,h]),f=r.useCallback((e=>l.onReplace(t,e)),[t,h]),F=r.useCallback((e=>l.onMove(t,e)),[t,h]);if(!l)return null;const y=l.valueGetter(t);return r.createElement(i,{value:y,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),onUnshift:u,onPush:c,onInsert:m,onPop:v,onRemove:p,onReplace:f,onMove:F,children:a,name:t,...d})};u.displayName="KendoReactFieldArray";const c=e=>{const t=s.useUnstyled(),i=e.unstyled||t,o=i&&i.uForm,n=r.useMemo((()=>s.classNames(s.uForm.field({c:o,isRtl:"rtl"===e.dir}),e.className)),[o,e.className,e.dir]);return r.createElement("div",{className:n,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";const m=r.forwardRef(((e,t)=>{const i={size:"medium",...e},o=r.useRef(null),a=r.useRef(null);r.useImperativeHandle(a,(()=>({element:o.current,props:i}))),r.useImperativeHandle(t,(()=>a.current));const d=r.useContext(n),{className:l,style:h,horizontal:u,size:c,...m}=i,v=s.useUnstyled(),p=v&&v.uForm,f=r.useMemo((()=>u?"horizontal":!1===u?"vertical":void 0),[u]),F=r.useMemo((()=>s.classNames(s.uForm.form({c:p,size:c,orientation:f}),l)),[l,p,f,c]);return r.createElement("form",{ref:o,...m,id:d?d.id:void 0,style:e.style,className:F,onSubmit:d?d.onSubmit:void 0},e.children)}));m.displayName="KendoReactFormElement";const v=s.withIdHOC(h);v.displayName="KendoReactForm",e.Field=a,e.FieldArray=u,e.FieldWrapper=c,e.Form=v,e.FormClassComponent=h,e.FormElement=m}));
|
package/index.d.mts
CHANGED
package/index.d.ts
CHANGED
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741187289,version:"10.0.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "
|
|
13
|
+
publishDate: 1741187289,
|
|
14
|
+
version: "10.0.0-develop.2",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-form",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0-develop.2",
|
|
4
4
|
"description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.5.0",
|
|
29
|
-
"@progress/kendo-react-common": "
|
|
29
|
+
"@progress/kendo-react-common": "10.0.0-develop.2",
|
|
30
30
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
31
31
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
32
32
|
},
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"package": {
|
|
52
52
|
"productName": "KendoReact",
|
|
53
53
|
"productCode": "KENDOUIREACT",
|
|
54
|
-
"publishDate":
|
|
54
|
+
"publishDate": 1741187289,
|
|
55
55
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
56
56
|
}
|
|
57
57
|
},
|