sard 1.0.0-canary.0

package/dist/form/createFormStore.js

@@ -0,0 +1,249 @@
+import { getObjectValueInDepth, isNullish, isPlainObject, toArray, } from '../utils';
+import { Validator } from './Validator';
+import createStore from './store/createStore';
+import { isListNodeValue, isMapNodeValue } from './useNode';
+export const HOOK_KEY = Symbol('HOOK_KEY');
+function createInternalStore(initialValues) {
+    function reducer(previousState, value) {
+        return deepMergePlainObject({
+            ...previousState,
+        }, value);
+    }
+    return createStore(reducer, initialValues);
+}
+function deepMergePlainObject(...args) {
+    const target = args[0], l = args.length;
+    let i = 1, options, name, src, copy, clone;
+    for (; i < l; i++) {
+        options = args[i];
+        if (!isNullish(options)) {
+            for (name in options) {
+                src = target[name];
+                copy = options[name];
+                // 防止有环
+                if (target === copy) {
+                    continue;
+                }
+                // 深复制
+                // if (isPlainObject(src) && isMapNodeValue(copy)) {
+                if (isPlainObject(src) && isPlainObject(copy)) {
+                    clone = { ...src };
+                    target[name] = deepMergePlainObject(clone, copy);
+                }
+                else if (Array.isArray(src) && isListNodeValue(copy)) {
+                    // forEach可以过滤数组中为<空>的值
+                    copy.forEach((item, index) => {
+                        const srcItem = src[index];
+                        if (isPlainObject(srcItem) && isMapNodeValue(item)) {
+                            src[index] = deepMergePlainObject({ ...srcItem }, item);
+                        }
+                        else {
+                            src[index] = item;
+                        }
+                    });
+                }
+                else {
+                    target[name] = copy;
+                }
+            }
+        }
+    }
+    return target;
+}
+export default function createFormStore() {
+    let initialValues = {};
+    let callbacks;
+    const validator = new Validator({});
+    let rootFormNode;
+    const store = createInternalStore(initialValues);
+    // # 工具函数
+    // 根据传入的字段名获取 FormNode 实例
+    function getNodeByName(name) {
+        return rootFormNode?.getDescendantNode(name);
+    }
+    // 根据传入的字段名数组获取对应的一组 Field 实例
+    function getNodesByName(name) {
+        if (name) {
+            return name.map(getNodeByName).filter(Boolean);
+        }
+        return rootFormNode?.getAllDescendantNode();
+    }
+    // # 公有的
+    // 获取指定节点的错误信息
+    function getError(name) {
+        const node = getNodeByName(name);
+        return node?.errors;
+    }
+    // 返回所有或指定节点的错误信息
+    function getErrors(name) {
+        function recurse(nodes, errors) {
+            nodes.forEach((node) => {
+                errors.push({
+                    name: node.getNamePath(),
+                    errors: node.errors,
+                });
+                if (node.childNodes) {
+                    recurse(node.childNodes, errors);
+                }
+            });
+            return errors;
+        }
+        if (name) {
+            return name
+                .map((n) => getNodeByName(n))
+                .filter(Boolean)
+                .map((node) => {
+                return {
+                    name: node.getNamePath(),
+                    errors: node.errors,
+                };
+            });
+        }
+        else {
+            return recurse(rootFormNode?.childNodes || [], []);
+        }
+    }
+    // 获取对应节点的值
+    function getValue(name) {
+        return getObjectValueInDepth(getValues(), toArray(name));
+    }
+    // 获取一组节点对应的值
+    function getValues(name) {
+        if (name) {
+            return deepMergePlainObject(...name.map(getValue));
+        }
+        else {
+            return store.getState();
+            // return rootFormNode?.getDeepValue()
+        }
+    }
+    // 重置一组节点到初始值
+    function reset(name) {
+        if (name) {
+            name.forEach((n) => {
+                getNodeByName(n)?.reset();
+            });
+        }
+        else {
+            rootFormNode?.reset();
+            callbacks.onReset?.();
+        }
+    }
+    // 滚动到指定字段位置
+    function scrollToField(name, options) {
+        const node = getNodeByName(name);
+        node?.scrollToField(options);
+    }
+    // 设置一组字段状态
+    function setNodeData(data) {
+        data.forEach((item) => {
+            const node = item.name && getNodeByName(item.name);
+            if (node) {
+                if ('value' in item) {
+                    node.setValue(item.value);
+                }
+                if ('errors' in item) {
+                    node.setErrors(item.errors || []);
+                }
+            }
+        });
+    }
+    // 设置表单的值
+    function setValues(values) {
+        rootFormNode?.setValueAndDeepValidate(values);
+    }
+    // 设置指定节点的值
+    function setValue(name, value) {
+        const node = getNodeByName(name);
+        if (node) {
+            setValues(node.makeNamePathValue(value));
+        }
+    }
+    // 验证指定的字段，不传递字段名则验证所有字段
+    function validate(name, options) {
+        if (isPlainObject(name)) {
+            options = name;
+            name = undefined;
+        }
+        return new Promise((resolve, reject) => {
+            Promise.allSettled(getNodesByName(name).map((node) => node.validate(options))).then((values) => {
+                const rejected = values.filter(({ status }) => status === 'rejected');
+                if (rejected.length === 0) {
+                    resolve(getValues());
+                }
+                else {
+                    reject({
+                        errorFields: rejected.map(({ reason: { name, errors } }) => ({
+                            name,
+                            errors,
+                        })),
+                        values: getValues(),
+                    });
+                }
+            });
+        });
+    }
+    // 提交表单，与点击 submit 按钮效果相同
+    function submit() {
+        return validate({
+            triggerName: 'onSubmit',
+        })
+            .then((values) => {
+            callbacks.onSuccess?.(values);
+        })
+            .catch((errors) => {
+            callbacks.onFail?.(errors);
+        });
+    }
+    // # 私有的
+    // 关联表单节点
+    function relateFormNode(node) {
+        rootFormNode = node;
+    }
+    // 设置表单初始值
+    function setInitialValues(values = {}, onlyCacheValues) {
+        initialValues = values;
+        if (!onlyCacheValues) {
+            const value = rootFormNode?.getDeepInitialValue();
+            setValues(deepMergePlainObject(value, initialValues));
+        }
+    }
+    // 获取表单初始值
+    function getFormInitialValues() {
+        return initialValues;
+    }
+    // 设置表单回调函数
+    function setCallbacks(cbs) {
+        callbacks = cbs;
+    }
+    // 设置表单的验证提示模板
+    function setValidateMessages(validateMessages) {
+        validator.setValidateMessages(validateMessages);
+    }
+    const internalHooks = {
+        relateFormNode,
+        setInitialValues,
+        setCallbacks,
+        getFormInitialValues,
+        setValidateMessages,
+        validator,
+        store,
+    };
+    function getInternalHooks(hookKey) {
+        return HOOK_KEY === hookKey ? internalHooks : null;
+    }
+    return {
+        getError,
+        getErrors,
+        getValue,
+        getValues,
+        scrollToField,
+        setNodeData,
+        setValues,
+        setValue,
+        validate,
+        submit,
+        reset,
+        getInternalHooks,
+    };
+}

