@fairys/rn-valtio-form-basic 0.0.12

package/src/hooks/form.ts

@@ -0,0 +1,46 @@
+import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import { FairysValtioFormInstance, useFairysValtioFormInstance } from '@fairys/valtio-form-basic/esm/common';
+import { useMemo, type ReactNode } from 'react';
+import { FairysValtioFormLayoutAttrsProps } from './layout';
+import { RuleItem } from 'async-validator';
+
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+  /**表单实例*/
+  form?: FairysValtioFormInstance<T>;
+  /**子元素*/
+  children: ReactNode;
+  /**表单项规则(如果表单项没有指定规则，则使用全局规则，如果表单项指定规则，则使用表单项规则)*/
+  rules?: Record<PropertyKey, RuleItem[]>;
+  /**表单初始值*/
+  formData?: FairysValtioFormInstance<T>['state'];
+  /**表单隐藏状态*/
+  hideState?: FairysValtioFormInstance<T>['hideState'];
+  /**
+   * 初始化表单数据类型，默认值为 deepCopy
+   * - deepCopy：使用深度拷贝初始化表单数据
+   * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
+   */
+  initFormDataType?: 'deepCopy' | 'immutable';
+}
+
+/**
+ * 表单属性处理
+ * 
+ * @example
+ * 
+ * ```tsx
+
+ * ```
+*/
+export function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>) {
+  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+  const formInstance = useFairysValtioFormInstance(form);
+  /**表单规则*/
+  formInstance.rules = rules;
+  /**初始化表单值*/
+  useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
+  return {
+    ...rest,
+    formInstance,
+  };
+}

package/src/hooks/layout.ts

