@carefrees/form-utils-react-taro 0.0.4

package/esm/hooks/useHtmlFor.js

@@ -0,0 +1,10 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+let localId = 0;
+const useHtmlFor = (suffix)=>{
+    const count = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(localId++);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>`carefree-form-item_${count.current.toString(32)}_${suffix}`, [
+        count.current,
+        suffix
+    ]);
+};
+export { useHtmlFor };

package/esm/hooks/useMultipleForm.d.ts

@@ -0,0 +1,13 @@
+import { MultipleInstanceBase } from '@carefrees/form-utils';
+/**多表单收集 Context */
+export declare const MultipleFormInstanceContext: import("react").Context<MultipleInstanceBase>;
+/**子项中获取 多表单收集 实例*/
+export declare const useMultipleFormInstance: () => MultipleInstanceBase;
+/**初始化 多表单收集 实例*/
+export declare const useMultipleForm: (multipleForm?: MultipleInstanceBase) => MultipleInstanceBase;
+export interface MultipleFormProviderProps {
+    children: React.ReactNode;
+    multipleForm?: MultipleInstanceBase;
+}
+/**多表单收集 Provider */
+export declare const MultipleFormProvider: (props: MultipleFormProviderProps) => import("react").FunctionComponentElement<import("react").ProviderProps<MultipleInstanceBase>>;

package/esm/hooks/useMultipleForm.js

@@ -0,0 +1,19 @@
+import * as __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_f42d2666__ from "@carefrees/form-utils";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const MultipleFormInstanceContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)(new __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_f42d2666__.MultipleInstanceBase());
+const useMultipleFormInstance = ()=>(0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(MultipleFormInstanceContext);
+const useMultipleForm = (multipleForm)=>{
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)();
+    if (!ref.current) if (multipleForm) ref.current = multipleForm;
+    else ref.current = new __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_f42d2666__.MultipleInstanceBase();
+    return ref.current;
+};
+const MultipleFormProvider = (props)=>{
+    const { children, multipleForm } = props;
+    const multipleFormInstance = useMultipleForm(multipleForm);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.createElement)(MultipleFormInstanceContext.Provider, {
+        value: multipleFormInstance,
+        children
+    });
+};
+export { MultipleFormInstanceContext, MultipleFormProvider, useMultipleForm, useMultipleFormInstance };

package/esm/hooks/useUpdate.d.ts

@@ -0,0 +1,2 @@
+/**更新页面状态*/
+export declare const useUpdate: () => import("react").MutableRefObject<Function>;

package/esm/hooks/useUpdate.js

@@ -0,0 +1,10 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const useUpdate = ()=>{
+    const [, _update] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({});
+    const refUpdate = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(()=>void 0);
+    refUpdate.current = ()=>{
+        _update({});
+    };
+    return refUpdate;
+};
+export { useUpdate };

package/esm/hooks/useWatch.d.ts

@@ -0,0 +1,19 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+export declare class WatchInstanceBase {
+    /**监听字段*/
+    name: string;
+    /**表单实例*/
+    form: FormInstanceBase;
+    /**老值*/
+    oldValue: any;
+    /**更新值*/
+    dispatch: (value: any) => void;
+    /**回调*/
+    callBack?: (value: any, form: FormInstanceBase) => void;
+    /**更新*/
+    updated: () => void;
+}
+/**
+ * 字段监听
+ */
+export declare const useWatch: (name: string, form: FormInstanceBase, callBack?: (value: any, form: FormInstanceBase) => void) => [any, FormInstanceBase, WatchInstanceBase];

package/esm/hooks/useWatch.js

@@ -0,0 +1,41 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__useForm_js_e31b00cd__ from "./useForm.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useFormItem_js_ee04de55__ from "./useFormItem.js";
+class WatchInstanceBase {
+    name;
+    form;
+    oldValue;
+    dispatch;
+    callBack;
+    updated = ()=>{
+        const newValue = this.form.getFieldValue(this.name);
+        if (this.oldValue === newValue) return;
+        if (this.callBack) this.callBack(newValue, this.form);
+        else this.dispatch(newValue);
+    };
+}
+const useWatch = (name, form, callBack)=>{
+    const formInstance = form || (0, __WEBPACK_EXTERNAL_MODULE__useForm_js_e31b00cd__.useFormInstance)();
+    const [oldValue, setValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(formInstance.getFieldValue(name));
+    const watch = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(new WatchInstanceBase()).current;
+    watch.name = name;
+    watch.oldValue = oldValue;
+    watch.dispatch = setValue;
+    watch.callBack = callBack;
+    watch.form = formInstance;
+    const formItemInstance = (0, __WEBPACK_EXTERNAL_MODULE__useFormItem_js_ee04de55__.useFormItem)();
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>formItemInstance.ctor(name), []);
+    formItemInstance.instance = formInstance;
+    formItemInstance.isWatch = true;
+    formItemInstance.updated = watch.updated;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const unMount = formInstance.registerFormItem(formItemInstance);
+        return ()=>unMount();
+    }, []);
+    return [
+        oldValue,
+        formInstance,
+        watch
+    ];
+};
+export { WatchInstanceBase, useWatch };

