@seakoi/native-ui 1.0.0

package/src/components/base/divider/divider.tsx

@@ -0,0 +1,93 @@
+import { isValidElement, useMemo } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useDividerStyles } from './style';
+import type { DividerProps } from './types';
+
+/** Divider 分割线 */
+export const Divider: React.FC<DividerProps> = ({
+  children,
+  style,
+  direction = 'horizontal',
+  variant = 'solid',
+  color,
+  thickness = 1,
+  contentPosition = 'center',
+  contentGap = 8,
+  margin,
+  textStyle,
+  ...restProps
+}) => {
+  const theme = useTheme();
+  const styles = useDividerStyles({ margin });
+
+  const isVertical = direction === 'vertical';
+  const hasContent = Boolean(children) && !isVertical;
+  const lineColor = color ?? theme.palette.blueGray3;
+
+  /** 生成线条样式 */
+  const getLineStyle = useMemo(() => {
+    return (
+      position: 'left' | 'center' | 'right',
+      adaptive: boolean,
+    ): ViewStyle => {
+      const base: ViewStyle = {
+        flex: 1,
+        borderStyle: variant,
+        borderColor: lineColor,
+      };
+
+      // 垂直线条
+      if (isVertical) {
+        base.borderLeftWidth = thickness;
+        return base;
+      }
+
+      // 水平线条
+      base.borderTopWidth = thickness;
+
+      if (position === 'left') base.marginRight = contentGap;
+      if (position === 'right') base.marginLeft = contentGap;
+      if (!adaptive) {
+        base.flex = undefined;
+        base.width = 40;
+      }
+
+      return base;
+    };
+  }, [isVertical, thickness, lineColor, variant, contentGap]);
+
+  return (
+    <View
+      {...restProps}
+      style={StyleSheet.flatten([
+        styles.container,
+        isVertical ? styles.vertical : styles.horizontal,
+        style,
+      ])}
+    >
+      {isVertical ? (
+        <View style={getLineStyle('center', true)} />
+      ) : hasContent ? (
+        <>
+          <View style={getLineStyle('left', contentPosition !== 'left')} />
+          <View style={styles.content}>
+            {isValidElement(children) ? (
+              children
+            ) : (
+              <Text style={StyleSheet.flatten([styles.contentText, textStyle])}>
+                {children}
+              </Text>
+            )}
+          </View>
+          <View style={getLineStyle('right', contentPosition !== 'right')} />
+        </>
+      ) : (
+        <View style={getLineStyle('center', true)} />
+      )}
+    </View>
+  );
+};

package/src/components/base/divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './divider';
+export type { DividerProps } from './types';

package/src/components/base/divider/style/index.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+import { createThemedStyles } from '#native-provider';
+
+import type { DividerProps } from '../types';
+
+type StyleParams = Pick<DividerProps, 'direction' | 'margin'>;
+
+export const useDividerStyles = createThemedStyles(
+  (theme, { margin }: StyleParams = {}) => {
+    return StyleSheet.create({
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+
+      horizontal: {
+        flexDirection: 'row',
+        width: '100%',
+        marginVertical: margin,
+      },
+
+      vertical: {
+        flexDirection: 'column',
+        alignSelf: 'stretch',
+        marginHorizontal: margin,
+      },
+
+      content: {
+        flexShrink: 0,
+      },
+
+      contentText: {
+        color: theme.palette.fontGray3,
+        fontSize: 14,
+      },
+    });
+  },
+);

package/src/components/base/divider/types.ts

