tabletop-commander/components/schema/value-field.tsx

import { ChangeEvent, FC, useRef } from "react";
import { FieldTypeInput } from "./field-type-input";
import { useInput } from "../../hooks/useInput";
import { HelpPopper } from "../Poppables/help";
import { FieldTypes } from "./fieldtypes";

interface IValueProps {
  type: FieldTypes;
  bind: InputBinder;
}

const DICE_SIDES = [3, 4, 6, 8, 10, 12, 20, 100];

export const ValueField: FC<IValueProps> = ({ type, bind }) => {
  const { value: diceCount, bind: bindDiceCount } = useInput(1);
  const { value: diceSides, bind: bindDiceSides } = useInput("");

  const diceInputRef = useRef<HTMLInputElement>(null);

  switch (type) {
    case FieldTypes.dice: {
      const onChange = (
        handler: (
          arg: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
        ) => void,
      ) =>
      (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        handler(e);
        setTimeout(() => {
          if (!diceInputRef.current) return;
          e.target = diceInputRef.current;
          bind.onChange(e);
        }, 0);
      };
      return (
        <>
          <label className="w-min">
            Count:&nbsp;
            <input
              className="w-12"
              type="number"
              {...bindDiceCount}
              onChange={onChange(bindDiceCount.onChange)}
            />
          </label>
          <label className="w-min">
            Sides:&nbsp;
            <select
              {...bindDiceSides}
              onChange={onChange(bindDiceSides.onChange)}
            >
              <option value=""></option>
              {DICE_SIDES.map((d) => (
                <option key={"dice sides" + d} value={"d" + d}>{d}</option>
              ))}
            </select>
          </label>
          <input
            ref={diceInputRef}
            className="hidden"
            type="text"
            name={bind.name}
            value={diceCount + diceSides}
            readOnly
          />
        </>
      );
    }
    case FieldTypes.type:
      return <FieldTypeInput bind={bind} />;
    case FieldTypes.number:
      return (
        <label className="w-min">
          Value:<input className="w-16" type="number" {...bind} />
        </label>
      );
    case FieldTypes.text:
      return (
        <label className="w-min">
          Value:<input type="text" {...bind} />
        </label>
      );
    case FieldTypes.select:
      return (
        <>
          <label className="w-min">
            <div className="flex gap-2 items-center">
              Values:
              <HelpPopper>
                <p className="text-xs">
                  A comma separated list (no spaces, spaces are reserved for
                  values) of options that can be chosen while creating
                  publications. Ex: earthquake,wind storm,fire tornado,rainbow.
                  Alternatively, you can specify a display value and an actual
                  value separated with a colon. This is useful for when you want
                  to create a reference in a publication with a dropdown field.
                  Ex: Rapid Fire:^core.weaponAbilities[name=rapid
                  fire],Heavy:^core.weaponAbilities[name=heavy]
                </p>
              </HelpPopper>
            </div>
            <input type="text" {...bind} />
          </label>
        </>
      );
    case FieldTypes.any:
      return (
        <>
          <label className="w-min">
            <div className="flex gap-2 items-center">
              Type options:
              <HelpPopper>
                <p className="text-xs">
                  A comma separated list (no spaces, spaces are reserved for
                  values) of options that are names of types that can be
                  selected when creating a publication, Ex: dice,number,text. Do
                  not leave this blank, allowing for any type to be selected
                  makes querying gross.
                </p>
              </HelpPopper>
            </div>
            <input type="text" {...bind} />
          </label>
        </>
      );
    default:
      return <></>;
  }
};