@progress/kendo-react-form 10.2.0-develop.5 → 10.2.0-develop.7
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/dist/cdn/js/kendo-react-form.js +1 -1
- package/index.d.mts +138 -18
- package/index.d.ts +138 -18
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +3 -3
|
@@ -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,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.
|
|
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,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=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=s.clone(this.props.initialValues),this._key=s.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={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),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 i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&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=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.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 i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},this.showLicenseWatermark=!s.validatePackage(d,{component:"Form"}),this.values=s.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,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,o=this.modified,a=this.fields,d=this.errors,l=this.isFormValid(d),h=this.isFormModified(o,a),u=this.isFormTouched(t,a),c=this.isFormVisited(i,a),m=this.isFormHasNotTouched(t,a)&&!l||l&&(this.props.ignoreModified||h);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:d,modified:o,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}},e({valid:l,modified:h,touched:u,visited:c,submitted:this._submitted,valueGetter:this.valueGetter,errors:d,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(s.WatermarkOverlay,null))}};l.displayName="KendoReactForm",l.propTypes={initialValues:i.any,onSubmit:i.func,onSubmitClick:i.func,render:i.func.isRequired,id:i.string};let h=l;const u=e=>{const{name:t,component:i,validator:s,type:o,children:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>l.onUnshift(t,e)),[t,h]),c=r.useCallback((e=>l.onPush(t,e)),[t,h]),m=r.useCallback((e=>l.onInsert(t,e)),[t,h]),v=r.useCallback((()=>l.onPop(t)),[t,h]),p=r.useCallback((e=>l.onRemove(t,e)),[t,h]),f=r.useCallback((e=>l.onReplace(t,e)),[t,h]),F=r.useCallback((e=>l.onMove(t,e)),[t,h]);if(!l)return null;const y=l.valueGetter(t);return r.createElement(i,{value:y,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),onUnshift:u,onPush:c,onInsert:m,onPop:v,onRemove:p,onReplace:f,onMove:F,children:a,name:t,...d})};u.displayName="KendoReactFieldArray";const c=e=>{const t=s.useUnstyled(),i=e.unstyled||t,o=i&&i.uForm,n=r.useMemo((()=>s.classNames(s.uForm.field({c:o,isRtl:"rtl"===e.dir}),e.className)),[o,e.className,e.dir]);return r.createElement("div",{className:n,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";const m=r.forwardRef(((e,t)=>{const i={size:"medium",...e},o=r.useRef(null),a=r.useRef(null);r.useImperativeHandle(a,(()=>({element:o.current,props:i}))),r.useImperativeHandle(t,(()=>a.current));const d=r.useContext(n),{className:l,style:h,horizontal:u,size:c,...m}=i,v=s.useUnstyled(),p=v&&v.uForm,f=r.useMemo((()=>u?"horizontal":!1===u?"vertical":void 0),[u]),F=r.useMemo((()=>s.classNames(s.uForm.form({c:p,size:c,orientation:f}),l)),[l,p,f,c]);return r.createElement("form",{ref:o,...m,id:d?d.id:void 0,style:e.style,className:F,onSubmit:d?d.onSubmit:void 0},e.children)}));m.displayName="KendoReactFormElement";const v=s.withIdHOC(h);v.displayName="KendoReactForm",e.Field=a,e.FieldArray=u,e.FieldWrapper=c,e.Form=v,e.FormClassComponent=h,e.FormElement=m}));
|
package/index.d.mts
CHANGED
|
@@ -155,30 +155,59 @@ export declare interface FieldProps {
|
|
|
155
155
|
/**
|
|
156
156
|
* The name of the field in the Form state.
|
|
157
157
|
* Supports nested fields in the `user.age` and `users[index].name` formats.
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```jsx
|
|
161
|
+
* <Field name="user.age" component="input" />
|
|
162
|
+
* ```
|
|
158
163
|
*/
|
|
159
164
|
name: string;
|
|
160
165
|
/**
|
|
161
166
|
* Can be set to a React component or to the name of an HTML element,
|
|
162
167
|
* for example, `input`, `select`, and `textarea`.
|
|
163
|
-
* The props that are passed to component are the
|
|
168
|
+
* The props that are passed to the component are the
|
|
164
169
|
* [`FieldRenderProps`]({% slug api_form_fieldrenderprops %}).
|
|
170
|
+
*
|
|
171
|
+
* @example
|
|
172
|
+
* ```jsx
|
|
173
|
+
* <Field name="user.name" component="input" />
|
|
174
|
+
* ```
|
|
165
175
|
*/
|
|
166
176
|
component: string | React.ComponentType<any>;
|
|
167
177
|
/**
|
|
168
178
|
* The validation functions for the Field level.
|
|
169
179
|
* Currently, `validator` supports only synchronous functions.
|
|
170
|
-
* Using the array overload with inline array will cause an infinite loop
|
|
180
|
+
* Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
|
|
181
|
+
*
|
|
182
|
+
* @example
|
|
183
|
+
* ```jsx
|
|
184
|
+
* const validator = value => value ? "" : "This field is required.";
|
|
185
|
+
* <Field name="user.email" component="input" validator={validator} />
|
|
186
|
+
* ```
|
|
171
187
|
*/
|
|
172
188
|
validator?: FieldValidatorType | FieldValidatorType[];
|
|
173
189
|
/**
|
|
174
190
|
* The React elements that are passed as children to the rendered component.
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* ```jsx
|
|
194
|
+
* <Field name="user.name" component="input">
|
|
195
|
+
* <span>Additional content</span>
|
|
196
|
+
* </Field>
|
|
197
|
+
* ```
|
|
175
198
|
*/
|
|
176
199
|
children?: any;
|
|
177
200
|
/**
|
|
178
|
-
* Called when underlying editor triggers
|
|
201
|
+
* Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
|
|
179
202
|
* Useful for updating related fields.
|
|
180
|
-
* > The `Form` listens to this editor event and automatically keeps
|
|
181
|
-
* That why this event should be used only for executing custom logic.
|
|
203
|
+
* > The `Form` listens to this editor event and automatically keeps its internal state up to date.
|
|
204
|
+
* That is why this event should be used only for executing custom logic.
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```jsx
|
|
208
|
+
* const handleChange = event => console.log(event);
|
|
209
|
+
* <Field name="user.name" component="input" onChange={handleChange} />
|
|
210
|
+
* ```
|
|
182
211
|
*/
|
|
183
212
|
onChange?: (event: any) => void;
|
|
184
213
|
}
|
|
@@ -571,39 +600,74 @@ export declare interface FormProps {
|
|
|
571
600
|
/**
|
|
572
601
|
* The initial field values of the Form.
|
|
573
602
|
*
|
|
574
|
-
*
|
|
603
|
+
* When you initialize the Form fields, set initial values to them. Otherwise, some
|
|
575
604
|
* components might throw errors related to switching from uncontrolled to controlled mode.
|
|
605
|
+
*
|
|
606
|
+
* @example
|
|
607
|
+
* ```jsx
|
|
608
|
+
* const initialValues = { user: { name: '', age: 0 } };
|
|
609
|
+
* <Form initialValues={initialValues} render={props => <form>form content</form>} />
|
|
610
|
+
* ```
|
|
576
611
|
*/
|
|
577
612
|
initialValues?: {
|
|
578
613
|
[name: string]: any;
|
|
579
614
|
};
|
|
580
615
|
/**
|
|
581
616
|
* The validation function for the Form level.
|
|
582
|
-
* Should return key-value pair where the key is the field path and the value is the error message.
|
|
617
|
+
* Should return a key-value pair where the key is the field path and the value is the error message.
|
|
583
618
|
* Nested fields are supported, e.g.: 'users[0].name'.
|
|
584
619
|
* You can use the same field path to access the value from the
|
|
585
620
|
* values object using the `getter` function from the `kendo-react-common` package.
|
|
586
621
|
* Currently, `validator` supports only synchronous functions.
|
|
622
|
+
*
|
|
623
|
+
* @example
|
|
624
|
+
* ```jsx
|
|
625
|
+
* const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
|
|
626
|
+
* <Form validator={validator} render={props => <form> form content </form>} />
|
|
627
|
+
* ```
|
|
587
628
|
*/
|
|
588
629
|
validator?: FormValidatorType;
|
|
589
630
|
/**
|
|
590
631
|
* The submission handler for the Form.
|
|
591
|
-
* Called when at least one field has been modified, the user pressed the **Submit** button,
|
|
632
|
+
* Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
|
|
633
|
+
*
|
|
634
|
+
* @example
|
|
635
|
+
* ```jsx
|
|
636
|
+
* const handleSubmit = (values, event) => console.log(values);
|
|
637
|
+
* <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
|
|
638
|
+
* ```
|
|
592
639
|
*/
|
|
593
640
|
onSubmit?: (values: {
|
|
594
641
|
[name: string]: any;
|
|
595
642
|
}, event?: React.SyntheticEvent<any>) => void;
|
|
596
643
|
/**
|
|
597
644
|
* Called every time the user presses the **Submit** button.
|
|
598
|
-
* Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or
|
|
645
|
+
* Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
|
|
646
|
+
*
|
|
647
|
+
* @example
|
|
648
|
+
* ```jsx
|
|
649
|
+
* const handleSubmitClick = event => console.log(event);
|
|
650
|
+
* <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
|
|
651
|
+
* ```
|
|
599
652
|
*/
|
|
600
653
|
onSubmitClick?: (event: FormSubmitClickEvent) => void;
|
|
601
654
|
/**
|
|
602
655
|
* The Form content that will be rendered.
|
|
656
|
+
*
|
|
657
|
+
* @example
|
|
658
|
+
* ```jsx
|
|
659
|
+
* const renderForm = props => <form> form content </form>;
|
|
660
|
+
* <Form render={renderForm} />
|
|
661
|
+
* ```
|
|
603
662
|
*/
|
|
604
663
|
render: (props: FormRenderProps) => any;
|
|
605
664
|
/**
|
|
606
|
-
* Set this to `true` to allow the form submit without
|
|
665
|
+
* Set this to `true` to allow the form to submit without modified fields.
|
|
666
|
+
*
|
|
667
|
+
* @example
|
|
668
|
+
* ```jsx
|
|
669
|
+
* <Form ignoreModified={true} render={props => <form>form content </form>} />
|
|
670
|
+
* ```
|
|
607
671
|
*/
|
|
608
672
|
ignoreModified?: boolean;
|
|
609
673
|
/**
|
|
@@ -621,69 +685,125 @@ export declare interface FormRenderProps {
|
|
|
621
685
|
/**
|
|
622
686
|
* A callback for submitting the Form.
|
|
623
687
|
* Can be passed to the `onClick` property of the **Submit** button.
|
|
688
|
+
*
|
|
689
|
+
* @example
|
|
690
|
+
* ```jsx
|
|
691
|
+
* const handleSubmit = event => console.log("Form submitted");
|
|
692
|
+
* <button onClick={props.onSubmit}>Submit</button>
|
|
693
|
+
* ```
|
|
624
694
|
*/
|
|
625
695
|
onSubmit: (event: React.SyntheticEvent<any>) => void;
|
|
626
696
|
/**
|
|
627
|
-
* A callback for
|
|
697
|
+
* A callback for emitting changes to a specific field without using the Field component
|
|
628
698
|
* ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
|
|
629
699
|
*
|
|
630
700
|
* > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
|
|
701
|
+
*
|
|
702
|
+
* @example
|
|
703
|
+
* ```jsx
|
|
704
|
+
* props.onChange("user.name", { value: "John Doe" });
|
|
705
|
+
* ```
|
|
631
706
|
*/
|
|
632
707
|
onChange: (name: string, options: {
|
|
633
708
|
value: any;
|
|
634
709
|
}) => void;
|
|
635
710
|
/**
|
|
636
711
|
* A callback for resetting the Form.
|
|
712
|
+
*
|
|
713
|
+
* @example
|
|
714
|
+
* ```jsx
|
|
715
|
+
* <button onClick={props.onFormReset}>Reset</button>
|
|
716
|
+
* ```
|
|
637
717
|
*/
|
|
638
718
|
onFormReset: () => void;
|
|
639
719
|
/**
|
|
640
720
|
* The key-value pair containing the current errors by field path, combined from both field and form level validators.
|
|
721
|
+
*
|
|
722
|
+
* @example
|
|
723
|
+
* ```jsx
|
|
724
|
+
* console.log(props.errors);
|
|
725
|
+
* ```
|
|
641
726
|
*/
|
|
642
727
|
errors: KeyValue<string>;
|
|
643
728
|
/**
|
|
644
729
|
* Indicates if the Form is valid.
|
|
645
730
|
* If any field is invalid, `valid` is set to `false`.
|
|
731
|
+
*
|
|
732
|
+
* @example
|
|
733
|
+
* ```jsx
|
|
734
|
+
* console.log(props.valid);
|
|
735
|
+
* ```
|
|
646
736
|
*/
|
|
647
737
|
valid: boolean;
|
|
648
738
|
/**
|
|
649
739
|
* Indicates if the Form is touched.
|
|
650
740
|
* If any field is touched, `touched` is set to `true`.
|
|
651
|
-
* The touched state of field is set to `true` when the `onBlur`
|
|
741
|
+
* The touched state of a field is set to `true` when the `onBlur`
|
|
652
742
|
* callback of the Field component is called or when the user tries to submit the form.
|
|
743
|
+
*
|
|
744
|
+
* @example
|
|
745
|
+
* ```jsx
|
|
746
|
+
* console.log(props.touched);
|
|
747
|
+
* ```
|
|
653
748
|
*/
|
|
654
749
|
touched: boolean;
|
|
655
750
|
/**
|
|
656
751
|
* Indicates if the Form is visited.
|
|
657
752
|
* If any field is visited, `visited` is set to `true`.
|
|
658
|
-
* The visited state of field is set to `true` when the `onFocus`
|
|
753
|
+
* The visited state of a field is set to `true` when the `onFocus`
|
|
659
754
|
* callback of the Field component is called or when the user tries to submit the form.
|
|
755
|
+
*
|
|
756
|
+
* @example
|
|
757
|
+
* ```jsx
|
|
758
|
+
* console.log(props.visited);
|
|
759
|
+
* ```
|
|
660
760
|
*/
|
|
661
761
|
visited: boolean;
|
|
662
762
|
/**
|
|
663
763
|
* Indicates if the Form is modified.
|
|
664
764
|
* If any field is modified, `modified` is set to `true`.
|
|
665
|
-
* The modified state of field is set to `true` when the `onChange`
|
|
666
|
-
* callback of the Field component is called for first time.
|
|
765
|
+
* The modified state of a field is set to `true` when the `onChange`
|
|
766
|
+
* callback of the Field component is called for the first time.
|
|
767
|
+
*
|
|
768
|
+
* @example
|
|
769
|
+
* ```jsx
|
|
770
|
+
* console.log(props.modified);
|
|
771
|
+
* ```
|
|
667
772
|
*/
|
|
668
773
|
modified: boolean;
|
|
669
774
|
/**
|
|
670
|
-
* Indicates if the Form is
|
|
671
|
-
* Useful for detecting if user is leaving the form before saving changes.
|
|
775
|
+
* Indicates if the Form is successfully submitted.
|
|
776
|
+
* Useful for detecting if the user is leaving the form before saving changes.
|
|
777
|
+
*
|
|
778
|
+
* @example
|
|
779
|
+
* ```jsx
|
|
780
|
+
* console.log(props.submitted);
|
|
781
|
+
* ```
|
|
672
782
|
*/
|
|
673
783
|
submitted: boolean;
|
|
674
784
|
/**
|
|
675
785
|
* Indicates if the Form is ready to be submitted.
|
|
676
786
|
* * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
|
|
677
787
|
* * If `allowSubmit` is set to `true` and the Form is not valid, the user will be able to set the `touched` and `visited` state of all fields to `true`.
|
|
678
|
-
* `touched` and `visited` state to true.
|
|
679
788
|
*
|
|
680
789
|
* Useful for toggling the disabled state of the **Submit** button.
|
|
790
|
+
*
|
|
791
|
+
* @example
|
|
792
|
+
* ```jsx
|
|
793
|
+
* console.log(props.allowSubmit);
|
|
794
|
+
* ```
|
|
681
795
|
*/
|
|
682
796
|
allowSubmit: boolean;
|
|
683
797
|
/**
|
|
684
798
|
* A callback for getting the value of a field without using the Field component
|
|
685
799
|
* ([see example]({% slug common_scenarios_form %}#toc-reading-the-field-state)).
|
|
686
800
|
* Useful for creating and modifying the UI based on the field values.
|
|
801
|
+
*
|
|
802
|
+
* @example
|
|
803
|
+
* ```jsx
|
|
804
|
+
* const value = props.valueGetter("user.name");
|
|
805
|
+
* console.log(value);
|
|
806
|
+
* ```
|
|
687
807
|
*/
|
|
688
808
|
valueGetter: (name: string) => any;
|
|
689
809
|
}
|
package/index.d.ts
CHANGED
|
@@ -155,30 +155,59 @@ export declare interface FieldProps {
|
|
|
155
155
|
/**
|
|
156
156
|
* The name of the field in the Form state.
|
|
157
157
|
* Supports nested fields in the `user.age` and `users[index].name` formats.
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```jsx
|
|
161
|
+
* <Field name="user.age" component="input" />
|
|
162
|
+
* ```
|
|
158
163
|
*/
|
|
159
164
|
name: string;
|
|
160
165
|
/**
|
|
161
166
|
* Can be set to a React component or to the name of an HTML element,
|
|
162
167
|
* for example, `input`, `select`, and `textarea`.
|
|
163
|
-
* The props that are passed to component are the
|
|
168
|
+
* The props that are passed to the component are the
|
|
164
169
|
* [`FieldRenderProps`]({% slug api_form_fieldrenderprops %}).
|
|
170
|
+
*
|
|
171
|
+
* @example
|
|
172
|
+
* ```jsx
|
|
173
|
+
* <Field name="user.name" component="input" />
|
|
174
|
+
* ```
|
|
165
175
|
*/
|
|
166
176
|
component: string | React.ComponentType<any>;
|
|
167
177
|
/**
|
|
168
178
|
* The validation functions for the Field level.
|
|
169
179
|
* Currently, `validator` supports only synchronous functions.
|
|
170
|
-
* Using the array overload with inline array will cause an infinite loop
|
|
180
|
+
* Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
|
|
181
|
+
*
|
|
182
|
+
* @example
|
|
183
|
+
* ```jsx
|
|
184
|
+
* const validator = value => value ? "" : "This field is required.";
|
|
185
|
+
* <Field name="user.email" component="input" validator={validator} />
|
|
186
|
+
* ```
|
|
171
187
|
*/
|
|
172
188
|
validator?: FieldValidatorType | FieldValidatorType[];
|
|
173
189
|
/**
|
|
174
190
|
* The React elements that are passed as children to the rendered component.
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* ```jsx
|
|
194
|
+
* <Field name="user.name" component="input">
|
|
195
|
+
* <span>Additional content</span>
|
|
196
|
+
* </Field>
|
|
197
|
+
* ```
|
|
175
198
|
*/
|
|
176
199
|
children?: any;
|
|
177
200
|
/**
|
|
178
|
-
* Called when underlying editor triggers
|
|
201
|
+
* Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
|
|
179
202
|
* Useful for updating related fields.
|
|
180
|
-
* > The `Form` listens to this editor event and automatically keeps
|
|
181
|
-
* That why this event should be used only for executing custom logic.
|
|
203
|
+
* > The `Form` listens to this editor event and automatically keeps its internal state up to date.
|
|
204
|
+
* That is why this event should be used only for executing custom logic.
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```jsx
|
|
208
|
+
* const handleChange = event => console.log(event);
|
|
209
|
+
* <Field name="user.name" component="input" onChange={handleChange} />
|
|
210
|
+
* ```
|
|
182
211
|
*/
|
|
183
212
|
onChange?: (event: any) => void;
|
|
184
213
|
}
|
|
@@ -571,39 +600,74 @@ export declare interface FormProps {
|
|
|
571
600
|
/**
|
|
572
601
|
* The initial field values of the Form.
|
|
573
602
|
*
|
|
574
|
-
*
|
|
603
|
+
* When you initialize the Form fields, set initial values to them. Otherwise, some
|
|
575
604
|
* components might throw errors related to switching from uncontrolled to controlled mode.
|
|
605
|
+
*
|
|
606
|
+
* @example
|
|
607
|
+
* ```jsx
|
|
608
|
+
* const initialValues = { user: { name: '', age: 0 } };
|
|
609
|
+
* <Form initialValues={initialValues} render={props => <form>form content</form>} />
|
|
610
|
+
* ```
|
|
576
611
|
*/
|
|
577
612
|
initialValues?: {
|
|
578
613
|
[name: string]: any;
|
|
579
614
|
};
|
|
580
615
|
/**
|
|
581
616
|
* The validation function for the Form level.
|
|
582
|
-
* Should return key-value pair where the key is the field path and the value is the error message.
|
|
617
|
+
* Should return a key-value pair where the key is the field path and the value is the error message.
|
|
583
618
|
* Nested fields are supported, e.g.: 'users[0].name'.
|
|
584
619
|
* You can use the same field path to access the value from the
|
|
585
620
|
* values object using the `getter` function from the `kendo-react-common` package.
|
|
586
621
|
* Currently, `validator` supports only synchronous functions.
|
|
622
|
+
*
|
|
623
|
+
* @example
|
|
624
|
+
* ```jsx
|
|
625
|
+
* const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
|
|
626
|
+
* <Form validator={validator} render={props => <form> form content </form>} />
|
|
627
|
+
* ```
|
|
587
628
|
*/
|
|
588
629
|
validator?: FormValidatorType;
|
|
589
630
|
/**
|
|
590
631
|
* The submission handler for the Form.
|
|
591
|
-
* Called when at least one field has been modified, the user pressed the **Submit** button,
|
|
632
|
+
* Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
|
|
633
|
+
*
|
|
634
|
+
* @example
|
|
635
|
+
* ```jsx
|
|
636
|
+
* const handleSubmit = (values, event) => console.log(values);
|
|
637
|
+
* <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
|
|
638
|
+
* ```
|
|
592
639
|
*/
|
|
593
640
|
onSubmit?: (values: {
|
|
594
641
|
[name: string]: any;
|
|
595
642
|
}, event?: React.SyntheticEvent<any>) => void;
|
|
596
643
|
/**
|
|
597
644
|
* Called every time the user presses the **Submit** button.
|
|
598
|
-
* Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or
|
|
645
|
+
* Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
|
|
646
|
+
*
|
|
647
|
+
* @example
|
|
648
|
+
* ```jsx
|
|
649
|
+
* const handleSubmitClick = event => console.log(event);
|
|
650
|
+
* <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
|
|
651
|
+
* ```
|
|
599
652
|
*/
|
|
600
653
|
onSubmitClick?: (event: FormSubmitClickEvent) => void;
|
|
601
654
|
/**
|
|
602
655
|
* The Form content that will be rendered.
|
|
656
|
+
*
|
|
657
|
+
* @example
|
|
658
|
+
* ```jsx
|
|
659
|
+
* const renderForm = props => <form> form content </form>;
|
|
660
|
+
* <Form render={renderForm} />
|
|
661
|
+
* ```
|
|
603
662
|
*/
|
|
604
663
|
render: (props: FormRenderProps) => any;
|
|
605
664
|
/**
|
|
606
|
-
* Set this to `true` to allow the form submit without
|
|
665
|
+
* Set this to `true` to allow the form to submit without modified fields.
|
|
666
|
+
*
|
|
667
|
+
* @example
|
|
668
|
+
* ```jsx
|
|
669
|
+
* <Form ignoreModified={true} render={props => <form>form content </form>} />
|
|
670
|
+
* ```
|
|
607
671
|
*/
|
|
608
672
|
ignoreModified?: boolean;
|
|
609
673
|
/**
|
|
@@ -621,69 +685,125 @@ export declare interface FormRenderProps {
|
|
|
621
685
|
/**
|
|
622
686
|
* A callback for submitting the Form.
|
|
623
687
|
* Can be passed to the `onClick` property of the **Submit** button.
|
|
688
|
+
*
|
|
689
|
+
* @example
|
|
690
|
+
* ```jsx
|
|
691
|
+
* const handleSubmit = event => console.log("Form submitted");
|
|
692
|
+
* <button onClick={props.onSubmit}>Submit</button>
|
|
693
|
+
* ```
|
|
624
694
|
*/
|
|
625
695
|
onSubmit: (event: React.SyntheticEvent<any>) => void;
|
|
626
696
|
/**
|
|
627
|
-
* A callback for
|
|
697
|
+
* A callback for emitting changes to a specific field without using the Field component
|
|
628
698
|
* ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
|
|
629
699
|
*
|
|
630
700
|
* > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
|
|
701
|
+
*
|
|
702
|
+
* @example
|
|
703
|
+
* ```jsx
|
|
704
|
+
* props.onChange("user.name", { value: "John Doe" });
|
|
705
|
+
* ```
|
|
631
706
|
*/
|
|
632
707
|
onChange: (name: string, options: {
|
|
633
708
|
value: any;
|
|
634
709
|
}) => void;
|
|
635
710
|
/**
|
|
636
711
|
* A callback for resetting the Form.
|
|
712
|
+
*
|
|
713
|
+
* @example
|
|
714
|
+
* ```jsx
|
|
715
|
+
* <button onClick={props.onFormReset}>Reset</button>
|
|
716
|
+
* ```
|
|
637
717
|
*/
|
|
638
718
|
onFormReset: () => void;
|
|
639
719
|
/**
|
|
640
720
|
* The key-value pair containing the current errors by field path, combined from both field and form level validators.
|
|
721
|
+
*
|
|
722
|
+
* @example
|
|
723
|
+
* ```jsx
|
|
724
|
+
* console.log(props.errors);
|
|
725
|
+
* ```
|
|
641
726
|
*/
|
|
642
727
|
errors: KeyValue<string>;
|
|
643
728
|
/**
|
|
644
729
|
* Indicates if the Form is valid.
|
|
645
730
|
* If any field is invalid, `valid` is set to `false`.
|
|
731
|
+
*
|
|
732
|
+
* @example
|
|
733
|
+
* ```jsx
|
|
734
|
+
* console.log(props.valid);
|
|
735
|
+
* ```
|
|
646
736
|
*/
|
|
647
737
|
valid: boolean;
|
|
648
738
|
/**
|
|
649
739
|
* Indicates if the Form is touched.
|
|
650
740
|
* If any field is touched, `touched` is set to `true`.
|
|
651
|
-
* The touched state of field is set to `true` when the `onBlur`
|
|
741
|
+
* The touched state of a field is set to `true` when the `onBlur`
|
|
652
742
|
* callback of the Field component is called or when the user tries to submit the form.
|
|
743
|
+
*
|
|
744
|
+
* @example
|
|
745
|
+
* ```jsx
|
|
746
|
+
* console.log(props.touched);
|
|
747
|
+
* ```
|
|
653
748
|
*/
|
|
654
749
|
touched: boolean;
|
|
655
750
|
/**
|
|
656
751
|
* Indicates if the Form is visited.
|
|
657
752
|
* If any field is visited, `visited` is set to `true`.
|
|
658
|
-
* The visited state of field is set to `true` when the `onFocus`
|
|
753
|
+
* The visited state of a field is set to `true` when the `onFocus`
|
|
659
754
|
* callback of the Field component is called or when the user tries to submit the form.
|
|
755
|
+
*
|
|
756
|
+
* @example
|
|
757
|
+
* ```jsx
|
|
758
|
+
* console.log(props.visited);
|
|
759
|
+
* ```
|
|
660
760
|
*/
|
|
661
761
|
visited: boolean;
|
|
662
762
|
/**
|
|
663
763
|
* Indicates if the Form is modified.
|
|
664
764
|
* If any field is modified, `modified` is set to `true`.
|
|
665
|
-
* The modified state of field is set to `true` when the `onChange`
|
|
666
|
-
* callback of the Field component is called for first time.
|
|
765
|
+
* The modified state of a field is set to `true` when the `onChange`
|
|
766
|
+
* callback of the Field component is called for the first time.
|
|
767
|
+
*
|
|
768
|
+
* @example
|
|
769
|
+
* ```jsx
|
|
770
|
+
* console.log(props.modified);
|
|
771
|
+
* ```
|
|
667
772
|
*/
|
|
668
773
|
modified: boolean;
|
|
669
774
|
/**
|
|
670
|
-
* Indicates if the Form is
|
|
671
|
-
* Useful for detecting if user is leaving the form before saving changes.
|
|
775
|
+
* Indicates if the Form is successfully submitted.
|
|
776
|
+
* Useful for detecting if the user is leaving the form before saving changes.
|
|
777
|
+
*
|
|
778
|
+
* @example
|
|
779
|
+
* ```jsx
|
|
780
|
+
* console.log(props.submitted);
|
|
781
|
+
* ```
|
|
672
782
|
*/
|
|
673
783
|
submitted: boolean;
|
|
674
784
|
/**
|
|
675
785
|
* Indicates if the Form is ready to be submitted.
|
|
676
786
|
* * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
|
|
677
787
|
* * If `allowSubmit` is set to `true` and the Form is not valid, the user will be able to set the `touched` and `visited` state of all fields to `true`.
|
|
678
|
-
* `touched` and `visited` state to true.
|
|
679
788
|
*
|
|
680
789
|
* Useful for toggling the disabled state of the **Submit** button.
|
|
790
|
+
*
|
|
791
|
+
* @example
|
|
792
|
+
* ```jsx
|
|
793
|
+
* console.log(props.allowSubmit);
|
|
794
|
+
* ```
|
|
681
795
|
*/
|
|
682
796
|
allowSubmit: boolean;
|
|
683
797
|
/**
|
|
684
798
|
* A callback for getting the value of a field without using the Field component
|
|
685
799
|
* ([see example]({% slug common_scenarios_form %}#toc-reading-the-field-state)).
|
|
686
800
|
* Useful for creating and modifying the UI based on the field values.
|
|
801
|
+
*
|
|
802
|
+
* @example
|
|
803
|
+
* ```jsx
|
|
804
|
+
* const value = props.valueGetter("user.name");
|
|
805
|
+
* console.log(value);
|
|
806
|
+
* ```
|
|
687
807
|
*/
|
|
688
808
|
valueGetter: (name: string) => any;
|
|
689
809
|
}
|
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={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1744785767,version:"10.2.0-develop.7",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 = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.2.0-develop.
|
|
13
|
+
publishDate: 1744785767,
|
|
14
|
+
version: "10.2.0-develop.7",
|
|
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": "10.2.0-develop.
|
|
3
|
+
"version": "10.2.0-develop.7",
|
|
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.5.1",
|
|
29
|
-
"@progress/kendo-react-common": "10.2.0-develop.
|
|
29
|
+
"@progress/kendo-react-common": "10.2.0-develop.7",
|
|
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": 1744785767,
|
|
55
55
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
56
56
|
}
|
|
57
57
|
},
|