package/esm/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+import { FormLayoutProps } from './layout';
+import './styles/index.css';
+export * from './formItem';
+export * from './formList';
+export * from './layout';
+export * from './layout/layout.formItem';
+export * from './hooks/useAttrs';
+export * from './hooks/useForm';
+export * from './hooks/useFormItem';
+export * from './hooks/useFormItemParentName';
+export * from './hooks/useFormList';
+export * from './hooks/useHtmlFor';
+export * from './hooks/useMultipleForm';
+export * from './hooks/useWatch';
+export * from './hooks/attr/attr.FormItem';
+export * from './hooks/register/register.FormHideItem';
+export * from './hooks/register/register.FormItem';
+export * from './hooks/register/register.FormList';
+export * from './hooks/register/register.form';
+export interface FormProps<T = any> extends FormLayoutProps {
+    children?: React.ReactNode;
+    form?: FormInstanceBase;
+    style?: React.CSSProperties;
+    className?: string;
+    layoutClassName?: string;
+    layoutStyle?: React.CSSProperties;
+    /**表单数据*/
+    formData?: any;
+    /**值更新触发*/
+    onValuesChange?: (changedValues: Partial<T>, values: T) => void;
+    /**提交保存 验证成功*/
+    onFinish?: (values: T) => void;
+    /**提交保存 验证失败*/
+    onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+    /**隐藏表单项初始值*/
+    hideData?: Record<string, boolean>;
+    /**表单名称*/
+    name?: string;
+    /**隐藏规则校验*/
+    hideRuleData?: Record<string, boolean>;
+    /**自动重置更新formData数据*/
+    isAutoUpdatedFormData?: boolean;
+}
+export declare function Form<T = any>(props: FormProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/index.js

@@ -0,0 +1,61 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
+import * as __WEBPACK_EXTERNAL_MODULE__layout_index_js_0ed29524__ from "./layout/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useForm_js_204ed681__ from "./hooks/useForm.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_register_register_form_js_792e1382__ from "./hooks/register/register.form.js";
+import * as __WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__ from "@tarojs/components";
+import "./styles/index.css";
+export * from "./formItem/index.js";
+export * from "./formList/index.js";
+export * from "./layout/index.js";
+export * from "./layout/layout.formItem.js";
+export * from "./hooks/useAttrs.js";
+export * from "./hooks/useForm.js";
+export * from "./hooks/useFormItem.js";
+export * from "./hooks/useFormItemParentName.js";
+export * from "./hooks/useFormList.js";
+export * from "./hooks/useHtmlFor.js";
+export * from "./hooks/useMultipleForm.js";
+export * from "./hooks/useWatch.js";
+export * from "./hooks/attr/attr.FormItem.js";
+export * from "./hooks/register/register.FormHideItem.js";
+export * from "./hooks/register/register.FormItem.js";
+export * from "./hooks/register/register.FormList.js";
+export * from "./hooks/register/register.form.js";
+function Form(props) {
+    const { children, form, style, className, formData, hideData, hideRuleData, isAutoUpdatedFormData = false, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, layoutClassName, ...rest } = props;
+    const formInstance = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useForm_js_204ed681__.useForm)(form);
+    (0, __WEBPACK_EXTERNAL_MODULE__hooks_register_register_form_js_792e1382__.useRegisterForm)(formInstance, name);
+    const cls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])('carefrees-form', className), []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>formInstance.ctor(formData, hideData, hideRuleData), []);
+    formInstance.onFinish = onFinish;
+    formInstance.onValuesChange = onValuesChange;
+    formInstance.onFinishFailed = onFinishFailed;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (isAutoUpdatedFormData) formInstance.resetFieldValue(formData);
+    }, [
+        isAutoUpdatedFormData,
+        formData
+    ]);
+    const onSubmit = (event)=>{
+        event?.preventDefault?.();
+        event?.stopPropagation?.();
+        formInstance.submit();
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hooks_useForm_js_204ed681__.FormInstanceContext.Provider, {
+        value: formInstance,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.Form, {
+            className: cls,
+            style: style,
+            onSubmit: onSubmit,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__layout_index_js_0ed29524__.FormLayout, {
+                ...rest,
+                className: layoutClassName,
+                style: layoutStyle,
+                children: children
+            })
+        })
+    });
+}
+export { Form };

