@firecms/collection_editor 3.0.0-beta.2-pre.3 → 3.0.0-beta.2-pre.5

package/src/form/useCreateFormex.tsx

@@ -1,137 +0,0 @@
-import React, { FormEvent, useEffect, useState } from "react";
-import { setIn } from "./utils";
-import { FormexController, FormexResetProps } from "./types";
-
-export function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange = false, onSubmit, validateOnInitialRender = false }: {
-    initialValues: T,
-    initialErrors?: Record<string, string>,
-    validateOnChange?: boolean,
-    validateOnInitialRender?: boolean,
-    validation?: (values: T) => Record<string, string>,
-    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>
-}): FormexController<T> {
-
-    const valuesRef = React.useRef<T>(initialValues);
-
-    const [values, setValuesInner] = useState<T>(initialValues);
-    const [touchedState, setTouchedState] = useState<Record<string, boolean>>({});
-    const [errors, setErrors] = useState<Record<string, string>>(initialErrors ?? {});
-    const [dirty, setDirty] = useState(false);
-    const [submitCount, setSubmitCount] = useState(0);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    useEffect(() => {
-        if (validateOnInitialRender) {
-            validate();
-        }
-    }, []);
-
-    const setValues = (newValues: T) => {
-        valuesRef.current = newValues;
-        setValuesInner(newValues);
-    }
-
-    const validate = () => {
-        const values = valuesRef.current;
-        const validationErrors = validation?.(values);
-        setErrors(validationErrors ?? {});
-        return validationErrors;
-    }
-
-    const setFieldValue = (key: string, value: any, shouldValidate?: boolean) => {
-        const newValues = setIn(valuesRef.current, key, value);
-        valuesRef.current = newValues;
-        setValues(newValues);
-        if (shouldValidate) {
-            validate();
-        }
-    }
-
-    const setFieldError = (key: string, error: string | undefined) => {
-        console.log("setFieldError", {key, error, errors })
-        const newErrors = { ...errors };
-        if (error) {
-            newErrors[key] = error;
-        } else {
-            delete newErrors[key];
-        }
-        setErrors(newErrors);
-    }
-
-    const setFieldTouched = (key: string, touched: boolean, shouldValidate?: boolean | undefined) => {
-        const newTouched = { ...touchedState };
-        newTouched[key] = touched;
-        setTouchedState(newTouched);
-        if (shouldValidate) {
-            validate();
-        }
-    }
-
-    const handleChange = (event: React.SyntheticEvent) => {
-        const target = event.target as HTMLInputElement;
-        const value = target.type === "checkbox" ? target.checked : target.value;
-        const name = target.name;
-        setFieldValue(name, value, validateOnChange);
-        setFieldTouched(name, true);
-    }
-
-    const handleBlur = (event: React.FocusEvent) => {
-        console.log("handleBlur")
-        const target = event.target as HTMLInputElement;
-        const name = target.name;
-        setFieldTouched(name, true);
-    }
-
-    const submit = async (e?: FormEvent<HTMLFormElement>) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-        setIsSubmitting(true);
-        setSubmitCount(submitCount + 1);
-        const validationErrors = validation?.(valuesRef.current);
-        if (validationErrors && Object.keys(validationErrors).length > 0) {
-            setErrors(validationErrors);
-        } else {
-            setErrors({});
-            await onSubmit?.(valuesRef.current, controllerRef.current);
-        }
-        setIsSubmitting(false);
-    }
-
-    const resetForm = (props?: FormexResetProps<T>) => {
-        const {
-            values: valuesProp,
-            errors: errorsProp,
-            touched: touchedProp
-        } = props ?? {};
-        valuesRef.current = valuesProp ?? initialValues;
-        setValues(valuesProp ?? initialValues);
-        setErrors(errorsProp ?? {});
-        setTouchedState(touchedProp ?? {});
-        setDirty(false);
-        setSubmitCount(0);
-    }
-
-    const controller: FormexController<T> = {
-        values,
-        handleChange,
-        isSubmitting,
-        setValues,
-        setFieldValue,
-        errors,
-        setFieldError,
-        touched: touchedState,
-        setFieldTouched,
-        dirty,
-        setDirty,
-        submitForm: submit,
-        submitCount,
-        setSubmitCount,
-        handleBlur,
-        validate,
-        resetForm
-    };
-
-    const controllerRef = React.useRef<FormexController<T>>(controller);
-    controllerRef.current = controller;
-    return controller
-}

package/src/form/utils.ts

