sard 1.0.0-canary.0

package/dist/form/store/useSelector.js

@@ -0,0 +1,35 @@
+import { useContext, useLayoutEffect, useRef } from 'react';
+import Context from './Context';
+import { useForceRender } from '../../use';
+export function useSelectorWithStoreAndSubscription(getState, subscribe, selector) {
+    const latestSelector = useRef();
+    const latestStoreState = useRef();
+    const forceRender = useForceRender();
+    useLayoutEffect(() => {
+        latestSelector.current = selector;
+    });
+    if (selector !== latestSelector.current) {
+        latestStoreState.current = selector(getState());
+    }
+    useLayoutEffect(() => {
+        return subscribe(() => {
+            const storeState = getState();
+            const nextSelectedState = latestSelector.current(storeState);
+            if (nextSelectedState === latestStoreState.current) {
+                return;
+            }
+            latestStoreState.current = nextSelectedState;
+            forceRender();
+        });
+    }, []);
+    return latestStoreState.current;
+}
+function createSelectorHook() {
+    return function useSelector(selector, externalStore) {
+        const store = useContext(Context);
+        const { getState, subscribe } = externalStore || store;
+        const selectedState = useSelectorWithStoreAndSubscription(getState, subscribe, selector);
+        return selectedState;
+    };
+}
+export const useSelector = createSelectorHook();

package/dist/form/type.d.ts

@@ -0,0 +1,20 @@
+export type NodeName = string | number;
+export type NamePath = NodeName | NodeName[];
+export type ValidateStatus = 'passed' | 'failed' | 'unvalidated';
+export interface ValidateOptions {
+    triggerName?: string;
+    validateOnly?: boolean;
+}
+export interface FieldErrors {
+    errors: string[];
+    name: NodeName[];
+}
+export interface ErrorInfo {
+    errorFields: FieldErrors[];
+    values: Record<string, any>;
+}
+export interface NodeData {
+    errors?: string[];
+    name?: NamePath;
+    value?: any;
+}

package/dist/form/type.js

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

package/dist/form/useForm.d.ts

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

package/dist/form/useForm.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+import createFormStore from './createFormStore';
+export function useForm(form) {
+    const formRef = useRef();
+    if (!formRef.current) {
+        if (form) {
+            formRef.current = form;
+        }
+        else {
+            formRef.current = createFormStore();
+        }
+    }
+    return [formRef.current];
+}

package/dist/form/useInternalWatch.d.ts

@@ -0,0 +1,3 @@
+import { NamePath } from './type';
+export declare function useInternalWatch(name?: NamePath[]): void;
+export default useInternalWatch;

package/dist/form/useInternalWatch.js

@@ -0,0 +1,27 @@
+import { arrayEqual, getObjectValueInDepth, toArray } from '../utils';
+import { useContext, useEffect } from 'react';
+import StoreContext from './store/Context';
+import { useForceRender } from '../use';
+export function useInternalWatch(name) {
+    const { subscribe } = useContext(StoreContext);
+    const forceRender = useForceRender();
+    useEffect(() => {
+        let oldValues = [];
+        if (!name) {
+            return;
+        }
+        return subscribe((state) => {
+            // 监听所有
+            if (name.length === 0) {
+                forceRender();
+                return;
+            }
+            const newValues = name.map((n) => getObjectValueInDepth(state, toArray(n)));
+            if (!arrayEqual(oldValues, newValues)) {
+                oldValues = newValues;
+                forceRender();
+            }
+        });
+    }, [name]);
+}
+export default useInternalWatch;