@@ -0,0 +1,249 @@
+import { createContext, useContext, useMemo, useRef } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+import { ViewProps, StyleSheet } from 'react-native';
+import type { FairysValtioFormLayoutContextOptions as _FairysValtioFormLayoutContextOptions } from '@fairys/valtio-form-basic';
+import { layoutStyles } from 'styles/layout';
+
+export interface FairysValtioFormLayoutContextOptions
+  extends Omit<
+    _FairysValtioFormLayoutContextOptions,
+    | 'formItemStyle'
+    | 'formItemLabelStyle'
+    | 'formItemBodyStyle'
+    | 'formItemClassName'
+    | 'formItemLabelClassName'
+    | 'formItemBodyClassName'
+    | ''
+  > {
+  /**表单项 style*/
+  formItemStyle?: ViewProps['style'];
+  /**表单项 label  style*/
+  formItemLabelStyle?: ViewProps['style'];
+  /**表单项 body  style*/
+  formItemBodyStyle?: ViewProps['style'];
+}
+
+export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+  /**标题*/
+  title?: React.ReactNode;
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**内容*/
+  children?: React.ReactNode;
+  /**布局样式*/
+  style?: ViewProps['style'];
+  /**头部样式*/
+  headerStyle?: ViewProps['style'];
+  headerTextStyle?: ViewProps['style'];
+  /**额外内容样式*/
+  headerExtraStyle?: ViewProps['style'];
+  /**内容样式*/
+  bodyStyle?: ViewProps['style'];
+  /**是否边框*/
+  bordered?: boolean;
+}
+
+export class FairysValtioFormLayoutInstance {
+  state = proxy<FairysValtioFormLayoutContextOptions>({
+    colCount: 1,
+    errorLayout: 'bottom-right',
+    labelMode: 'between',
+    itemBorderType: 'bottom',
+  });
+  updated = (options: FairysValtioFormLayoutContextOptions = {}) => {
+    const keys = Object.keys(options);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      this.state[key] = options[key];
+    }
+  };
+}
+
+export const useFairysValtioFormLayoutInstance = (instance?: FairysValtioFormLayoutInstance) => {
+  const ref = useRef<FairysValtioFormLayoutInstance>();
+  if (!ref.current) {
+    if (instance) {
+      ref.current = instance;
+    } else {
+      ref.current = new FairysValtioFormLayoutInstance();
+    }
+  }
+  return ref.current;
+};
+
+export const FairysValtioFormLayoutContext = createContext<FairysValtioFormLayoutInstance>(
+  new FairysValtioFormLayoutInstance(),
+);
+
+export const useFairysValtioFormLayoutContext = () => {
+  const instance = useContext(FairysValtioFormLayoutContext);
+  const state = useSnapshot(instance.state);
+  return [state, instance] as const;
+};
+
+/**
+ * 布局属性处理
+ * 
+ * @example
+ * 
+ * ```tsx
+
+  ```
+ * 
+*/
+export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttrsProps) {
+  const formLayoutInstance = useFairysValtioFormLayoutInstance();
+  const [state] = useFairysValtioFormLayoutContext();
+  const parent_colCount = state.colCount || 1;
+  const parent_errorLayout = state.errorLayout || 'bottom-right';
+  const parent_labelMode = state.labelMode || 'between';
+  const parent_formItemStyle = state.formItemStyle;
+  const parent_formItemLabelStyle = state.formItemLabelStyle;
+  const parent_formItemBodyStyle = state.formItemBodyStyle;
+  const parent_borderedType = state.itemBorderType || 'bottom';
+  const parent_itemBorderColor = state.itemBorderColor;
+  const parent_isInvalidBorderRed = state.isInvalidBorderRed;
+  const parent_isInvalidTextRed = state.isInvalidTextRed;
+  const parent_showColon = state.showColon;
+
+  const {
+    colCount = parent_colCount,
+    errorLayout = parent_errorLayout,
+    labelMode = parent_labelMode,
+    formItemStyle = parent_formItemStyle,
+    formItemLabelStyle = parent_formItemLabelStyle,
+    formItemBodyStyle = parent_formItemBodyStyle,
+    itemBorderType = parent_borderedType,
+    itemBorderColor = parent_itemBorderColor,
+    isInvalidBorderRed = parent_isInvalidBorderRed,
+    isInvalidTextRed = parent_isInvalidTextRed,
+    showColon = parent_showColon,
+    gap,
+    style,
+    headerStyle,
+    headerTextStyle,
+    headerExtraStyle,
+    bodyStyle,
+    bordered,
+  } = props;
+
+  useMemo(
+    () =>
+      formLayoutInstance.updated({
+        colCount,
+        errorLayout,
+        labelMode,
+        formItemStyle,
+        formItemLabelStyle,
+        formItemBodyStyle,
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        isInvalidTextRed,
+        showColon,
+      } as FairysValtioFormLayoutContextOptions),
+    [
+      colCount,
+      errorLayout,
+      labelMode,
+      formItemStyle,
+      formItemLabelStyle,
+      formItemBodyStyle,
+      itemBorderType,
+      itemBorderColor,
+      isInvalidBorderRed,
+      isInvalidTextRed,
+      showColon,
+    ],
+  );
+
+  const _layoutStyle = useMemo(
+    () => [
+      StyleSheet.flatten([
+        layoutStyles['fairys-valtio-form-layout'],
+        bordered && layoutStyles['fairys-valtio-form-layout.bordered'],
+        style,
+      ]),
+    ],
+    [bordered, style],
+  );
+
+  const _headerStyle = useMemo(
+    () => [StyleSheet.flatten([layoutStyles['fairys-valtio-form-layout-header'], headerStyle])],
+    [headerStyle],
+  );
+
+  const _headerTitleStyle = useMemo(
+    () => [StyleSheet.flatten([layoutStyles['fairys-valtio-form-layout-header-title'], headerTextStyle])],
+    [headerTextStyle],
+  );
+
+  const _headerExtraStyle = useMemo(
+    () => [StyleSheet.flatten([layoutStyles['fairys-valtio-form-layout-header-extra'], headerExtraStyle])],
+    [headerExtraStyle],
+  );
+
+  const _bodyStyle = useMemo(
+    () => [StyleSheet.flatten([layoutStyles['fairys-valtio-form-layout-body'], bodyStyle])],
+    [bodyStyle],
+  );
+
+  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]);
+
+  return {
+    colCount,
+    errorLayout,
+    labelMode,
+    itemBorderType,
+    formLayoutInstance,
+    //======================
+    layoutStyle: _layoutStyle,
+    //======================
+    headerStyle: _headerStyle,
+    headerTitleStyle: _headerTitleStyle,
+    headerExtraStyle: _headerExtraStyle,
+    //======================
+    bodyStyle: StyleSheet.flatten([styleBase, _bodyStyle]),
+  } as FairysValtioFormLayoutAttrsReturn;
+}
+
+export interface FairysValtioFormLayoutAttrsReturn {
+  /**列数*/
+  colCount: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout: string;
+  /**
+   * label显示模式
+   * @platform RN 支持 between
+   */
+  labelMode: string;
+  /**
+   * 底部边框类型
+   */
+  itemBorderType: string;
+  /**表单布局实例*/
+  formLayoutInstance: FairysValtioFormLayoutInstance;
+  /**布局样式*/
+  layoutStyle: ViewProps['style'];
+  /**头部样式*/
+  headerStyle: ViewProps['style'];
+  /**头部标题样式*/
+  headerTitleStyle: ViewProps['style'];
+  /**头部额外内容样式*/
+  headerExtraStyle: ViewProps['style'];
+  /**内容样式*/
+  bodyStyle: ViewProps['style'];
+}

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * from '@fairys/valtio-form-basic/esm/common';
+export * from 'hooks/form';
+export * from 'styles/form.item';
+export * from 'styles/layout';
+export * from 'hooks/form.item';
+export * from 'hooks/layout';
+export * from 'form.item';
+export * from 'layout';
+export * from 'form';

package/src/layout.tsx

