sard 1.0.0-canary.0

package/dist/form/FieldContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+const FieldContext = createContext({
+    layout: 'horizontal',
+    labelAlign: 'start',
+    labelValign: 'start',
+    starPosition: 'left',
+});
+export default FieldContext;

package/dist/form/List.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+import { Rule } from './Validator';
+import { ValidateStatus, NamePath, NodeName } from './type';
+export interface FormListField {
+    key: number;
+    name: number;
+}
+export interface FormListOperations {
+    add: (defaultValue?: any, insertIndex?: number) => void;
+    move: (from: number, to: number) => void;
+    remove: (index: number | number[]) => void;
+}
+export interface FormListMeta {
+    errors: string[];
+    required: boolean;
+    validateStatus: ValidateStatus;
+}
+export interface FormListProps {
+    children?: (fields: FormListField[], operation: FormListOperations, meta: FormListMeta) => ReactNode;
+    required?: boolean;
+    name: NodeName;
+    initialValue?: any[];
+    label?: ReactNode;
+    rules?: Rule[];
+    validateFirst?: boolean;
+    validateTrigger?: string | string[];
+    validateStatus?: ValidateStatus;
+    watch?: NamePath[];
+}
+export declare const FormList: FC<FormListProps>;
+export default FormList;

package/dist/form/List.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { arrayMove, isFunction, arrayRemoveAtIndexes, toArray } from '../utils';
+import { useEvent } from '../use';
+import { useNode } from './useNode';
+import { NodeContext, useDescendant } from './NodeContext';
+import useInternalWatch from './useInternalWatch';
+export const FormList = (props) => {
+    const { children, required, name, label, initialValue, rules, validateFirst, validateTrigger, validateStatus, watch, } = props;
+    const { mergedValidateFirst } = useDescendant({
+        validateFirst,
+        validateTrigger,
+    });
+    useInternalWatch(watch);
+    const [node] = useNode({
+        type: 'list',
+        name,
+        label,
+        initialValue,
+        rules,
+        validateFirst: mergedValidateFirst,
+        validateStatus,
+        required,
+    });
+    const { value: mayNullishValue, setValueAndValidate, errors, finalRequired, finalValidateStatus, getDeepValue, setValue, } = node;
+    const value = Array.isArray(mayNullishValue) ? mayNullishValue : [];
+    const shoudUpdateStructure = useRef(false);
+    useEffect(() => {
+        if (shoudUpdateStructure.current) {
+            shoudUpdateStructure.current = false;
+            setValue(getDeepValue());
+        }
+    });
+    // operation
+    const increment = useRef(0);
+    const keys = useRef([]);
+    const add = useEvent((defaultValue, insertIndex) => {
+        const nextValue = [...value];
+        nextValue.splice(insertIndex ?? value.length, 0, defaultValue);
+        keys.current.splice(insertIndex ?? value.length, 0, increment.current++);
+        setValueAndValidate(nextValue);
+        shoudUpdateStructure.current = true;
+    });
+    const move = useEvent((from, to) => {
+        if (from === to ||
+            from < 0 ||
+            from >= value.length ||
+            to < 0 ||
+            to >= value.length) {
+            return;
+        }
+        arrayMove(keys.current, from, to);
+        setValueAndValidate(arrayMove([...value], from, to));
+    });
+    const remove = useEvent((index) => {
+        const mergedIndex = toArray(index);
+        const nextValue = value.filter((_, index) => {
+            return !mergedIndex.includes(index);
+        });
+        if (nextValue.length !== value.length) {
+            arrayRemoveAtIndexes(keys.current, mergedIndex);
+            setValueAndValidate([]);
+            setValueAndValidate(nextValue);
+        }
+    });
+    return (_jsx(NodeContext.Provider, { value: node, children: isFunction(children)
+            ? children(value.map((_, index) => {
+                let key = keys.current[index];
+                if (key === undefined) {
+                    key = keys.current[index] = increment.current++;
+                }
+                return {
+                    name: index,
+                    key,
+                };
+            }), {
+                add,
+                remove,
+                move,
+            }, {
+                errors,
+                required: finalRequired,
+                validateStatus: finalValidateStatus,
+            })
+            : null }));
+};
+export default FormList;

package/dist/form/Map.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { NamePath, NodeName, ValidateStatus } from './type';
+import { Rule } from './Validator';
+export interface FormMapProps {
+    children?: ReactNode;
+    name: NodeName;
+    initialValue?: Record<string, any>;
+    required?: boolean;
+    label?: ReactNode;
+    rules?: Rule[];
+    validateFirst?: boolean;
+    validateTrigger?: string | string[];
+    validateStatus?: ValidateStatus;
+    watch?: NamePath[];
+}
+export declare const FormMap: FC<FormMapProps>;
+export default FormMap;