package/dist/form/index.d.ts

@@ -0,0 +1,43 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { FormField } from './Field';
+import { FormList } from './List';
+import { FormMap } from './Map';
+import { FormErrorList } from './ErrorList';
+import { FormStore, FormCallbacks } from './createFormStore';
+import { useForm } from './useForm';
+import useWatch from './useWatch';
+import { ValidateMessages } from './Validator';
+import { ScrollIntoViewOptions } from '../utils';
+import { BaseProps } from '../base';
+import { ValidateStatus } from './type';
+export * from './Field';
+export * from './List';
+export * from './ErrorList';
+export type { FormStore, ValidateStatus };
+export interface FormProps extends FormCallbacks, BaseProps {
+    initialValues?: Record<string, any>;
+    form?: FormStore;
+    layout?: 'horizontal' | 'vertical';
+    labelWidth?: number | string;
+    labelAlign?: 'start' | 'center' | 'end';
+    labelValign?: 'start' | 'center' | 'end';
+    starPosition?: 'left' | 'right';
+    disabled?: boolean;
+    readOnly?: boolean;
+    scrollToFirstError?: boolean;
+    scrollIntoViewOptions?: ScrollIntoViewOptions;
+    validateMessages?: ValidateMessages;
+    validateTrigger?: string | string[];
+    validateFirst?: boolean;
+}
+export type FormRef = FormStore;
+export interface FormFC extends ForwardRefExoticComponent<PropsWithoutRef<FormProps> & RefAttributes<FormRef>> {
+    Field: typeof FormField;
+    Map: typeof FormMap;
+    List: typeof FormList;
+    ErrorList: typeof FormErrorList;
+    useForm: typeof useForm;
+    useWatch: typeof useWatch;
+}
+export declare const Form: FormFC;
+export default Form;