package/esm/layout/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ViewProps } from '@tarojs/components';
+import { AttrsOptions } from '../hooks/useAttrs';
+export interface FormLayoutProps extends AttrsOptions {
+    /**标题*/
+    title?: React.ReactNode;
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**内容*/
+    children?: React.ReactNode;
+    /**是否占据整行*/
+    isAllColSpan?: boolean;
+    className?: string;
+    /**头部ClassName*/
+    headerClassName?: string;
+    /**内容ClassName*/
+    bodyClassName?: string;
+    style?: React.CSSProperties;
+    /**头部样式*/
+    headerStyle?: React.CSSProperties;
+    /**内容样式*/
+    bodyStyle?: React.CSSProperties;
+    /**是否添加边框*/
+    bordered?: boolean;
+    /**列数据*/
+    colCount?: number;
+    /**
+     * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+     */
+    gap?: string | number;
+}
+/**布局组件*/
+export declare const FormLayout: React.MemoExoticComponent<(props: FormLayoutProps) => import("react/jsx-runtime").JSX.Element>;
+/**布局组件 占据一整行*/
+export declare const FormLayoutRows: (props: ViewProps) => import("react/jsx-runtime").JSX.Element;

package/esm/layout/index.js

@@ -0,0 +1,99 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__ from "@tarojs/components";
+import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__ from "../hooks/useAttrs.js";
+const preCls = 'carefrees-form-layout';
+const FormLayout = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemClassName: p_formItemClassName, formItemStyle: p_formItemStyle, formItemLabelClassName: p_formItemLabelClassName, formItemLabelStyle: p_formItemLabelStyle } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__.useAttrs)();
+    const { colCount = p_colCount, title, extra, children, isAllColSpan, className, headerClassName, bodyClassName, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemClassName = p_formItemClassName, formItemStyle = p_formItemStyle, formItemLabelClassName = p_formItemLabelClassName, formItemLabelStyle = p_formItemLabelStyle, bordered = false, gap } = props;
+    const propsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(props);
+    propsRef.current = props;
+    const cls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(preCls, className, {
+            'all-colspan': isAllColSpan,
+            bordered: bordered
+        }), [
+        className
+    ]);
+    const bodyCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-body`, bodyClassName), [
+        bodyClassName
+    ]);
+    const headerCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-header`, headerClassName), [
+        headerClassName
+    ]);
+    const headerTitleCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-header-title`), []);
+    const headerExtraCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-header-extra`), []);
+    const value = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            colCount,
+            errorLayout,
+            labelMode,
+            showColon,
+            formItemClassName,
+            formItemStyle,
+            formItemLabelClassName,
+            formItemLabelStyle
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        showColon,
+        formItemClassName,
+        formItemStyle,
+        formItemLabelClassName,
+        formItemLabelStyle
+    ]);
+    const styleBase = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const css = {};
+        if ('string' == typeof gap) css.gap = gap;
+        if ('number' == typeof gap) css.gap = `${gap}px`;
+        if (colCount) css.gridTemplateColumns = `repeat(${colCount}, auto)`;
+        return css;
+    }, [
+        colCount,
+        gap
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__.AttrsContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+            style: style,
+            className: cls,
+            children: [
+                title || extra ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                    style: headerStyle,
+                    className: headerCls,
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                            className: headerTitleCls,
+                            children: title
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                            className: headerExtraCls,
+                            children: extra
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                    style: {
+                        ...styleBase,
+                        ...bodyStyle
+                    },
+                    className: bodyCls,
+                    children: children
+                })
+            ]
+        })
+    });
+});
+const FormLayoutRows = (props)=>{
+    const { className } = props;
+    const cls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(preCls, className, {
+            'all-colspan': true
+        }), [
+        className
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+        ...props,
+        className: cls
+    });
+};
+export { FormLayout, FormLayoutRows };

