@schema-render/form-render-react/dist/esm/FormRender.js

Out-of-the-box form rendering library based on Core and Antd.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Core, { utils } from "@schema-render/core-react";
import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
import Actions from "./components/Actions";
import { ACTIONS_RENDER_MODE, FORM_RENDER_DEFAULT_PROPS } from "./constants";
import FormRenderContext from "./FormRenderContext";
import useActions from "./hooks/useActions";
import useItemLayout from "./hooks/useItemLayout";
import useSchema from "./hooks/useSchema";
import * as styles from "./index.style";
import zh_CN from "./locale/zh_CN";
import renderers from "./renderers/index";
import { calcActionsMarginLeft } from "./utils";
const FormRender = (formRenderProps, ref)=>{
    const props = {
        ...FORM_RENDER_DEFAULT_PROPS,
        ...formRenderProps
    };
    const coreRef = useRef(null);
    // 暴露 Open API
    useImperativeHandle(ref, ()=>coreRef.current);
    // 渲染器集合处理
    const innerRenderers = useMemo(()=>({
            ...renderers,
            ...props.renderers
        }), [
        props.renderers
    ]);
    // 国际化处理
    const locale = useMemo(()=>({
            ...zh_CN,
            ...props.locale
        }), [
        props.locale
    ]);
    // 表单项布局结构处理
    const ItemLayout = useItemLayout(props);
    // 操作行为事件封装
    const { handleFormSubmit, handleSubmit, handleReset, actionsLoading, isLoading } = useActions({
        props,
        coreRef
    });
    // 处理 Schema
    const schema = useSchema(utils.pick(props, 'schema', 'actionsRestSchema', 'actionsRenderMode'));
    // FormRender 上下文数据
    const formRenderCtx = {
        ...utils.pick(props, 'labelWidth', 'labelGap', 'labelColon', 'labelRender', 'layoutColumnGap', 'layoutRowGap', 'actions', 'registerActions', 'readonlyPlaceholder', 'submitText', 'resetText'),
        locale,
        actionsLoading,
        handleSubmit,
        handleReset
    };
    // 全局禁用态处理
    const disabled = props.disableFormOnActionLoading ? props.disabled || isLoading : props.disabled;
    return /*#__PURE__*/ _jsx(FormRenderContext.Provider, {
        value: formRenderCtx,
        children: /*#__PURE__*/ _jsxs("form", {
            onSubmit: handleFormSubmit,
            className: utils.classNames(props.rootClassName, styles.formRender),
            style: props.rootStyle,
            children: [
                /*#__PURE__*/ _jsx(Core, {
                    ...props,
                    ref: coreRef,
                    schema: schema,
                    locale: locale,
                    renderers: innerRenderers,
                    itemLayout: ItemLayout,
                    disabled: disabled
                }),
                props.actionsRenderMode === ACTIONS_RENDER_MODE.normal && /*#__PURE__*/ _jsx(Actions, {
                    disabled: disabled,
                    className: utils.classNamesWithPrefix(props.prefixCls, 'form-actions'),
                    style: {
                        marginTop: props.layoutRowGap,
                        marginLeft: calcActionsMarginLeft(props)
                    }
                })
            ]
        })
    });
};
export default /*#__PURE__*/ forwardRef(FormRender);