@gravity-ui/dynamic-forms 3.1.0 → 3.3.0

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -1,162 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { isArraySpec, isNumberSpec, isObjectSpec } from '../../../helpers';
-import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
-import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
-export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, externalErrors, }) => {
-    const firstRenderRef = React.useRef(true);
-    const validate = React.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value)), [propsValidate]);
-    const [state, setState] = React.useState(() => {
-        let value = _.cloneDeep(externalValue);
-        if (_.isNil(value)) {
-            if (spec.defaultValue) {
-                value = transformArrIn(spec.defaultValue);
-            }
-            // if the spec with type array or object, and this spec has "required === true",
-            // we immediately exclude empty value
-            else if (spec.required) {
-                if (isArraySpec(spec)) {
-                    value = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
-                }
-                else if (isObjectSpec(spec)) {
-                    value = {};
-                }
-            }
-        }
-        let externalError = _.get(externalErrors, name);
-        if (!(_.isString(externalError) ||
-            _.isBoolean(externalError) ||
-            _.isUndefined(externalError))) {
-            externalError = undefined;
-        }
-        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || externalError;
-        const dirty = !_.isEqual(value, initialValue);
-        return {
-            active: false,
-            dirty,
-            error,
-            invalid: Boolean(error),
-            modified: dirty,
-            pristine: true,
-            touched: false,
-            valid: !error,
-            value,
-            visited: false,
-            childErrors: {},
-        };
-    });
-    const { onChange, onDrop } = React.useMemo(() => {
-        const onChange = (valOrSetter, childErrors) => {
-            setState((state) => {
-                const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
-                const error = validate === null || validate === void 0 ? void 0 : validate(_value);
-                let value = transformArrIn(_value);
-                if (isNumberSpec(spec) && !error) {
-                    value = (value ? Number(value) : undefined);
-                }
-                let newChildErrors = Object.assign({}, state.childErrors);
-                if (childErrors) {
-                    const nearestChildName = _.keys(childErrors).sort((a, b) => a.length - b.length)[0];
-                    if (nearestChildName) {
-                        const existingСhildNames = _.keys(newChildErrors).filter((childName) => childName.startsWith(nearestChildName));
-                        newChildErrors = Object.assign(Object.assign({}, _.omit(newChildErrors, existingСhildNames)), childErrors);
-                    }
-                }
-                return Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: newChildErrors });
-            });
-        };
-        const onDrop = () => {
-            if (isArrayItem(name)) {
-                (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
-            }
-            else {
-                onChange(undefined, { [name]: false });
-            }
-        };
-        return { onChange, onDrop };
-    }, [initialValue, setState, name, validate, spec, externalParentOnUnmount, tools.onUnmount]);
-    const onBlur = React.useCallback(() => {
-        setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
-    }, [setState]);
-    const onFocus = React.useCallback(() => {
-        setState((state) => (Object.assign(Object.assign({}, state), { active: true, visited: true })));
-    }, [setState]);
-    const parentOnUnmount = React.useCallback((childName) => {
-        if (isArraySpec(spec) || isObjectSpec(spec)) {
-            onChange((currentValue) => currentValue
-                ? _.omit(currentValue, childName.split(`${name}.`)[1])
-                : currentValue, {
-                [childName]: false,
-            });
-        }
-    }, [onChange, name, spec]);
-    const renderProps = React.useMemo(() => {
-        const onItemAdd = (_value) => {
-            const stateValue = (state.value || {
-                [OBJECT_ARRAY_FLAG]: true,
-                [OBJECT_ARRAY_CNT]: 0,
-            });
-            const value = Object.assign(Object.assign({}, stateValue), { [`<${stateValue[OBJECT_ARRAY_CNT]}>`]: transformArrIn(_value), [OBJECT_ARRAY_CNT]: stateValue[OBJECT_ARRAY_CNT] + 1 });
-            const error = validate === null || validate === void 0 ? void 0 : validate(value);
-            setState((state) => (Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
-        };
-        const onItemRemove = (idx) => {
-            parentOnUnmount(`${name}.<${idx}>`);
-        };
-        return {
-            input: {
-                name,
-                value: state.value,
-                onChange,
-                onBlur,
-                onFocus,
-                onDrop,
-                parentOnUnmount,
-            },
-            arrayInput: {
-                name,
-                value: state.value,
-                onItemAdd,
-                onItemRemove,
-                onDrop,
-            },
-            meta: Object.assign(Object.assign({}, _.omit(state, 'value')), { submitFailed: tools.submitFailed }),
-        };
-    }, [
-        state,
-        setState,
-        validate,
-        name,
-        initialValue,
-        tools.submitFailed,
-        onChange,
-        onBlur,
-        onFocus,
-        onDrop,
-        parentOnUnmount,
-    ]);
-    React.useEffect(() => {
-        if (!firstRenderRef.current || !_.isEqual(externalValue, state.value) || state.error) {
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
-        }
-    }, [state.value]);
-    React.useEffect(() => {
-        const externalError = _.get(externalErrors, name);
-        if (!firstRenderRef.current &&
-            (_.isString(externalError) ||
-                _.isBoolean(externalError) ||
-                _.isUndefined(externalError)) &&
-            state.error !== externalError &&
-            !(state.error && !externalError)) {
-            setState(Object.assign(Object.assign({}, state), { error: externalError }));
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: externalError }));
-        }
-    }, [externalErrors]);
-    React.useEffect(() => {
-        firstRenderRef.current = false;
-        return () => {
-            (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
-        };
-    }, []);
-    return renderProps;
-};

