@carefrees/form-utils-react-native 0.0.7 → 0.0.8

package/esm/formItem/index.d.ts

@@ -0,0 +1,10 @@
+import { LayoutFormItemProps } from '../layout/layout.formItem';
+import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
+    /**不进行样式渲染*/
+    noStyle?: boolean;
+}
+/**表单项*/
+export declare const FormItem: import("react").MemoExoticComponent<(props: Partial<FormItemProps>) => import("react/jsx-runtime").JSX.Element>;
+/**隐藏表单项*/
+export declare const FormHideItem: import("react").MemoExoticComponent<(props: FormItemProps) => import("react/jsx-runtime").JSX.Element>;

package/esm/formItem/index.js

@@ -0,0 +1,67 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__layout_layout_formItem_js_c84059c5__ from "../layout/layout.formItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_attr_attr_FormItem_js_9b75aef3__ from "../hooks/attr/attr.FormItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__ from "@carefrees/form-utils-react-hooks";
+const FormItemInstance = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { labelMode, noStyle, onlyRuleStyle, label, helpText, extra, errorLayout, required, showColon, colSpan, ...rest } = props;
+    const { children, ruleInstance, formItemInstance, htmlFor, validateResult } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_attr_attr_FormItem_js_9b75aef3__.useFormItemAttr)({
+        ...rest
+    });
+    if (noStyle) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.FormItemParentNameProvider, {
+        name: formItemInstance.name,
+        sort: formItemInstance.sort,
+        children: children
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.FormItemParentNameProvider, {
+        name: formItemInstance.name,
+        sort: formItemInstance.sort,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__layout_layout_formItem_js_c84059c5__.LayoutFormItem, {
+            labelMode: labelMode,
+            onlyRuleStyle: onlyRuleStyle,
+            required: required || ruleInstance?.isRequired?.(),
+            label: label,
+            helpText: helpText,
+            extra: extra,
+            errorLayout: errorLayout,
+            showColon: showColon,
+            colSpan: colSpan,
+            htmlFor: htmlFor,
+            validateResult: validateResult,
+            children: children
+        })
+    });
+});
+const FormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { name } = props;
+    if (name) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormItemInstance, {
+        ...props,
+        name: name
+    });
+    const { labelMode, onlyRuleStyle, label, helpText, extra, errorLayout, required, showColon, colSpan, children } = props;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__layout_layout_formItem_js_c84059c5__.LayoutFormItem, {
+        labelMode: labelMode,
+        onlyRuleStyle: onlyRuleStyle,
+        required: required,
+        label: label,
+        helpText: helpText,
+        extra: extra,
+        errorLayout: errorLayout,
+        showColon: showColon,
+        colSpan: colSpan,
+        children: children
+    });
+});
+const FormHideItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { name, sort, isJoinParentField } = props;
+    const { isHide } = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useRegisterFormHideItem)({
+        name,
+        sort: sort,
+        isJoinParentField
+    });
+    if (isHide) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {});
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormItemInstance, {
+        ...props
+    });
+});
+export { FormHideItem, FormItem };

package/esm/formList/index.d.ts

@@ -0,0 +1,27 @@
+import { RuleInstanceBase, FormItemInstanceBase, FormListInstanceBase } from '@carefrees/form-utils';
+import React from 'react';
+import { RegisterFormListOptions } from '@carefrees/form-utils-react-hooks';
+export interface FormListChildrenProps {
+    /**数据集合*/
+    fields: {
+        name: number;
+        key: number;
+    }[];
+    /**添加*/
+    onAdd: (initialValue?: Object) => void;
+    /**删除*/
+    onDelete: (index: number | number[]) => void;
+    /**移动*/
+    onMove: (from: number, to: number) => void;
+}
+export interface FormListProps extends RegisterFormListOptions {
+    children: (options: FormListChildrenProps, instances: {
+        ruleInstance: RuleInstanceBase;
+        formItemInstance: FormItemInstanceBase;
+        formListInstance: FormListInstanceBase;
+    }) => React.ReactNode;
+}
+/**form list 组件*/
+export declare const FormList: React.MemoExoticComponent<(props: FormListProps) => import("react/jsx-runtime").JSX.Element>;
+/**隐藏 form list item 组件*/
+export declare const FormHideList: React.MemoExoticComponent<(props: FormListProps) => import("react/jsx-runtime").JSX.Element>;

package/esm/formList/index.js