package/dist/form/useNode.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { FormStore } from './createFormStore';
+import { Rule } from './Validator';
+import { NamePath, NodeName, ValidateOptions, ValidateStatus } from './type';
+import { Store } from './store/createStore';
+export declare function isListNodeValue(list?: any[]): any;
+export declare function isMapNodeValue(map?: object): any;
+export type FormNodeType = 'list' | 'map' | 'field' | 'form';
+export interface FormNode {
+    type: FormNodeType;
+    name?: NodeName;
+    value: any;
+    parentNode: FormNode;
+    childNodes: FormNode[];
+    data: Record<string, any>;
+    appendChild: (node: FormNode) => void;
+    removeChild: (node: FormNode) => void;
+    getNamePath: () => NodeName[];
+    makeNamePathValue: (value: any) => any;
+    getDescendantNode: (name: NamePath) => FormNode | null;
+    getAllDescendantNode: () => FormNode[];
+    getInitialValue: () => any;
+    getDeepInitialValue: () => any;
+    getDeepValue: () => any;
+    setValue: (value: any) => void;
+    setValueAndValidate: (value: any) => void;
+    setValueAndDeepValidate: (value: any) => void;
+    reset: () => void;
+    dispatch: (value: any) => void;
+    validate: (options?: ValidateOptions) => Promise<void>;
+    errors: string[];
+    finalRequired: boolean;
+    finalValidateStatus: ValidateStatus;
+    setErrors: (errors: string[]) => void;
+    scrollToField: (options?: ScrollIntoViewOptions) => void;
+}
+export declare function getNamePathByCurrentName(name: number | string, parentNode: FormNode): (string | number)[];
+export declare function useNode(options: {
+    store?: Store;
+    formStore?: FormStore;
+    type: FormNodeType;
+    name?: NodeName;
+    label?: ReactNode;
+    initialValue?: any;
+    rules?: Rule[];
+    validateFirst?: boolean;
+    validateStatus?: ValidateStatus;
+    required?: boolean;
+}): FormNode[];

package/dist/form/useNode.js

