Form

import { Button, Form, FormItem, Input, Text, useForm } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

interface BasicFormValues {
  /** 联系邮箱 */
  email: string;
  /** 昵称 */
  nickname: string;
}

const FormBasic = () => {
  const [result, setResult] = useState('尚未提交');

  const [form] = useForm<BasicFormValues>();

  function handleFinish(values: BasicFormValues) {
    setResult(`提交成功：${values.nickname} / ${values.email}`);
  }

  function handleFinishFailed() {
    setResult('校验未通过');
  }

  function handleReset() {
    form.resetFields();
    setResult('尚未提交');
  }

  return (
    <View className="gap-4 bg-background p-4">
      <Form<BasicFormValues>
        form={form}
        initialValues={{ nickname: '示例用户' }}
        onFinish={handleFinish}
        onFinishFailed={handleFinishFailed}
      >
        <FormItem<BasicFormValues>
          label="昵称"
          name="nickname"
        >
          <Input
            placeholder="请输入昵称"
            variant="none"
          />
        </FormItem>

        <FormItem<BasicFormValues>
          description="提交时会校验邮箱格式"
          label="邮箱"
          name="email"
          rules={[{ message: '请输入正确的邮箱', pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, required: true }]}
        >
          <Input
            autoCapitalize="none"
            keyboardType="email-address"
            placeholder="name@example.com"
            variant="none"
          />
        </FormItem>
      </Form>

      <View className="flex-row gap-3">
        <Button
          className="flex-1"
          onPress={() => form.submit()}
        >
          提交
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onPress={handleReset}
        >
          重置
        </Button>
      </View>

      <Text className="text-sm text-muted-foreground">{result}</Text>
    </View>
  );
};

export { FormBasic };

import { Form, FormItem, Input, Switch, useForm } from '@skyroc/native-ui';
import { View } from 'react-native';

interface AdapterFormValues {
  /** 自动转为大写的编号 */
  code: string;
  /** 是否启用 */
  enabled: boolean;
}

const FormValueAdapter = () => {
  const [form] = useForm<AdapterFormValues>();

  return (
    <View className="bg-background p-4">
      <Form<AdapterFormValues>
        form={form}
        initialValues={{ code: 'demo', enabled: true }}
      >
        <FormItem<AdapterFormValues>
          description="先过滤非字母数字字符，再统一转换为大写"
          getValueFromEvent={event => String(event.nativeEvent.text).replace(/[^a-z0-9]/gi, '')}
          label="编号"
          name="code"
          normalize={value => String(value).toUpperCase()}
        >
          <Input
            autoCapitalize="characters"
            placeholder="请输入编号"
            variant="none"
          />
        </FormItem>

        <FormItem<AdapterFormValues>
          classNames={{ control: 'items-end' }}
          label="启用"
          name="enabled"
          trigger="onCheckedChange"
          valuePropName="checked"
        >
          <Switch />
        </FormItem>
      </Form>
    </View>
  );
};

export { FormValueAdapter };

import { Form, FormItem, Input, useForm } from '@skyroc/native-ui';
import { View } from 'react-native';

interface LayoutForm {
  /** 收货地址 */
  address: string;
  /** 昵称 */
  nickname: string;
  /** 备注 */
  remark: string;
}

const FormLayout = () => {
  const [layoutForm] = useForm<LayoutForm>();

  return (
    <View className="bg-background p-4">
      <Form<LayoutForm> form={layoutForm}>
        {/* 长内容用 labelAlign="top"，标签压在输入区上方 */}
        <FormItem<LayoutForm>
          required
          description="送货上门时使用"
          label="收货地址"
          labelAlign="top"
          name="address"
          rules={[{ message: '请填写收货地址', required: true }]}
        >
          <Input
            placeholder="请输入详细地址"
            variant="none"
          />
        </FormItem>

        <FormItem<LayoutForm>
          label="昵称"
          labelWidth={72}
          name="nickname"
          size="sm"
        >
          <Input
            placeholder="小号行高"
            variant="none"
          />
        </FormItem>

        <FormItem<LayoutForm>
          label="备注"
          name="remark"
          size="lg"
        >
          <Input
            placeholder="大号行高"
            variant="none"
          />
        </FormItem>
      </Form>
    </View>
  );
};