@@ -0,0 +1,37 @@
+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__carefrees_form_utils_react_hooks_1966d15b__ from "@carefrees/form-utils-react-hooks";
+const FormList = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { children, ...rest } = props;
+    const { formListInstance, ruleInstance, formItemInstance } = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useRegisterFormList)(rest);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.FormListInstanceContext.Provider, {
+        value: formListInstance,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.FormItemParentNameProvider, {
+            name: formListInstance.name,
+            sort: formListInstance.sort,
+            children: children({
+                fields: formListInstance.getFields(),
+                onAdd: formListInstance.onAdd,
+                onDelete: formListInstance.onDelete,
+                onMove: formListInstance.onMove
+            }, {
+                ruleInstance,
+                formItemInstance,
+                formListInstance
+            })
+        })
+    });
+});
+const FormHideList = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((props)=>{
+    const { name, sort, isJoinParentField } = props;
+    const { isHide } = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useRegisterFormHideItem)({
+        name,
+        sort: sort,
+        isJoinParentField
+    });
+    if (isHide) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {});
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormList, {
+        ...props
+    });
+});
+export { FormHideList, FormList };

package/esm/hooks/attr/attr.FormItem.d.ts

@@ -0,0 +1,48 @@
+import { RuleInstanceBase, FormInstanceBase, FormItemInstanceBase } from '@carefrees/form-utils';
+import { RegisterFormItemOptions } from '@carefrees/form-utils-react-hooks';
+import React from 'react';
+export interface FormItemAttrOptions extends RegisterFormItemOptions {
+    /**依赖更新项*/
+    dependencies?: string[];
+    /**通知 只用于校验规则提示 字段 */
+    noticeOnlyRuleDataField?: string[];
+    /**通知父级字段监听方法更新*/
+    isNoticeParentField?: boolean;
+    /**通知watch监听方法更新*/
+    noticeWatchField?: string[];
+    /**是否保护值(不进行表单项组件卸载重置初始值)*/
+    preserve?: boolean;
+    /**重写规则*/
+    useRules?: (ruleInstance: RuleInstanceBase, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => void;
+    /**输入框属性重写*/
+    useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
+    /**输入框属性*/
+    attrs?: any;
+    /**传递组件字段*/
+    valuePropName?: string;
+    /**取值字段(默认text)*/
+    getValuePath?: string;
+    /**自定义获取值*/
+    getValueFromEvent?: (event: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
+    /**值格式化*/
+    formatValue?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => any;
+    /**触发数据更新之后触发（用于数据联动之类的）*/
+    onAfterUpdate?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => void;
+    /**事件名称*/
+    trigger?: string;
+    /**子元素*/
+    children?: React.ReactNode;
+}
+/**表单项参数*/
+export declare const useFormItemAttr: (options: FormItemAttrOptions) => {
+    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
+    form: FormInstanceBase<any>;
+    formItemInstance: FormItemInstanceBase;
+    ruleInstance: RuleInstanceBase;
+    onChange: (event: any) => void;
+    htmlFor: string;
+    validateResult: {
+        tip: string | (string | undefined)[];
+        isInvalid: boolean;
+    };
+};

package/esm/hooks/attr/attr.FormItem.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_f42d2666__ from "@carefrees/form-utils";
+import * as __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__ from "@carefrees/form-utils-react-hooks";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const useFormItemAttr = (options)=>{
+    const { trigger = 'onChange', dependencies, noticeOnlyRuleDataField, isNoticeParentField, noticeWatchField, preserve, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, useAttrs, useRules, attrs, children, ...rest } = options;
+    const { formItemInstance, form, ruleInstance, newName } = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useRegisterFormItem)({
+        ...rest
+    });
+    formItemInstance.dependencies = dependencies;
+    formItemInstance.noticeOnlyRuleDataField = noticeOnlyRuleDataField;
+    formItemInstance.isNoticeParentField = isNoticeParentField;
+    formItemInstance.onAfterUpdate = onAfterUpdate;
+    formItemInstance.noticeWatchField = noticeWatchField;
+    formItemInstance.preserve = preserve;
+    const oldValue = form.getFieldValue(newName);
+    const onValueChange = (event)=>{
+        try {
+            let value = event;
+            const target = event?.nativeEvent;
+            if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, form, formItemInstance);
+            else if (event && target && 'object' == typeof target && getValuePath in target) value = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_f42d2666__.get)(target, getValuePath);
+            if ('function' == typeof formatValue) value = formatValue(value, form, formItemInstance, event);
+            if (oldValue !== value) {
+                form.updatedFieldValue(newName, value, 'validate');
+                formItemInstance.onAfterUpdate?.(value, form, formItemInstance, event);
+                if (Array.isArray(formItemInstance.noticeWatchField) && formItemInstance.noticeWatchField.length) form.noticeWatch(formItemInstance.noticeWatchField);
+                if (Array.isArray(formItemInstance.noticeOnlyRuleDataField) && formItemInstance.noticeOnlyRuleDataField.length) form.onlyValidate(formItemInstance.noticeOnlyRuleDataField);
+                if (formItemInstance.isNoticeParentField && formItemInstance.parentDataField) form.notice(formItemInstance.parentDataField);
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    };
+    formItemInstance.onChange = onValueChange;
+    const htmlFor = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useHtmlFor)(newName);
+    formItemInstance.htmlFor = htmlFor;
+    const control = {
+        [trigger]: onValueChange,
+        ...attrs,
+        name: newName,
+        id: htmlFor,
+        [valuePropName]: oldValue
+    };
+    const newControl = useAttrs?.(control, form, formItemInstance) || control;
+    formItemInstance.control = newControl;
+    useRules?.(ruleInstance, form, formItemInstance);
+    const validateResult = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>ruleInstance.getValidateResult(), [
+        ruleInstance.messages
+    ]);
+    return {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.isValidElement)(children) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.cloneElement)(children, newControl) : children,
+        form,
+        formItemInstance,
+        ruleInstance,
+        onChange: onValueChange,
+        htmlFor,
+        validateResult
+    };
+};
+export { useFormItemAttr };

