@carefrees/form-utils-react-native 0.0.7

package/README.md

@@ -0,0 +1,7 @@
+# React Native
+
+## 安装
+
+```bash
+npm install @carefrees/form-utils-react-native # yarn add @carefrees/form-utils-react-native # pnpm add @carefrees/form-utils-react-native
+```

package/package.json

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

package/src/formItem/index.tsx

@@ -0,0 +1,102 @@
+import { LayoutFormItem, LayoutFormItemProps } from '../layout/layout.formItem';
+import { useFormItemAttr, FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { Fragment, memo } from 'react';
+import { useRegisterFormHideItem, FormItemParentNameProvider } from '@carefrees/form-utils-react-hooks';
+
+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} />;
+});

package/src/formList/index.tsx

@@ -0,0 +1,62 @@
+import { RuleInstanceBase, FormItemInstanceBase, FormListInstanceBase } from '@carefrees/form-utils';
+import React, { Fragment, memo } from 'react';
+import {
+  useRegisterFormHideItem,
+  FormItemParentNameProvider,
+  FormListInstanceContext,
+  useRegisterFormList,
+  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 const FormList = memo((props: FormListProps) => {
+  const { children, ...rest } = props;
+  const { formListInstance, ruleInstance, formItemInstance } = useRegisterFormList(rest);
+  return (
+    <FormListInstanceContext.Provider value={formListInstance}>
+      <FormItemParentNameProvider name={formListInstance.name} sort={formListInstance.sort}>
+        {children(
+          {
+            fields: formListInstance.getFields(),
+            onAdd: formListInstance.onAdd,
+            onDelete: formListInstance.onDelete,
+            onMove: formListInstance.onMove,
+          },
+          { ruleInstance, formItemInstance, formListInstance },
+        )}
+      </FormItemParentNameProvider>
+    </FormListInstanceContext.Provider>
+  );
+});
+
+/**隐藏 form list item 组件*/
+export const FormHideList = memo((props: FormListProps) => {
+  const { name, sort, isJoinParentField } = props;
+  const { isHide } = useRegisterFormHideItem({ name, sort: sort, isJoinParentField });
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FormList {...props} />;
+});

package/src/hooks/attr/attr.FormItem.tsx

@@ -0,0 +1,131 @@
+import { RuleInstanceBase, FormInstanceBase, FormItemInstanceBase, get } from '@carefrees/form-utils';
+import { useRegisterFormItem, RegisterFormItemOptions, useHtmlFor } from '@carefrees/form-utils-react-hooks';
+import React, { cloneElement, isValidElement, useMemo } 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 const useFormItemAttr = (options: FormItemAttrOptions) => {
+  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 } = 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: any) => {
+    try {
+      let value = event;
+      const target = event?.nativeEvent;
+      // event.nativeEvent.text
+      if (typeof getValueFromEvent === 'function') {
+        value = getValueFromEvent(event, form, formItemInstance);
+      } else if (event && target && typeof target === 'object' && getValuePath in target) {
+        value = get(target, getValuePath);
+      }
+      if (typeof formatValue === 'function') {
+        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;
+
+  // useHtmlFor
+  const htmlFor = useHtmlFor(newName);
+  formItemInstance.htmlFor = htmlFor;
+
+  const control: any = {
+    [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 = useMemo(() => ruleInstance.getValidateResult(), [ruleInstance.messages]);
+
+  return {
+    children: isValidElement(children) ? cloneElement(children, newControl) : children,
+    form,
+    formItemInstance,
+    ruleInstance,
+    onChange: onValueChange,
+    htmlFor,
+    validateResult,
+  };
+};

package/src/hooks/useAttrs.ts

@@ -0,0 +1,42 @@
+/**公共属性*/
+import { createContext, useContext } from 'react';
+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;
+  /**表单项 className*/
+  formItemClassName?: string;
+  /**表单项 style*/
+  formItemStyle?: ViewProps['style'];
+  /**表单项 label  className*/
+  formItemLabelClassName?: string;
+  /**表单项 label  style*/
+  formItemLabelStyle?: ViewProps['style'];
+  /**
+   * 输入框底部边框
+   * @platform taro
+   */
+  inputBordered?: boolean;
+}
+
+/**公共属性 Context */
+export const AttrsContext = createContext<AttrsOptions>({
+  colCount: 1,
+  errorLayout: 'left-bottom',
+  labelMode: 'top',
+  showColon: true,
+  inputBordered: true,
+});
+
+/**子项中获取公共属性*/
+export const useAttrs = () => useContext(AttrsContext);

package/src/index.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo, useEffect } from 'react';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+import { FormLayout, FormLayoutProps } from './layout';
+import { ViewProps, View } from 'react-native';
+import { useRegisterForm, useForm, FormInstanceContext } from '@carefrees/form-utils-react-hooks';
+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'];
+  className?: string;
+  layoutClassName?: string;
+  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 function Form<T = any>(props: FormProps<T>) {
+  const {
+    children,
+    form,
+    style,
+    className,
+    formData,
+    hideData,
+    hideRuleData,
+    isAutoUpdatedFormData = false,
+    name,
+    onFinish,
+    onFinishFailed,
+    onValuesChange,
+    layoutStyle,
+    layoutClassName,
+    ...rest
+  } = props;
+  const formInstance = useForm(form);
+  useRegisterForm(formInstance, name);
+  useMemo(() => formInstance.ctor(formData, hideData, hideRuleData), []);
+
+  formInstance.onFinish = onFinish;
+  formInstance.onValuesChange = onValuesChange;
+  formInstance.onFinishFailed = onFinishFailed;
+
+  useEffect(() => {
+    if (isAutoUpdatedFormData) {
+      formInstance.resetFormValues(formData);
+    }
+  }, [isAutoUpdatedFormData, formData]);
+
+  return (
+    <FormInstanceContext.Provider value={formInstance}>
+      <View style={style}>
+        <FormLayout {...rest} className={layoutClassName} style={layoutStyle}>
+          {children}
+        </FormLayout>
+      </View>
+    </FormInstanceContext.Provider>
+  );
+}

package/src/layout/index.tsx

@@ -0,0 +1,146 @@
+import React, { Fragment, useMemo, useRef, memo } from 'react';
+import { AttrsOptions, useAttrs, AttrsContext } from './../hooks/useAttrs';
+import { ViewProps, View, Text } from 'react-native';
+import { StylesBase } from '../styles';
+
+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?: ViewProps['style'];
+  /**头部样式*/
+  headerStyle?: ViewProps['style'];
+  /**内容样式*/
+  bodyStyle?: ViewProps['style'];
+  /**是否添加边框*/
+  bordered?: boolean;
+  /**列数据*/
+  colCount?: number;
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+}
+
+/**布局组件*/
+export const FormLayout = memo((props: FormLayoutProps) => {
+  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,
+  } = 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 = useRef(props);
+  propsRef.current = props;
+
+  const value = useMemo(() => {
+    return {
+      colCount,
+      errorLayout,
+      labelMode,
+      showColon,
+      formItemClassName,
+      formItemStyle,
+      formItemLabelClassName,
+      formItemLabelStyle,
+    };
+  }, [
+    colCount,
+    errorLayout,
+    labelMode,
+    showColon,
+    formItemClassName,
+    formItemStyle,
+    formItemLabelClassName,
+    formItemLabelStyle,
+  ]);
+
+  const styleBase = useMemo(() => {
+    const css: ViewProps['style'] = {};
+    if (typeof gap === 'string') {
+      css.gap = Number(gap);
+    }
+    if (typeof gap === 'number') {
+      css.gap = gap;
+    }
+    return css;
+  }, [colCount, gap]);
+
+  const layoutStyle = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-layout'],
+      bordered && StylesBase['carefrees-form-layout.bordered'],
+      isAllColSpan && StylesBase.isAllColSpan,
+      style,
+    ].filter(Boolean);
+  }, [bordered, isAllColSpan, style]);
+
+  const headStyle = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-layout-header'],
+      bordered && StylesBase['carefrees-form-layout-header.bordered'],
+      headerStyle,
+    ].filter(Boolean);
+  }, [bordered, headerStyle]);
+
+  return (
+    <AttrsContext.Provider value={value}>
+      <View style={layoutStyle}>
+        {title || extra ? (
+          <View style={headStyle}>
+            <View>
+              <Text style={[StylesBase['carefrees-form-layout-header-title']]}>{title}</Text>
+            </View>
+            <View>
+              <Text style={[StylesBase['carefrees-form-layout-header-extra']]}>{extra}</Text>
+            </View>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View style={[StylesBase['carefrees-form-layout-body'], styleBase, bodyStyle]}>{children}</View>
+      </View>
+    </AttrsContext.Provider>
+  );
+});
+
+/**布局组件 占据一整行*/
+export const FormLayoutRows = (props: ViewProps) => {
+  return <View {...props} style={[props.style, StylesBase.isAllColSpan]} />;
+};

