#InputNumber 数字输入框

import { Form, FormField, InputNumber, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function InputNumberBasic() {
  const [value, setValue] = useState<number | null>(3);
  return (
    <Form layout="vertical">
      <FormField label="数量">
        <InputNumber name="quantity" min={0} max={20} value={value} onChange={setValue} />
      </FormField>
      <FormField label="金额">
        <InputNumber min={0} step={0.1} precision={2} defaultValue={19.9} prefix="¥" />
      </FormField>
      <FormField label="百分比">
        <InputNumber defaultValue={50} min={0} max={100} suffix="%" controls={false} />
      </FormField>
      <FormField label="只读">
        <InputNumber defaultValue={12} readOnly />
      </FormField>
      <FormField label="禁用">
        <InputNumber defaultValue={8} disabled />
      </FormField>
      <Text tone="muted">当前数量：{value ?? '未填写'}</Text>
    </Form>
  );
}

import { Form, FormField, InputNumber } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Form layout="vertical">
      <FormField label={'金额与千分位'}>
        <InputNumber defaultValue={12345.67} precision={2} grouping prefix="$" />
      </FormField>
      <FormField label={'高精度十进制字符串'}>
        <InputNumber
          stringMode
          name="amount"
          defaultValue="9007199254740993.01"
          step="0.01"
          precision={2}
        />
      </FormField>
      <FormField label={'自定义百分比显示'}>
        <InputNumber
          defaultValue={15}
          min={0}
          max={100}
          formatter={(value) => (value == null ? '' : `${value}%`)}
          parser={(text) => text.replace('%', '')}
        />
      </FormField>
    </Form>
  );
}