package/esm/hooks/useAttrs.d.ts

@@ -0,0 +1,27 @@
+import { ViewProps } from 'react-native';
+export interface AttrsOptions {
+    /**列数据*/
+    colCount?: number;
+    /**规则校验失败错误提示位置*/
+    errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+    /**
+     * label显示模式
+     * @platform taro 支持 between
+     */
+    labelMode?: 'left' | 'top' | 'between' | 'hide';
+    /**是否显示label后的冒号*/
+    showColon?: boolean;
+    /**表单项 style*/
+    formItemStyle?: ViewProps['style'];
+    /**表单项 label  style*/
+    formItemLabelStyle?: ViewProps['style'];
+    /**
+     * 输入框底部边框
+     * @platform taro
+     */
+    inputBordered?: boolean;
+}
+/**公共属性 Context */
+export declare const AttrsContext: import("react").Context<AttrsOptions>;
+/**子项中获取公共属性*/
+export declare const useAttrs: () => AttrsOptions;

package/esm/hooks/useAttrs.js

@@ -0,0 +1,10 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const AttrsContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)({
+    colCount: 1,
+    errorLayout: 'left-bottom',
+    labelMode: 'top',
+    showColon: true,
+    inputBordered: true
+});
+const useAttrs = ()=>(0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(AttrsContext);
+export { AttrsContext, useAttrs };

package/esm/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+import { FormLayoutProps } from './layout';
+import { ViewProps } from 'react-native';
+export * from './formItem';
+export * from './formList';
+export * from './layout';
+export * from './layout/layout.formItem';
+export * from './hooks/attr/attr.FormItem';
+export * from '@carefrees/form-utils-react-hooks';
+export { useAttrs, AttrsOptions, AttrsContext } from './hooks/useAttrs';
+export interface FormProps<T = any> extends FormLayoutProps {
+    children?: React.ReactNode;
+    form?: FormInstanceBase;
+    style?: ViewProps['style'];
+    layoutStyle?: ViewProps['style'];
+    /**表单数据*/
+    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,42 @@
+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__layout_index_js_0ed29524__ from "./layout/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__ from "react-native";
+import * as __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__ from "@carefrees/form-utils-react-hooks";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__ from "./hooks/useAttrs.js";
+export * from "./formItem/index.js";
+export * from "./formList/index.js";
+export * from "./layout/index.js";
+export * from "./layout/layout.formItem.js";
+export * from "./hooks/attr/attr.FormItem.js";
+export * from "@carefrees/form-utils-react-hooks";
+function Form(props) {
+    const { children, form, style, formData, hideData, hideRuleData, isAutoUpdatedFormData = false, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, ...rest } = props;
+    const formInstance = (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useForm)(form);
+    (0, __WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.useRegisterForm)(formInstance, name);
+    (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.resetFormValues(formData);
+    }, [
+        isAutoUpdatedFormData,
+        formData
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__carefrees_form_utils_react_hooks_1966d15b__.FormInstanceContext.Provider, {
+        value: formInstance,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.View, {
+            style: style,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__layout_index_js_0ed29524__.FormLayout, {
+                ...rest,
+                style: layoutStyle,
+                children: children
+            })
+        })
+    });
+}
+var __webpack_exports__AttrsContext = __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__.AttrsContext;
+var __webpack_exports__AttrsOptions = __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__.AttrsOptions;
+var __webpack_exports__useAttrs = __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__.useAttrs;
+export { Form, __webpack_exports__AttrsContext as AttrsContext, __webpack_exports__AttrsOptions as AttrsOptions, __webpack_exports__useAttrs as useAttrs };