@@ -0,0 +1,284 @@
+import { useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import { useEvent } from '../use';
+import { useSelector } from './store/useSelector';
+import { getObjectValueInDepth, isNullish, isNumber, isPlainObject, isUndefined, noop, toArray, } from '../utils';
+import FieldContext from './FieldContext';
+import { HOOK_KEY } from './createFormStore';
+import useValidator from './useValidator';
+import { useDispatch } from './store/useDispatch';
+import { NodeContext } from './NodeContext';
+const listSymbol = Symbol('LIST_NODE_SYMBOL');
+const mapSymbol = Symbol('MAP_NODE_SYMBOL');
+function markListNodeValue(list) {
+    list[listSymbol] = true;
+    return list;
+}
+function markMapNodeValue(map) {
+    map[mapSymbol] = true;
+    return map;
+}
+export function isListNodeValue(list) {
+    return Array.isArray(list) && list[listSymbol];
+}
+export function isMapNodeValue(map) {
+    return isPlainObject(map) && map[mapSymbol];
+}
+export function getNamePathByCurrentName(name, parentNode) {
+    const namePath = [name];
+    let currentParentNode = parentNode;
+    while (currentParentNode && currentParentNode.type !== 'form') {
+        if (!isNullish(currentParentNode.name)) {
+            namePath.unshift(currentParentNode.name);
+        }
+        currentParentNode = currentParentNode.parentNode;
+    }
+    return namePath;
+}
+function getUnFieldParentNode(parentNode) {
+    let currentParentNode = parentNode;
+    while (currentParentNode && currentParentNode.type === 'field') {
+        currentParentNode = currentParentNode.parentNode;
+    }
+    return currentParentNode;
+}
+export function useNode(options) {
+    const { store, formStore: externalFormStore, type, name, label, initialValue, rules, validateFirst, validateStatus, required, } = options;
+    const dispatch = useDispatch(store);
+    const mayParentNode = useContext(NodeContext);
+    const parentNode = useMemo(() => {
+        return getUnFieldParentNode(mayParentNode);
+    }, [mayParentNode]);
+    const value = useSelector((state) => {
+        if (!isNullish(name)) {
+            const namePath = getNamePathByCurrentName(name, parentNode);
+            return getObjectValueInDepth(state, namePath);
+        }
+    }, store);
+    const getNamePath = useEvent(() => {
+        return name ? getNamePathByCurrentName(name, parentNode) : [];
+    });
+    const fieldContext = useContext(FieldContext);
+    const formStore = externalFormStore || fieldContext.formStore;
+    const { getFormInitialValues } = formStore.getInternalHooks(HOOK_KEY);
+    const { validate, finalRequired, finalValidateStatus, setInnerValidateStatus: setValidateStatus, errors, setErrors, } = useValidator({
+        formStore,
+        rules,
+        validateFirst,
+        validateStatus,
+        value,
+        name,
+        label,
+        required,
+        getNamePath,
+    });
+    const data = useRef({});
+    useLayoutEffect(() => {
+        if (data.current.shouldValidate) {
+            data.current.shouldValidate = false;
+            validate().catch(noop);
+        }
+    }, [value]);
+    const childNodes = useRef([]);
+    const appendChild = useEvent((node) => {
+        childNodes.current.push(node);
+    });
+    const removeChild = useEvent((node) => {
+        const index = childNodes.current.indexOf(node);
+        if (index !== -1) {
+            childNodes.current.splice(index, 1);
+        }
+    });
+    const makeNamePathValue = useEvent((value) => {
+        let currentValue = value;
+        let currentName = name;
+        let currentParentNode = parentNode;
+        while (currentParentNode) {
+            const parentNodeName = currentParentNode.name;
+            const parentNodetype = currentParentNode.type;
+            if (parentNodetype === 'form' || !isNullish(parentNodeName)) {
+                switch (parentNodetype) {
+                    case 'map':
+                    case 'form':
+                        currentValue = markMapNodeValue({
+                            [currentName]: currentValue,
+                        });
+                        break;
+                    case 'list': {
+                        const list = markListNodeValue([]);
+                        list[currentName] = currentValue;
+                        currentValue = list;
+                    }
+                }
+                currentName = parentNodeName;
+            }
+            currentParentNode = currentParentNode.parentNode;
+        }
+        return currentValue;
+    });
+    const getDescendantNode = useEvent((name) => {
+        let currentChildNodes = childNodes.current;
+        let currentNode = null;
+        for (const key of toArray(name)) {
+            currentNode = null;
+            for (let l = currentChildNodes.length, i = l - 1; i >= 0; i--) {
+                const node = currentChildNodes[i];
+                if (node.name === key) {
+                    currentChildNodes = node.childNodes;
+                    currentNode = node;
+                    break;
+                }
+            }
+            if (!currentNode) {
+                return null;
+            }
+        }
+        return currentNode;
+    });
+    const getAllDescendantNode = useEvent(() => {
+        const nodes = [];
+        function recurse(childNodes) {
+            childNodes.forEach((node) => {
+                nodes.push(node);
+                recurse(node.childNodes);
+            });
+        }
+        recurse(childNodes.current);
+        return nodes;
+    });
+    const getInitialValue = useEvent(() => {
+        const rootInitialValue = getObjectValueInDepth(getFormInitialValues(), getNamePath());
+        return isUndefined(rootInitialValue) ? initialValue : rootInitialValue;
+    });
+    const getDeepInitialValue = useEvent(() => {
+        switch (type) {
+            case 'field':
+                return getInitialValue();
+            case 'map':
+            case 'form':
+                return childNodes.current.reduce((value, childNode) => {
+                    if (!isNullish(childNode.name)) {
+                        value[childNode.name] = childNode.getDeepInitialValue();
+                    }
+                    return value;
+                }, markMapNodeValue({}));
+            case 'list': {
+                const listValue = childNodes.current.map((childNode) => {
+                    return childNode.getDeepInitialValue();
+                });
+                return markListNodeValue(listValue);
+            }
+        }
+    });
+    const getDeepValue = useEvent(() => {
+        switch (type) {
+            case 'field':
+                return value;
+            case 'map':
+            case 'form':
+                return childNodes.current.reduce((value, childNode) => {
+                    if (!isNullish(childNode.name)) {
+                        value[childNode.name] = childNode.getDeepValue();
+                    }
+                    return value;
+                }, {});
+            case 'list': {
+                return childNodes.current.map((childNode) => {
+                    return childNode.getDeepValue();
+                });
+            }
+        }
+    });
+    const setValue = useEvent((value) => {
+        if (type === 'map' || type === 'form') {
+            if (!isPlainObject(value)) {
+                value = markMapNodeValue({});
+            }
+        }
+        else if (type === 'list') {
+            if (!Array.isArray(value)) {
+                value = markListNodeValue([]);
+            }
+        }
+        dispatch(makeNamePathValue(value));
+    });
+    const setValueAndValidate = useEvent((value) => {
+        setValue(value);
+        data.current.shouldValidate = true;
+    });
+    const setValueAndDeepValidate = useEvent((value) => {
+        setValue(value);
+        getAllDescendantNode().forEach((node) => {
+            if (node.errors?.length > 0) {
+                node.data.shouldValidate = true;
+            }
+        });
+    });
+    const reset = useEvent(() => {
+        setValue(getInitialValue());
+        setErrors([]);
+        setValidateStatus('unvalidated');
+        childNodes.current.forEach((node) => {
+            node.reset();
+        });
+    });
+    const scrollToField = useEvent((options) => {
+        if (type === 'field') {
+            data.current.scrollToField?.(options);
+        }
+    });
+    const node = useMemo(() => {
+        return {
+            type,
+            name,
+            value,
+            parentNode,
+            childNodes: childNodes.current,
+            data: data.current,
+            appendChild,
+            removeChild,
+            getNamePath,
+            makeNamePathValue,
+            getDescendantNode,
+            getAllDescendantNode,
+            getInitialValue,
+            getDeepInitialValue,
+            getDeepValue,
+            setValue,
+            setValueAndValidate,
+            setValueAndDeepValidate,
+            reset,
+            dispatch,
+            validate,
+            errors,
+            finalRequired,
+            finalValidateStatus,
+            setErrors,
+            scrollToField,
+        };
+    }, []);
+    node.name = name;
+    node.value = value;
+    node.parentNode = parentNode;
+    node.errors = errors;
+    node.finalRequired = finalRequired;
+    node.finalValidateStatus = finalValidateStatus;
+    useMemo(() => {
+        if (parentNode && !isNullish(name)) {
+            // 与dom排列顺序保持一致
+            if (parentNode.type === 'list' && isNumber(name)) {
+                parentNode.childNodes.splice(name, 0, node);
+            }
+            else {
+                parentNode.appendChild(node);
+            }
+        }
+    }, []);
+    useLayoutEffect(() => {
+        return () => {
+            if (parentNode && !isNullish(name)) {
+                parentNode.removeChild(node);
+            }
+        };
+    }, []);
+    return [node];
+}

package/dist/form/useValidator.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { FormStore } from './createFormStore';
+import { NodeName, ValidateOptions, ValidateStatus } from './type';
+import { Rule } from './Validator';
+export declare function useValidator(options: {
+    formStore?: FormStore;
+    rules?: Rule[];
+    validateFirst?: boolean;
+    validateStatus?: ValidateStatus;
+    value: any;
+    name?: NodeName;
+    label: ReactNode;
+    getNamePath: () => NodeName[];
+    required?: boolean;
+}): {
+    finalRequired: boolean;
+    validate: (options?: ValidateOptions) => Promise<void>;
+    finalValidateStatus: ValidateStatus;
+    setInnerValidateStatus: import("react").Dispatch<import("react").SetStateAction<ValidateStatus>>;
+    errors: string[];
+    setErrors: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+export default useValidator;

package/dist/form/useValidator.js

@@ -0,0 +1,74 @@
+import { useContext, useMemo, useState } from 'react';
+import FieldContext from './FieldContext';
+import { HOOK_KEY } from './createFormStore';
+import { getRuleConfig } from './Validator';
+import { useEvent } from '../use';
+import { isBoolean, toArray } from '../utils';
+export function useValidator(options) {
+    const { formStore: externalFormStore, rules, validateFirst, validateStatus, value, name, label, getNamePath, required, } = options;
+    const fieldContext = useContext(FieldContext);
+    const formStore = externalFormStore || fieldContext.formStore;
+    const { validator } = formStore.getInternalHooks(HOOK_KEY);
+    const [errors, setErrors] = useState([]);
+    const [innerValidateStatus, setInnerValidateStatus] = useState('unvalidated');
+    const finalValidateStatus = validateStatus || innerValidateStatus;
+    const ruleRequired = useMemo(() => {
+        return !!(rules &&
+            rules.some((rule) => getRuleConfig(rule, formStore).required));
+    }, [rules]);
+    const validate = useEvent((options = {}) => {
+        const { triggerName, validateOnly } = options;
+        return new Promise((resolve, reject) => {
+            if (!rules) {
+                setErrors([]);
+                setInnerValidateStatus('passed');
+                return resolve();
+            }
+            let filteredRules = rules;
+            if (triggerName) {
+                filteredRules = rules.filter(Boolean).filter((rule) => {
+                    const ruleConfig = getRuleConfig(rule, formStore);
+                    const { trigger } = ruleConfig;
+                    if (!trigger) {
+                        return true;
+                    }
+                    return toArray(trigger).includes(triggerName);
+                });
+            }
+            validator
+                .validate(filteredRules, {
+                validateFirst,
+                value,
+                name,
+                label,
+                form: formStore,
+            })
+                .then(() => {
+                if (!validateOnly) {
+                    setErrors([]);
+                    setInnerValidateStatus('passed');
+                }
+                resolve();
+            })
+                .catch((errors) => {
+                if (!validateOnly) {
+                    setErrors(errors);
+                    setInnerValidateStatus('failed');
+                }
+                reject({
+                    name: getNamePath(),
+                    errors,
+                });
+            });
+        });
+    });
+    return {
+        finalRequired: isBoolean(required) ? required : ruleRequired,
+        validate,
+        finalValidateStatus,
+        setInnerValidateStatus,
+        errors,
+        setErrors,
+    };
+}
+export default useValidator;

package/dist/form/useWatch.d.ts

@@ -0,0 +1,4 @@
+import { FormStore } from './createFormStore';
+import { NamePath } from './type';
+export declare function useWatch(name: NamePath | [], form?: FormStore): any;
+export default useWatch;

package/dist/form/useWatch.js

@@ -0,0 +1,24 @@
+import { useContext, useMemo } from 'react';
+import FieldContext from './FieldContext';
+import { HOOK_KEY } from './createFormStore';
+import { getObjectValueInDepth, toArray } from '../utils';
+import { useSelectorWithStoreAndSubscription } from './store/useSelector';
+export function useWatch(name, form) {
+    const { formStore: contextFormStore } = useContext(FieldContext);
+    const formStore = form || contextFormStore;
+    if (!formStore) {
+        return;
+    }
+    const { store: { getState, subscribe }, } = formStore.getInternalHooks(HOOK_KEY);
+    const selector = useMemo(() => {
+        return (state) => {
+            name = toArray(name);
+            if (name.length === 0) {
+                return state;
+            }
+            return getObjectValueInDepth(state, name);
+        };
+    }, [name]);
+    return useSelectorWithStoreAndSubscription(getState, subscribe, selector);
+}
+export default useWatch;

package/dist/grid/Col.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface ColProps extends BaseProps {
+    span?: number | 'auto' | 'none';
+    offset?: number;
+    order?: number;
+}
+export declare const Col: FC<ColProps>;
+export default Col;

package/dist/grid/Col.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { RowContext } from './Row';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const Col = (props) => {
+    const { children, className, style, span, offset, order, ...restProps } = props;
+    const [bem] = useBem('col');
+    const gap = useContext(RowContext);
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), bem.m(span, span), bem.m(`offset-${offset}`, offset), className), style: {
+            ...style,
+            ...filterNullish({
+                order,
+                padding: gap ? gap / 2 : null,
+            }),
+        }, children: children }));
+};
+export default Col;

package/dist/grid/Row.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export type RowContextValue = number | undefined;
+export declare const RowContext: import("react").Context<number>;
+export interface RowProps extends BaseProps {
+    gap?: number;
+    justify?: 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+export declare const Row: FC<RowProps>;
+export default Row;

package/dist/grid/Row.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+const mapJustify = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    around: 'space-around',
+    between: 'space-between',
+    evenly: 'space-evenly',
+};
+const mapAlign = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+};
+export const RowContext = createContext(undefined);
+export const Row = (props) => {
+    const { className, style, children, gap, justify, align, ...restProps } = props;
+    const [bem] = useBem('row');
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), className), style: {
+            ...style,
+            ...filterNullish({
+                justifyContent: justify && mapJustify[justify],
+                alignItems: align && mapAlign[align],
+                margin: gap ? -gap / 2 : null,
+            }),
+        }, children: _jsx(RowContext.Provider, { value: gap, children: children }) }));
+};
+export default Row;