package/dist/form/Map.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNode } from './useNode';
+import { NodeContext, useDescendant } from './NodeContext';
+import useInternalWatch from './useInternalWatch';
+export const FormMap = (props) => {
+    const { children, required, name, label, initialValue, rules, validateFirst, validateTrigger, validateStatus, watch, } = props;
+    const { mergedValidateFirst } = useDescendant({
+        validateFirst,
+        validateTrigger,
+    });
+    useInternalWatch(watch);
+    const [node] = useNode({
+        type: 'map',
+        name,
+        label,
+        initialValue,
+        rules,
+        validateFirst: mergedValidateFirst,
+        validateStatus,
+        required,
+    });
+    return _jsx(NodeContext.Provider, { value: node, children: children });
+};
+export default FormMap;

package/dist/form/NodeContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FormNode } from './useNode';
+export declare const NodeContext: import("react").Context<FormNode>;
+export interface DescendantContextValue {
+    validateTrigger?: string | string[];
+    validateFirst?: boolean;
+}
+export declare const DescendantContext: import("react").Context<DescendantContextValue>;
+export declare function useDescendant(options: DescendantContextValue): {
+    mergedValidateFirst: boolean;
+    mergedValidateTrigger: string | string[];
+};

package/dist/form/NodeContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+export const NodeContext = createContext(null);
+export const DescendantContext = createContext(null);
+export function useDescendant(options) {
+    const { validateFirst, validateTrigger } = options;
+    const descendantInfo = useContext(DescendantContext);
+    const { validateTrigger: formValidateTrigger, validateFirst: formValidateFirst, } = descendantInfo;
+    const mergedValidateFirst = validateFirst || formValidateFirst;
+    const mergedValidateTrigger = validateTrigger || formValidateTrigger;
+    return {
+        mergedValidateFirst,
+        mergedValidateTrigger,
+    };
+}

package/dist/form/Validator.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { FormStore } from './createFormStore';
+export interface ValidateMessages {
+    default?: string;
+    required?: string;
+    enum?: string;
+    whitespace?: string;
+    date?: {
+        format?: string;
+        parse?: string;
+        invalid?: string;
+    };
+    types?: {
+        string?: string;
+        function?: string;
+        array?: string;
+        object?: string;
+        number?: string;
+        date?: string;
+        boolean?: string;
+        integer?: string;
+        float?: string;
+        regexp?: string;
+        email?: string;
+        url?: string;
+        hex?: string;
+    };
+    string?: {
+        len?: string;
+        min?: string;
+        max?: string;
+        range?: string;
+    };
+    number?: {
+        len?: string;
+        min?: string;
+        max?: string;
+        range?: string;
+    };
+    array?: {
+        len?: string;
+        min?: string;
+        max?: string;
+        range?: string;
+    };
+    pattern?: {
+        mismatch?: string;
+    };
+}
+export type ValidatorType = 'string' | 'number' | 'boolean' | 'function' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+export interface RuleConfig {
+    validator?: (value: any, rule: Rule) => Promise<any> | boolean | string;
+    pattern?: RegExp;
+    message?: string | (() => string);
+    trigger?: string | string[];
+    transform?: (value: any) => any;
+    type?: ValidatorType;
+    enum?: string;
+    len?: number;
+    max?: number;
+    min?: number;
+    required?: boolean;
+    whitespace?: boolean;
+}
+export type Rule = RuleConfig | ((form: FormStore) => RuleConfig);
+export interface Regulation {
+    [name: string]: Rule | Rule[];
+}
+export interface ValidateOptions {
+    validateFirst?: boolean;
+    value?: any;
+    name?: string | number | (string | number)[];
+    label?: ReactNode;
+    form?: FormStore;
+    triggerName?: string | string[];
+}
+export declare function getRuleConfig(rule: Rule, form: FormStore): RuleConfig;
+export declare class Validator {
+    regulation: Regulation;
+    validateMessages: ValidateMessages;
+    constructor(regulation: Regulation);
+    setValidateMessages(validateMessages: ValidateMessages): void;
+    validateInternal(type: string, value: any, rule: Rule): Promise<void>;
+    validateRule(value: any, rule: RuleConfig): Promise<void>;
+    validate(rules: Rule[], options?: ValidateOptions): Promise<void>;
+    replaceSymbol(string: string, rule: RuleConfig, options?: ValidateOptions): string;
+}
+export default Validator;

package/dist/form/Validator.js

