@carefrees/form-utils-react-taro 0.0.4

package/lib/layout/index.js

@@ -0,0 +1,146 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FormLayout: ()=>FormLayout,
+    FormLayoutRows: ()=>FormLayoutRows
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const components_namespaceObject = require("@tarojs/components");
+const external_classnames_namespaceObject = require("classnames");
+var external_classnames_default = /*#__PURE__*/ __webpack_require__.n(external_classnames_namespaceObject);
+const useAttrs_js_namespaceObject = require("../hooks/useAttrs.js");
+const preCls = 'carefrees-form-layout';
+const FormLayout = /*#__PURE__*/ (0, external_react_namespaceObject.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, useAttrs_js_namespaceObject.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, external_react_namespaceObject.useRef)(props);
+    propsRef.current = props;
+    const cls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(preCls, className, {
+            'all-colspan': isAllColSpan,
+            bordered: bordered
+        }), [
+        className
+    ]);
+    const bodyCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-body`, bodyClassName), [
+        bodyClassName
+    ]);
+    const headerCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-header`, headerClassName), [
+        headerClassName
+    ]);
+    const headerTitleCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-header-title`), []);
+    const headerExtraCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-header-extra`), []);
+    const value = (0, external_react_namespaceObject.useMemo)(()=>({
+            colCount,
+            errorLayout,
+            labelMode,
+            showColon,
+            formItemClassName,
+            formItemStyle,
+            formItemLabelClassName,
+            formItemLabelStyle
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        showColon,
+        formItemClassName,
+        formItemStyle,
+        formItemLabelClassName,
+        formItemLabelStyle
+    ]);
+    const styleBase = (0, external_react_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(useAttrs_js_namespaceObject.AttrsContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.View, {
+            style: style,
+            className: cls,
+            children: [
+                title || extra ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.View, {
+                    style: headerStyle,
+                    className: headerCls,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                            className: headerTitleCls,
+                            children: title
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                            className: headerExtraCls,
+                            children: extra
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {}),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                    style: {
+                        ...styleBase,
+                        ...bodyStyle
+                    },
+                    className: bodyCls,
+                    children: children
+                })
+            ]
+        })
+    });
+});
+const FormLayoutRows = (props)=>{
+    const { className } = props;
+    const cls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(preCls, className, {
+            'all-colspan': true
+        }), [
+        className
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+        ...props,
+        className: cls
+    });
+};
+exports.FormLayout = __webpack_exports__.FormLayout;
+exports.FormLayoutRows = __webpack_exports__.FormLayoutRows;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FormLayout",
+    "FormLayoutRows"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/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/lib/layout/layout.formItem.js

@@ -0,0 +1,157 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    LayoutFormItem: ()=>LayoutFormItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const components_namespaceObject = require("@tarojs/components");
+const external_react_namespaceObject = require("react");
+const external_classnames_namespaceObject = require("classnames");
+var external_classnames_default = /*#__PURE__*/ __webpack_require__.n(external_classnames_namespaceObject);
+const useAttrs_js_namespaceObject = require("../hooks/useAttrs.js");
+const preCls = 'carefrees-form-item';
+const LayoutFormItem = /*#__PURE__*/ (0, external_react_namespaceObject.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, useAttrs_js_namespaceObject.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, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(preCls, className, formItemClassName, {
+            'dx-invalid': isInvalid
+        }), [
+        isInvalid
+    ]);
+    const containerCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-container`, {
+            [`${labelMode}`]: !!labelMode
+        }), [
+        labelMode
+    ]);
+    const labelCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-label`, {
+            required: required,
+            'show-colon': showColon && ('left' === labelMode || 'between' === labelMode)
+        }), [
+        labelMode,
+        required,
+        showColon
+    ]);
+    const labelWarpCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-label-warp`, labelClassName, formItemLabelClassName), [
+        labelClassName,
+        formItemLabelClassName
+    ]);
+    const inputCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-body-input`, {
+            'input-bordered': inputBordered
+        }), [
+        inputBordered
+    ]);
+    const errorCls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(`${preCls}-body-error`, {
+            [_errorLayout]: !!_errorLayout
+        }), [
+        _errorLayout
+    ]);
+    const _isLabel = (0, external_react_namespaceObject.useMemo)(()=>label && 'hide' !== labelMode, [
+        label,
+        labelMode
+    ]);
+    const styleBase = (0, external_react_namespaceObject.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, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.View, {
+        style: {
+            ...formItemStyle,
+            ...styleBase,
+            ...style
+        },
+        className: cls,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.View, {
+                className: containerCls,
+                children: [
+                    _isLabel ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                        style: {
+                            ...formItemLabelStyle,
+                            ...labelStyle
+                        },
+                        className: labelWarpCls,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.Label, {
+                            for: htmlFor,
+                            className: labelCls,
+                            children: label
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {}),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.View, {
+                        className: `${preCls}-body`,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                                className: inputCls,
+                                children: children
+                            }),
+                            helpText ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                                className: `${preCls}-body-help`,
+                                children: helpText
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {}),
+                            isInvalid ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                                className: errorCls,
+                                children: tip
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {})
+                        ]
+                    })
+                ]
+            }),
+            extra ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.View, {
+                className: `${preCls}-extra`,
+                children: extra
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {})
+        ]
+    });
+});
+exports.LayoutFormItem = __webpack_exports__.LayoutFormItem;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "LayoutFormItem"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/styles/index.css

