@progress/kendo-react-form 7.0.3-develop.9 → 7.1.0-develop.10
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.d.ts +1 -0
- package/dist/cdn/js/kendo-react-form.js +1 -1
- package/index.js +1 -1
- package/index.mjs +27 -27
- package/package.json +2 -2
package/Form.d.ts
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(u,y){typeof exports=="object"&&typeof module
|
|
5
|
+
(function(u,y){typeof exports=="object"&&typeof module!="undefined"?y(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],y):(u=typeof globalThis!="undefined"?globalThis:u||self,y(u.KendoReactForm={},u.React,u.PropTypes,u.KendoReactCommon))})(this,function(u,y,g,f){"use strict";"use client";function k(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const n=k(y),_=n.createContext(null),U=l=>{const{name:t,component:e,validator:i,children:o,onChange:r,...d}=l,s=n.useContext(_),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(h=>{const A=h&&(h.value!==void 0?h.value:h.target?h.target.value:h.target);s.onChange(t,{value:A}),r&&r.call(void 0,h)},[t,a,r]),v=n.useCallback(h=>s.onChange(t,{value:h.target.value}),[t,a]),p=n.useCallback(()=>s.onBlur(t),[t,a]),F=n.useCallback(()=>s.onFocus(t),[t,a]);if(!s)return null;const C=s.valueGetter(t);return typeof e=="string"?n.createElement(e,{onChange:v,onBlur:p,onFocus:F,value:C,children:o,...d}):n.createElement(e,{children:o,...d,onChange:m,onBlur:p,onFocus:F,value:C,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),name:t})};U.displayName="KendoReactField";const M={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},R=0;let b=class extends n.Component{constructor(t){super(t),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()},R)},this.resetForm=()=>{this.values=f.clone(this.props.initialValues),this._key=f.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 i={},o=this.fields;e&&(typeof e.preventDefault=="function"&&e.preventDefault(),typeof e.stopPropagation=="function"&&e.stopPropagation()),o.forEach(a=>{i[a]=!0}),this.visited={...i},this.touched={...i};const r=this.values,d=this.isFormValid(this.errors),s=this.isFormModified(this.modified,o);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:r,isValid:d,isModified:s,event:e}),d&&(this.props.ignoreModified||s)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,r,e)),this.forceUpdate()},this.onChange=(e,i)=>{const{value:o}=i;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,o),this.forceUpdate()},this.onFocus=(e,i)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},i||this.forceUpdate())},this.onBlur=(e,i)=>{this.touched[e]||(this.onFocus(e,i),this.touched={...this.touched,[e]:!0},i||this.forceUpdate())},this.onFieldRegister=(e,i)=>{this.addField(e);const o=this.validatorsByField[e]||[],r=o.length;return this.validatorsByField={...this.validatorsByField,[e]:[...o,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const d=[...this.validatorsByField[e]||[]],s=!!d[r];d[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:d},s&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some(i=>!!e[i]),this.isFormModified=(e,i)=>i.some(o=>e[o]),this.isFormHasNotTouched=(e,i)=>i.some(o=>!e[o]),this.isFormTouched=(e,i)=>i.some(o=>e[o]),this.isFormVisited=(e,i)=>i.some(o=>e[o]),this.valueGetter=e=>f.getter(e)(this.values),this.valueSetter=(e,i)=>f.setter(e)(this.values,i),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,0,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onUnshift=(e,i)=>{this.onInsert(e,{value:i.value,index:0})},this.onPush=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[],i.value];this.valueSetter(e,o),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.pop();return this.valueSetter(e,i),this.forceUpdate(),o},this.onRemove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o.splice(i.index,1);return this.valueSetter(e,o),this.forceUpdate(),r},this.onReplace=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,1,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onMove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o[i.prevIndex];o.splice(i.prevIndex,1),o.splice(i.nextIndex,0,r),this.valueSetter(e,o),this.forceUpdate()},f.validatePackage(M),this.values=f.clone(t.initialValues)}get touched(){return this._touched}set touched(t){this._touched=t}get visited(){return this._visited}set visited(t){this._visited=t}get modified(){return this._modified}set modified(t){this._modified=t}get validatorsByField(){return this._validatorsByField}set validatorsByField(t){this._validatorsByField=t}get values(){return this._values}set values(t){this._values=t}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const t={},e=this.fields,i=this.validatorsByField;return e.forEach(r=>{if(t[r]="",i[r]){const d=[];i[r].forEach(s=>{Array.isArray(s)?d.push(...s):d.push(s)}),d.find(s=>{if(s){const a=s(this.valueGetter(r),this.valueGetter,{name:r});if(a)return t[r]=a,!0}return!1})}}),this.formErrors&&f.cloneObject(this.formErrors,t),t}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:t}=this.props,e=this.touched,i=this.visited,o=this.modified,r=this.fields,d=this.errors,s=this.isFormValid(d),a=this.isFormModified(o,r),m=this.isFormTouched(e,r),v=this.isFormVisited(i,r),F=this.isFormHasNotTouched(e,r)&&!s||s&&(this.props.ignoreModified||a);return n.createElement(_.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:d,modified:o,touched:e,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}},t({valid:s,modified:a,touched:m,visited:v,submitted:this._submitted,valueGetter:this.valueGetter,errors:d,allowSubmit:F,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};b.displayName="KendoReactForm",b.propTypes={initialValues:g.any,onSubmit:g.func,onSubmitClick:g.func,render:g.func.isRequired,id:g.string};const E=l=>{const{name:t,component:e,validator:i,type:o,children:r,...d}=l,s=n.useContext(_),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(c=>s.onUnshift(t,c),[t,a]),v=n.useCallback(c=>s.onPush(t,c),[t,a]),p=n.useCallback(c=>s.onInsert(t,c),[t,a]),F=n.useCallback(()=>s.onPop(t),[t,a]),C=n.useCallback(c=>s.onRemove(t,c),[t,a]),h=n.useCallback(c=>s.onReplace(t,c),[t,a]),A=n.useCallback(c=>s.onMove(t,c),[t,a]);if(!s)return null;const I=s.valueGetter(t);return n.createElement(e,{value:I,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),onUnshift:m,onPush:v,onInsert:p,onPop:F,onRemove:C,onReplace:h,onMove:A,children:r,name:t,...d})};E.displayName="KendoReactFieldArray";const B=l=>{const t=f.classNames({"k-form-field":!0,"k-rtl":l.dir==="rtl"},l.className);return n.createElement("div",{className:t,style:l.style},l.children)};B.displayName="KendoReactFieldWrapper";const S=n.forwardRef((l,t)=>{const e={size:"medium",...l},i=n.useRef(null),o=n.useRef(null);n.useImperativeHandle(o,()=>({element:i.current,props:e})),n.useImperativeHandle(t,()=>o.current);const r=n.useContext(_),{className:d,style:s,horizontal:a,size:m,...v}=e,p=f.classNames({"k-form":!0,[`k-form-${f.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-form-horizontal":a===!0},d);return n.createElement("form",{ref:i,...v,id:r?r.id:void 0,style:l.style,className:p,onSubmit:r?r.onSubmit:void 0},l.children)});S.displayName="KendoReactFormElement";const T=f.withIdHOC(b);T.displayName="KendoReactForm",u.Field=U,u.FieldArray=E,u.FieldWrapper=B,u.Form=T,u.FormClassComponent=b,u.FormElement=S,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),F=require("prop-types"),h=require("@progress/kendo-react-common");function B(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const n=B(T),g=n.createContext(null),_=d=>{const{name:t,component:e,validator:i,children:o,onChange:r,...l}=d,s=n.useContext(g),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(u=>{const b=u&&(u.value!==void 0?u.value:u.target?u.target.value:u.target);s.onChange(t,{value:b}),r&&r.call(void 0,u)},[t,a,r]),f=n.useCallback(u=>s.onChange(t,{value:u.target.value}),[t,a]),v=n.useCallback(()=>s.onBlur(t),[t,a]),p=n.useCallback(()=>s.onFocus(t),[t,a]);if(!s)return null;const y=s.valueGetter(t);return typeof e=="string"?n.createElement(e,{onChange:f,onBlur:v,onFocus:p,value:y,children:o,...l}):n.createElement(e,{children:o,...l,onChange:m,onBlur:v,onFocus:p,value:y,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),name:t})};_.displayName="KendoReactField";const S={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M=0;let C=class extends n.Component{constructor(t){super(t),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()},M)},this.resetForm=()=>{this.values=h.clone(this.props.initialValues),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 i={},o=this.fields;e&&(typeof e.preventDefault=="function"&&e.preventDefault(),typeof e.stopPropagation=="function"&&e.stopPropagation()),o.forEach(a=>{i[a]=!0}),this.visited={...i},this.touched={...i};const r=this.values,l=this.isFormValid(this.errors),s=this.isFormModified(this.modified,o);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:r,isValid:l,isModified:s,event:e}),l&&(this.props.ignoreModified||s)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,r,e)),this.forceUpdate()},this.onChange=(e,i)=>{const{value:o}=i;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,o),this.forceUpdate()},this.onFocus=(e,i)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},i||this.forceUpdate())},this.onBlur=(e,i)=>{this.touched[e]||(this.onFocus(e,i),this.touched={...this.touched,[e]:!0},i||this.forceUpdate())},this.onFieldRegister=(e,i)=>{this.addField(e);const o=this.validatorsByField[e]||[],r=o.length;return this.validatorsByField={...this.validatorsByField,[e]:[...o,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const l=[...this.validatorsByField[e]||[]],s=!!l[r];l[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:l},s&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some(i=>!!e[i]),this.isFormModified=(e,i)=>i.some(o=>e[o]),this.isFormHasNotTouched=(e,i)=>i.some(o=>!e[o]),this.isFormTouched=(e,i)=>i.some(o=>e[o]),this.isFormVisited=(e,i)=>i.some(o=>e[o]),this.valueGetter=e=>h.getter(e)(this.values),this.valueSetter=(e,i)=>h.setter(e)(this.values,i),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,0,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onUnshift=(e,i)=>{this.onInsert(e,{value:i.value,index:0})},this.onPush=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[],i.value];this.valueSetter(e,o),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.pop();return this.valueSetter(e,i),this.forceUpdate(),o},this.onRemove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o.splice(i.index,1);return this.valueSetter(e,o),this.forceUpdate(),r},this.onReplace=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,1,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onMove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o[i.prevIndex];o.splice(i.prevIndex,1),o.splice(i.nextIndex,0,r),this.valueSetter(e,o),this.forceUpdate()},h.validatePackage(S),this.values=h.clone(t.initialValues)}get touched(){return this._touched}set touched(t){this._touched=t}get visited(){return this._visited}set visited(t){this._visited=t}get modified(){return this._modified}set modified(t){this._modified=t}get validatorsByField(){return this._validatorsByField}set validatorsByField(t){this._validatorsByField=t}get values(){return this._values}set values(t){this._values=t}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const t={},e=this.fields,i=this.validatorsByField;return e.forEach(r=>{if(t[r]="",i[r]){const l=[];i[r].forEach(s=>{Array.isArray(s)?l.push(...s):l.push(s)}),l.find(s=>{if(s){const a=s(this.valueGetter(r),this.valueGetter,{name:r});if(a)return t[r]=a,!0}return!1})}}),this.formErrors&&h.cloneObject(this.formErrors,t),t}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:t}=this.props,e=this.touched,i=this.visited,o=this.modified,r=this.fields,l=this.errors,s=this.isFormValid(l),a=this.isFormModified(o,r),m=this.isFormTouched(e,r),f=this.isFormVisited(i,r),p=this.isFormHasNotTouched(e,r)&&!s||s&&(this.props.ignoreModified||a);return n.createElement(g.Provider,{key:this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:l,modified:o,touched:e,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}},t({valid:s,modified:a,touched:m,visited:f,submitted:this._submitted,valueGetter:this.valueGetter,errors:l,allowSubmit:p,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};C.displayName="KendoReactForm";C.propTypes={initialValues:F.any,onSubmit:F.func,onSubmitClick:F.func,render:F.func.isRequired,id:F.string};const
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),F=require("prop-types"),h=require("@progress/kendo-react-common");function B(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const n=B(T),g=n.createContext(null),_=d=>{const{name:t,component:e,validator:i,children:o,onChange:r,...l}=d,s=n.useContext(g),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(u=>{const b=u&&(u.value!==void 0?u.value:u.target?u.target.value:u.target);s.onChange(t,{value:b}),r&&r.call(void 0,u)},[t,a,r]),f=n.useCallback(u=>s.onChange(t,{value:u.target.value}),[t,a]),v=n.useCallback(()=>s.onBlur(t),[t,a]),p=n.useCallback(()=>s.onFocus(t),[t,a]);if(!s)return null;const y=s.valueGetter(t);return typeof e=="string"?n.createElement(e,{onChange:f,onBlur:v,onFocus:p,value:y,children:o,...l}):n.createElement(e,{children:o,...l,onChange:m,onBlur:v,onFocus:p,value:y,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),name:t})};_.displayName="KendoReactField";const S={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M=0;let C=class extends n.Component{constructor(t){super(t),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()},M)},this.resetForm=()=>{this.values=h.clone(this.props.initialValues),this._key=h.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 i={},o=this.fields;e&&(typeof e.preventDefault=="function"&&e.preventDefault(),typeof e.stopPropagation=="function"&&e.stopPropagation()),o.forEach(a=>{i[a]=!0}),this.visited={...i},this.touched={...i};const r=this.values,l=this.isFormValid(this.errors),s=this.isFormModified(this.modified,o);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:r,isValid:l,isModified:s,event:e}),l&&(this.props.ignoreModified||s)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,r,e)),this.forceUpdate()},this.onChange=(e,i)=>{const{value:o}=i;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,o),this.forceUpdate()},this.onFocus=(e,i)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},i||this.forceUpdate())},this.onBlur=(e,i)=>{this.touched[e]||(this.onFocus(e,i),this.touched={...this.touched,[e]:!0},i||this.forceUpdate())},this.onFieldRegister=(e,i)=>{this.addField(e);const o=this.validatorsByField[e]||[],r=o.length;return this.validatorsByField={...this.validatorsByField,[e]:[...o,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const l=[...this.validatorsByField[e]||[]],s=!!l[r];l[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:l},s&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some(i=>!!e[i]),this.isFormModified=(e,i)=>i.some(o=>e[o]),this.isFormHasNotTouched=(e,i)=>i.some(o=>!e[o]),this.isFormTouched=(e,i)=>i.some(o=>e[o]),this.isFormVisited=(e,i)=>i.some(o=>e[o]),this.valueGetter=e=>h.getter(e)(this.values),this.valueSetter=(e,i)=>h.setter(e)(this.values,i),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,0,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onUnshift=(e,i)=>{this.onInsert(e,{value:i.value,index:0})},this.onPush=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[],i.value];this.valueSetter(e,o),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.pop();return this.valueSetter(e,i),this.forceUpdate(),o},this.onRemove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o.splice(i.index,1);return this.valueSetter(e,o),this.forceUpdate(),r},this.onReplace=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,1,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onMove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o[i.prevIndex];o.splice(i.prevIndex,1),o.splice(i.nextIndex,0,r),this.valueSetter(e,o),this.forceUpdate()},h.validatePackage(S),this.values=h.clone(t.initialValues)}get touched(){return this._touched}set touched(t){this._touched=t}get visited(){return this._visited}set visited(t){this._visited=t}get modified(){return this._modified}set modified(t){this._modified=t}get validatorsByField(){return this._validatorsByField}set validatorsByField(t){this._validatorsByField=t}get values(){return this._values}set values(t){this._values=t}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const t={},e=this.fields,i=this.validatorsByField;return e.forEach(r=>{if(t[r]="",i[r]){const l=[];i[r].forEach(s=>{Array.isArray(s)?l.push(...s):l.push(s)}),l.find(s=>{if(s){const a=s(this.valueGetter(r),this.valueGetter,{name:r});if(a)return t[r]=a,!0}return!1})}}),this.formErrors&&h.cloneObject(this.formErrors,t),t}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:t}=this.props,e=this.touched,i=this.visited,o=this.modified,r=this.fields,l=this.errors,s=this.isFormValid(l),a=this.isFormModified(o,r),m=this.isFormTouched(e,r),f=this.isFormVisited(i,r),p=this.isFormHasNotTouched(e,r)&&!s||s&&(this.props.ignoreModified||a);return n.createElement(g.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:l,modified:o,touched:e,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}},t({valid:s,modified:a,touched:m,visited:f,submitted:this._submitted,valueGetter:this.valueGetter,errors:l,allowSubmit:p,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};C.displayName="KendoReactForm";C.propTypes={initialValues:F.any,onSubmit:F.func,onSubmitClick:F.func,render:F.func.isRequired,id:F.string};const k=d=>{const{name:t,component:e,validator:i,type:o,children:r,...l}=d,s=n.useContext(g),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(c=>s.onUnshift(t,c),[t,a]),f=n.useCallback(c=>s.onPush(t,c),[t,a]),v=n.useCallback(c=>s.onInsert(t,c),[t,a]),p=n.useCallback(()=>s.onPop(t),[t,a]),y=n.useCallback(c=>s.onRemove(t,c),[t,a]),u=n.useCallback(c=>s.onReplace(t,c),[t,a]),b=n.useCallback(c=>s.onMove(t,c),[t,a]);if(!s)return null;const E=s.valueGetter(t);return n.createElement(e,{value:E,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),onUnshift:m,onPush:f,onInsert:v,onPop:p,onRemove:y,onReplace:u,onMove:b,children:r,name:t,...l})};k.displayName="KendoReactFieldArray";const R=d=>{const t=h.classNames({"k-form-field":!0,"k-rtl":d.dir==="rtl"},d.className);return n.createElement("div",{className:t,style:d.style},d.children)};R.displayName="KendoReactFieldWrapper";const A=n.forwardRef((d,t)=>{const e={size:"medium",...d},i=n.useRef(null),o=n.useRef(null);n.useImperativeHandle(o,()=>({element:i.current,props:e})),n.useImperativeHandle(t,()=>o.current);const r=n.useContext(g),{className:l,style:s,horizontal:a,size:m,...f}=e,v=h.classNames({"k-form":!0,[`k-form-${h.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-form-horizontal":a===!0},l);return n.createElement("form",{ref:i,...f,id:r?r.id:void 0,style:d.style,className:v,onSubmit:r?r.onSubmit:void 0},d.children)});A.displayName="KendoReactFormElement";const U=h.withIdHOC(C);U.displayName="KendoReactForm";exports.Field=_;exports.FieldArray=k;exports.FieldWrapper=R;exports.Form=U;exports.FormClassComponent=C;exports.FormElement=A;
|
package/index.mjs
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"use client";
|
|
6
6
|
import * as n from "react";
|
|
7
7
|
import p from "prop-types";
|
|
8
|
-
import { clone as _, getter as A, setter as U, validatePackage as
|
|
9
|
-
const y = n.createContext(null),
|
|
8
|
+
import { clone as _, guid as R, getter as A, setter as U, validatePackage as B, cloneObject as E, classNames as b, kendoThemeMaps as T, withIdHOC as S } from "@progress/kendo-react-common";
|
|
9
|
+
const y = n.createContext(null), M = (l) => {
|
|
10
10
|
const { name: e, component: t, validator: i, children: o, onChange: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
|
|
11
11
|
n.useEffect(
|
|
12
12
|
() => s ? s.registerField(e, i) : void 0,
|
|
@@ -63,15 +63,15 @@ const y = n.createContext(null), S = (l) => {
|
|
|
63
63
|
}
|
|
64
64
|
);
|
|
65
65
|
};
|
|
66
|
-
|
|
67
|
-
const
|
|
66
|
+
M.displayName = "KendoReactField";
|
|
67
|
+
const I = {
|
|
68
68
|
name: "@progress/kendo-react-form",
|
|
69
69
|
productName: "KendoReact",
|
|
70
70
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
71
|
-
publishDate:
|
|
71
|
+
publishDate: 1706106659,
|
|
72
72
|
version: "",
|
|
73
73
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
74
|
-
},
|
|
74
|
+
}, P = 0;
|
|
75
75
|
let C = class extends n.Component {
|
|
76
76
|
/**
|
|
77
77
|
* @hidden
|
|
@@ -82,10 +82,10 @@ let C = class extends n.Component {
|
|
|
82
82
|
() => {
|
|
83
83
|
this._accumulatorTimeout = void 0, this.forceUpdate();
|
|
84
84
|
},
|
|
85
|
-
|
|
85
|
+
P
|
|
86
86
|
);
|
|
87
87
|
}, this.resetForm = () => {
|
|
88
|
-
this.values = _(this.props.initialValues), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
|
|
88
|
+
this.values = _(this.props.initialValues), this._key = R(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
|
|
89
89
|
}, this.onReset = () => this.resetForm(), this.addField = (t) => {
|
|
90
90
|
this._fields[t] = !0;
|
|
91
91
|
}, this.onSubmit = (t) => {
|
|
@@ -147,7 +147,7 @@ let C = class extends n.Component {
|
|
|
147
147
|
this.onArrayAction(t);
|
|
148
148
|
const o = [...this.valueGetter(t) || []], r = o[i.prevIndex];
|
|
149
149
|
o.splice(i.prevIndex, 1), o.splice(i.nextIndex, 0, r), this.valueSetter(t, o), this.forceUpdate();
|
|
150
|
-
},
|
|
150
|
+
}, B(I), this.values = _(e.initialValues);
|
|
151
151
|
}
|
|
152
152
|
/**
|
|
153
153
|
* @hidden
|
|
@@ -241,7 +241,7 @@ let C = class extends n.Component {
|
|
|
241
241
|
return !1;
|
|
242
242
|
});
|
|
243
243
|
}
|
|
244
|
-
}), this.formErrors &&
|
|
244
|
+
}), this.formErrors && E(this.formErrors, e), e;
|
|
245
245
|
}
|
|
246
246
|
/**
|
|
247
247
|
* @hidden
|
|
@@ -257,7 +257,7 @@ let C = class extends n.Component {
|
|
|
257
257
|
return /* @__PURE__ */ n.createElement(
|
|
258
258
|
y.Provider,
|
|
259
259
|
{
|
|
260
|
-
key: this.props.id,
|
|
260
|
+
key: this._key || this.props.id,
|
|
261
261
|
value: {
|
|
262
262
|
id: this.props.id,
|
|
263
263
|
valueGetter: this.valueGetter,
|
|
@@ -303,7 +303,7 @@ C.propTypes = {
|
|
|
303
303
|
render: p.func.isRequired,
|
|
304
304
|
id: p.string
|
|
305
305
|
};
|
|
306
|
-
const
|
|
306
|
+
const x = (l) => {
|
|
307
307
|
const { name: e, component: t, validator: i, type: o, children: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
|
|
308
308
|
n.useEffect(
|
|
309
309
|
() => s ? s.registerField(e, i) : void 0,
|
|
@@ -333,12 +333,12 @@ const P = (l) => {
|
|
|
333
333
|
);
|
|
334
334
|
if (!s)
|
|
335
335
|
return null;
|
|
336
|
-
const
|
|
336
|
+
const k = s.valueGetter(e);
|
|
337
337
|
return n.createElement(
|
|
338
338
|
t,
|
|
339
339
|
{
|
|
340
340
|
// input
|
|
341
|
-
value:
|
|
341
|
+
value: k,
|
|
342
342
|
// meta
|
|
343
343
|
validationMessage: s.errors[e],
|
|
344
344
|
touched: s.touched[e],
|
|
@@ -363,8 +363,8 @@ const P = (l) => {
|
|
|
363
363
|
}
|
|
364
364
|
);
|
|
365
365
|
};
|
|
366
|
-
|
|
367
|
-
const
|
|
366
|
+
x.displayName = "KendoReactFieldArray";
|
|
367
|
+
const V = (l) => {
|
|
368
368
|
const e = b(
|
|
369
369
|
{
|
|
370
370
|
"k-form-field": !0,
|
|
@@ -374,8 +374,8 @@ const x = (l) => {
|
|
|
374
374
|
);
|
|
375
375
|
return /* @__PURE__ */ n.createElement("div", { className: e, style: l.style }, l.children);
|
|
376
376
|
};
|
|
377
|
-
|
|
378
|
-
const
|
|
377
|
+
V.displayName = "KendoReactFieldWrapper";
|
|
378
|
+
const w = n.forwardRef((l, e) => {
|
|
379
379
|
const t = {
|
|
380
380
|
size: "medium",
|
|
381
381
|
...l
|
|
@@ -384,7 +384,7 @@ const V = n.forwardRef((l, e) => {
|
|
|
384
384
|
const r = n.useContext(y), { className: d, style: s, horizontal: a, size: c, ...m } = t, f = b(
|
|
385
385
|
{
|
|
386
386
|
"k-form": !0,
|
|
387
|
-
[`k-form-${
|
|
387
|
+
[`k-form-${T.sizeMap[c] || c}`]: c,
|
|
388
388
|
"k-form-horizontal": a === !0
|
|
389
389
|
},
|
|
390
390
|
d
|
|
@@ -402,14 +402,14 @@ const V = n.forwardRef((l, e) => {
|
|
|
402
402
|
l.children
|
|
403
403
|
);
|
|
404
404
|
});
|
|
405
|
-
|
|
406
|
-
const
|
|
407
|
-
|
|
405
|
+
w.displayName = "KendoReactFormElement";
|
|
406
|
+
const G = S(C);
|
|
407
|
+
G.displayName = "KendoReactForm";
|
|
408
408
|
export {
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
409
|
+
M as Field,
|
|
410
|
+
x as FieldArray,
|
|
411
|
+
V as FieldWrapper,
|
|
412
|
+
G as Form,
|
|
413
413
|
C as FormClassComponent,
|
|
414
|
-
|
|
414
|
+
w as FormElement
|
|
415
415
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-form",
|
|
3
|
-
"version": "7.0
|
|
3
|
+
"version": "7.1.0-develop.10",
|
|
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",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-common": "7.0
|
|
26
|
+
"@progress/kendo-react-common": "7.1.0-develop.10",
|
|
27
27
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
28
28
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
29
29
|
},
|