package/dist/form/index.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useEffect, useRef, } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, Form as TaroForm } from '@tarojs/components';
+import { FormField } from './Field';
+import { FormList } from './List';
+import { FormMap } from './Map';
+import { FormErrorList } from './ErrorList';
+import { HOOK_KEY } from './createFormStore';
+import FieldContext from './FieldContext';
+import { useForm } from './useForm';
+import useWatch from './useWatch';
+import useTranslate from '../locale/useTranslate';
+import { deepMerge, isPC, isRN } from '../utils';
+import { useBem, useSelectorId } from '../use';
+import StoreContext from './store/Context';
+import { useNode } from './useNode';
+import { DescendantContext, NodeContext } from './NodeContext';
+import CustomForm from './CustomForm';
+import { usePageScroll } from '@tarojs/taro';
+const FormElement = isRN || isPC ? CustomForm : TaroForm;
+export * from './Field';
+export * from './List';
+export * from './ErrorList';
+export const Form = forwardRef((props, ref) => {
+    const { className, style, children, onSuccess, onFail, onReset, initialValues, form, layout = 'horizontal', labelWidth, labelAlign = 'start', labelValign = 'start', starPosition = 'left', disabled = false, readOnly = false, scrollToFirstError, scrollIntoViewOptions, validateMessages, validateTrigger = 'onChange', validateFirst = true, ...restProps } = props;
+    const [bem] = useBem('form');
+    const contextId = useSelectorId();
+    const [formStore] = useForm(form);
+    const { scrollToField } = formStore;
+    const { store, relateFormNode, setInitialValues, setCallbacks, setValidateMessages, } = formStore.getInternalHooks(HOOK_KEY);
+    const [node] = useNode({
+        store,
+        formStore,
+        type: 'form',
+    });
+    relateFormNode(node);
+    useMemo(() => {
+        setCallbacks({
+            onSuccess,
+            onFail: (errors) => {
+                if (scrollToFirstError) {
+                    scrollToField(errors.errorFields[0].name);
+                }
+                onFail?.(errors);
+            },
+            onReset,
+        });
+    }, [onSuccess, onFail, onReset]);
+    // 验证信息
+    const { select } = useTranslate('form.defaultValidateMessages');
+    const defaultValidateMessages = useMemo(() => {
+        return deepMerge({}, select());
+    }, [select()]);
+    useMemo(() => {
+        setValidateMessages(deepMerge(defaultValidateMessages, validateMessages));
+    }, [validateMessages]);
+    // 初始化
+    setInitialValues(initialValues, true);
+    useEffect(() => {
+        setInitialValues(initialValues, false);
+    }, []);
+    const handleSubmit = () => {
+        formStore.submit();
+    };
+    const handleReset = () => {
+        formStore.reset();
+    };
+    useImperativeHandle(ref, () => formStore, []);
+    // scroll
+    const pageScrollTop = useRef(0);
+    usePageScroll((event) => {
+        pageScrollTop.current = event.scrollTop;
+    });
+    const fieldContext = useMemo(() => {
+        return {
+            formStore,
+            layout,
+            labelWidth,
+            labelAlign,
+            labelValign,
+            starPosition,
+            disabled,
+            readOnly,
+            contextId,
+            pageScrollTop,
+            scrollIntoViewOptions,
+        };
+    }, [
+        layout,
+        labelWidth,
+        labelAlign,
+        starPosition,
+        disabled,
+        readOnly,
+        scrollIntoViewOptions,
+    ]);
+    const validateInfo = useMemo(() => {
+        return { validateTrigger, validateFirst };
+    }, [validateTrigger, validateFirst]);
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(StoreContext.Provider, { value: store, children: _jsx(NodeContext.Provider, { value: node, children: _jsx(FieldContext.Provider, { value: fieldContext, children: _jsx(DescendantContext.Provider, { value: validateInfo, children: _jsx(FormElement, { ...restProps, className: classNames(bem.b(), bem.m('layout', layout), className), style: style, onSubmit: handleSubmit, onReset: handleReset, children: children }) }) }) }) }) }));
+});
+Form.Field = FormField;
+Form.Map = FormMap;
+Form.List = FormList;
+Form.ErrorList = FormErrorList;
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+export default Form;