@@ -0,0 +1,200 @@
+.carefrees-form {
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 14px;
+}
+
+.carefrees-form-layout {
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: 100%;
+  padding-bottom: 8px;
+  position: relative;
+}
+
+.carefrees-form-layout.all-colspan {
+  grid-column: 1 / -1;
+}
+
+.carefrees-form-layout.bordered {
+  border: 1px solid #e0e0e0;
+}
+
+.carefrees-form-layout.bordered .carefrees-form-layout-header {
+  padding-inline: 8px;
+}
+
+.carefrees-form-layout-header {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e0e0e0;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-block-end: 4px;
+  padding-inline: 2px;
+  display: flex;
+}
+
+.carefrees-form-layout-header-title {
+  color: #1d2129;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.carefrees-form-layout-header-extra {
+  color: #1d2129;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.carefrees-form-layout-body {
+  box-sizing: border-box;
+  grid-template-columns: repeat(1, auto);
+  gap: 2px;
+  width: 100%;
+  padding-left: 2px;
+  padding-right: 2px;
+  display: grid;
+}
+
+.carefrees-form-item {
+  box-sizing: border-box;
+  color: #000000e0;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 8px;
+  font-size: 14px;
+  display: flex;
+}
+
+.carefrees-form-item-container {
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  height: 100%;
+  display: flex;
+}
+
+.carefrees-form-item-container.left {
+  text-align: left;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.carefrees-form-item-container.left .carefrees-form-item-label {
+  justify-content: flex-end;
+}
+
+.carefrees-form-item-container.between {
+  text-align: left;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.carefrees-form-item-container.between .carefrees-form-item-body, .carefrees-form-item-container.between .carefrees-form-item-body-input {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+.carefrees-form-item-label-warp {
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-label {
+  box-sizing: border-box;
+  color: #000000e0;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 1.4rem;
+  font-size: 14px;
+  display: flex;
+  position: relative;
+}
+
+.carefrees-form-item-label.show-colon:after {
+  content: ":";
+  text-align: center;
+  box-sizing: border-box;
+  margin: 0;
+  margin-inline: 2px;
+  display: inline-block;
+}
+
+.carefrees-form-item-label.required:before {
+  content: "*";
+  color: red;
+  box-sizing: border-box;
+  margin-inline-end: 4px;
+  display: inline-block;
+}
+
+.carefrees-form-item-body {
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 4px;
+  display: flex;
+  position: relative;
+}
+
+.carefrees-form-item-body-input {
+  box-sizing: border-box;
+  flex-direction: row;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.carefrees-form-item-body-input.input-bordered {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.carefrees-form-item-body-help {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.carefrees-form-item-body-error {
+  color: red;
+  box-sizing: border-box;
+  z-index: 10;
+  pointer-events: none;
+  flex-direction: row;
+  justify-content: start;
+  width: 100%;
+  padding-top: 2px;
+  font-size: 12px;
+  display: flex;
+  position: absolute;
+  inset: auto 0 -16px;
+}
+
+.carefrees-form-item-body-error.right-bottom {
+  justify-content: flex-end;
+  inset: auto 0 -16px;
+}
+
+.carefrees-form-item-body-error.top-left {
+  justify-content: start;
+  inset: -16px 0 auto;
+}
+
+.carefrees-form-item-body-error.top-right {
+  justify-content: flex-end;
+  inset: -16px 0 auto;
+}
+
+.carefrees-form-item-extra {
+  box-sizing: border-box;
+}
+

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@carefrees/form-utils-react-taro",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "taro react 表单组件",
+  "homepage": "https://github.com/SunLxy/carefrees-form-utils",
+  "version": "0.0.4",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build",
+    "watch": "carefrees-rslib build --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "lib",
+    "esm"
+  ],
+  "dependencies": {
+    "@carefrees/form-utils": "^0.0.4",
+    "classnames": "2.5.1"
+  },
+  "devDependencies": {
+    "@tarojs/components": "4.0.5",
+    "@types/react": "18.2.21",
+    "react": "^18.2.0"
+  }
+}

package/src/formItem/index.tsx

@@ -0,0 +1,103 @@
+import { LayoutFormItem, LayoutFormItemProps } from './../layout/layout.formItem';
+import { useFormItemAttr, FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { FormItemParentNameProvider } from '../hooks/useFormItemParentName';
+import { useRegisterFormHideItem } from '../hooks/register/register.FormHideItem';
+import React, { Fragment, memo } from 'react';
+
+export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
+  /**不进行样式渲染*/
+  noStyle?: boolean;
+}
+
+/**表单项基础实例*/
+const FormItemInstance = memo((props: FormItemProps) => {
+  const {
+    labelMode,
+    noStyle,
+    onlyRuleStyle,
+    label,
+    helpText,
+    extra,
+    errorLayout,
+    required,
+    showColon,
+    colSpan,
+    rowSpan,
+    ...rest
+  } = props;
+  const { children, ruleInstance, formItemInstance, htmlFor, validateResult } = useFormItemAttr({ ...rest });
+  if (noStyle) {
+    return (
+      <FormItemParentNameProvider name={formItemInstance.name} sort={formItemInstance.sort}>
+        {children}
+      </FormItemParentNameProvider>
+    );
+  }
+  return (
+    <FormItemParentNameProvider name={formItemInstance.name} sort={formItemInstance.sort}>
+      <LayoutFormItem
+        labelMode={labelMode}
+        onlyRuleStyle={onlyRuleStyle}
+        required={required || ruleInstance?.isRequired?.()}
+        label={label}
+        helpText={helpText}
+        extra={extra}
+        errorLayout={errorLayout}
+        showColon={showColon}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        htmlFor={htmlFor}
+        validateResult={validateResult}
+      >
+        {children}
+      </LayoutFormItem>
+    </FormItemParentNameProvider>
+  );
+});
+
+/**表单项*/
+export const FormItem = memo((props: Partial<FormItemProps>) => {
+  const { name } = props;
+  if (name) {
+    return <FormItemInstance {...props} name={name} />;
+  }
+  const {
+    labelMode,
+    onlyRuleStyle,
+    label,
+    helpText,
+    extra,
+    errorLayout,
+    required,
+    showColon,
+    colSpan,
+    rowSpan,
+    children,
+  } = props;
+  return (
+    <LayoutFormItem
+      labelMode={labelMode}
+      onlyRuleStyle={onlyRuleStyle}
+      required={required}
+      label={label}
+      helpText={helpText}
+      extra={extra}
+      errorLayout={errorLayout}
+      showColon={showColon}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+    >
+      {children}
+    </LayoutFormItem>
+  );
+});
+
+/**隐藏表单项*/
+export const FormHideItem = memo((props: FormItemProps) => {
+  const { name, sort, isJoinParentField } = props;
+  const { isHide } = useRegisterFormHideItem({ name, sort: sort, isJoinParentField });
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FormItemInstance {...props} />;
+});