package/esm/layout/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AttrsOptions } from './../hooks/useAttrs';
+import { ViewProps } from 'react-native';
+export interface FormLayoutProps extends AttrsOptions {
+    /**标题*/
+    title?: React.ReactNode;
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**内容*/
+    children?: React.ReactNode;
+    /**是否占据整行*/
+    isAllColSpan?: boolean;
+    style?: ViewProps['style'];
+    /**头部样式*/
+    headerStyle?: ViewProps['style'];
+    /**内容样式*/
+    bodyStyle?: ViewProps['style'];
+    /**是否添加边框*/
+    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,98 @@
+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__hooks_useAttrs_js_86d21a28__ from "../hooks/useAttrs.js";
+import * as __WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__ from "react-native";
+import * as __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__ from "../styles/index.js";
+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, formItemStyle: p_formItemStyle, formItemLabelStyle: p_formItemLabelStyle } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_86d21a28__.useAttrs)();
+    const { colCount = p_colCount, title, extra, children, isAllColSpan, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemStyle = p_formItemStyle, formItemLabelStyle = p_formItemLabelStyle, bordered = false, gap } = props;
+    const propsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(props);
+    propsRef.current = props;
+    const value = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            colCount,
+            errorLayout,
+            labelMode,
+            showColon,
+            formItemStyle,
+            formItemLabelStyle
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        showColon,
+        formItemStyle,
+        formItemLabelStyle
+    ]);
+    const styleBase = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const css = {};
+        if ('string' == typeof gap) css.gap = Number(gap);
+        if ('number' == typeof gap) css.gap = gap;
+        return css;
+    }, [
+        colCount,
+        gap
+    ]);
+    const layoutStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
+            __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout"],
+            bordered && __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout.bordered"],
+            isAllColSpan && __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase.isAllColSpan,
+            style
+        ].filter(Boolean), [
+        bordered,
+        isAllColSpan,
+        style
+    ]);
+    const headStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
+            __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout-header"],
+            bordered && __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout-header.bordered"],
+            headerStyle
+        ].filter(Boolean), [
+        bordered,
+        headerStyle
+    ]);
+    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_react_native_4af9217e__.View, {
+            style: layoutStyle,
+            children: [
+                title || extra ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.View, {
+                    style: headStyle,
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.View, {
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.Text, {
+                                style: [
+                                    __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout-header-title"]
+                                ],
+                                children: title
+                            })
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.View, {
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.Text, {
+                                style: [
+                                    __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout-header-extra"]
+                                ],
+                                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_react_native_4af9217e__.View, {
+                    style: [
+                        __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase["carefrees-form-layout-body"],
+                        styleBase,
+                        bodyStyle
+                    ],
+                    children: children
+                })
+            ]
+        })
+    });
+});
+const FormLayoutRows = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_native_4af9217e__.View, {
+        ...props,
+        style: [
+            props.style,
+            __WEBPACK_EXTERNAL_MODULE__styles_index_js_2b6f3fb9__.StylesBase.isAllColSpan
+        ]
+    });
+export { FormLayout, FormLayoutRows };

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

@@ -0,0 +1,38 @@
+import { ViewProps } from 'react-native';
+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;
+    htmlFor?: string;
+    /**规则验证结果*/
+    validateResult?: {
+        tip: string | (string | undefined)[];
+        isInvalid: boolean;
+    };
+    style?: ViewProps['style'];
+    labelStyle?: ViewProps['style'];
+    /**底部边框*/
+    inputBordered?: boolean;
+}
+/**布局组件 表单项*/
+export declare const LayoutFormItem: React.MemoExoticComponent<(props: LayoutFormItemProps) => import("react/jsx-runtime").JSX.Element>;