@@ -0,0 +1,268 @@
+import { chainSelect, isBoolean, isEmptyValue, isFunction, isNumber, isString, toArray, } from '../utils';
+export function getRuleConfig(rule, form) {
+    if (isFunction(rule)) {
+        return rule(form);
+    }
+    return rule;
+}
+function getMessage(message) {
+    return isFunction(message) ? message() : message;
+}
+function handleRange(len, type, rule) {
+    if (isNumber(rule.len)) {
+        return len !== rule.len ? `${type}.len` : true;
+    }
+    else if (isNumber(rule.min) && isNumber(rule.max)) {
+        return len < rule.min || len > rule.max ? `${type}.range` : true;
+    }
+    else if (isNumber(rule.min)) {
+        return len < rule.min ? `${type}.min` : true;
+    }
+    else if (isNumber(rule.max)) {
+        return len > rule.max ? `${type}.max` : true;
+    }
+    else {
+        return true;
+    }
+}
+const typeStrategies = {
+    string(value, rule) {
+        if (isString(value)) {
+            return handleRange(value.length, 'string', rule);
+        }
+        else {
+            return false;
+        }
+    },
+    number(value, rule) {
+        if (isNumber(value)) {
+            return handleRange(value, 'number', rule);
+        }
+        else {
+            return false;
+        }
+    },
+    integer(value, rule) {
+        if (Number.isInteger(value)) {
+            return handleRange(value, 'number', rule);
+        }
+        else {
+            return false;
+        }
+    },
+    float(value, rule) {
+        if (Number.isFinite(value) && value % 1 !== 0) {
+            return handleRange(value, 'number', rule);
+        }
+        else {
+            return false;
+        }
+    },
+    boolean(value) {
+        return isBoolean(value);
+    },
+    function(value) {
+        return isFunction(value);
+    },
+    regexp(value) {
+        if (isString(value)) {
+            try {
+                new RegExp(value);
+                return true;
+            }
+            catch {
+                return false;
+            }
+        }
+        else {
+            return value instanceof RegExp;
+        }
+    },
+    array(value, rule) {
+        if (Array.isArray(value)) {
+            return handleRange(value.length, 'number', rule);
+        }
+        else {
+            return false;
+        }
+    },
+    object(value) {
+        return value && typeof value === 'object' && !Array.isArray(value);
+    },
+    enum(value, enums) {
+        return enums.includes(value) ? true : 'enum';
+    },
+    date(value) {
+        return value instanceof Date;
+    },
+    url(value) {
+        return isString(value) && /url/.test(value);
+    },
+    hex(value) {
+        return isString(value) && /^#(?:[0-9A-F]{6}|[0-9A-F]{3})$/i.test(value);
+    },
+    email(value) {
+        return (isString(value) &&
+            /^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,})$/.test(value));
+    },
+};
+export class Validator {
+    regulation;
+    validateMessages;
+    constructor(regulation) {
+        this.regulation = regulation;
+    }
+    setValidateMessages(validateMessages) {
+        this.validateMessages = validateMessages;
+    }
+    validateInternal(type, value, rule) {
+        return new Promise((resolve, reject) => {
+            const result = typeStrategies[type]?.(value, rule);
+            if (result === true) {
+                resolve();
+            }
+            else {
+                reject(chainSelect(this.validateMessages, isString(result) ? result : `types.${type}`));
+            }
+        });
+    }
+    validateRule(value, rule) {
+        return new Promise((resolve, reject) => {
+            const handleReject = (error) => {
+                reject({
+                    error,
+                    rule,
+                });
+            };
+            // empty
+            const isEmpty = isEmptyValue(value, rule.whitespace);
+            if (isEmpty && !rule.validator) {
+                if (rule.required) {
+                    handleReject(getMessage(rule.message) ||
+                        chainSelect(this.validateMessages, 'required'));
+                }
+                else {
+                    resolve();
+                }
+                return;
+            }
+            // validator
+            if (rule.validator) {
+                const result = rule.validator(value, rule);
+                if (result instanceof Promise) {
+                    result
+                        .then(() => {
+                        resolve();
+                    })
+                        .catch((error) => {
+                        handleReject(error);
+                    });
+                }
+                else if (result === true) {
+                    resolve();
+                }
+                else if (isString(result)) {
+                    handleReject(result);
+                }
+                else {
+                    handleReject(getMessage(rule.message));
+                }
+                return;
+            }
+            // pattern
+            if (rule.pattern instanceof RegExp) {
+                const result = rule.pattern.test(String(value));
+                if (result) {
+                    resolve();
+                }
+                else {
+                    handleReject(getMessage(rule.message) ||
+                        chainSelect(this.validateMessages, 'pattern.mismatch'));
+                }
+                return;
+            }
+            // internal type
+            let ruleType = rule.type;
+            if (!ruleType &&
+                (isNumber(rule.min) || isNumber(rule.max) || isNumber(rule.len))) {
+                ruleType = 'string';
+            }
+            if (ruleType && Object.keys(typeStrategies).includes(ruleType)) {
+                this.validateInternal(ruleType, value, rule)
+                    .then(() => {
+                    resolve();
+                })
+                    .catch((err) => {
+                    handleReject(getMessage(rule.message) || err);
+                });
+                return;
+            }
+            resolve();
+        });
+    }
+    validate(rules, options = {}) {
+        const { validateFirst, value, form, triggerName } = options;
+        let filteredRules = rules;
+        if (triggerName) {
+            filteredRules = rules.filter(Boolean).filter((rule) => {
+                const ruleConfig = getRuleConfig(rule, form);
+                const { trigger } = ruleConfig;
+                if (!trigger) {
+                    return true;
+                }
+                return toArray(trigger).includes(triggerName);
+            });
+        }
+        return new Promise((resolve, reject) => {
+            if (validateFirst) {
+                Promise.all(filteredRules.map((rule) => {
+                    return this.validateRule(value, getRuleConfig(rule, form));
+                }))
+                    .then(() => {
+                    resolve();
+                })
+                    .catch(({ error, rule }) => {
+                    reject([this.replaceSymbol(error, rule, options)]);
+                });
+            }
+            else {
+                Promise.allSettled(filteredRules.map((rule) => {
+                    return this.validateRule(value, getRuleConfig(rule, form));
+                })).then((values) => {
+                    const rejected = values.filter(({ status }) => {
+                        return status === 'rejected';
+                    });
+                    if (rejected.length === 0) {
+                        resolve();
+                    }
+                    else {
+                        reject(rejected.map((result) => {
+                            if (result.status === 'rejected') {
+                                const { error, rule } = result.reason;
+                                return this.replaceSymbol(error, rule, options);
+                            }
+                        }));
+                    }
+                });
+            }
+        });
+    }
+    replaceSymbol(string, rule, options = {}) {
+        const label = isString(options.label) ? options.label : String(options.name);
+        const matches = {
+            '${min}': rule.min,
+            '${max}': rule.max,
+            '${len}': rule.len,
+            '${enum}': rule.enum,
+            '${label}': label,
+            '${value}': options.value,
+            '${type}': rule.type,
+            '${pattern}': rule.pattern?.toString(),
+        };
+        const regexp = /\$\{(?:min|max|len|enum|label|value|type|pattern)\}/g;
+        return String(string).replace(regexp, (m) => {
+            return matches[m] ?? '';
+        });
+    }
+}
+export default Validator;