@@ -1,169 +0,0 @@
-import * as React from "react";
-
-/** @private is the value an empty array? */
-export const isEmptyArray = (value?: any) =>
-    Array.isArray(value) && value.length === 0;
-
-/** @private is the given object a Function? */
-export const isFunction = (obj: any): obj is Function =>
-    typeof obj === "function";
-
-/** @private is the given object an Object? */
-export const isObject = (obj: any): obj is Object =>
-    obj !== null && typeof obj === "object";
-
-/** @private is the given object an integer? */
-export const isInteger = (obj: any): boolean =>
-    String(Math.floor(Number(obj))) === obj;
-
-/** @private is the given object a string? */
-export const isString = (obj: any): obj is string =>
-    Object.prototype.toString.call(obj) === "[object String]";
-
-/** @private is the given object a NaN? */
-// eslint-disable-next-line no-self-compare
-export const isNaN = (obj: any): boolean => obj !== obj;
-
-/** @private Does a React component have exactly 0 children? */
-export const isEmptyChildren = (children: any): boolean =>
-    React.Children.count(children) === 0;
-
-/** @private is the given object/value a promise? */
-export const isPromise = (value: any): value is PromiseLike<any> =>
-    isObject(value) && isFunction(value.then);
-
-/** @private is the given object/value a type of synthetic event? */
-export const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>
-    value && isObject(value) && isObject(value.target);
-
-/**
- * Same as document.activeElement but wraps in a try-catch block. In IE it is
- * not safe to call document.activeElement if there is nothing focused.
- *
- * The activeElement will be null only if the document or document body is not
- * yet defined.
- *
- * @param {?Document} doc Defaults to current document.
- * @return {Element | null}
- * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js
- */
-export function getActiveElement(doc?: Document): Element | null {
-    doc = doc || (typeof document !== "undefined" ? document : undefined);
-    if (typeof doc === "undefined") {
-        return null;
-    }
-    try {
-        return doc.activeElement || doc.body;
-    } catch (e) {
-        return doc.body;
-    }
-}
-
-/**
- * Deeply get a value from an object via its path.
- */
-export function getIn(
-    obj: any,
-    key: string | string[],
-    def?: any,
-    p = 0
-) {
-    const path = toPath(key);
-    while (obj && p < path.length) {
-        obj = obj[path[p++]];
-    }
-
-    // check if path is not in the end
-    if (p !== path.length && !obj) {
-        return def;
-    }
-
-    return obj === undefined ? def : obj;
-}
-
-export function setIn(obj: any, path: string, value: any): any {
-    const res: any = clone(obj); // this keeps inheritance when obj is a class
-    let resVal: any = res;
-    let i = 0;
-    const pathArray = toPath(path);
-
-    for (; i < pathArray.length - 1; i++) {
-        const currentPath: string = pathArray[i];
-        const currentObj: any = getIn(obj, pathArray.slice(0, i + 1));
-
-        if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
-            resVal = resVal[currentPath] = clone(currentObj);
-        } else {
-            const nextPath: string = pathArray[i + 1];
-            resVal = resVal[currentPath] =
-                isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
-        }
-    }
-
-    // Return original object if new value is the same as current
-    if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
-        return obj;
-    }
-
-    if (value === undefined) {
-        delete resVal[pathArray[i]];
-    } else {
-        resVal[pathArray[i]] = value;
-    }
-
-    // If the path array has a single element, the loop did not run.
-    // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.
-    if (i === 0 && value === undefined) {
-        delete res[pathArray[i]];
-    }
-
-    return res;
-}
-
-/**
- * Recursively a set the same value for all keys and arrays nested object, cloning
- * @param object
- * @param value
- * @param visited
- * @param response
- */
-export function setNestedObjectValues<T>(
-    object: any,
-    value: any,
-    visited: any = new WeakMap(),
-    response: any = {}
-): T {
-    for (const k of Object.keys(object)) {
-        const val = object[k];
-        if (isObject(val)) {
-            if (!visited.get(val)) {
-                visited.set(val, true);
-                // In order to keep array values consistent for both dot path  and
-                // bracket syntax, we need to check if this is an array so that
-                // this will output  { friends: [true] } and not { friends: { "0": true } }
-                response[k] = Array.isArray(val) ? [] : {};
-                setNestedObjectValues(val, value, visited, response[k]);
-            }
-        } else {
-            response[k] = value;
-        }
-    }
-
-    return response;
-}
-
-function clone(value: any) {
-    if (Array.isArray(value)) {
-        return [...value];
-    } else if (typeof value === "object" && value !== null) {
-        return { ...value };
-    } else {
-        return value; // This is for primitive types which do not need cloning.
-    }
-}
-
-function toPath(value: string | string[]) {
-    if (Array.isArray(value)) return value; // Already in path array form.
-    // Replace brackets with dots, remove leading/trailing dots, then split by dot.
-    return value.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
-}