@progress/kendo-react-form 13.2.0-develop.3 → 13.2.0-develop.5
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 +41 -39
- package/dist/cdn/js/kendo-react-form.js +1 -1
- package/index.d.mts +43 -0
- package/index.d.ts +43 -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 y=require("react"),u=require("prop-types"),g=require("./FormContext.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),u=require("prop-types"),g=require("./FormContext.js"),d=require("@progress/kendo-react-common"),p=require("./package-metadata.js");function _(a){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(s,t,e.get?e:{enumerable:!0,get:()=>a[t]})}}return s.default=a,Object.freeze(s)}const c=_(y),b=0,l=class l extends c.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 e={},i=this.fields;t&&(typeof t.preventDefault=="function"&&t.preventDefault(),typeof t.stopPropagation=="function"&&t.stopPropagation()),i.forEach(n=>{e[n]=!0}),this.visited={...e},this.touched={...e};const o=this.values,h=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);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,e)=>{const{value:i}=e;this.addField(t),this.modified[t]||(this.modified={...this.modified,[t]:!0}),this.valueSetter(t,i),this.props.onChange&&this.props.onChange(t,i,this.valueGetter),this.forceUpdate()},this.onFocus=(t,e)=>{this.visited[t]||(this.visited={...this.visited,[t]:!0},e||this.forceUpdate())},this.onBlur=(t,e)=>{this.touched[t]||(this.onFocus(t,e),this.touched={...this.touched,[t]:!0},e||this.forceUpdate())},this.onFieldRegister=(t,e)=>{this.addField(t);const i=this.validatorsByField[t]||[],o=i.findIndex(n=>n===void 0),h=[...i];o>=0?h[o]=e:h.push(e);const r=o>=0?o:h.length-1;return this.validatorsByField={...this.validatorsByField,[t]:h},this.accumulatedForceUpdate(),()=>{const n=[...this.validatorsByField[t]||[]],f=!!n[r];n[r]=void 0,this.validatorsByField={...this.validatorsByField,[t]:n},f&&!this._unmounted&&this.accumulatedForceUpdate()}},this.isFormValid=t=>!Object.keys(t).some(e=>!!t[e]),this.isFormModified=(t,e)=>e.some(i=>t[i]),this.isFormHasNotTouched=(t,e)=>e.some(i=>!t[i]),this.isFormTouched=(t,e)=>e.some(i=>t[i]),this.isFormVisited=(t,e)=>e.some(i=>t[i]),this.valueGetter=t=>d.getter(t)(this.values),this.valueSetter=(t,e)=>d.setter(t)(this.values,e),this.onArrayAction=t=>{this.addField(t),this.modified[t]||(this.modified={...this.modified,[t]:!0}),this.onBlur(t,!0)},this.onInsert=(t,e)=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[]];i.splice(e.index,0,e.value),this.valueSetter(t,i),this.forceUpdate()},this.onUnshift=(t,e)=>{this.onInsert(t,{value:e.value,index:0})},this.onPush=(t,e)=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[],e.value];this.valueSetter(t,i),this.forceUpdate()},this.onPop=t=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[]],i=e.pop();return this.valueSetter(t,e),this.forceUpdate(),i},this.onRemove=(t,e)=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[]],o=i.splice(e.index,1);return this.valueSetter(t,i),this.forceUpdate(),o},this.onReplace=(t,e)=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[]];i.splice(e.index,1,e.value),this.valueSetter(t,i),this.forceUpdate()},this.onMove=(t,e)=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[]],o=i[e.prevIndex];i.splice(e.prevIndex,1),i.splice(e.nextIndex,0,o),this.valueSetter(t,i),this.forceUpdate()},this.showLicenseWatermark=!d.validatePackage(p.packageMetadata,{component:"Form"}),this.licenseMessage=d.getLicenseMessage(p.packageMetadata),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,e=this.validatorsByField;t.forEach(o=>{if(s[o]="",e[o]){const h=[];e[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})}});const i=this.formErrors;return i&&d.cloneObject(i,s),this.props.errors&&d.cloneObject(this.props.errors,s),s}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:s}=this.props,t=this.touched,e=this.visited,i=this.modified,o=this.fields,h=this.errors,r=this.isFormValid(h),n=this.isFormModified(i,o),f=this.isFormTouched(t,o),m=this.isFormVisited(e,o),F=this.isFormHasNotTouched(t,o)&&!r||r&&(this.props.ignoreModified||n);return c.createElement(c.Fragment,null,c.createElement(g.FormContext.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:h,modified:i,touched:t,visited:e,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:f,visited:m,submitted:this._submitted,valueGetter:this.valueGetter,errors:h,allowSubmit:F,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&c.createElement(d.WatermarkOverlay,{message:this.licenseMessage}))}};l.displayName="KendoReactForm",l.propTypes={initialValues:u.any,onSubmit:u.func,onSubmitClick:u.func,render:u.func.isRequired,id:u.string};let v=l;exports.Form=v;
|
package/Form.mjs
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as n from "react";
|
|
9
9
|
import a from "prop-types";
|
|
10
|
-
import { FormContext as
|
|
11
|
-
import { clone as c, guid as
|
|
12
|
-
import { packageMetadata as
|
|
10
|
+
import { FormContext as y } from "./FormContext.mjs";
|
|
11
|
+
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";
|
|
12
|
+
import { packageMetadata as v } from "./package-metadata.mjs";
|
|
13
13
|
const B = 0, u = class u extends n.Component {
|
|
14
14
|
/**
|
|
15
15
|
* @hidden
|
|
@@ -20,43 +20,43 @@ const B = 0, u = class u extends n.Component {
|
|
|
20
20
|
this._accumulatorTimeout = void 0, this.forceUpdate();
|
|
21
21
|
}, B);
|
|
22
22
|
}, this.resetForm = () => {
|
|
23
|
-
this.values = c(this.props.initialValues), this._key =
|
|
23
|
+
this.values = c(this.props.initialValues), this._key = _(), 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 = {}, s = this.fields;
|
|
28
|
+
t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), s.forEach((d) => {
|
|
29
29
|
i[d] = !0;
|
|
30
30
|
}), this.visited = { ...i }, this.touched = { ...i };
|
|
31
|
-
const
|
|
31
|
+
const e = this.values, h = this.isFormValid(this.errors), r = this.isFormModified(this.modified, s);
|
|
32
32
|
this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
|
|
33
|
-
values:
|
|
33
|
+
values: e,
|
|
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, e, 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: s } = i;
|
|
40
|
+
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();
|
|
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
|
-
|
|
49
|
-
const r =
|
|
47
|
+
const s = this.validatorsByField[t] || [], e = s.findIndex((d) => d === void 0), h = [...s];
|
|
48
|
+
e >= 0 ? h[e] = i : h.push(i);
|
|
49
|
+
const r = e >= 0 ? e : h.length - 1;
|
|
50
50
|
return this.validatorsByField = { ...this.validatorsByField, [t]: h }, this.accumulatedForceUpdate(), () => {
|
|
51
51
|
const d = [...this.validatorsByField[t] || []], l = !!d[r];
|
|
52
52
|
d[r] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: d }, l && !this._unmounted && 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((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) => {
|
|
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 s = [...this.valueGetter(t) || []];
|
|
59
|
+
s.splice(i.index, 0, i.value), this.valueSetter(t, s), this.forceUpdate();
|
|
60
60
|
}, this.onUnshift = (t, i) => {
|
|
61
61
|
this.onInsert(t, {
|
|
62
62
|
value: i.value,
|
|
@@ -64,25 +64,25 @@ const B = 0, u = class u extends n.Component {
|
|
|
64
64
|
});
|
|
65
65
|
}, this.onPush = (t, i) => {
|
|
66
66
|
this.onArrayAction(t);
|
|
67
|
-
const
|
|
68
|
-
this.valueSetter(t,
|
|
67
|
+
const s = [...this.valueGetter(t) || [], i.value];
|
|
68
|
+
this.valueSetter(t, s), 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) || []], s = i.pop();
|
|
72
|
+
return this.valueSetter(t, i), this.forceUpdate(), s;
|
|
73
73
|
}, this.onRemove = (t, i) => {
|
|
74
74
|
this.onArrayAction(t);
|
|
75
|
-
const
|
|
76
|
-
return this.valueSetter(t,
|
|
75
|
+
const s = [...this.valueGetter(t) || []], e = s.splice(i.index, 1);
|
|
76
|
+
return this.valueSetter(t, s), this.forceUpdate(), e;
|
|
77
77
|
}, this.onReplace = (t, i) => {
|
|
78
78
|
this.onArrayAction(t);
|
|
79
|
-
const
|
|
80
|
-
|
|
79
|
+
const s = [...this.valueGetter(t) || []];
|
|
80
|
+
s.splice(i.index, 1, i.value), this.valueSetter(t, s), this.forceUpdate();
|
|
81
81
|
}, this.onMove = (t, i) => {
|
|
82
82
|
this.onArrayAction(t);
|
|
83
|
-
const
|
|
84
|
-
|
|
85
|
-
}, this.showLicenseWatermark = !
|
|
83
|
+
const s = [...this.valueGetter(t) || []], e = s[i.prevIndex];
|
|
84
|
+
s.splice(i.prevIndex, 1), s.splice(i.nextIndex, 0, e), this.valueSetter(t, s), this.forceUpdate();
|
|
85
|
+
}, this.showLicenseWatermark = !U(v, { component: "Form" }), this.licenseMessage = T(v), this.values = c(o.initialValues);
|
|
86
86
|
}
|
|
87
87
|
/**
|
|
88
88
|
* @hidden
|
|
@@ -162,21 +162,23 @@ const B = 0, u = class u extends n.Component {
|
|
|
162
162
|
*/
|
|
163
163
|
get errors() {
|
|
164
164
|
const o = {}, t = this.fields, i = this.validatorsByField;
|
|
165
|
-
|
|
166
|
-
if (o[
|
|
165
|
+
t.forEach((e) => {
|
|
166
|
+
if (o[e] = "", i[e]) {
|
|
167
167
|
const h = [];
|
|
168
|
-
i[
|
|
168
|
+
i[e].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(e), this.valueGetter, { name: e });
|
|
173
173
|
if (d)
|
|
174
|
-
return o[
|
|
174
|
+
return o[e] = d, !0;
|
|
175
175
|
}
|
|
176
176
|
return !1;
|
|
177
177
|
});
|
|
178
178
|
}
|
|
179
|
-
})
|
|
179
|
+
});
|
|
180
|
+
const s = this.formErrors;
|
|
181
|
+
return s && f(s, o), this.props.errors && f(this.props.errors, o), o;
|
|
180
182
|
}
|
|
181
183
|
/**
|
|
182
184
|
* @hidden
|
|
@@ -188,16 +190,16 @@ const B = 0, u = class u extends n.Component {
|
|
|
188
190
|
* @hidden
|
|
189
191
|
*/
|
|
190
192
|
render() {
|
|
191
|
-
const { render: o } = this.props, t = this.touched, i = this.visited,
|
|
193
|
+
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);
|
|
192
194
|
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
193
|
-
|
|
195
|
+
y.Provider,
|
|
194
196
|
{
|
|
195
197
|
key: this._key || this.props.id,
|
|
196
198
|
value: {
|
|
197
199
|
id: this.props.id,
|
|
198
200
|
valueGetter: this.valueGetter,
|
|
199
201
|
errors: h,
|
|
200
|
-
modified:
|
|
202
|
+
modified: s,
|
|
201
203
|
touched: t,
|
|
202
204
|
visited: i,
|
|
203
205
|
registerField: this.onFieldRegister,
|
|
@@ -218,11 +220,11 @@ const B = 0, u = class u extends n.Component {
|
|
|
218
220
|
valid: r,
|
|
219
221
|
modified: d,
|
|
220
222
|
touched: l,
|
|
221
|
-
visited:
|
|
223
|
+
visited: p,
|
|
222
224
|
submitted: this._submitted,
|
|
223
225
|
valueGetter: this.valueGetter,
|
|
224
226
|
errors: h,
|
|
225
|
-
allowSubmit:
|
|
227
|
+
allowSubmit: F,
|
|
226
228
|
onChange: this.onChange,
|
|
227
229
|
onSubmit: this.onSubmit,
|
|
228
230
|
onFormReset: this.resetForm
|
|
@@ -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,s,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),l=e=>{const{name:t,component:s,validator:i,children:o,onChange:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>{const s=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);u.onChange(t,{value:s}),l&&l.call(void 0,e)}),[t,d,l]),h=r.useCallback((e=>u.onChange(t,{value:e.target.value})),[t,d]),m=r.useCallback((()=>u.onBlur(t)),[t,d]),f=r.useCallback((()=>u.onFocus(t)),[t,d]);if(!u)return null;const v=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:v,children:o,...a});const p={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:v,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),name:t};return o||delete p.children,r.createElement(s,p)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.2.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),u=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=i.clone(this.props.initialValues),this._key=i.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={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),s.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const i=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,s);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:i,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,i,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:s}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,s),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 s=this.validatorsByField[e]||[],i=s.findIndex((e=>void 0===e)),o=[...s];i>=0?o[i]=t:o.push(t);const r=i>=0?i:o.length-1;return this.validatorsByField={...this.validatorsByField,[e]:o},this.accumulatedForceUpdate(),()=>{const t=[...this.validatorsByField[e]||[]],s=!!t[r];t[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&!this._unmounted&&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=>i.getter(e)(this.values),this.valueSetter=(e,t)=>i.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 s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),this.forceUpdate(),s},this.onRemove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),this.forceUpdate(),i},this.onReplace=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s),this.forceUpdate()},this.showLicenseWatermark=!i.validatePackage(a,{component:"Form"}),this.licenseMessage=i.getLicenseMessage(a),this.values=i.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,s=this.validatorsByField;return t.forEach((t=>{if(e[t]="",s[t]){const i=[];s[t].forEach((e=>{Array.isArray(e)?i.push(...e):i.push(e)})),i.find((s=>{if(s){const i=s(this.valueGetter(t),this.valueGetter,{name:t});if(i)return e[t]=i,!0}return!1}))}})),this.formErrors&&i.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,s=this.visited,o=this.modified,l=this.fields,a=this.errors,u=this.isFormValid(a),d=this.isFormModified(o,l),c=this.isFormTouched(t,l),h=this.isFormVisited(s,l),m=this.isFormHasNotTouched(t,l)&&!u||u&&(this.props.ignoreModified||d);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:a,modified:o,touched:t,visited:s,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:u,modified:d,touched:c,visited:h,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(i.WatermarkOverlay,{message:this.licenseMessage}))}};u.displayName="KendoReactForm",u.propTypes={initialValues:s.any,onSubmit:s.func,onSubmitClick:s.func,render:s.func.isRequired,id:s.string};let d=u;const c=e=>{const{name:t,component:s,validator:i,type:o,children:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>u.onUnshift(t,e)),[t,d]),h=r.useCallback((e=>u.onPush(t,e)),[t,d]),m=r.useCallback((e=>u.onInsert(t,e)),[t,d]),f=r.useCallback((()=>u.onPop(t)),[t,d]),v=r.useCallback((e=>u.onRemove(t,e)),[t,d]),p=r.useCallback((e=>u.onReplace(t,e)),[t,d]),y=r.useCallback((e=>u.onMove(t,e)),[t,d]);if(!u)return null;const F=u.valueGetter(t);return r.createElement(s,{value:F,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),onUnshift:c,onPush:h,onInsert:m,onPop:f,onRemove:v,onReplace:p,onMove:y,children:l,name:t,...a})};c.displayName="KendoReactFieldArray";function h(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function m(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,a=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,u=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=a&&t<=u)return r.value}return""}const f=e=>{if("number"==typeof e)return`${e}px`;if("string"==typeof e){const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}return null},v=(e,t)=>{if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null},p=e=>e&&e>0?`k-grid-cols-${e}`:"",y=(e,t)=>{if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null},F=e=>e?`k-col-span-${e}`:"",g=(e,t)=>{if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=m(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols?"number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=m(s.cols,t)||null):i.cols=null,void 0!==s.rows?"number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=m(s.rows,t)||null):i.rows=null,i}return null},b=(e,t)=>{var s,i,o,r;return`${f(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px")} ${f(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px")}`},w=e=>{const{className:t,style:s,dir:o,colSpan:n,children:l}=e,a=r.useRef(null),u=i.useUnstyled(),d=e.unstyled||u,c=d&&d.uForm,[m,f]=r.useState(void 0),v=r.useRef(null);r.useEffect((()=>{a.current&&(v.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==v?void 0:v.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==n){const t=y(n,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[n]);const p=r.useMemo((()=>i.classNames(i.uForm.field({c:c,isRtl:"rtl"===o}),m,t)),[c,t,o,m]);return r.createElement("div",{ref:a,className:p,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},S=r.forwardRef(((e,t)=>{const s={size:"medium",...e},o=r.useRef(null),l=r.useRef(null);r.useImperativeHandle(l,(()=>({element:o.current,props:s}))),r.useImperativeHandle(t,(()=>l.current));const a=r.useContext(n),{className:u,style:d,horizontal:c,size:m,cols:f,gutters:y=R,...F}=s,w=i.useUnstyled(),S=w&&w.uForm,[C,_]=r.useState(void 0),[E,N]=r.useState(void 0),k=r.useMemo((()=>c?"horizontal":!1===c?"vertical":void 0),[c]),A=r.useMemo((()=>i.classNames(i.uForm.form({c:S,size:m,orientation:k}),u)),[u,S,k,m]);return r.useEffect((()=>{if(!f&&!y)return void _(void 0);if(!y)return void N(void 0);const e=()=>{let e=0;if(o.current?e=h(o.current):"undefined"!=typeof window&&(e=window.innerWidth),f){const t=v(f,e);_(p(t))}if(y){const t=g(y,e);N(t?{gap:b(t,R)}:{gap:b(R,R)})}};let t;e();const s=o.current;return s&&"undefined"!=typeof window&&"ResizeObserver"in window&&(t=new ResizeObserver(e),t.observe(s)),()=>{t&&s&&t.unobserve(s)}}),[f,y]),r.createElement("form",{ref:o,...F,id:e.id||(a?a.id:void 0),style:e.style,className:A,onSubmit:a?a.onSubmit:void 0},f?r.createElement("div",{className:i.classNames(i.uForm.formLayout({c:S}),C),style:E},e.children):e.children)}));S.displayName="KendoReactFormElement";const C=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,colSpan:a,...u}=e,d=i.useUnstyled(),c=d&&d.uForm,[m,f]=r.useState(void 0),v=r.useRef(null);r.useEffect((()=>{s.current&&(v.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=v.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==a){const t=y(a,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[a]);const p=r.useMemo((()=>i.classNames(i.uForm.separator({c:c}),m,n)),[n,c,m]);return r.createElement("span",{ref:s,...u,style:e.style,className:p})}));C.displayName="KendoReactFormSeparator";const _={rows:"0px",cols:"16px"},E=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,cols:a,colSpan:u,gutters:d=_,legend:c,...m}=e,f=i.useUnstyled(),w=f&&f.uForm,[R,S]=r.useState(void 0),[C,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),C,n)),[n,w,C]),x=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),U=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),I=r.useRef(null);return r.useEffect((()=>{s.current&&(I.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void S(void 0);if(!d)return void k(void 0);const e=null==I?void 0:I.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=v(a,t);if(S(p(s)),void 0!==u){const e=y(u,t);E(F(e))}else E(void 0);if(d){const e=g(d,t);k(e?{gap:b(e,_)}:{gap:b(_,_)})}};let s;return t(),e&&"undefined"!=typeof window&&"ResizeObserver"in window&&(s=new ResizeObserver(t),s.observe(e)),()=>{s&&e&&s.unobserve(e)}}),[a,u,d]),r.createElement("fieldset",{ref:s,...m,style:e.style,className:A},c&&r.createElement("legend",{className:U},c),a?r.createElement("div",{className:x,style:N},e.children):e.children)}));E.displayName="KendoReactFormFieldSet";const N=i.withIdHOC(d);N.displayName="KendoReactForm",e.Field=l,e.FieldArray=c,e.FieldWrapper=w,e.Form=N,e.FormClassComponent=d,e.FormElement=S,e.FormFieldSet=E,e.FormSeparator=C}));
|
|
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,s,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),l=e=>{const{name:t,component:s,validator:i,children:o,onChange:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>{const s=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);u.onChange(t,{value:s}),l&&l.call(void 0,e)}),[t,d,l]),h=r.useCallback((e=>u.onChange(t,{value:e.target.value})),[t,d]),m=r.useCallback((()=>u.onBlur(t)),[t,d]),f=r.useCallback((()=>u.onFocus(t)),[t,d]);if(!u)return null;const p=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:p,children:o,...a});const v={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:p,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),name:t};return o||delete v.children,r.createElement(s,v)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.2.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),u=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=i.clone(this.props.initialValues),this._key=i.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={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),s.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const i=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,s);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:i,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,i,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:s}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,s),this.props.onChange&&this.props.onChange(e,s,this.valueGetter),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 s=this.validatorsByField[e]||[],i=s.findIndex((e=>void 0===e)),o=[...s];i>=0?o[i]=t:o.push(t);const r=i>=0?i:o.length-1;return this.validatorsByField={...this.validatorsByField,[e]:o},this.accumulatedForceUpdate(),()=>{const t=[...this.validatorsByField[e]||[]],s=!!t[r];t[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&!this._unmounted&&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=>i.getter(e)(this.values),this.valueSetter=(e,t)=>i.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 s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),this.forceUpdate(),s},this.onRemove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),this.forceUpdate(),i},this.onReplace=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s),this.forceUpdate()},this.showLicenseWatermark=!i.validatePackage(a,{component:"Form"}),this.licenseMessage=i.getLicenseMessage(a),this.values=i.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,s=this.validatorsByField;t.forEach((t=>{if(e[t]="",s[t]){const i=[];s[t].forEach((e=>{Array.isArray(e)?i.push(...e):i.push(e)})),i.find((s=>{if(s){const i=s(this.valueGetter(t),this.valueGetter,{name:t});if(i)return e[t]=i,!0}return!1}))}}));const o=this.formErrors;return o&&i.cloneObject(o,e),this.props.errors&&i.cloneObject(this.props.errors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,s=this.visited,o=this.modified,l=this.fields,a=this.errors,u=this.isFormValid(a),d=this.isFormModified(o,l),c=this.isFormTouched(t,l),h=this.isFormVisited(s,l),m=this.isFormHasNotTouched(t,l)&&!u||u&&(this.props.ignoreModified||d);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:a,modified:o,touched:t,visited:s,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:u,modified:d,touched:c,visited:h,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(i.WatermarkOverlay,{message:this.licenseMessage}))}};u.displayName="KendoReactForm",u.propTypes={initialValues:s.any,onSubmit:s.func,onSubmitClick:s.func,render:s.func.isRequired,id:s.string};let d=u;const c=e=>{const{name:t,component:s,validator:i,type:o,children:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>u.onUnshift(t,e)),[t,d]),h=r.useCallback((e=>u.onPush(t,e)),[t,d]),m=r.useCallback((e=>u.onInsert(t,e)),[t,d]),f=r.useCallback((()=>u.onPop(t)),[t,d]),p=r.useCallback((e=>u.onRemove(t,e)),[t,d]),v=r.useCallback((e=>u.onReplace(t,e)),[t,d]),y=r.useCallback((e=>u.onMove(t,e)),[t,d]);if(!u)return null;const F=u.valueGetter(t);return r.createElement(s,{value:F,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),onUnshift:c,onPush:h,onInsert:m,onPop:f,onRemove:p,onReplace:v,onMove:y,children:l,name:t,...a})};c.displayName="KendoReactFieldArray";function h(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function m(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,a=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,u=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=a&&t<=u)return r.value}return""}const f=e=>{if("number"==typeof e)return`${e}px`;if("string"==typeof e){const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}return null},p=(e,t)=>{if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null},v=e=>e&&e>0?`k-grid-cols-${e}`:"",y=(e,t)=>{if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null},F=e=>e?`k-col-span-${e}`:"",g=(e,t)=>{if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=m(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols?"number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=m(s.cols,t)||null):i.cols=null,void 0!==s.rows?"number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=m(s.rows,t)||null):i.rows=null,i}return null},b=(e,t)=>{var s,i,o,r;return`${f(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px")} ${f(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px")}`},w=e=>{const{className:t,style:s,dir:o,colSpan:n,children:l}=e,a=r.useRef(null),u=i.useUnstyled(),d=e.unstyled||u,c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect((()=>{a.current&&(p.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==p?void 0:p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==n){const t=y(n,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[n]);const v=r.useMemo((()=>i.classNames(i.uForm.field({c:c,isRtl:"rtl"===o}),m,t)),[c,t,o,m]);return r.createElement("div",{ref:a,className:v,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},C=r.forwardRef(((e,t)=>{const s={size:"medium",...e},o=r.useRef(null),l=r.useRef(null);r.useImperativeHandle(l,(()=>({element:o.current,props:s}))),r.useImperativeHandle(t,(()=>l.current));const a=r.useContext(n),{className:u,style:d,horizontal:c,size:m,cols:f,gutters:y=R,...F}=s,w=i.useUnstyled(),C=w&&w.uForm,[S,_]=r.useState(void 0),[E,N]=r.useState(void 0),k=r.useMemo((()=>c?"horizontal":!1===c?"vertical":void 0),[c]),A=r.useMemo((()=>i.classNames(i.uForm.form({c:C,size:m,orientation:k}),u)),[u,C,k,m]);return r.useEffect((()=>{if(!f&&!y)return void _(void 0);if(!y)return void N(void 0);const e=()=>{let e=0;if(o.current?e=h(o.current):"undefined"!=typeof window&&(e=window.innerWidth),f){const t=p(f,e);_(v(t))}if(y){const t=g(y,e);N(t?{gap:b(t,R)}:{gap:b(R,R)})}};let t;e();const s=o.current;return s&&"undefined"!=typeof window&&"ResizeObserver"in window&&(t=new ResizeObserver(e),t.observe(s)),()=>{t&&s&&t.unobserve(s)}}),[f,y]),r.createElement("form",{ref:o,...F,id:e.id||(a?a.id:void 0),style:e.style,className:A,onSubmit:a?a.onSubmit:void 0},f?r.createElement("div",{className:i.classNames(i.uForm.formLayout({c:C}),S),style:E},e.children):e.children)}));C.displayName="KendoReactFormElement";const S=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,colSpan:a,...u}=e,d=i.useUnstyled(),c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect((()=>{s.current&&(p.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==a){const t=y(a,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[a]);const v=r.useMemo((()=>i.classNames(i.uForm.separator({c:c}),m,n)),[n,c,m]);return r.createElement("span",{ref:s,...u,style:e.style,className:v})}));S.displayName="KendoReactFormSeparator";const _={rows:"0px",cols:"16px"},E=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,cols:a,colSpan:u,gutters:d=_,legend:c,...m}=e,f=i.useUnstyled(),w=f&&f.uForm,[R,C]=r.useState(void 0),[S,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),S,n)),[n,w,S]),x=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),U=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),O=r.useRef(null);return r.useEffect((()=>{s.current&&(O.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void C(void 0);if(!d)return void k(void 0);const e=null==O?void 0:O.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=p(a,t);if(C(v(s)),void 0!==u){const e=y(u,t);E(F(e))}else E(void 0);if(d){const e=g(d,t);k(e?{gap:b(e,_)}:{gap:b(_,_)})}};let s;return t(),e&&"undefined"!=typeof window&&"ResizeObserver"in window&&(s=new ResizeObserver(t),s.observe(e)),()=>{s&&e&&s.unobserve(e)}}),[a,u,d]),r.createElement("fieldset",{ref:s,...m,style:e.style,className:A},c&&r.createElement("legend",{className:U},c),a?r.createElement("div",{className:x,style:N},e.children):e.children)}));E.displayName="KendoReactFormFieldSet";const N=i.withIdHOC(d);N.displayName="KendoReactForm",e.Field=l,e.FieldArray=c,e.FieldWrapper=w,e.Form=N,e.FormClassComponent=d,e.FormElement=C,e.FormFieldSet=E,e.FormSeparator=S}));
|
package/index.d.mts
CHANGED
|
@@ -686,6 +686,49 @@ export declare interface FormProps {
|
|
|
686
686
|
initialValues?: {
|
|
687
687
|
[name: string]: any;
|
|
688
688
|
};
|
|
689
|
+
/**
|
|
690
|
+
* Validation errors that override field and form validators.
|
|
691
|
+
*
|
|
692
|
+
* Provides validation errors directly as an object, unlike the validator prop which expects a callback.
|
|
693
|
+
* When both validator and errors exist for a field, the errors prop takes precedence.
|
|
694
|
+
*
|
|
695
|
+
* @example
|
|
696
|
+
* ```jsx
|
|
697
|
+
* const [errors, setErrors] = useState({});
|
|
698
|
+
* const handleSubmit = async (data) => {
|
|
699
|
+
* const response = await submitToServer(data);
|
|
700
|
+
* if (response.errors) {
|
|
701
|
+
* setErrors(response.errors);
|
|
702
|
+
* }
|
|
703
|
+
* };
|
|
704
|
+
* <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
|
|
705
|
+
* ```
|
|
706
|
+
*/
|
|
707
|
+
errors?: {
|
|
708
|
+
[name: string]: string;
|
|
709
|
+
};
|
|
710
|
+
/**
|
|
711
|
+
* Fires each time any field value changes.
|
|
712
|
+
*
|
|
713
|
+
* The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
|
|
714
|
+
*
|
|
715
|
+
* @example
|
|
716
|
+
* ```jsx
|
|
717
|
+
* const handleChange = (fieldName, value, valueGetter) => {
|
|
718
|
+
* // For nested fields like 'user.name', access related fields like 'user.email'
|
|
719
|
+
* if (fieldName === 'user.name') {
|
|
720
|
+
* const email = valueGetter('user.email');
|
|
721
|
+
* console.log('Name changed:', value, 'Email is:', email);
|
|
722
|
+
* }
|
|
723
|
+
* // Clear error for the changed field
|
|
724
|
+
* if (formErrors[fieldName]) {
|
|
725
|
+
* setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
|
|
726
|
+
* }
|
|
727
|
+
* };
|
|
728
|
+
* <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
|
|
729
|
+
* ```
|
|
730
|
+
*/
|
|
731
|
+
onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
|
|
689
732
|
/**
|
|
690
733
|
* Validates the entire form and returns error messages.
|
|
691
734
|
*
|
package/index.d.ts
CHANGED
|
@@ -686,6 +686,49 @@ export declare interface FormProps {
|
|
|
686
686
|
initialValues?: {
|
|
687
687
|
[name: string]: any;
|
|
688
688
|
};
|
|
689
|
+
/**
|
|
690
|
+
* Validation errors that override field and form validators.
|
|
691
|
+
*
|
|
692
|
+
* Provides validation errors directly as an object, unlike the validator prop which expects a callback.
|
|
693
|
+
* When both validator and errors exist for a field, the errors prop takes precedence.
|
|
694
|
+
*
|
|
695
|
+
* @example
|
|
696
|
+
* ```jsx
|
|
697
|
+
* const [errors, setErrors] = useState({});
|
|
698
|
+
* const handleSubmit = async (data) => {
|
|
699
|
+
* const response = await submitToServer(data);
|
|
700
|
+
* if (response.errors) {
|
|
701
|
+
* setErrors(response.errors);
|
|
702
|
+
* }
|
|
703
|
+
* };
|
|
704
|
+
* <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
|
|
705
|
+
* ```
|
|
706
|
+
*/
|
|
707
|
+
errors?: {
|
|
708
|
+
[name: string]: string;
|
|
709
|
+
};
|
|
710
|
+
/**
|
|
711
|
+
* Fires each time any field value changes.
|
|
712
|
+
*
|
|
713
|
+
* The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
|
|
714
|
+
*
|
|
715
|
+
* @example
|
|
716
|
+
* ```jsx
|
|
717
|
+
* const handleChange = (fieldName, value, valueGetter) => {
|
|
718
|
+
* // For nested fields like 'user.name', access related fields like 'user.email'
|
|
719
|
+
* if (fieldName === 'user.name') {
|
|
720
|
+
* const email = valueGetter('user.email');
|
|
721
|
+
* console.log('Name changed:', value, 'Email is:', email);
|
|
722
|
+
* }
|
|
723
|
+
* // Clear error for the changed field
|
|
724
|
+
* if (formErrors[fieldName]) {
|
|
725
|
+
* setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
|
|
726
|
+
* }
|
|
727
|
+
* };
|
|
728
|
+
* <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
|
|
729
|
+
* ```
|
|
730
|
+
*/
|
|
731
|
+
onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
|
|
689
732
|
/**
|
|
690
733
|
* Validates the entire form and returns error messages.
|
|
691
734
|
*
|
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=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1765280052,version:"13.2.0-develop.5",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 = Object.freeze({
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "13.2.0-develop.
|
|
13
|
+
publishDate: 1765280052,
|
|
14
|
+
version: "13.2.0-develop.5",
|
|
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": "13.2.0-develop.
|
|
3
|
+
"version": "13.2.0-develop.5",
|
|
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.7.2",
|
|
29
|
-
"@progress/kendo-react-common": "13.2.0-develop.
|
|
29
|
+
"@progress/kendo-react-common": "13.2.0-develop.5",
|
|
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": 1765280052,
|
|
55
55
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
56
56
|
}
|
|
57
57
|
},
|