@@ -0,0 +1,65 @@
+import type { PropsWithChildren } from 'react';
+import type {
+  ColorValue,
+  StyleProp,
+  TextStyle,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+/**
+ * Divider 分割线组件属性
+ */
+export interface DividerProps extends ViewProps, PropsWithChildren {
+  /**
+   * 分割线方向
+   * - `horizontal`: 水平分割线（默认）
+   * - `vertical`: 垂直分割线，不支持显示文字内容
+   * @default 'horizontal'
+   */
+  direction?: 'vertical' | 'horizontal';
+
+  /**
+   * 线条样式
+   * @default 'solid'
+   */
+  variant?: 'solid' | 'dashed' | 'dotted';
+
+  /**
+   * 线条颜色
+   */
+  color?: ColorValue;
+
+  /**
+   * 线条粗细
+   * @default 1
+   */
+  thickness?: number;
+
+  /**
+   * 内容位置（仅水平方向有效）
+   * @default 'center'
+   */
+  contentPosition?: 'left' | 'center' | 'right';
+
+  /**
+   * 线条与内容的间距
+   * @default 8
+   */
+  contentGap?: number;
+
+  /**
+   * 分割线上下（水平）或左右（垂直）边距
+   */
+  margin?: number;
+
+  /**
+   * 分割线样式
+   */
+  lineStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * 文字样式（当 children 为字符串时生效）
+   */
+  textStyle?: StyleProp<TextStyle>;
+}

package/src/components/base/flex/flex.tsx

@@ -0,0 +1,63 @@
+import React, { type RefAttributes } from 'react';
+import {
+  type FlexAlignType,
+  type FlexStyle,
+  type LayoutChangeEvent,
+  type PointerEvent,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useFlexStyles } from './style';
+
+export interface FlexProps extends RefAttributes<View> {
+  /** 子元素之间的间距 */
+  gap?: number;
+  /** 是否允许子元素换行 */
+  wrap?: boolean;
+  /** 是否反转子元素排列方向 */
+  reverse?: boolean;
+  /**
+   * 子元素在交叉轴上的对齐方式
+   * @default 'center'
+   */
+  align?: FlexAlignType;
+  /**
+   * 子元素在主轴上的对齐方式
+   * @default 'flex-start'
+   */
+  justify?: FlexStyle['justifyContent'];
+  /** 是否垂直方向排列子元素 */
+  vertical?: boolean;
+  /** 子元素 */
+  children?: React.ReactNode;
+  /** 自定义样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 布局回调 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /** 点击回调 */
+  onPointerDown?: (event: PointerEvent) => void;
+}
+
+export const Flex: React.FC<FlexProps> = props => {
+  const styles = useFlexStyles(props);
+  return (
+    <View
+      ref={props.ref}
+      onLayout={props.onLayout}
+      onPointerDown={props.onPointerDown}
+      style={[
+        styles.container,
+        props.wrap && styles.contentWrap,
+        props.vertical && styles.verticalContainer,
+        props.align && { alignItems: props.align },
+        props.justify && { justifyContent: props.justify },
+        typeof props.gap === 'number' && { gap: props.gap },
+        props.style,
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+};

package/src/components/base/flex/index.ts

@@ -0,0 +1 @@
+export * from './flex';

package/src/components/base/flex/style/index.ts

@@ -0,0 +1,18 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useFlexStyles = createThemedStyles(
+  (theme, props: { reverse?: boolean }) => ({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: theme.spacing.sm,
+      flexDirection: !props.reverse ? 'row' : 'row-reverse',
+    },
+    contentWrap: { flexWrap: 'wrap' },
+    reverseContainer: { flexDirection: 'row-reverse' },
+    verticalContainer: {
+      flexDirection: !props.reverse ? 'column' : 'column-reverse',
+    },
+  }),
+);

package/src/components/base/form/error-helper-text.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+export interface ErrorHelperTextProps {
+  /** 错误信息 */
+  errors?: string[];
+  /** 样式 */
+  style?: StyleProp<ViewStyle>;
+}
+export const ErrorHelperText: React.FC<ErrorHelperTextProps> = props => {
+  const theme = useTheme();
+
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [contentHeight, setContentHeight] = useState({ measured: false, value: 0 });
+
+  const animationValue = props.errors?.length ? 1 : 0;
+  const shouldRender = props.errors?.length || showHelperText;
+  const { current: animation } = useRef(new Animated.Value(animationValue));
+
+  useEffect(() => {
+    if (animationValue) {
+      setShowHelperText(true);
+    }
+    Animated.timing(animation, {
+      duration: 100,
+      useNativeDriver: false,
+      toValue: animationValue,
+    }).start(({ finished }) => {
+      if (finished && !animationValue) {
+        setShowHelperText(false);
+      }
+    });
+  }, [animation, animationValue]);
+
+  if (!shouldRender) return;
+  return (
+    <Animated.View
+      style={[
+        contentHeight.measured && {
+          height: animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, contentHeight.value],
+          }),
+        },
+      ]}
+    >
+      <View
+        onLayout={({ nativeEvent }) => {
+          if (!contentHeight.measured) {
+            setContentHeight({
+              measured: true,
+              value: nativeEvent.layout.height,
+            });
+          }
+        }}
+      >
+        {props.errors?.map((errorText, index) => (
+          <Text key={index} color={theme.palette.error7}>
+            {errorText}
+          </Text>
+        ))}
+      </View>
+    </Animated.View>
+  );
+};

