Reactで、割り勘の金額を計算する入力欄を作る方法

// 割り勘の計算。金額はすべて円の整数で扱う

export type EvenSplit = {
  perPerson: number; // 1人あたり
  collected: number; // 集まる合計
  surplus: number; // 合計より多く集まる額
};

// 全員が同じ額を払う。1人あたりは unit 円単位で切り上げる
export function splitEvenly(total: number, people: number, unit: number): EvenSplit {
  const perPerson = Math.ceil(total / (people * unit)) * unit;
  const collected = perPerson * people;
  return { perPerson, collected, surplus: collected - total };
}

export type OrganizerSplit = {
  perPerson: number; // 幹事以外の1人あたり
  organizer: number; // 幹事が払う額
};

// 幹事以外は unit 円単位で切り捨てた額を払い、残りを幹事が払う
export function splitWithOrganizer(total: number, people: number, unit: number): OrganizerSplit {
  const perPerson = Math.floor(total / (people * unit)) * unit;
  return { perPerson, organizer: total - perPerson * (people - 1) };
}

import { useId, useState } from 'react';
import { splitEvenly, splitWithOrganizer } from './splitBill';

const UNITS = [1, 10, 100, 500, 1000];
const MAX_DIGITS = 9; // 999,999,999 円まで
const MAX_PEOPLE = 99;

const yen = (n: number) => `${n.toLocaleString('ja-JP')} 円`;

// 全角の数字も半角にしてから、数字以外を取り除く
function toDigits(text: string): string {
  return text.normalize('NFKC').replace(/\D/g, '').replace(/^0+(?=\d)/, '').slice(0, MAX_DIGITS);
}

export function BillSplitter() {
  const id = useId();
  const [totalText, setTotalText] = useState('');
  const [people, setPeople] = useState(2);
  const [unit, setUnit] = useState(100);

  const total = Number(toDigits(totalText)); // 空文字なら 0
  const even = total > 0 ? splitEvenly(total, people, unit) : null;
  const org = total > 0 && people >= 2 ? splitWithOrganizer(total, people, unit) : null;

  return (
    <div className="bill">
      <label htmlFor={`${id}-total`}>合計金額</label>
      <div>
        <input
          id={`${id}-total`}
          type="text"
          inputMode="numeric"
          autoComplete="off"
          value={totalText}
          onChange={(e) => {
            // IME で変換している間は、打った文字をそのまま持つ
            const v = e.target.value;
            setTotalText((e.nativeEvent as InputEvent).isComposing ? v : toDigits(v));
          }}
          onCompositionEnd={(e) => setTotalText(toDigits(e.currentTarget.value))}
        />{' '}
        円
      </div>

      <span id={`${id}-people`}>人数</span>
      <div className="stepper" role="group" aria-labelledby={`${id}-people`}>
        <button type="button" aria-label="1人減らす" disabled={people <= 1} onClick={() => setPeople(people - 1)}>
          −
        </button>
        <span aria-live="polite">{people} 人</span>
        <button type="button" aria-label="1人増やす" disabled={people >= MAX_PEOPLE} onClick={() => setPeople(people + 1)}>
          ＋
        </button>
      </div>

      <label htmlFor={`${id}-unit`}>端数の単位</label>
      <select id={`${id}-unit`} value={unit} onChange={(e) => setUnit(Number(e.target.value))}>
        {UNITS.map((u) => (
          <option key={u} value={u}>
            {u.toLocaleString('ja-JP')} 円単位
          </option>
        ))}
      </select>

      <output htmlFor={`${id}-total ${id}-unit`}>
        {even ? (
          <>
            <section>
              <h3>全員が同じ額を払う</h3>
              <p className="amount">1人 {yen(even.perPerson)}</p>
              <p>
                集まるのは {yen(even.collected)}
                {even.surplus > 0 && `（合計より ${yen(even.surplus)}多い）`}
              </p>
            </section>
            {org && (
              <section>
                <h3>端数を幹事が払う</h3>
                <p className="amount">1人 {yen(org.perPerson)}</p>
                <p>
                  幹事は {yen(org.organizer)}（ほかに {people - 1} 人）
                </p>
              </section>
            )}
          </>
        ) : (
          <p>合計金額を入れてください</p>
        )}
      </output>
    </div>
  );
}

.bill {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 12px;
  align-items: center;
  max-width: 360px;
}
.bill input {
  width: 9em;
  font-size: 1rem;
  text-align: right;
}
.bill .stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bill .stepper button {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}
.bill output {
  grid-column: 1 / -1;
}
.bill h3 {
  margin: 12px 0 4px;
  font-size: 1rem;
}
.bill output p {
  margin: 2px 0;
}
.bill .amount {
  font-size: 1.5rem;
  color: #067a98;
}