export { FormLayout };

import { Form, FormItem, Input, Text, useForm } from '@skyroc/native-ui';
import { View } from 'react-native';

interface InteractionFormValues {
  /** 禁用字段 */
  locked: string;
  /** 可选项 */
  option: string;
}

const FormInteraction = () => {
  const [form] = useForm<InteractionFormValues>();

  function handleOptionPress() {
    const current = form.getFieldValue('option');

    form.setFieldValue('option', current === '选项 A' ? '选项 B' : '选项 A');
  }

  return (
    <View className="bg-background p-4">
      <Form<InteractionFormValues>
        form={form}
        initialValues={{ locked: '不可修改', option: '选项 A' }}
      >
        <FormItem<InteractionFormValues>
          showArrow
          arrowDirection="down"
          label="整行点击"
          name="option"
          onPress={handleOptionPress}
        >
          <Input
            readOnly
            variant="none"
          />
        </FormItem>

        <FormItem<InteractionFormValues>
          disabled
          label="禁用字段"
          name="locked"
          trailing={<Text className="text-sm text-muted-foreground">disabled</Text>}
        >
          <Input
            readOnly
            variant="none"
          />
        </FormItem>
      </Form>
    </View>
  );
};

export { FormInteraction };

import { Form, FormItem, Input, useForm } from '@skyroc/native-ui';
import { View } from 'react-native';

interface StylesFormValues {
  /** 示例值 */
  value: string;
}

const FormStyles = () => {
  const [form] = useForm<StylesFormValues>();

  return (
    <View className="bg-muted p-4">
      <Form<StylesFormValues>
        inset
        form={form}
        initialValues={{ value: '可覆盖各个 slot' }}
        title="自定义分组标题"
        classNames={{ divider: 'bg-primary/20', root: 'border border-primary/30', title: 'text-primary' }}
      >
        <FormItem<StylesFormValues>
          className="bg-primary/5"
          classNames={{ description: 'text-info', label: 'font-semibold text-primary' }}
          description="FormItem 支持 root、label、description 等 slot"
          label="样式"
          name="value"
        >
          <Input variant="none" />
        </FormItem>
      </Form>
    </View>
  );
};

export { FormStyles };

import { Form, FormComputedField, FormItem, Input, Stepper, useForm } from '@skyroc/native-ui';
import { View } from 'react-native';

interface OrderForm {
  /** 单价 */
  price: string;
  /** 数量 */
  quantity: number;
  /** 合计金额，展示在 Input 里，因此存字符串 */
  total: string;
}

const FormComputed = () => {
  const [orderForm] = useForm<OrderForm>();

  return (
    <View className="bg-background p-4">
      <Form<OrderForm>
        form={orderForm}
        initialValues={{ price: '99', quantity: 1 }}
      >
        <FormItem<OrderForm>
          label="单价"
          name="price"
        >
          <Input
            keyboardType="decimal-pad"
            placeholder="请输入单价"
            variant="none"
          />
        </FormItem>

        <FormItem<OrderForm>
          label="数量"
          name="quantity"
        >
          <Stepper min={1} />
        </FormItem>

        {/* 合计由单价与数量推出，字段本身只读；RN 的 TextInput 只接受字符串，算完要转成字符串 */}
        <FormComputedField<OrderForm>
          deps={['price', 'quantity']}
          description="随单价与数量自动重算"
          label="合计"
          name="total"
          compute={get => (Number(get('price') || 0) * Number(get('quantity') || 0)).toFixed(2)}
        >
          <Input variant="none" />
        </FormComputedField>
      </Form>
    </View>
  );
};

export { FormComputed };