package/build/esm/lib/core/components/Form/hooks/useRender.d.ts

@@ -1,9 +0,0 @@
-import { Spec } from '../../../types';
-import { FieldRenderProps, FieldValue, IndependentInputEntity, InputEntity, LayoutType } from '../types';
-export interface UseRenderParams<Value extends FieldValue, SpecType extends Spec> {
-    name: string;
-    spec: SpecType;
-    inputEntity?: InputEntity<Value, SpecType> | IndependentInputEntity<Value, SpecType>;
-    Layout?: LayoutType<Value, SpecType>;
-}
-export declare const useRender: <Value extends FieldValue, SpecType extends Spec>({ name, spec, inputEntity, Layout, }: UseRenderParams<Value, SpecType>) => (props: FieldRenderProps<Value>) => JSX.Element | null;

package/build/esm/lib/core/components/Form/hooks/useRender.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { isCorrectSpec } from '../../../helpers';
-export const useRender = ({ name, spec, inputEntity, Layout, }) => {
-    const render = React.useCallback((props) => {
-        if (inputEntity && isCorrectSpec(spec) && _.isString(name)) {
-            if (!spec.viewSpec.hidden) {
-                if (inputEntity.independent) {
-                    const InputComponent = inputEntity.Component;
-                    return (React.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props)));
-                }
-                const InputComponent = inputEntity.Component;
-                const input = React.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
-                if (Layout) {
-                    return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
-                }
-                return input;
-            }
-        }
-        return null;
-    }, [spec, name, inputEntity, Layout]);
-    return render;
-};

package/build/esm/lib/core/components/Form/hooks/useValidate.d.ts

@@ -1,3 +0,0 @@
-import { FormValue, Spec } from '../../../types';
-import { FieldValue } from '../types';
-export declare const useValidate: <DirtyValue extends FieldValue, Value extends FormValue, SpecType extends Spec>(spec: SpecType) => ((value?: Value | undefined) => import("../types").ValidateError) | undefined;

package/build/esm/lib/core/components/Form/hooks/useValidate.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { isCorrectSpec } from '../../../helpers';
-import { isCorrectConfig } from '../utils';
-import { useDynamicFormsCtx } from './';
-export const useValidate = (spec) => {
-    const { config } = useDynamicFormsCtx();
-    const { validators } = React.useMemo(() => {
-        if (isCorrectConfig(config) && isCorrectSpec(spec)) {
-            return config[spec.type];
-        }
-        return {};
-    }, [config, spec]);
-    const validate = React.useMemo(() => {
-        if (validators) {
-            if ((!_.isString(spec.validator) || !spec.validator.length) &&
-                _.isFunction(validators.base)) {
-                return (value) => validators.base(spec, value);
-            }
-            if (_.isString(spec.validator) && _.isFunction(validators[spec.validator])) {
-                return (value) => validators[spec.validator](spec, value);
-            }
-        }
-        return;
-    }, [validators, spec]);
-    return validate;
-};