package/src/components/base/form/form-context.ts

@@ -0,0 +1,32 @@
+import type { NamePath } from 'rc-field-form/es/interface';
+import { createContext } from 'react';
+import type {
+  LayoutRectangle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export interface FormContextValue {
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否显示单元格箭头 */
+  showCellArrow?: boolean;
+  /** 表单样式变体 */
+  variant?: 'cell-group' | 'normal';
+  /** 表单项布局方向 */
+  layout?: 'horizontal' | 'vertical';
+  /** 标签文本样式 */
+  labelStyle?: StyleProp<TextStyle>;
+  /** 表单项样式 */
+  wrapperStyle?: StyleProp<ViewStyle>;
+}
+export const FormContext = createContext<FormContextValue | null>(null);
+
+export type LayoutsMap = Record<string, LayoutRectangle>;
+export interface FieldLayoutContextValue {
+  registerFieldLayout: (name: NamePath, layout: LayoutRectangle) => void;
+}
+export const FieldLayoutContext = createContext<FieldLayoutContextValue | null>(
+  null,
+);

package/src/components/base/form/form-item.tsx

@@ -0,0 +1,154 @@
+import { isEqual } from 'lodash-es';
+import { Field as RCField, type FormInstance } from 'rc-field-form';
+import { type FieldProps as RCFieldProps } from 'rc-field-form/lib/Field';
+import React, { useContext } from 'react';
+import {
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Cell, Flex, Text } from '#components/base';
+import type { Any, AnyObject } from '#shared/utils';
+
+import { ErrorHelperText } from './error-helper-text';
+import {
+  FieldLayoutContext,
+  FormContext,
+  type FormContextValue,
+} from './form-context';
+import { useFormItemStyles } from './style';
+
+const Memoized: React.FC<{
+  update: Any;
+  control: AnyObject;
+  children: React.ReactElement;
+}> = React.memo(
+  props => props.children,
+  (prev, next) => {
+    return prev.update === next.update && isEqual(prev.control, next.control);
+  },
+);
+
+export interface FormItemProps
+  extends Omit<RCFieldProps, 'children'>,
+    Pick<FormContextValue, 'labelStyle' | 'layout' | 'showCellArrow'> {
+  /** 文本标签 */
+  label?: string;
+  /** 必填样式设置，如不设置，则会根据校验规则自动生成 */
+  required?: boolean;
+  /** 子节点 */
+  children?:
+    | React.ReactElement<AnyObject>
+    | ((form: FormInstance) => React.ReactElement<AnyObject>);
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 内容容器样式 */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** 点击事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** 长按点击事件 */
+  onLongPress?: (event: GestureResponderEvent) => void;
+  /** 布局回调 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const FormItem: React.FC<FormItemProps> = ({
+  onPress,
+  onLayout,
+  onLongPress,
+  ...props
+}) => {
+  const styles = useFormItemStyles();
+  const formContext = useContext(FormContext);
+  const layoutsContext = useContext(FieldLayoutContext);
+
+  const isVerticalLayout = formContext?.layout === 'vertical';
+  const labelStyle = props.labelStyle ?? formContext?.labelStyle;
+  const showACellArrow =
+    formContext?.variant === 'cell-group' &&
+    (props.showCellArrow ?? formContext.showCellArrow);
+
+  let messageVariables: Record<string, string> = {};
+  if (typeof props.label === 'string') {
+    messageVariables.label = props.label;
+  } else if (props.name) {
+    messageVariables.label = String(props.name);
+  }
+  if (props.messageVariables) {
+    messageVariables = {
+      ...messageVariables,
+      ...props.messageVariables,
+    };
+  }
+
+  return (
+    <RCField {...props} messageVariables={messageVariables}>
+      {(control, meta, context) => {
+        const mergedControl = {
+          ...control,
+          disabled: formContext?.disabled,
+        };
+        const isRequired =
+          props.required ??
+          props.rules?.some(rule => {
+            if (typeof rule === 'function') {
+              const ruleEntity = rule(context);
+              return ruleEntity.required && !ruleEntity.warningOnly;
+            }
+            return typeof rule === 'object' && !!rule.required && rule.warningOnly;
+          });
+        const childNode: React.ReactElement<AnyObject> | undefined =
+          typeof props.children !== 'function'
+            ? props.children
+            : props.children(context);
+
+        const mergedDisabled = childNode?.props.disabled || mergedControl?.disabled;
+        return (
+          <Cell
+            style={props.style}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            showArrow={showACellArrow}
+            disabledPress={mergedDisabled}
+            onLayout={event => {
+              onLayout?.(event);
+              if (props.name && layoutsContext) {
+                const { layout } = event.nativeEvent;
+                layoutsContext.registerFieldLayout(props.name, layout);
+              }
+            }}
+            description={<ErrorHelperText errors={meta.errors} />}
+            title={
+              <Flex
+                style={[
+                  styles.contentContainer,
+                  isVerticalLayout && styles.verticalLayout,
+                  props.contentContainerStyle,
+                ]}
+              >
+                <Text style={labelStyle}>
+                  <Text style={[styles.label, labelStyle]}>{props.label}</Text>
+                  {!isRequired && <Text style={styles.mark}>*</Text>}
+                </Text>
+                {!!childNode && (
+                  <View style={[styles.control, formContext?.wrapperStyle]}>
+                    <Memoized control={mergedControl} update={childNode}>
+                      {React.cloneElement(childNode, {
+                        ...childNode.props,
+                        ...control,
+                        disabled: mergedDisabled,
+                      })}
+                    </Memoized>
+                  </View>
+                )}
+              </Flex>
+            }
+          />
+        );
+      }}
+    </RCField>
+  );
+};

package/src/components/base/form/form.tsx

@@ -0,0 +1,121 @@
+import { useMemoizedFn } from 'ahooks';
+import RCForm, { type FormInstance, useForm } from 'rc-field-form';
+import type { NamePath, ValidateErrorEntity } from 'rc-field-form/es/interface';
+import type { FormProps as RCFormProps } from 'rc-field-form/lib/Form';
+import React, {
+  type PropsWithChildren,
+  type ReactNode,
+  type RefObject,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  type LayoutRectangle,
+  type ScrollView,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import type { AnyObject } from '#shared/utils';
+
+import { Cell } from '../cell';
+import {
+  FieldLayoutContext,
+  type FieldLayoutContextValue,
+  FormContext,
+  type FormContextValue,
+  type LayoutsMap,
+} from './form-context';
+import { useFormStyles } from './style';
+
+type RequiredMark = boolean | (() => ReactNode);
+
+export interface FormProps<Values = AnyObject>
+  extends FormContextValue,
+    Omit<RCFormProps<Values>, 'style'>,
+    React.RefAttributes<FormInstance<Values>> {
+  /** 表单实例 */
+  form?: FormInstance<Values>;
+  /** 必填样式 */
+  requiredMark?: RequiredMark;
+  /** 滚动视图引用 */
+  scrollView?: RefObject<ScrollView | null>;
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Form<Values extends AnyObject>({
+  style,
+  requiredMark,
+  scrollView,
+  disabled = false,
+  showCellArrow = false,
+  layout = 'horizontal',
+  variant = 'cell-group',
+  ...props
+}: PropsWithChildren<FormProps<Values>>) {
+  const styles = useFormStyles();
+  const [formIns] = useForm(props.form);
+
+  const itemsLayoutMap = useRef<LayoutsMap>({});
+  const createFieldKey = useMemoizedFn((name: NamePath) => {
+    return !Array.isArray(name) ? name : name.join('.');
+  });
+
+  /** 表单上下文 */
+  const contextValue = useMemo<FormContextValue>(() => {
+    return { variant, layout, disabled, showCellArrow };
+  }, [disabled, layout, showCellArrow, variant]);
+
+  /** 表单项布局上下文 */
+  const fieldLayoutContextValue = useMemo(() => {
+    return {
+      registerFieldLayout: (name: NamePath, layout: LayoutRectangle) => {
+        const fieldKey = createFieldKey(name);
+        itemsLayoutMap.current = {
+          ...itemsLayoutMap.current,
+          [fieldKey]: layout,
+        };
+      },
+    } satisfies FieldLayoutContextValue;
+  }, [createFieldKey]);
+
+  const scrollToFirstError = ({ errorFields }: ValidateErrorEntity<Values>) => {
+    if (!errorFields.length) return;
+    const fieldKey = createFieldKey(errorFields[0].name);
+    const layoutValue = itemsLayoutMap.current[fieldKey];
+    if (layoutValue && scrollView?.current) {
+      scrollView.current.scrollTo({
+        y: layoutValue.y,
+        animated: true,
+      });
+    }
+  };
+
+  useImperativeHandle(props.ref, () => formIns);
+  return (
+    <FormContext.Provider value={contextValue}>
+      <FieldLayoutContext value={fieldLayoutContextValue}>
+        <RCForm
+          {...props}
+          form={formIns}
+          component={false}
+          onFinishFailed={errorInfo => {
+            scrollToFirstError(errorInfo);
+            props.onFinishFailed?.(errorInfo);
+          }}
+        >
+          {variant !== 'cell-group' ? (
+            <View style={[styles.container, style]}>{props.children}</View>
+          ) : (
+            <Cell.Group bordered style={style}>
+              {props.children}
+            </Cell.Group>
+          )}
+        </RCForm>
+      </FieldLayoutContext>
+    </FormContext.Provider>
+  );
+}

package/src/components/base/form/hooks/use-form.ts

@@ -0,0 +1,14 @@
+import { type FormInstance, useForm as useRCForm } from 'rc-field-form';
+import { useMemo } from 'react';
+
+import type { AnyObject } from '#shared/utils';
+
+export function useForm<Values extends AnyObject>(form?: FormInstance<Values>) {
+  const [rcForm] = useRCForm();
+
+  const wrapForm = useMemo<FormInstance<Values>>(
+    () => form ?? rcForm,
+    [form, rcForm],
+  );
+  return [wrapForm];
+}

package/src/components/base/form/index.ts

@@ -0,0 +1,12 @@
+import { Form as _Form } from './form';
+import { FormItem } from './form-item';
+import { useForm } from './hooks/use-form';
+
+export * from './form';
+export * from './form-context';
+export * from './form-item';
+
+export const Form = Object.assign(_Form, {
+  Item: FormItem,
+  useForm: useForm,
+});