package/dist/form/createFormStore.d.ts

@@ -0,0 +1,36 @@
+import { ErrorInfo, FieldErrors, NamePath, NodeData, ValidateOptions } from './type';
+import { Validator, ValidateMessages } from './Validator';
+import { FormNode } from './useNode';
+export declare const HOOK_KEY: unique symbol;
+export type FormStore = ReturnType<typeof createFormStore>;
+export interface FormCallbacks {
+    onSuccess?: (values: Record<string, any>) => void;
+    onFail?: (errorInfo: ErrorInfo) => void;
+    onReset?: () => void;
+}
+export default function createFormStore(): {
+    getError: (name: NamePath) => string[];
+    getErrors: (name?: NamePath[]) => FieldErrors[];
+    getValue: (name: NamePath) => any;
+    getValues: (name?: NamePath[]) => any;
+    scrollToField: (name: NamePath, options?: ScrollIntoViewOptions) => void;
+    setNodeData: (data: NodeData[]) => void;
+    setValues: (values: any) => void;
+    setValue: (name: NamePath, value: any) => void;
+    validate: (name?: NamePath[] | ValidateOptions, options?: ValidateOptions) => Promise<any>;
+    submit: () => Promise<void>;
+    reset: (name?: NamePath[]) => void;
+    getInternalHooks: <K extends typeof HOOK_KEY>(hookKey: K) => K extends typeof HOOK_KEY ? {
+        relateFormNode: (node: FormNode) => void;
+        setInitialValues: (values: Record<string, any>, onlyCacheValues: boolean) => void;
+        setCallbacks: (cbs: FormCallbacks) => void;
+        getFormInitialValues: () => Record<string, any>;
+        setValidateMessages: (validateMessages: ValidateMessages) => void;
+        validator: Validator;
+        store: {
+            getState: () => any;
+            dispatch: (action: any) => void;
+            subscribe: (listener: any) => () => void;
+        };
+    } : null;
+};