Field

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

interface LoginForm {
  /** 登录密码 */
  password: string;
  /** 手机号 */
  phone: string;
}

const FieldBasic = () => {
  const [form] = useForm<LoginForm>();

  const [submitted, setSubmitted] = useState('尚未提交');

  function handleFinish(values: LoginForm) {
    setSubmitted(JSON.stringify(values));
  }

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

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

  return (
    <FieldGroup<LoginForm>
      className="bg-background p-4"
      form={form}
      onFinish={handleFinish}
      onFinishFailed={handleFinishFailed}
    >
      {/* required 只写一次：星号与校验规则同源 */}
      <FieldItem
        required
        label="手机号"
        name="phone"
        rules={[{ message: '请输入 11 位手机号', pattern: /^1\d{10}$/ }]}
      >
        <Input
          keyboardType="number-pad"
          placeholder="请输入手机号"
        />
      </FieldItem>

      {/* 校验失败时 error 会注入到 Input，边框同步变红 */}
      <FieldItem
        required
        description="至少 6 位，区分大小写"
        label="登录密码"
        name="password"
        rules={[{ message: '密码至少 6 位', minLength: 6 }]}
      >
        <Input
          placeholder="请输入密码"
          type="password"
        />
      </FieldItem>

      <View className="flex-row gap-3">
        <Button
          className="flex-1"
          color="primary"
          variant="solid"
          onPress={() => form.submit()}
        >
          提交
        </Button>

        <Button
          className="flex-1"
          color="primary"
          variant="outline"
          onPress={handleReset}
        >
          重置
        </Button>
      </View>

      <Text color="muted">提交结果：{submitted}</Text>
    </FieldGroup>
  );
};

export { FieldBasic };

import { Button, FieldGroup, FieldItem, Input, Text, useForm } from '@skyroc/native-ui';
import { useState } from 'react';

interface ValidationForm {
  /** 联系邮箱 */
  email: string;
}

const FieldValidation = () => {
  const [form] = useForm<ValidationForm>();
  const [result, setResult] = useState('点击提交触发校验');

  function handleFinish(values: ValidationForm) {
    setResult(`校验通过：${values.email}`);
  }

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

  return (
    <FieldGroup<ValidationForm>
      className="bg-background p-4"
      form={form}
      gap={4}
      onFinish={handleFinish}
      onFinishFailed={handleFinishFailed}
    >
      <FieldItem
        description="required 由 rules 推导，错误信息显示在描述上方。"
        label="联系邮箱"
        name="email"
        rules={[
          { message: '请输入邮箱地址', required: true },
          { message: '邮箱格式不正确', type: 'email' }
        ]}
        validateTrigger={false}
      >
        <Input placeholder="name@example.com" />
      </FieldItem>

      <Button onPress={() => form.submit()}>提交校验</Button>
      <Text className="text-sm text-muted-foreground">{result}</Text>
    </FieldGroup>
  );
};

export { FieldValidation };

import { FieldGroup, FieldItem, Input, useForm } from '@skyroc/native-ui';

interface SizeForm {
  /** 大尺寸字段 */
  large: string;
  /** 中尺寸字段 */
  medium: string;
  /** 小尺寸字段 */
  small: string;
}

const FieldSize = () => {
  const [form] = useForm<SizeForm>();

  return (
    <FieldGroup<SizeForm>
      className="bg-background p-4"
      form={form}
      gap={4}
    >
      <FieldItem
        description="紧凑标签与辅助文字"
        label="小尺寸"
        name="small"
        size="sm"
      >
        <Input
          placeholder="size=sm"
          size="sm"
        />
      </FieldItem>

      <FieldItem
        description="适合常规信息录入"
        label="中尺寸"
        name="medium"
        size="md"
      >
        <Input placeholder="size=md" />
      </FieldItem>

      <FieldItem
        description="默认尺寸，标签与提示最醒目"
        label="大尺寸"
        name="large"
        size="lg"
      >
        <Input
          placeholder="size=lg"
          size="lg"
        />
      </FieldItem>
    </FieldGroup>
  );
};

export { FieldSize };

import { FieldGroup, FieldItem, Rate, Stepper, Text, useForm } from '@skyroc/native-ui';
import { useState } from 'react';

interface ControlsForm {
  /** 数量 */
  quantity: number;
  /** 评分 */
  score: number;
}

