@progress/kendo-react-form 6.1.1-dev.202311151536 → 7.0.0-develop.1
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/es/Field.d.ts → Field.d.ts} +4 -0
- package/FieldArray.d.ts +11 -0
- package/{dist/es/FieldWrapper.d.ts → FieldWrapper.d.ts} +4 -0
- package/{dist/es/Form.d.ts → Form.d.ts} +5 -1
- package/{dist/es/FormContext.d.ts → FormContext.d.ts} +5 -1
- package/{dist/es/FormElement.d.ts → FormElement.d.ts} +4 -0
- package/LICENSE.md +1 -1
- package/dist/cdn/js/kendo-react-form.js +5 -1
- package/index.d.ts +20 -0
- package/index.js +5 -0
- package/index.mjs +409 -0
- package/{dist/npm/interfaces → interfaces}/FieldArrayProps.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/FieldArrayRenderProps.d.ts +4 -0
- package/{dist/npm/interfaces → interfaces}/FieldProps.d.ts +4 -1
- package/{dist/es/interfaces → interfaces}/FieldRenderProps.d.ts +4 -0
- package/{dist/es/interfaces → interfaces}/FieldValidator.d.ts +5 -1
- package/{dist/es/interfaces → interfaces}/FormProps.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/FormRenderProps.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/FormSubmitClickEvent.d.ts +4 -1
- package/interfaces/FormValidator.d.ts +14 -0
- package/interfaces/KeyValue.d.ts +10 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +26 -42
- package/about.md +0 -3
- package/dist/es/Field.js +0 -92
- package/dist/es/FieldArray.d.ts +0 -7
- package/dist/es/FieldArray.js +0 -72
- package/dist/es/FieldWrapper.js +0 -15
- package/dist/es/Form.js +0 -607
- package/dist/es/FormContext.js +0 -3
- package/dist/es/FormElement.js +0 -49
- package/dist/es/interfaces/FieldArrayProps.d.ts +0 -29
- package/dist/es/interfaces/FieldArrayProps.js +0 -1
- package/dist/es/interfaces/FieldArrayRenderProps.d.ts +0 -89
- package/dist/es/interfaces/FieldArrayRenderProps.js +0 -1
- package/dist/es/interfaces/FieldProps.d.ts +0 -40
- package/dist/es/interfaces/FieldProps.js +0 -1
- package/dist/es/interfaces/FieldRenderProps.js +0 -1
- package/dist/es/interfaces/FieldValidator.js +0 -1
- package/dist/es/interfaces/FormProps.js +0 -1
- package/dist/es/interfaces/FormRenderProps.d.ts +0 -75
- package/dist/es/interfaces/FormRenderProps.js +0 -1
- package/dist/es/interfaces/FormSubmitClickEvent.d.ts +0 -24
- package/dist/es/interfaces/FormSubmitClickEvent.js +0 -1
- package/dist/es/interfaces/FormValidator.d.ts +0 -10
- package/dist/es/interfaces/FormValidator.js +0 -1
- package/dist/es/interfaces/KeyValue.d.ts +0 -6
- package/dist/es/interfaces/KeyValue.js +0 -1
- package/dist/es/main.d.ts +0 -16
- package/dist/es/main.js +0 -6
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/npm/Field.d.ts +0 -10
- package/dist/npm/Field.js +0 -96
- package/dist/npm/FieldArray.d.ts +0 -7
- package/dist/npm/FieldArray.js +0 -76
- package/dist/npm/FieldWrapper.d.ts +0 -28
- package/dist/npm/FieldWrapper.js +0 -19
- package/dist/npm/Form.d.ts +0 -262
- package/dist/npm/Form.js +0 -610
- package/dist/npm/FormContext.d.ts +0 -50
- package/dist/npm/FormContext.js +0 -6
- package/dist/npm/FormElement.d.ts +0 -52
- package/dist/npm/FormElement.js +0 -52
- package/dist/npm/interfaces/FieldArrayProps.js +0 -2
- package/dist/npm/interfaces/FieldArrayRenderProps.js +0 -2
- package/dist/npm/interfaces/FieldProps.js +0 -2
- package/dist/npm/interfaces/FieldRenderProps.d.ts +0 -65
- package/dist/npm/interfaces/FieldRenderProps.js +0 -2
- package/dist/npm/interfaces/FieldValidator.d.ts +0 -14
- package/dist/npm/interfaces/FieldValidator.js +0 -2
- package/dist/npm/interfaces/FormProps.d.ts +0 -47
- package/dist/npm/interfaces/FormProps.js +0 -2
- package/dist/npm/interfaces/FormRenderProps.js +0 -2
- package/dist/npm/interfaces/FormSubmitClickEvent.js +0 -2
- package/dist/npm/interfaces/FormValidator.d.ts +0 -10
- package/dist/npm/interfaces/FormValidator.js +0 -2
- package/dist/npm/interfaces/KeyValue.d.ts +0 -6
- package/dist/npm/interfaces/KeyValue.js +0 -2
- package/dist/npm/main.d.ts +0 -16
- package/dist/npm/main.js +0 -13
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/systemjs/kendo-react-form.js +0 -1
- package/e2e-next/form.basic.tests.ts +0 -23
package/dist/es/Field.js
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import * as React from 'react';
|
|
24
|
-
import { FormContext } from './FormContext';
|
|
25
|
-
/**
|
|
26
|
-
* Represents the Field component that is used inside the KendoReact Form component.
|
|
27
|
-
* It uses `name` property to access field value and meta information from Form state.
|
|
28
|
-
*/
|
|
29
|
-
export var Field = function (props) {
|
|
30
|
-
var name = props.name, component = props.component, validator = props.validator, children = props.children, onChange = props.onChange, others = __rest(props, ["name", "component", "validator", "children", "onChange"]);
|
|
31
|
-
var form = React.useContext(FormContext);
|
|
32
|
-
var formId = form ? form.id : '';
|
|
33
|
-
React.useEffect(function () {
|
|
34
|
-
if (!form) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
var unregisterField = form.registerField(name, validator);
|
|
38
|
-
return unregisterField;
|
|
39
|
-
}, [name, formId, validator]);
|
|
40
|
-
var handleOnChange = React.useCallback(function (event) {
|
|
41
|
-
// Adding a name here slows down the performance.
|
|
42
|
-
// However, the other apprach taken by Formik is to search for the `name` attribute
|
|
43
|
-
// on `event.target.value` which does not work for all KendoReact components.
|
|
44
|
-
// If Formik uses custom components like the KendoReact ones, it would take the same approach.
|
|
45
|
-
// On the other hand, ReactFinal Form performs better in both cases due to its
|
|
46
|
-
// subscribtion-based model - the fields are subscribed for changes to a given field,
|
|
47
|
-
// which prevents unnececery rerenders. Note that this might be fragile in future React versions -
|
|
48
|
-
// the current performance testing accunts for a slight lag after 300 native HTML inputs in the 120ms-200ms range.
|
|
49
|
-
var newValue = event
|
|
50
|
-
? (event.value !== undefined
|
|
51
|
-
? event.value
|
|
52
|
-
: (event.target
|
|
53
|
-
? event.target.value
|
|
54
|
-
: event.target))
|
|
55
|
-
: event;
|
|
56
|
-
form.onChange(name, { value: newValue });
|
|
57
|
-
if (onChange) {
|
|
58
|
-
onChange.call(undefined, event);
|
|
59
|
-
}
|
|
60
|
-
}, [name, formId, onChange]);
|
|
61
|
-
var onNativeComponentChange = React.useCallback(function (event) { return form.onChange(name, { value: event.target.value }); }, [name, formId]);
|
|
62
|
-
var handleOnBlur = React.useCallback(function () { return form.onBlur(name); }, [name, formId]);
|
|
63
|
-
var handleOnFocus = React.useCallback(function () { return form.onFocus(name); }, [name, formId]);
|
|
64
|
-
if (!form) {
|
|
65
|
-
// TODO: For future versions - warn for missing form in dev mode
|
|
66
|
-
// if (__process.env.NODE_ENV !== 'production') { // or __DEV__
|
|
67
|
-
// throw new Error('Field must be used inside of a <Form> component');
|
|
68
|
-
// }
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
var value = form.valueGetter(name);
|
|
72
|
-
// TODO: For future versions as it's better to have render prop
|
|
73
|
-
// if (typeof children === 'function') {
|
|
74
|
-
// return children({ ...field, children: undefined, ...others });
|
|
75
|
-
// }
|
|
76
|
-
if (typeof component === 'string') {
|
|
77
|
-
// ignore meta, combine input with any other props
|
|
78
|
-
return React.createElement(component, __assign({ onChange: onNativeComponentChange, onBlur: handleOnBlur, onFocus: handleOnFocus, value: value, children: children }, others));
|
|
79
|
-
}
|
|
80
|
-
return React.createElement(component, __assign(__assign({ children: children }, others), {
|
|
81
|
-
// input
|
|
82
|
-
onChange: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, value: value,
|
|
83
|
-
// meta
|
|
84
|
-
validationMessage: form.errors[name], touched: form.touched[name], modified: form.modified[name], visited: form.visited[name],
|
|
85
|
-
// Our `valid` implementation requires double submit to show html5 validation errors,
|
|
86
|
-
// however it's NOT recommended to show html5 validation errors at all as:
|
|
87
|
-
// - There is no standard way to change validation look and feel with CSS.
|
|
88
|
-
// - Look different in each browser / OS
|
|
89
|
-
// - You can have a page in one language but an error message displayed in another language (not localizable)
|
|
90
|
-
valid: !(Boolean(form.errors[name]) && form.touched[name]), name: name }));
|
|
91
|
-
};
|
|
92
|
-
Field.displayName = 'KendoReactField';
|
package/dist/es/FieldArray.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { FieldArrayProps } from './interfaces/FieldArrayProps';
|
|
3
|
-
/**
|
|
4
|
-
* Represents the FieldArray component that is used inside the KendoReact Form component.
|
|
5
|
-
* It provides methods via render props for common array manipulations.
|
|
6
|
-
*/
|
|
7
|
-
export declare const FieldArray: React.FunctionComponent<FieldArrayProps>;
|
package/dist/es/FieldArray.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import * as React from 'react';
|
|
24
|
-
import { FormContext } from './FormContext';
|
|
25
|
-
/**
|
|
26
|
-
* Represents the FieldArray component that is used inside the KendoReact Form component.
|
|
27
|
-
* It provides methods via render props for common array manipulations.
|
|
28
|
-
*/
|
|
29
|
-
export var FieldArray = function (props) {
|
|
30
|
-
var name = props.name, component = props.component, validator = props.validator, type = props.type, children = props.children, others = __rest(props, ["name", "component", "validator", "type", "children"]);
|
|
31
|
-
var form = React.useContext(FormContext);
|
|
32
|
-
var formId = form ? form.id : '';
|
|
33
|
-
React.useEffect(function () {
|
|
34
|
-
if (!form) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
var unregisterField = form.registerField(name, validator);
|
|
38
|
-
return unregisterField;
|
|
39
|
-
}, [name, formId, validator]);
|
|
40
|
-
var onUnshift = React.useCallback(function (event) { return form.onUnshift(name, event); }, [name, formId]);
|
|
41
|
-
var onPush = React.useCallback(function (event) { return form.onPush(name, event); }, [name, formId]);
|
|
42
|
-
var onInsert = React.useCallback(function (event) { return form.onInsert(name, event); }, [name, formId]);
|
|
43
|
-
var onPop = React.useCallback(function () { return form.onPop(name); }, [name, formId]);
|
|
44
|
-
var onRemove = React.useCallback(function (event) { return form.onRemove(name, event); }, [name, formId]);
|
|
45
|
-
var onReplace = React.useCallback(function (event) { return form.onReplace(name, event); }, [name, formId]);
|
|
46
|
-
var onMove = React.useCallback(function (event) { return form.onMove(name, event); }, [name, formId]);
|
|
47
|
-
if (!form) {
|
|
48
|
-
// TODO: For future versions - warn for missing form in dev mode
|
|
49
|
-
// if (__process.env.NODE_ENV !== 'production') { // or __DEV__
|
|
50
|
-
// throw new Error('Field must be used inside of a <Form> component');
|
|
51
|
-
// }
|
|
52
|
-
return null;
|
|
53
|
-
}
|
|
54
|
-
// TODO: remove this and pass down getter to allow users optimize when to refresh the data?
|
|
55
|
-
var value = form.valueGetter(name);
|
|
56
|
-
// TODO: For future versions as it's better to have render prop
|
|
57
|
-
// if (typeof children === 'function') {
|
|
58
|
-
// return children({ ...field, children: undefined, ...others });
|
|
59
|
-
// }
|
|
60
|
-
return React.createElement(component, __assign({
|
|
61
|
-
// input
|
|
62
|
-
value: value,
|
|
63
|
-
// meta
|
|
64
|
-
validationMessage: form.errors[name], touched: form.touched[name], modified: form.modified[name], visited: form.visited[name],
|
|
65
|
-
// Our `valid` implementation requires double submit to show html5 validation errors,
|
|
66
|
-
// however it's NOT recommended to show html5 validation errors at all as:
|
|
67
|
-
// - There is no standard way to change validation look and feel with CSS.
|
|
68
|
-
// - Look different in each browser / OS
|
|
69
|
-
// - You can have a page in one language but an error message displayed in another language (not localizable)
|
|
70
|
-
valid: !(Boolean(form.errors[name]) && form.touched[name]), onUnshift: onUnshift, onPush: onPush, onInsert: onInsert, onPop: onPop, onRemove: onRemove, onReplace: onReplace, onMove: onMove, children: children, name: name }, others));
|
|
71
|
-
};
|
|
72
|
-
FieldArray.displayName = 'KendoReactFieldArray';
|
package/dist/es/FieldWrapper.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { classNames } from '@progress/kendo-react-common';
|
|
3
|
-
/**
|
|
4
|
-
* Represents the KendoReact FieldWrapper component.
|
|
5
|
-
* It's designed to wrap the field editor, Label, Hint and Error components.
|
|
6
|
-
* The FieldWrapper supports only single editor inside it.
|
|
7
|
-
*/
|
|
8
|
-
export var FieldWrapper = function (props) {
|
|
9
|
-
var fieldClassName = classNames({
|
|
10
|
-
'k-form-field': true,
|
|
11
|
-
'k-rtl': props.dir === 'rtl'
|
|
12
|
-
}, props.className);
|
|
13
|
-
return (React.createElement("div", { className: fieldClassName, style: props.style }, props.children));
|
|
14
|
-
};
|
|
15
|
-
FieldWrapper.displayName = 'KendoReactFieldWrapper';
|