package/esm/layout/layout.formItem.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface LayoutFormItemProps {
+    /**规则校验失败错误提示位置*/
+    errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+    /**必填样式*/
+    required?: boolean;
+    /**label显示模式*/
+    labelMode?: 'left' | 'top' | 'between' | 'hide';
+    /**内容*/
+    children?: React.ReactNode;
+    /**只进行规则样式*/
+    onlyRuleStyle?: boolean;
+    label?: React.ReactNode;
+    /**底部提示内容*/
+    helpText?: React.ReactNode;
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**是否显示label后的冒号*/
+    showColon?: boolean;
+    /**
+     * 表单项占据列数
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * 表单项占据行数
+     * @default 1
+     */
+    rowSpan?: number;
+    htmlFor?: string;
+    /**规则验证结果*/
+    validateResult?: {
+        tip: string | (string | undefined)[];
+        isInvalid: boolean;
+    };
+    style?: React.CSSProperties;
+    className?: string;
+    labelStyle?: React.CSSProperties;
+    labelClassName?: string;
+    /**底部边框*/
+    inputBordered?: boolean;
+}
+/**布局组件 表单项*/
+export declare const LayoutFormItem: React.MemoExoticComponent<(props: LayoutFormItemProps) => import("react/jsx-runtime").JSX.Element>;

package/esm/layout/layout.formItem.js

@@ -0,0 +1,113 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__ from "@tarojs/components";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__ from "../hooks/useAttrs.js";
+const preCls = 'carefrees-form-item';
+const LayoutFormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { formItemClassName, formItemLabelClassName, formItemLabelStyle, formItemStyle, labelMode: p_labelMode = 'top', errorLayout: p_errorLayout = 'left-bottom', showColon: p_showColon = true, colCount = 1, inputBordered: p_inputBordered = true } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__.useAttrs)();
+    const { children, labelMode = p_labelMode, onlyRuleStyle, label, helpText, extra, showColon = p_showColon, colSpan = 1, rowSpan = 1, validateResult, htmlFor, required, errorLayout = p_errorLayout, style, className, labelClassName, labelStyle, inputBordered = p_inputBordered } = props;
+    const tip = validateResult?.tip;
+    const isInvalid = !!validateResult?.isInvalid;
+    const _errorLayout = 'between' === labelMode ? 'right-bottom' : errorLayout;
+    const cls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(preCls, className, formItemClassName, {
+            'dx-invalid': isInvalid
+        }), [
+        isInvalid
+    ]);
+    const containerCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-container`, {
+            [`${labelMode}`]: !!labelMode
+        }), [
+        labelMode
+    ]);
+    const labelCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-label`, {
+            required: required,
+            'show-colon': showColon && ('left' === labelMode || 'between' === labelMode)
+        }), [
+        labelMode,
+        required,
+        showColon
+    ]);
+    const labelWarpCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-label-warp`, labelClassName, formItemLabelClassName), [
+        labelClassName,
+        formItemLabelClassName
+    ]);
+    const inputCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-body-input`, {
+            'input-bordered': inputBordered
+        }), [
+        inputBordered
+    ]);
+    const errorCls = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(`${preCls}-body-error`, {
+            [_errorLayout]: !!_errorLayout
+        }), [
+        _errorLayout
+    ]);
+    const _isLabel = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>label && 'hide' !== labelMode, [
+        label,
+        labelMode
+    ]);
+    const styleBase = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const css = {};
+        if (onlyRuleStyle) css.padding = '0px';
+        if (colSpan) {
+            const end = colCount > colSpan ? colSpan : colCount;
+            css.gridColumnEnd = `span ${end}`;
+        }
+        if (rowSpan) css.gridRowEnd = `span ${rowSpan}`;
+        return css;
+    }, [
+        onlyRuleStyle,
+        colSpan,
+        rowSpan,
+        colCount
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+        style: {
+            ...formItemStyle,
+            ...styleBase,
+            ...style
+        },
+        className: cls,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                className: containerCls,
+                children: [
+                    _isLabel ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                        style: {
+                            ...formItemLabelStyle,
+                            ...labelStyle
+                        },
+                        className: labelWarpCls,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.Label, {
+                            for: htmlFor,
+                            className: labelCls,
+                            children: label
+                        })
+                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {}),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                        className: `${preCls}-body`,
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                                className: inputCls,
+                                children: children
+                            }),
+                            helpText ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                                className: `${preCls}-body-help`,
+                                children: helpText
+                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {}),
+                            isInvalid ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                                className: errorCls,
+                                children: tip
+                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {})
+                        ]
+                    })
+                ]
+            }),
+            extra ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__tarojs_components_865ae511__.View, {
+                className: `${preCls}-extra`,
+                children: extra
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {})
+        ]
+    });
+});
+export { LayoutFormItem };