@progress/kendo-react-form 7.0.0-develop.11 → 7.0.0-develop.13
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 +6 -1
- package/dist/cdn/js/kendo-react-form.js +1 -1
- package/index.d.ts +4 -2
- package/index.js +1 -1
- package/index.mjs +31 -25
- package/interfaces/FormProps.d.ts +6 -0
- package/package.json +2 -2
package/Form.d.ts
CHANGED
|
@@ -64,8 +64,8 @@ export declare class Form extends React.Component<FormProps, {}> {
|
|
|
64
64
|
onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
|
|
65
65
|
onSubmitClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
66
66
|
render: PropTypes.Validator<(...args: any[]) => any>;
|
|
67
|
+
id: PropTypes.Requireable<string>;
|
|
67
68
|
};
|
|
68
|
-
private _id;
|
|
69
69
|
private _touched;
|
|
70
70
|
private _visited;
|
|
71
71
|
private _modified;
|
|
@@ -264,3 +264,8 @@ export declare class Form extends React.Component<FormProps, {}> {
|
|
|
264
264
|
*/
|
|
265
265
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
266
266
|
}
|
|
267
|
+
/**
|
|
268
|
+
* Represent the `ref` of the Form component.
|
|
269
|
+
*/
|
|
270
|
+
export interface FormHandle extends Pick<Form, keyof Form> {
|
|
271
|
+
}
|
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 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<"u"?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<"u"?globalThis:u||self,y(u.KendoReactForm={},u.React,u.PropTypes,u.KendoReactCommon))})(this,function(u,y,M,f){"use strict";function A(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=A(y),g=A(M),_=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(
|
|
5
|
+
(function(u,y){typeof exports=="object"&&typeof module<"u"?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<"u"?globalThis:u||self,y(u.KendoReactForm={},u.React,u.PropTypes,u.KendoReactCommon))})(this,function(u,y,M,f){"use strict";"use client";function A(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=A(y),g=A(M),_=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(c=>{const T=c&&(c.value!==void 0?c.value:c.target?c.target.value:c.target);s.onChange(t,{value:T}),r&&r.call(void 0,c)},[t,a,r]),v=n.useCallback(c=>s.onChange(t,{value:c.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 P={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},k=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()},k)},this.resetForm=()=>{this.values=f.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,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(P),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.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(h=>s.onUnshift(t,h),[t,a]),v=n.useCallback(h=>s.onPush(t,h),[t,a]),p=n.useCallback(h=>s.onInsert(t,h),[t,a]),F=n.useCallback(()=>s.onPop(t),[t,a]),C=n.useCallback(h=>s.onRemove(t,h),[t,a]),c=n.useCallback(h=>s.onReplace(t,h),[t,a]),T=n.useCallback(h=>s.onMove(t,h),[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:c,onMove:T,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 R=f.withIdHOC(b);R.displayName="KendoReactForm",u.Field=U,u.FieldArray=E,u.FieldWrapper=B,u.Form=R,u.FormClassComponent=b,u.FormElement=S,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|
package/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { type FieldRenderProps } from './interfaces/FieldRenderProps';
|
|
|
7
7
|
import { type FormProps } from './interfaces/FormProps';
|
|
8
8
|
import { type FormRenderProps } from './interfaces/FormRenderProps';
|
|
9
9
|
import { Field } from './Field';
|
|
10
|
-
import { Form } from './Form';
|
|
10
|
+
import { Form as FormClassComponent, type FormHandle } from './Form';
|
|
11
11
|
import { type FormValidatorType } from './interfaces/FormValidator';
|
|
12
12
|
import { type FieldValidatorType } from './interfaces/FieldValidator';
|
|
13
13
|
import { FieldArray } from './FieldArray';
|
|
@@ -17,4 +17,6 @@ import { type KeyValue } from './interfaces/KeyValue';
|
|
|
17
17
|
import { FieldWrapper, type FieldWrapperProps } from './FieldWrapper';
|
|
18
18
|
import { FormElement, type FormElementProps, type FormElementHandle } from './FormElement';
|
|
19
19
|
import { type FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent';
|
|
20
|
-
|
|
20
|
+
/** @hidden */
|
|
21
|
+
declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<any>>;
|
|
22
|
+
export { FieldArray, FieldArrayProps, FieldArrayRenderProps, Field, FieldProps, FieldRenderProps, Form, FormClassComponent, FormHandle, FormProps, FormRenderProps, FormValidatorType, FieldValidatorType, KeyValue, FieldWrapper, FieldWrapperProps, FormElement, FormElementHandle, FormElementProps, FormSubmitClickEvent };
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),S=require("prop-types"),h=require("@progress/kendo-react-common");function _(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),F=_(S),g=n.createContext(null),R=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})};R.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/"},P=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()},P)},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(M),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 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 A=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)};A.displayName="KendoReactFieldWrapper";const T=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)});T.displayName="KendoReactFormElement";const U=h.withIdHOC(C);U.displayName="KendoReactForm";exports.Field=R;exports.FieldArray=k;exports.FieldWrapper=A;exports.Form=U;exports.FormClassComponent=C;exports.FormElement=T;
|
package/index.mjs
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
* Copyright © 2023 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";
|
|
5
6
|
import * as n from "react";
|
|
6
|
-
import * as
|
|
7
|
-
import {
|
|
7
|
+
import * as p from "prop-types";
|
|
8
|
+
import { clone as _, getter as A, setter as U, validatePackage as k, cloneObject as B, classNames as b, kendoThemeMaps as E, withIdHOC as T } from "@progress/kendo-react-common";
|
|
8
9
|
const y = n.createContext(null), S = (l) => {
|
|
9
10
|
const { name: e, component: t, validator: i, children: o, onChange: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
|
|
10
11
|
n.useEffect(
|
|
@@ -29,12 +30,12 @@ const y = n.createContext(null), S = (l) => {
|
|
|
29
30
|
);
|
|
30
31
|
if (!s)
|
|
31
32
|
return null;
|
|
32
|
-
const
|
|
33
|
+
const F = s.valueGetter(e);
|
|
33
34
|
return typeof t == "string" ? n.createElement(t, {
|
|
34
35
|
onChange: m,
|
|
35
36
|
onBlur: f,
|
|
36
37
|
onFocus: v,
|
|
37
|
-
value:
|
|
38
|
+
value: F,
|
|
38
39
|
children: o,
|
|
39
40
|
...d
|
|
40
41
|
}) : n.createElement(
|
|
@@ -46,7 +47,7 @@ const y = n.createContext(null), S = (l) => {
|
|
|
46
47
|
onChange: c,
|
|
47
48
|
onBlur: f,
|
|
48
49
|
onFocus: v,
|
|
49
|
-
value:
|
|
50
|
+
value: F,
|
|
50
51
|
// meta
|
|
51
52
|
validationMessage: s.errors[e],
|
|
52
53
|
touched: s.touched[e],
|
|
@@ -67,16 +68,16 @@ const M = {
|
|
|
67
68
|
name: "@progress/kendo-react-form",
|
|
68
69
|
productName: "KendoReact",
|
|
69
70
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
70
|
-
publishDate:
|
|
71
|
+
publishDate: 1702024518,
|
|
71
72
|
version: "",
|
|
72
73
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
73
74
|
}, I = 0;
|
|
74
|
-
class
|
|
75
|
+
let C = class extends n.Component {
|
|
75
76
|
/**
|
|
76
77
|
* @hidden
|
|
77
78
|
*/
|
|
78
79
|
constructor(e) {
|
|
79
|
-
super(e), this.
|
|
80
|
+
super(e), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._values = {}, this._fields = {}, this._unmounted = !1, this._submitted = !1, this.isValid = () => this.isFormValid(this.errors), this.accumulatedForceUpdate = () => {
|
|
80
81
|
this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), this._accumulatorTimeout = window.setTimeout(
|
|
81
82
|
() => {
|
|
82
83
|
this._accumulatorTimeout = void 0, this.forceUpdate();
|
|
@@ -84,7 +85,7 @@ class A extends n.Component {
|
|
|
84
85
|
I
|
|
85
86
|
);
|
|
86
87
|
}, this.resetForm = () => {
|
|
87
|
-
this.values =
|
|
88
|
+
this.values = _(this.props.initialValues), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
|
|
88
89
|
}, this.onReset = () => this.resetForm(), this.addField = (t) => {
|
|
89
90
|
this._fields[t] = !0;
|
|
90
91
|
}, this.onSubmit = (t) => {
|
|
@@ -115,7 +116,7 @@ class A extends n.Component {
|
|
|
115
116
|
const d = [...this.validatorsByField[t] || []], s = !!d[r];
|
|
116
117
|
d[r] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: d }, s && this.accumulatedForceUpdate();
|
|
117
118
|
};
|
|
118
|
-
}, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((o) => t[o]), this.isFormHasNotTouched = (t, i) => i.some((o) => !t[o]), this.isFormTouched = (t, i) => i.some((o) => t[o]), this.isFormVisited = (t, i) => i.some((o) => t[o]), this.valueGetter = (t) =>
|
|
119
|
+
}, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((o) => t[o]), this.isFormHasNotTouched = (t, i) => i.some((o) => !t[o]), this.isFormTouched = (t, i) => i.some((o) => t[o]), this.isFormVisited = (t, i) => i.some((o) => t[o]), this.valueGetter = (t) => A(t)(this.values), this.valueSetter = (t, i) => U(t)(this.values, i), this.onArrayAction = (t) => {
|
|
119
120
|
this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.onBlur(t, !0);
|
|
120
121
|
}, this.onInsert = (t, i) => {
|
|
121
122
|
this.onArrayAction(t);
|
|
@@ -146,7 +147,7 @@ class A extends n.Component {
|
|
|
146
147
|
this.onArrayAction(t);
|
|
147
148
|
const o = [...this.valueGetter(t) || []], r = o[i.prevIndex];
|
|
148
149
|
o.splice(i.prevIndex, 1), o.splice(i.nextIndex, 0, r), this.valueSetter(t, o), this.forceUpdate();
|
|
149
|
-
},
|
|
150
|
+
}, k(M), this.values = _(e.initialValues);
|
|
150
151
|
}
|
|
151
152
|
/**
|
|
152
153
|
* @hidden
|
|
@@ -240,7 +241,7 @@ class A extends n.Component {
|
|
|
240
241
|
return !1;
|
|
241
242
|
});
|
|
242
243
|
}
|
|
243
|
-
}), this.formErrors &&
|
|
244
|
+
}), this.formErrors && B(this.formErrors, e), e;
|
|
244
245
|
}
|
|
245
246
|
/**
|
|
246
247
|
* @hidden
|
|
@@ -256,9 +257,9 @@ class A extends n.Component {
|
|
|
256
257
|
return /* @__PURE__ */ n.createElement(
|
|
257
258
|
y.Provider,
|
|
258
259
|
{
|
|
259
|
-
key: this.
|
|
260
|
+
key: this.props.id,
|
|
260
261
|
value: {
|
|
261
|
-
id: this.
|
|
262
|
+
id: this.props.id,
|
|
262
263
|
valueGetter: this.valueGetter,
|
|
263
264
|
errors: d,
|
|
264
265
|
modified: o,
|
|
@@ -293,13 +294,14 @@ class A extends n.Component {
|
|
|
293
294
|
})
|
|
294
295
|
);
|
|
295
296
|
}
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
initialValues:
|
|
300
|
-
onSubmit:
|
|
301
|
-
onSubmitClick:
|
|
302
|
-
render:
|
|
297
|
+
};
|
|
298
|
+
C.displayName = "KendoReactForm";
|
|
299
|
+
C.propTypes = {
|
|
300
|
+
initialValues: p.any,
|
|
301
|
+
onSubmit: p.func,
|
|
302
|
+
onSubmitClick: p.func,
|
|
303
|
+
render: p.func.isRequired,
|
|
304
|
+
id: p.string
|
|
303
305
|
};
|
|
304
306
|
const P = (l) => {
|
|
305
307
|
const { name: e, component: t, validator: i, type: o, children: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
|
|
@@ -319,7 +321,7 @@ const P = (l) => {
|
|
|
319
321
|
), v = n.useCallback(
|
|
320
322
|
() => s.onPop(e),
|
|
321
323
|
[e, a]
|
|
322
|
-
),
|
|
324
|
+
), F = n.useCallback(
|
|
323
325
|
(h) => s.onRemove(e, h),
|
|
324
326
|
[e, a]
|
|
325
327
|
), u = n.useCallback(
|
|
@@ -352,7 +354,7 @@ const P = (l) => {
|
|
|
352
354
|
onPush: m,
|
|
353
355
|
onInsert: f,
|
|
354
356
|
onPop: v,
|
|
355
|
-
onRemove:
|
|
357
|
+
onRemove: F,
|
|
356
358
|
onReplace: u,
|
|
357
359
|
onMove: g,
|
|
358
360
|
children: r,
|
|
@@ -382,7 +384,7 @@ const V = n.forwardRef((l, e) => {
|
|
|
382
384
|
const r = n.useContext(y), { className: d, style: s, horizontal: a, size: c, ...m } = t, f = b(
|
|
383
385
|
{
|
|
384
386
|
"k-form": !0,
|
|
385
|
-
[`k-form-${
|
|
387
|
+
[`k-form-${E.sizeMap[c] || c}`]: c,
|
|
386
388
|
"k-form-horizontal": a === !0
|
|
387
389
|
},
|
|
388
390
|
d
|
|
@@ -392,6 +394,7 @@ const V = n.forwardRef((l, e) => {
|
|
|
392
394
|
{
|
|
393
395
|
ref: i,
|
|
394
396
|
...m,
|
|
397
|
+
id: r ? r.id : void 0,
|
|
395
398
|
style: l.style,
|
|
396
399
|
className: f,
|
|
397
400
|
onSubmit: r ? r.onSubmit : void 0
|
|
@@ -400,10 +403,13 @@ const V = n.forwardRef((l, e) => {
|
|
|
400
403
|
);
|
|
401
404
|
});
|
|
402
405
|
V.displayName = "KendoReactFormElement";
|
|
406
|
+
const w = T(C);
|
|
407
|
+
w.displayName = "KendoReactForm";
|
|
403
408
|
export {
|
|
404
409
|
S as Field,
|
|
405
410
|
P as FieldArray,
|
|
406
411
|
x as FieldWrapper,
|
|
407
|
-
|
|
412
|
+
w as Form,
|
|
413
|
+
C as FormClassComponent,
|
|
408
414
|
V as FormElement
|
|
409
415
|
};
|
|
@@ -47,4 +47,10 @@ export interface FormProps {
|
|
|
47
47
|
* Set this to `true` to allow the form submit without modifed fields.
|
|
48
48
|
*/
|
|
49
49
|
ignoreModified?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* @hidden
|
|
52
|
+
* This prop comes from the `withId` HOC and is used internally by the Form.
|
|
53
|
+
* It replaces the previously used guid() function and generates an `id` of the Form.
|
|
54
|
+
*/
|
|
55
|
+
id?: string;
|
|
50
56
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-form",
|
|
3
|
-
"version": "7.0.0-develop.
|
|
3
|
+
"version": "7.0.0-develop.13",
|
|
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",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"sideEffects": false,
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"@progress/kendo-licensing": "^1.3.0",
|
|
20
|
-
"@progress/kendo-react-common": "7.0.0-develop.
|
|
20
|
+
"@progress/kendo-react-common": "7.0.0-develop.13",
|
|
21
21
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
22
22
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
23
23
|
},
|