const FieldControls = () => {
  const [form] = useForm<ControlsForm>();
  const [values, setValues] = useState<ControlsForm>({ quantity: 2, score: 3 });

  return (
    <FieldGroup<ControlsForm>
      className="bg-background p-4"
      form={form}
      gap={4}
      initialValues={values}
      onValuesChange={(_, allValues) => setValues(allValues)}
    >
      <FieldItem
        description="Stepper 通过 onChange(value) 直接收集数值。"
        label="数量"
        name="quantity"
        size="md"
      >
        <Stepper min={0} />
      </FieldItem>

      <FieldItem
        description="Rate 同样使用默认 value / onChange 约定。"
        label="评分"
        name="score"
        size="md"
      >
        <Rate />
      </FieldItem>

      <Text className="text-sm text-muted-foreground">
        当前值：数量 {values.quantity}，评分 {values.score}
      </Text>
    </FieldGroup>
  );
};

export { FieldControls };

import { FieldGroup, FieldItem, Switch, Text, useForm } from '@skyroc/native-ui';
import { useState } from 'react';

interface BindingForm {
  /** 开关是否启用 */
  enabled: boolean;
}

const FieldBinding = () => {
  const [form] = useForm<BindingForm>();
  const [enabled, setEnabled] = useState(true);

  return (
    <FieldGroup<BindingForm>
      className="bg-background p-4"
      form={form}
      initialValues={{ enabled }}
      onValuesChange={(_, values) => setEnabled(values.enabled)}
    >
      <FieldItem
        classNames={{ control: 'items-start' }}
        description="Switch 使用 checked 保存状态，并通过 onCheckedChange 更新。"
        label="自定义绑定"
        name="enabled"
        trigger="onCheckedChange"
        valuePropName="checked"
      >
        <Switch />
      </FieldItem>

      <Text className="text-sm text-muted-foreground">字段值：{enabled ? 'true' : 'false'}</Text>
    </FieldGroup>
  );
};

export { FieldBinding };

import { FieldGroup, FieldItem, Input, Text, useForm } from '@skyroc/native-ui';
import { useState } from 'react';

interface TransformForm {
  /** 需要归一化的编码 */
  code: string;
  /** 原始别名 */
  name: string;
}

const FieldTransform = () => {
  const [form] = useForm<TransformForm>();
  const [values, setValues] = useState<TransformForm>({ code: 'AB12', name: 'skyroc' });

  return (
    <FieldGroup<TransformForm>
      className="bg-background p-4"
      form={form}
      gap={4}
      initialValues={values}
      onValuesChange={(_, allValues) => setValues(allValues)}
    >
      <FieldItem
        description="normalize 会移除空格并转成大写后再保存。"
        label="保存前归一化"
        name="code"
        normalize={value => String(value).replaceAll(' ', '').toUpperCase()}
        size="md"
      >
        <Input placeholder="例如 ab 12" />
      </FieldItem>

      <FieldItem
        description="getValueProps 只转换传给子组件的显示值。"
        getValueProps={value => String(value).toUpperCase()}
        label="显示值转换"
        name="name"
        size="md"
      >
        <Input />
      </FieldItem>

      <Text className="text-sm text-muted-foreground">
        表单原值：{values.code} / {values.name}
      </Text>
    </FieldGroup>
  );
};

export { FieldTransform };

import { FieldGroup, FieldItem, Input, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const FieldGap = () => {
  return (
    <View className="gap-4 bg-background p-4">
      <View className="rounded-xl border border-border p-3">
        <Text className="mb-3 text-sm font-medium text-foreground">gap=2</Text>
        <FieldGroup gap={2}>
          <FieldItem
            label="字段一"
            name="compactFirst"
            size="sm"
          >
            <Input size="sm" />
          </FieldItem>
          <FieldItem
            label="字段二"
            name="compactSecond"
            size="sm"
          >
            <Input size="sm" />
          </FieldItem>
        </FieldGroup>
      </View>

      <View className="rounded-xl border border-border p-3">
        <Text className="mb-3 text-sm font-medium text-foreground">gap=8</Text>
        <FieldGroup gap={8}>
          <FieldItem
            label="字段一"
            name="looseFirst"
            size="sm"
          >
            <Input size="sm" />
          </FieldItem>
          <FieldItem
            label="字段二"
            name="looseSecond"
            size="sm"
          >
            <Input size="sm" />
          </FieldItem>
        </FieldGroup>
      </View>
    </View>
  );
};

export { FieldGap };

import { FieldGroup, FieldItem, Input } from '@skyroc/native-ui';

const FieldStyles = () => {
  return (
    <FieldGroup
      className="bg-background p-4"
      classNames={{ content: 'rounded-xl bg-primary/5 p-4' }}
      gap={4}
    >
      <FieldItem
        required
        className="rounded-xl border border-primary/20 bg-background p-3"
        classNames={{ description: 'text-primary', label: 'text-primary', required: 'text-warning' }}
        description="root、label、required 与 description 分别覆盖。"
        label="自定义字段"
        name="styled"
      >
        <Input placeholder="FieldItem classNames" />
      </FieldItem>
    </FieldGroup>
  );
};

export { FieldStyles };