@progress/kendo-react-form 6.1.1 → 7.0.0-develop.2

package/dist/es/Form.js

@@ -1,607 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { FormContext } from './FormContext';
-import { getter, setter, clone, cloneObject, guid } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-/**
- * @hidden
- */
-var FORCEUPDATE_ACCUMULATOR_TIMEOUT = 0;
-/**
- * Represents the [KendoReact Form component]({% slug overview_form %}).
- *
- * @example
- * ```jsx
- * export const FormInput = (fieldRenderProps) => {
- *     const onValueChange = React.useCallback(
- *         (event) => fieldRenderProps.onChange(event.target.value),
- *         [fieldRenderProps.onChange]
- *     );
- *     return (
- *         <input
- *             className={'k-input'}
- *             value={fieldRenderProps.value}
- *             onChange={onValueChange}
- *         />
- *     );
- * };
- *
- * export const App = () => {
- *     const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
- *     return (
- *         <Form
- *             initialValues={{title: ''}}
- *             onSubmit={handleSubmit}
- *             render={(formRenderProps) => (
- *                 <div>
- *                     <Field name={'title'} component={FormInput} />
- *                     <button
- *                         className="k-button"
- *                         disabled={!formRenderProps.allowSubmit}
- *                         onClick={formRenderProps.onSubmit}
- *                     >
- *                         Submit
- *                     </button>
- *                 </div>
- *             )}
- *         />
- *     );
- * };
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var Form = /** @class */ (function (_super) {
-    __extends(Form, _super);
-    /**
-     * @hidden
-     */
-    function Form(props) {
-        var _this = _super.call(this, props) || this;
-        _this._id = guid();
-        _this._touched = {};
-        _this._visited = {};
-        _this._modified = {};
-        _this._validatorsByField = {};
-        _this._values = {};
-        _this._fields = {};
-        _this._unmounted = false;
-        _this._submitted = false;
-        /**
-         * @hidden
-         */
-        _this.isValid = function () {
-            return _this.isFormValid(_this.errors);
-        };
-        /**
-         * @hidden
-         */
-        _this.accumulatedForceUpdate = function () {
-            // IMPORTANT:
-            // Should only be used for updates not comming from editors as it
-            // will cause cursor jump as react will reset the editor to old value
-            if (_this._accumulatorTimeout) {
-                clearTimeout(_this._accumulatorTimeout);
-            }
-            _this._accumulatorTimeout = window.setTimeout(function () {
-                _this._accumulatorTimeout = undefined;
-                _this.forceUpdate();
-            }, FORCEUPDATE_ACCUMULATOR_TIMEOUT);
-        };
-        /**
-         * @hidden
-         */
-        _this.resetForm = function () {
-            _this.values = clone(_this.props.initialValues);
-            _this._id = guid();
-            _this._touched = {};
-            _this._visited = {};
-            _this._modified = {};
-            _this._validatorsByField = {};
-            _this._fields = {};
-            _this._submitted = false;
-            _this.forceUpdate();
-        };
-        /**
-         * Method for resetting the form state outside the form component.
-         *
-         * > Use `onReset` only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.
-         */
-        _this.onReset = function () { return _this.resetForm(); };
-        /**
-         * @hidden
-         */
-        _this.addField = function (field) {
-            _this._fields[field] = true;
-        };
-        /**
-         * @hidden
-         */
-        _this.onSubmit = function (event) {
-            var touchedVisited = {};
-            var fields = _this.fields;
-            if (event) {
-                if (typeof event.preventDefault === 'function') {
-                    event.preventDefault();
-                }
-                if (typeof event.stopPropagation === 'function') {
-                    event.stopPropagation();
-                }
-            }
-            fields.forEach(function (fieldName) {
-                touchedVisited[fieldName] = true;
-            });
-            // show validations
-            _this.visited = __assign({}, touchedVisited);
-            _this.touched = __assign({}, touchedVisited);
-            var values = _this.values;
-            var isValid = _this.isFormValid(_this.errors);
-            var isModified = _this.isFormModified(_this.modified, fields);
-            if (_this.props.onSubmitClick) {
-                _this.props.onSubmitClick.call(undefined, {
-                    values: values,
-                    isValid: isValid,
-                    isModified: isModified,
-                    event: event
-                });
-            }
-            if (isValid && (_this.props.ignoreModified || isModified) && _this.props.onSubmit) {
-                _this._submitted = true;
-                _this.props.onSubmit.call(undefined, values, event);
-            }
-            _this.forceUpdate();
-        };
-        /**
-         * Method for emiting changes to a specific field outside the form component.
-         *
-         * > Use `onChange` only if you cannot achieve the desired behavior through the Field component by FormRenderProps.
-         */
-        _this.onChange = function (name, options) {
-            var _a;
-            var value = options.value;
-            _this.addField(name);
-            if (!_this.modified[name]) {
-                _this.modified = __assign(__assign({}, _this.modified), (_a = {}, _a[name] = true, _a));
-            }
-            _this.valueSetter(name, value);
-            _this.forceUpdate();
-        };
-        /**
-         * @hidden
-         */
-        _this.onFocus = function (name, skipForceUpdate) {
-            var _a;
-            if (_this.visited[name]) {
-                return;
-            }
-            _this.visited = __assign(__assign({}, _this.visited), (_a = {}, _a[name] = true, _a));
-            if (!skipForceUpdate) {
-                _this.forceUpdate();
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onBlur = function (name, skipForceUpdate) {
-            var _a;
-            if (_this.touched[name]) {
-                return;
-            }
-            _this.onFocus(name, skipForceUpdate);
-            _this.touched = __assign(__assign({}, _this.touched), (_a = {}, _a[name] = true, _a));
-            if (!skipForceUpdate) {
-                _this.forceUpdate();
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onFieldRegister = function (name, validator) {
-            var _a;
-            _this.addField(name);
-            // The sole reason for using class props over state - nextIndex, needed for destroying validators
-            var oldValidators = (_this.validatorsByField[name] || []);
-            var nextIndex = oldValidators.length;
-            _this.validatorsByField = __assign(__assign({}, _this.validatorsByField), (_a = {}, _a[name] = __spreadArray(__spreadArray([], oldValidators, true), [validator], false), _a));
-            _this.accumulatedForceUpdate();
-            return function () {
-                var _a;
-                // onFieldUnregister:
-                if (_this._unmounted) {
-                    return;
-                }
-                var newValidators = __spreadArray([], (_this.validatorsByField[name] || []), true);
-                var validatorIsUnregistered = Boolean(newValidators[nextIndex]);
-                newValidators[nextIndex] = undefined;
-                _this.validatorsByField = __assign(__assign({}, _this.validatorsByField), (_a = {}, _a[name] = newValidators, _a));
-                if (validatorIsUnregistered) {
-                    _this.accumulatedForceUpdate();
-                }
-            };
-        };
-        /**
-         * @hidden
-         */
-        _this.isFormValid = function (errors) {
-            return !Object.keys(errors).some(function (fieldName) { return Boolean(errors[fieldName]); });
-        };
-        /**
-         * @hidden
-         */
-        _this.isFormModified = function (modified, fields) {
-            return fields.some(function (fieldName) { return modified[fieldName]; });
-        };
-        /**
-         * @hidden
-         */
-        _this.isFormHasNotTouched = function (touched, fields) {
-            return fields.some(function (fieldName) { return !touched[fieldName]; });
-        };
-        /**
-         * @hidden
-         */
-        _this.isFormTouched = function (touched, fields) {
-            return fields.some(function (fieldName) { return touched[fieldName]; });
-        };
-        /**
-         * @hidden
-         */
-        _this.isFormVisited = function (visited, fields) {
-            return fields.some(function (fieldName) { return visited[fieldName]; });
-        };
-        /**
-         * @hidden
-         */
-        _this.valueGetter = function (fieldName) {
-            return getter(fieldName)(_this.values);
-        };
-        /**
-         * @hidden
-         */
-        _this.valueSetter = function (fieldName, value) {
-            return setter(fieldName)(_this.values, value);
-        };
-        /**
-         * @hidden
-         */
-        _this.onArrayAction = function (name) {
-            var _a;
-            _this.addField(name);
-            if (!_this.modified[name]) {
-                _this.modified = __assign(__assign({}, _this.modified), (_a = {}, _a[name] = true, _a));
-            }
-            _this.onBlur(name, true);
-        };
-        /**
-         * @hidden
-         */
-        _this.onInsert = function (name, options) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray([], (_this.valueGetter(name) || []), true);
-            newArray.splice(options.index, 0, options.value);
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-        };
-        /**
-         * @hidden
-         */
-        _this.onUnshift = function (name, options) {
-            _this.onInsert(name, {
-                value: options.value,
-                index: 0
-            });
-        };
-        /**
-         * @hidden
-         */
-        _this.onPush = function (name, options) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray(__spreadArray([], (_this.valueGetter(name) || []), true), [options.value], false);
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-        };
-        /**
-         * @hidden
-         */
-        _this.onPop = function (name) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray([], (_this.valueGetter(name) || []), true);
-            var value = newArray.pop();
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-            return value;
-        };
-        /**
-         * @hidden
-         */
-        _this.onRemove = function (name, options) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray([], (_this.valueGetter(name) || []), true);
-            var value = newArray.splice(options.index, 1);
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-            return value;
-        };
-        /**
-         * @hidden
-         */
-        _this.onReplace = function (name, options) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray([], (_this.valueGetter(name) || []), true);
-            newArray.splice(options.index, 1, options.value);
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-        };
-        /**
-         * @hidden
-         */
-        _this.onMove = function (name, options) {
-            _this.onArrayAction(name);
-            var newArray = __spreadArray([], (_this.valueGetter(name) || []), true);
-            var value = newArray[options.prevIndex];
-            newArray.splice(options.prevIndex, 1);
-            newArray.splice(options.nextIndex, 0, value);
-            _this.valueSetter(name, newArray);
-            _this.forceUpdate();
-        };
-        validatePackage(packageMetadata);
-        _this.values = clone(props.initialValues);
-        return _this;
-    }
-    Object.defineProperty(Form.prototype, "touched", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._touched;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this._touched = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "visited", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._visited;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this._visited = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "modified", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._modified;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this._modified = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "validatorsByField", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._validatorsByField;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this._validatorsByField = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "values", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._values;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this._values = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "fields", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return Object.keys(this._fields);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "formErrors", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            if (this.props.validator) {
-                return this.props.validator(this.values, this.valueGetter);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Form.prototype, "errors", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            var _this = this;
-            var errors = {};
-            var fields = this.fields;
-            var validatorsByField = this.validatorsByField;
-            fields.forEach(function (fieldName) {
-                errors[fieldName] = '';
-                if (validatorsByField[fieldName]) {
-                    var validators_1 = [];
-                    validatorsByField[fieldName].forEach(function (validator) {
-                        if (Array.isArray(validator)) {
-                            validators_1.push.apply(validators_1, validator);
-                        }
-                        else {
-                            validators_1.push(validator);
-                        }
-                    });
-                    // find first validation error
-                    validators_1.find(function (validator) {
-                        if (validator) {
-                            var result = validator(_this.valueGetter(fieldName), _this.valueGetter, { name: fieldName });
-                            if (result) {
-                                errors[fieldName] = result;
-                                return true;
-                            }
-                        }
-                        return false;
-                    });
-                }
-            });
-            var formErrors = this.formErrors;
-            if (formErrors) {
-                cloneObject(this.formErrors, errors);
-            }
-            return errors;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    Form.prototype.componentWillUnmount = function () {
-        this._unmounted = true;
-        if (this._accumulatorTimeout) {
-            clearTimeout(this._accumulatorTimeout);
-        }
-    };
-    /**
-     * @hidden
-     */
-    Form.prototype.render = function () {
-        var render = this.props.render;
-        var touched = this.touched;
-        var visited = this.visited;
-        var modified = this.modified;
-        var fields = this.fields;
-        var errors = this.errors;
-        var formValid = this.isFormValid(errors);
-        var formModified = this.isFormModified(modified, fields);
-        var formTouched = this.isFormTouched(touched, fields);
-        var formVisited = this.isFormVisited(visited, fields);
-        var formHasNotTouched = this.isFormHasNotTouched(touched, fields);
-        // 1. The form is not touched, but has errors - allow submit to force validation.
-        // 2. The form is valid and modified - if not modified, disable submit.
-        var allowSubmit = (formHasNotTouched && !formValid) || (formValid && (this.props.ignoreModified || formModified));
-        return (React.createElement(FormContext.Provider, { key: this._id, value: {
-                id: this._id,
-                valueGetter: this.valueGetter,
-                errors: errors,
-                modified: modified,
-                touched: touched,
-                visited: visited,
-                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
-            } }, render({
-            valid: formValid,
-            modified: formModified,
-            touched: formTouched,
-            visited: formVisited,
-            submitted: this._submitted,
-            valueGetter: this.valueGetter,
-            errors: errors,
-            allowSubmit: allowSubmit,
-            onChange: this.onChange,
-            onSubmit: this.onSubmit,
-            onFormReset: this.resetForm
-        })));
-    };
-    /**
-     * @hidden
-     */
-    Form.displayName = 'KendoReactForm';
-    /**
-     * @hidden
-     */
-    Form.propTypes = {
-        initialValues: PropTypes.any,
-        onSubmit: PropTypes.func,
-        onSubmitClick: PropTypes.func,
-        render: PropTypes.func.isRequired
-    };
-    return Form;
-}(React.Component));
-export { Form };

package/dist/es/FormContext.js

@@ -1,3 +0,0 @@
-import * as React from 'react';
-/** @hidden */
-export var FormContext = React.createContext(null);

package/dist/es/FormElement.js

@@ -1,49 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
-import { FormContext } from './FormContext';
-/**
- * Represents the KendoReact FormElement component.
- * It's small wrapper around HTML form element which automatically attach the
- * Form component's `onSubmit` render prop and Kendo CSS classes.
- * Other props are passed to the DOM node.
- */
-export var FormElement = React.forwardRef(function (props, ref) {
-    var _a;
-    var combinedProps = __assign({ size: 'medium' }, props);
-    var element = React.useRef(null);
-    var target = React.useRef(null);
-    React.useImperativeHandle(target, function () { return ({ element: element.current, props: combinedProps }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var form = React.useContext(FormContext);
-    var className = combinedProps.className, style = combinedProps.style, horizontal = combinedProps.horizontal, size = combinedProps.size, others = __rest(combinedProps, ["className", "style", "horizontal", "size"]);
-    var formClassName = classNames((_a = {
-            'k-form': true
-        },
-        _a["k-form-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
-        _a['k-form-horizontal'] = horizontal === true,
-        _a), className);
-    return (React.createElement("form", __assign({ ref: element }, others, { style: props.style, className: formClassName, onSubmit: form ? form.onSubmit : undefined }), props.children));
-});
-FormElement.displayName = 'KendoReactFormElement';

package/dist/es/interfaces/FieldArrayProps.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import { FieldValidatorType } from './FieldValidator';
-/**
- * Represents the props of the FieldArray component that is used inside the KendoReact Form component.
- */
-export interface FieldArrayProps {
-    /**
-     * The name of the field in the Form state.
-     */
-    name: string;
-    /**
-     * Can be set to a React component.
-     * [`FieldArrayRenderProps`]({% slug api_form_fieldarrayrenderprops %}).
-     */
-    component: React.ComponentType<any>;
-    /**
-     * The validation functions for the FieldArray level.
-     * Currently, `validator` supports only synchronous functions.
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * The React elements that are passed as children to the rendered component.
-     */
-    children?: any;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}

package/dist/es/interfaces/FieldArrayProps.js

@@ -1 +0,0 @@
-export {};