package/src/layout/layout.formItem.tsx

@@ -0,0 +1,205 @@
+import { View, ViewProps, Text } from 'react-native';
+import React, { Fragment, useMemo, memo } from 'react';
+import { useAttrs } from '../hooks/useAttrs';
+import { StylesBase } from '../styles';
+
+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?: ViewProps['style'];
+  className?: string;
+  labelStyle?: ViewProps['style'];
+  labelClassName?: string;
+  /**底部边框*/
+  inputBordered?: boolean;
+}
+
+/**布局组件 表单项*/
+export const LayoutFormItem = memo((props: LayoutFormItemProps) => {
+  const {
+    formItemClassName,
+    formItemLabelClassName,
+    formItemLabelStyle,
+    formItemStyle,
+    labelMode: p_labelMode = 'top',
+    errorLayout: p_errorLayout = 'left-bottom',
+    showColon: p_showColon = true,
+    colCount = 1,
+    inputBordered: p_inputBordered = true,
+  } = useAttrs();
+
+  const {
+    children,
+    labelMode = p_labelMode,
+    onlyRuleStyle,
+    label,
+    helpText,
+    extra,
+    showColon = p_showColon,
+    colSpan = 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 = labelMode === 'between' ? 'right-bottom' : errorLayout;
+  const _isLabel = useMemo(() => label && labelMode !== 'hide', [label, labelMode]);
+
+  const _isShowColon = useMemo(() => {
+    return showColon && (labelMode === 'left' || labelMode === 'between');
+  }, [showColon, labelMode]);
+
+  const widthStyles: ViewProps['style'] = useMemo(() => {
+    if (colCount >= colSpan) {
+      return {
+        width: `${(100 / colCount) * colSpan}%`,
+      };
+    }
+    return { width: `100%` };
+  }, [colSpan, colCount]);
+
+  const warpStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item'],
+      onlyRuleStyle && StylesBase['carefrees-form-item.only-rule-style'],
+      widthStyles,
+      formItemStyle,
+      style,
+    ].filter(Boolean);
+  }, [style, widthStyles, onlyRuleStyle, formItemStyle]);
+
+  const containerStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item-container'],
+      labelMode === 'left' && StylesBase['carefrees-form-item-container.left'],
+      labelMode === 'between' && StylesBase['carefrees-form-item-container.between'],
+    ].filter(Boolean);
+  }, [labelMode]);
+
+  const labelWarpStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item-label-warp'],
+      labelMode === 'left' && StylesBase['carefrees-form-item-label-warp.left'],
+      (labelMode === 'left' || labelMode == 'between') && StylesBase['carefrees-form-item-label-warp.minHeight'],
+      formItemLabelStyle,
+      labelStyle,
+    ].filter(Boolean);
+  }, [labelMode, labelStyle, formItemLabelStyle]);
+
+  const bodyStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item-body'],
+      labelMode === 'between' && StylesBase['carefrees-form-item-body-com.between'],
+    ].filter(Boolean);
+  }, [labelMode]);
+
+  const bodyInputStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item-body-input'],
+      inputBordered && StylesBase['carefrees-form-item-body-input.input-bordered'],
+      labelMode === 'between' && StylesBase['carefrees-form-item-body-com.between'],
+    ].filter(Boolean);
+  }, [labelMode, inputBordered]);
+
+  const errorStyles = useMemo(() => {
+    return [
+      StylesBase['carefrees-form-item-body-error'],
+      _errorLayout && StylesBase[`carefrees-form-item-body-error.${_errorLayout}`],
+    ].filter(Boolean);
+  }, [_errorLayout]);
+
+  return (
+    <View style={warpStyles}>
+      <View style={containerStyles}>
+        {_isLabel ? (
+          <View style={labelWarpStyles}>
+            {required ? (
+              <View>
+                <Text style={[StylesBase.fontSize14, StylesBase['carefrees-form-item-label.required']]}>*</Text>
+              </View>
+            ) : (
+              <Fragment />
+            )}
+            <View style={StylesBase['carefrees-form-item-label']}>
+              {typeof label === 'string' ? <Text style={StylesBase.fontSize14}>{label}</Text> : label}
+            </View>
+            {_isShowColon ? (
+              <View style={[StylesBase['carefrees-form-item-label.show-colon']]}>
+                <Text style={StylesBase.fontSize14}>:</Text>
+              </View>
+            ) : (
+              <Fragment />
+            )}
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View style={bodyStyles}>
+          <View style={bodyInputStyles}>{children}</View>
+          {helpText ? (
+            <View style={StylesBase['carefrees-form-item-body-help']}>
+              {typeof helpText === 'string' ? <Text style={StylesBase.fontSize12}>{helpText}</Text> : helpText}
+            </View>
+          ) : (
+            <Fragment />
+          )}
+          {isInvalid ? (
+            <View style={errorStyles}>
+              <Text style={StylesBase['error-text']}>{tip}</Text>
+            </View>
+          ) : (
+            <Fragment />
+          )}
+        </View>
+      </View>
+      {extra ? (
+        <View style={StylesBase['carefrees-form-item-extra']}>
+          {typeof extra === 'string' ? <Text style={StylesBase.fontSize14}>{extra}</Text> : extra}
+        </View>
+      ) : (
+        <Fragment />
+      )}
+    </View>
+  );
+});

