Number field

import { NumberField } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function NumberFieldBasic(): ReactElement {
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '20rem' }}>
      <NumberField
        label="Guests"
        description="Up to twelve."
        hasStepper
        defaultValue={2}
        minValue={1}
        maxValue={12}
      />
    </div>
  );
}

'use client';

import { NumberField, Text } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

export default function NumberFieldMoney(): ReactElement {
  const [amount, setAmount] = useState<number | null>(123450);
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '20rem' }}>
      <NumberField
        label="Amount"
        description="Before tax"
        money={{ symbol: '$' }}
        value={amount}
        onChange={setAmount}
      />
      {/* The value is what the app stores and puts in its URL: an integer count of cents. */}
      <Text tone="muted">Value: {amount === null ? 'null' : String(amount)}</Text>
    </div>
  );
}

import { NumberField } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function NumberFieldNegative(): ReactElement {
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '20rem' }}>
      <NumberField
        label="Adjustment"
        description="A refund is under zero."
        money={{ symbol: '$' }}
        allowsNegative
        defaultValue={-4250}
      />
    </div>
  );
}

import { I18nProvider, NumberField } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function NumberFieldPersian(): ReactElement {
  return (
    <I18nProvider locale="fa-IR">
      <div className="stack" dir="rtl" lang="fa" style={{ width: '100%', maxWidth: '20rem' }}>
        <NumberField
          label="مبلغ"
          money={{ symbol: 'تومان', symbolPosition: 'end', fractionDigits: 0 }}
          defaultValue={1250000}
        />
        <NumberField
          label="بازپرداخت"
          money={{ symbol: '$', symbolPosition: 'end' }}
          allowsNegative
          defaultValue={-4250}
          labels={{ negative: 'منفی' }}
        />
      </div>
    </I18nProvider>
  );
}

import { NumberField } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function NumberFieldStates(): ReactElement {
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '20rem' }}>
      <NumberField label="Budget" money={{ symbol: '$' }} defaultValue={250000} isChanged />
      <NumberField
        label="Limit"
        money={{ symbol: '$' }}
        defaultValue={1500000}
        isInvalid
        errorMessage="Enter an amount under $10,000."
      />
      <NumberField label="Deposit" money={{ symbol: '$' }} defaultValue={5000} isDisabled />
    </div>
  );
}

'use client';

import { NumberField } from '@snapshot-ui/react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useState, type ReactElement } from 'react';

/** The parameter as minor units, or null when it is absent or not a whole number. */
const minorOf = (raw: string | null): number | null => {
  if (raw === null || raw === '') return null;
  const value = Number(raw);
  return Number.isSafeInteger(value) ? value : null;
};

function MinimumField({
  min,
  onChange,
}: {
  min: number | null;
  onChange?: (next: number | null) => void;
}): ReactElement {
  return (
    <NumberField
      label="Minimum amount"
      money={{ symbol: '$' }}
      placeholder="0.00"
      value={min}
      onChange={onChange}
    />
  );
}

function MinimumFromUrl(): ReactElement {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const min = minorOf(searchParams.get('min'));
  const [value, setValue] = useState(min);
  // The amount the field last took from the URL, or last wrote to it.
  const [seen, setSeen] = useState(min);

  // The URL changed under the field, by Back, Forward or a link: show its amount.
  if (min !== seen) {
    setSeen(min);
    setValue(min);
  }

  return (
    <MinimumField
      min={value}
      onChange={(next) => {
        setValue(next);
        setSeen(next);
        // Start from the parameters already there, so the other filters stay.
        const params = new URLSearchParams(searchParams);
        if (next === null) params.delete('min');
        else params.set('min', String(next));
        const query = params.toString();
        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
      }}
    />
  );
}

export default function NumberFieldUrl(): ReactElement {
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '20rem' }}>
      {/* The page is static, so the server renders the fallback: the same field, empty. */}
      <Suspense fallback={<MinimumField min={null} />}>
        <MinimumFromUrl />
      </Suspense>
    </div>
  );
}