@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 F=require("react"),a=require("prop-types"),y=require("./FormContext.js"),d=require("@progress/kendo-react-common"),_=require("./package-metadata.js");function g(u){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>u[t]})}}return s.default=u,Object.freeze(s)}const l=g(F),b=0,c=class c extends l.Component{constructor(s){super(s),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.showLicenseWatermark=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0,this.forceUpdate()},b)},this.resetForm=()=>{this.values=d.clone(this.props.initialValues),this._key=d.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=t=>{this._fields[t]=!0},this.onSubmit=t=>{const i={},e=this.fields;t&&(typeof t.preventDefault=="function"&&t.preventDefault(),typeof t.stopPropagation=="function"&&t.stopPropagation()),e.forEach(n=>{i[n]=!0}),this.visited={...i},this.touched={...i};const o=this.values,h=this.isFormValid(this.errors),r=this.isFormModified(this.modified,e);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:o,isValid:h,isModified:r,event:t}),h&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,o,t)),this.forceUpdate()},this.onChange=(t,i)=>{const{value:e}=i;this.addField(t),this.modified[t]||(this.modified={...this.modified,[t]:!0}),this.valueSetter(t,e),this.forceUpdate()},this.onFocus=(t,i)=>{this.visited[t]||(this.visited={...this.visited,[t]:!0},i||this.forceUpdate())},this.onBlur=(t,i)=>{this.touched[t]||(this.onFocus(t,i),this.touched={...this.touched,[t]:!0},i||this.forceUpdate())},this.onFieldRegister=(t,i)=>{this.addField(t);const e=this.validatorsByField[t]||[],o=e.length;return this.validatorsByField={...this.validatorsByField,[t]:[...e,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const h=[...this.validatorsByField[t]||[]],r=!!h[o];h[o]=void 0,this.validatorsByField={...this.validatorsByField,[t]:h},r&&this.accumulatedForceUpdate()}},this.isFormValid=t=>!Object.keys(t).some(i=>!!t[i]),this.isFormModified=(t,i)=>i.some(e=>t[e]),this.isFormHasNotTouched=(t,i)=>i.some(e=>!t[e]),this.isFormTouched=(t,i)=>i.some(e=>t[e]),this.isFormVisited=(t,i)=>i.some(e=>t[e]),this.valueGetter=t=>d.getter(t)(this.values),this.valueSetter=(t,i)=>d.setter(t)(this.values,i),this.onArrayAction=t=>{this.addField(t),this.modified[t]||(this.modified={...this.modified,[t]:!0}),this.onBlur(t,!0)},this.onInsert=(t,i)=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[]];e.splice(i.index,0,i.value),this.valueSetter(t,e),this.forceUpdate()},this.onUnshift=(t,i)=>{this.onInsert(t,{value:i.value,index:0})},this.onPush=(t,i)=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[],i.value];this.valueSetter(t,e),this.forceUpdate()},this.onPop=t=>{this.onArrayAction(t);const i=[...this.valueGetter(t)||[]],e=i.pop();return this.valueSetter(t,i),this.forceUpdate(),e},this.onRemove=(t,i)=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[]],o=e.splice(i.index,1);return this.valueSetter(t,e),this.forceUpdate(),o},this.onReplace=(t,i)=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[]];e.splice(i.index,1,i.value),this.valueSetter(t,e),this.forceUpdate()},this.onMove=(t,i)=>{this.onArrayAction(t);const e=[...this.valueGetter(t)||[]],o=e[i.prevIndex];e.splice(i.prevIndex,1),e.splice(i.nextIndex,0,o),this.valueSetter(t,e),this.forceUpdate()},this.showLicenseWatermark=!d.validatePackage(_.packageMetadata,{component:"Form"}),this.values=d.clone(s.initialValues)}get touched(){return this._touched}set touched(s){this._touched=s}get visited(){return this._visited}set visited(s){this._visited=s}get modified(){return this._modified}set modified(s){this._modified=s}get validatorsByField(){return this._validatorsByField}set validatorsByField(s){this._validatorsByField=s}get values(){return this._values}set values(s){this._values=s}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const s={},t=this.fields,i=this.validatorsByField;return t.forEach(o=>{if(s[o]="",i[o]){const h=[];i[o].forEach(r=>{Array.isArray(r)?h.push(...r):h.push(r)}),h.find(r=>{if(r){const n=r(this.valueGetter(o),this.valueGetter,{name:o});if(n)return s[o]=n,!0}return!1})}}),this.formErrors&&d.cloneObject(this.formErrors,s),s}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:s}=this.props,t=this.touched,i=this.visited,e=this.modified,o=this.fields,h=this.errors,r=this.isFormValid(h),n=this.isFormModified(e,o),v=this.isFormTouched(t,o),m=this.isFormVisited(i,o),p=this.isFormHasNotTouched(t,o)&&!r||r&&(this.props.ignoreModified||n);return l.createElement(l.Fragment,null,l.createElement(y.FormContext.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:h,modified:e,touched:t,visited:i,registerField:this.onFieldRegister,onSubmit:this.onSubmit,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}},s({valid:r,modified:n,touched:v,visited:m,submitted:this._submitted,valueGetter:this.valueGetter,errors:h,allowSubmit:p,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&l.createElement(d.WatermarkOverlay,null))}};c.displayName="KendoReactForm",c.propTypes={initialValues:a.any,onSubmit:a.func,onSubmitClick:a.func,render:a.func.isRequired,id:a.string};let f=c;exports.Form=f;