package/src/styles/index.ts

@@ -0,0 +1,203 @@
+import { StyleSheet } from 'react-native';
+
+export const StylesBase = StyleSheet.create({
+  'carefrees-form': {
+    fontSize: 14,
+  },
+  'carefrees-form-layout': {
+    width: '100%',
+    borderRadius: 4,
+    paddingBottom: 8,
+    position: 'relative',
+  },
+  'carefrees-form-layout.bordered': {
+    borderColor: '#e0e0e0',
+    borderWidth: 1,
+    borderStyle: 'solid',
+  },
+  'carefrees-form-layout-header': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderBottomColor: '#e0e0e0',
+    borderBottomWidth: 1,
+    paddingTop: 5,
+    paddingBottom: 5,
+    marginBlockEnd: 4,
+    paddingInlineStart: 2,
+    paddingInlineEnd: 2,
+  },
+  'carefrees-form-layout-header.bordered': {
+    paddingInlineStart: 8,
+    paddingInlineEnd: 8,
+  },
+  isAllColSpan: {
+    width: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 600,
+    color: '#1d2129',
+  },
+  'carefrees-form-layout-header-title': {
+    fontSize: 16,
+    fontWeight: 600,
+    color: '#1d2129',
+  },
+  extra: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: '#1d2129',
+  },
+  'carefrees-form-layout-header-extra': {
+    fontSize: 14,
+    fontWeight: 500,
+    color: '#1d2129',
+  },
+  'carefrees-form-layout-body': {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingInlineStart: 2,
+    paddingInlineEnd: 2,
+    gap: 2,
+  },
+  'carefrees-form-item': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: 8,
+    color: 'rgba(0, 0, 0, 0.88)',
+  },
+  'carefrees-form-item.only-rule-style': {
+    padding: 0,
+  },
+  'carefrees-form-item-container': {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    height: '100%',
+    flex: 1,
+  },
+  'carefrees-form-item-container.left': {
+    flexDirection: 'row',
+    gap: 8,
+    textAlign: 'left',
+  },
+  'carefrees-form-item-label-warp.left': {
+    justifyContent: 'flex-end',
+  },
+  'carefrees-form-item-container.between': {
+    gap: 8,
+    textAlign: 'left',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  'carefrees-form-item-body-com.between': {
+    justifyContent: 'flex-end',
+    textAlign: 'right',
+  },
+  'carefrees-form-item-label-warp': {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  'carefrees-form-item-label-warp.minHeight': {
+    minHeight: 32,
+    alignItems: 'center',
+  },
+  'carefrees-form-item-label': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    fontSize: 14,
+    color: 'rgba(0, 0, 0, 0.88)',
+  },
+  'carefrees-form-item-label.show-colon': {
+    textAlign: 'center',
+    margin: 0,
+    marginInlineEnd: 2,
+    marginInlineStart: 2,
+  },
+  'carefrees-form-item-label.required': {
+    color: 'red',
+    margin: 0,
+    marginInlineEnd: 2,
+  },
+  'carefrees-form-item-body': {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    gap: 4,
+    flex: 1,
+  },
+  'carefrees-form-item-body-input': {
+    width: '100%',
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  'carefrees-form-item-body-input.input-bordered': {
+    borderWidth: 0,
+    borderBottomColor: '#e0e0e0',
+    borderBottomWidth: 1,
+    borderStyle: 'solid',
+  },
+  'carefrees-form-item-body-help': {
+    width: '100%',
+  },
+  'carefrees-form-item-body-error': {
+    position: 'absolute',
+    width: '100%',
+    color: 'red',
+    top: 'auto',
+    left: 0,
+    right: 0,
+    bottom: -16,
+    paddingTop: 2,
+    zIndex: 10,
+    fontSize: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  'error-text': {
+    fontSize: 12,
+    color: 'red',
+  },
+  'carefrees-form-item-body-error.right-bottom': {
+    top: 'auto',
+    left: 0,
+    right: 0,
+    bottom: -16,
+    justifyContent: 'flex-end',
+  },
+  'carefrees-form-item-body-error.top-left': {
+    top: -16,
+    left: 0,
+    right: 0,
+    bottom: 'auto',
+    justifyContent: 'flex-start',
+  },
+  'carefrees-form-item-body-error.top-right': {
+    top: -16,
+    left: 0,
+    right: 0,
+    bottom: 'auto',
+    justifyContent: 'flex-end',
+  },
+  'carefrees-form-item-extra': {},
+  fontSize12: {
+    fontSize: 12,
+  },
+  fontSize14: {
+    fontSize: 14,
+  },
+});