@progress/kendo-react-form/Form.js

React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"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;