@@ -0,0 +1,31 @@
+import { Fragment } from 'react';
+import { View, Text } from 'react-native';
+import type { FairysValtioFormLayoutAttrsProps } from 'hooks/layout';
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from 'hooks/layout';
+
+export interface FairysRNValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {}
+
+export function FairysRNValtioFormLayout(props: FairysRNValtioFormLayoutProps) {
+  const { children, title, extra } = props;
+  const { formLayoutInstance, layoutStyle, headerStyle, bodyStyle, headerTitleStyle, headerExtraStyle } =
+    useFairysValtioFormLayoutAttrs(props);
+  return (
+    <FairysValtioFormLayoutContext.Provider value={formLayoutInstance}>
+      <View style={layoutStyle}>
+        {title || extra ? (
+          <View style={headerStyle}>
+            <View>
+              <Text style={headerTitleStyle}>{title}</Text>
+            </View>
+            <View>
+              <Text style={headerExtraStyle}>{extra}</Text>
+            </View>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View style={bodyStyle}>{children}</View>
+      </View>
+    </FairysValtioFormLayoutContext.Provider>
+  );
+}

package/src/styles/form.item.ts

@@ -0,0 +1,166 @@
+import { StyleSheet } from 'react-native';
+
+export const formItemStyles = StyleSheet.create({
+  'fairys-valtio-form-item': {
+    padding: 4,
+    fontSize: 12,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  'fairys-valtio-form-item.border-bottom': {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#d1d5db',
+  },
+  'fairys-valtio-form-item.border-bottom.red': {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'red',
+  },
+  'fairys-valtio-form-item-container': {
+    flex: 1,
+    height: '100%',
+    display: 'flex',
+  },
+  'fairys-valtio-form-item-container.between': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  'fairys-valtio-form-item-container.top': {
+    flexDirection: 'column',
+    gap: 4,
+  },
+  'fairys-valtio-form-item-container.left': {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  'fairys-valtio-form-item-label': {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  'fairys-valtio-form-item-label.left': {
+    justifyContent: 'flex-end',
+  },
+  'fairys-valtio-form-item-label.required': {
+    color: 'red',
+    marginEnd: 4,
+  },
+  'fairys-valtio-form-item-label.show-colon': {
+    textAlign: 'center',
+    marginHorizontal: 2,
+    fontSize: 12,
+  },
+  'fairys-valtio-form-item-label.show-colon.red': {
+    color: 'red',
+  },
+  'fairys-valtio-form-item-label-text': {
+    fontSize: 12,
+    color: '#1f2937',
+  },
+  'fairys-valtio-form-item-label-text.red': {
+    color: 'red',
+  },
+  'fairys-valtio-form-item-body': {
+    position: 'relative',
+    flex: 1,
+    display: 'flex',
+  },
+  'fairys-valtio-form-item-body.left': {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  'fairys-valtio-form-item-body.top': {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  'fairys-valtio-form-item-body.between': {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  'fairys-valtio-form-item-body.border-bottom': {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#d1d5db',
+  },
+  'fairys-valtio-form-item-body.border-bottom.red': {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'red',
+  },
+  'fairys-valtio-form-item-body-input': {
+    minHeight: 32,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  'fairys-valtio-form-item-body-input.between': {
+    justifyContent: 'flex-end',
+    textAlign: 'right',
+  },
+  'fairys-valtio-form-item-body-input.not.between': {
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+  },
+  'fairys-valtio-form-item-body-extra': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  'fairys-valtio-form-item-body-extra-text': {
+    fontSize: 12,
+  },
+  'fairys-valtio-form-item-help': {
+    fontSize: 10,
+    width: '100%',
+  },
+  'fairys-valtio-form-item-body-error': {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    color: 'red',
+    position: 'absolute',
+    fontSize: 10,
+    zIndex: 10,
+  },
+  'fairys-valtio-form-item-body-error-text': {
+    color: 'red',
+    fontSize: 10,
+  },
+  'fairys-valtio-form-item-body-error.bottom-left': {
+    bottom: -14,
+    left: 0,
+    justifyContent: 'flex-start',
+  },
+  'fairys-valtio-form-item-body-error.bottom-right': {
+    bottom: -14,
+    right: 0,
+    justifyContent: 'flex-end',
+  },
+  'fairys-valtio-form-item-body-error.top-right': {
+    top: -4,
+    right: 0,
+    justifyContent: 'flex-end',
+  },
+  'fairys-valtio-form-item-body-error.top-left': {
+    top: -4,
+    left: 0,
+    justifyContent: 'flex-start',
+  },
+  'fairys-valtio-form-item-body-error.left-border-top': {
+    left: 0,
+    bottom: -2,
+    justifyContent: 'flex-start',
+  },
+  'fairys-valtio-form-item-body-error.right-border-top': {
+    right: 0,
+    bottom: -2,
+    justifyContent: 'flex-end',
+  },
+  'input.between': {
+    textAlign: 'right',
+  },
+});

package/src/styles/layout.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+export const layoutStyles = StyleSheet.create({
+  'fairys-valtio-form-layout': {
+    fontSize: 12,
+    width: '100%',
+    borderRadius: 8,
+  },
+  'fairys-valtio-form-layout.bordered': {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#d1d5db',
+  },
+  'fairys-valtio-form-layout-header': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#d1d5db',
+  },
+  'fairys-valtio-form-layout-header-title': {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  'fairys-valtio-form-layout-header-extra': {
+    fontSize: 12,
+  },
+  'fairys-valtio-form-layout-body': {
+    paddingHorizontal: 8,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 2,
+  },
+});