package/dist/form/index.scss

@@ -0,0 +1,200 @@
+@import '../style/base.scss';
+// #variables
+$sar-form-field-padding-x: 16px !default;
+$sar-form-field-padding-y: 10px !default;
+$sar-form-field-font-size: $sar-text-base !default;
+$sar-form-field-line-height: 24px !default;
+
+$sar-form-field-label-width: 88px !default;
+$sar-form-field-label-margin-right: 12px !default;
+$sar-form-field-label-margin-bottom: 4px !default;
+
+$sar-form-field-star-color: $sar-danger !default;
+$sar-form-field-star-gap: 4px !default;
+
+$sar-form-field-feedback-margin-top: 4px !default;
+$sar-form-field-feedback-font-size: $sar-text-sm !default;
+$sar-form-field-feedback-line-height: $sar-form-field-feedback-font-size *
+  $sar-leading-tight !default;
+$sar-form-field-feedback-color: $sar-tertiary-color !default;
+$sar-form-field-feedback-failed-color: $sar-danger !default;
+$sar-form-field-feedback-passed-color: $sar-tertiary-color !default;
+$sar-form-field-feedback-unvalidated-color: $sar-tertiary-color !default;
+
+$sar-form-field-extra-margin-top: 4px !default;
+$sar-form-field-extra-font-size: $sar-text-sm !default;
+$sar-form-field-extra-line-height: $sar-form-field-extra-font-size *
+  $sar-leading-tight !default;
+$sar-form-field-extra-color: $sar-tertiary-color !default;
+
+// 暗黑模式
+$sar-form-field-feedback-dark-color: $sar-dark-tertiary-color !default;
+$sar-form-field-feedback-failed-dark-color: $sar-danger !default;
+$sar-form-field-feedback-passed-dark-color: $sar-dark-tertiary-color !default;
+$sar-form-field-feedback-unvalidated-dark-color: $sar-dark-tertiary-color !default;
+$sar-form-field-extra-dark-color: $sar-dark-tertiary-color !default;
+// #endvariables
+
+@include bem(form) {
+  @include b() {
+    @include universal;
+  }
+}
+
+@include bem(form-field) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    padding: $sar-form-field-padding-y $sar-form-field-padding-x;
+    font-size: $sar-form-field-font-size;
+    line-height: $sar-form-field-line-height;
+
+    @include m(inlaid) {
+      padding: 0;
+    }
+  }
+
+  @include e(underline) {
+    left: $sar-form-field-padding-x;
+    right: $sar-form-field-padding-x;
+  }
+
+  @include e(label) {
+    @include universal;
+    flex-direction: row;
+    flex: none;
+    @include ifweb {
+      word-wrap: break-word;
+      word-break: break-word;
+    }
+
+    @include m(align-start) {
+      justify-content: flex-start;
+    }
+
+    @include m(align-center) {
+      justify-content: center;
+    }
+
+    @include m(align-end) {
+      justify-content: end;
+    }
+
+    @include m(valign-start) {
+      align-items: flex-start;
+    }
+
+    @include m(valign-center) {
+      align-items: center;
+    }
+
+    @include m(valign-end) {
+      align-items: flex-end;
+    }
+
+    @include m(horizontal) {
+      width: $sar-form-field-label-width;
+      margin-right: $sar-form-field-label-margin-right;
+    }
+
+    @include m(vertical) {
+      margin-right: 0;
+      margin-bottom: $sar-form-field-label-margin-bottom;
+    }
+  }
+
+  @include e(star) {
+    @include universal;
+    justify-content: center;
+    align-items: flex-start;
+    color: $sar-form-field-star-color;
+
+    @include m(left) {
+      margin-right: $sar-form-field-star-gap;
+    }
+    @include m(right) {
+      margin-left: $sar-form-field-star-gap;
+    }
+  }
+
+  @include e(label-text) {
+    @include universal;
+  }
+
+  @include e(content) {
+    @include universal;
+    justify-content: center;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    @include m(vertical) {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  @include e(control) {
+    @include universal;
+  }
+
+  @include e(feedback) {
+    @include universal;
+    margin-top: $sar-form-field-feedback-margin-top;
+    font-size: $sar-form-field-feedback-font-size;
+    line-height: $sar-form-field-feedback-line-height;
+    color: $sar-form-field-feedback-color;
+
+    @include m(failed) {
+      color: $sar-form-field-feedback-failed-color;
+    }
+
+    @include m(passed) {
+      color: $sar-form-field-feedback-passed-color;
+    }
+
+    @include m(unvalidated) {
+      color: $sar-form-field-feedback-unvalidated-color;
+    }
+  }
+
+  @include e(extra) {
+    @include universal;
+    margin-top: $sar-form-field-extra-margin-top;
+    font-size: $sar-form-field-extra-font-size;
+    line-height: $sar-form-field-extra-line-height;
+    color: $sar-form-field-extra-color;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+
+  @include m(hidden) {
+    display: none;
+  }
+}
+
+@include theme(dark) {
+  @include bem(form-field) {
+    @include e(feedback) {
+      @include universal;
+      color: $sar-form-field-feedback-dark-color;
+
+      @include m(failed) {
+        color: $sar-form-field-feedback-failed-dark-color;
+      }
+
+      @include m(passed) {
+        color: $sar-form-field-feedback-passed-dark-color;
+      }
+
+      @include m(unvalidated) {
+        color: $sar-form-field-feedback-unvalidated-dark-color;
+      }
+    }
+
+    @include e(extra) {
+      color: $sar-form-field-extra-dark-color;
+    }
+  }
+}

package/dist/form/store/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Store } from './createStore';
+export declare const Context: import("react").Context<Store>;
+export default Context;

package/dist/form/store/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const Context = createContext({});
+export default Context;

package/dist/form/store/createStore.d.ts

@@ -0,0 +1,6 @@
+export type Store<S = Record<string, any>> = ReturnType<typeof createStore<S>>;
+export default function createStore<S = any>(reducer: any, preloadedState: any): {
+    getState: () => S;
+    dispatch: (action: any) => void;
+    subscribe: (listener: any) => () => void;
+};

package/dist/form/store/createStore.js

@@ -0,0 +1,28 @@
+export default function createStore(reducer, preloadedState) {
+    let currentState = preloadedState;
+    const currentReducer = reducer;
+    const currentListeners = [];
+    function getState() {
+        return currentState;
+    }
+    function dispatch(action) {
+        currentState = currentReducer(currentState, action);
+        for (const listener of currentListeners) {
+            listener(currentState);
+        }
+    }
+    function subscribe(listener) {
+        currentListeners.push(listener);
+        return () => {
+            const index = currentListeners.indexOf(listener);
+            if (index !== -1) {
+                currentListeners.splice(index, 1);
+            }
+        };
+    }
+    return {
+        getState,
+        dispatch,
+        subscribe,
+    };
+}

package/dist/form/store/useDispatch.d.ts

@@ -0,0 +1,2 @@
+import { Store } from './createStore';
+export declare const useDispatch: (externalStore?: Store) => (action: any) => void;

package/dist/form/store/useDispatch.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import Context from './Context';
+function createDispatchHook() {
+    return function useDispatch(externalStore) {
+        const store = useContext(Context);
+        const { dispatch } = externalStore || store;
+        return dispatch;
+    };
+}
+export const useDispatch = createDispatchHook();

package/dist/form/store/useSelector.d.ts

@@ -0,0 +1,7 @@
+import { Store } from './createStore';
+interface Selector<S> {
+    (state: any): S;
+}
+export declare function useSelectorWithStoreAndSubscription<S>(getState: any, subscribe: any, selector: Selector<S>): S;
+export declare const useSelector: <S>(selector: Selector<S>, externalStore?: Store) => S;
+export {};