Function NewId

src/ui-solid-inspector/index.tsx:242–303

(
  props: OnDoneProp & {
    readonly suggestedId: Id;
    readonly has: (id: Id) => boolean;
    readonly set: (newId: Id) => void;
    readonly prompt?: string;
  },
)

};

const NewId = (
  props: OnDoneProp & {
    readonly suggestedId: Id;
    readonly has: (id: Id) => boolean;
    readonly set: (newId: Id) => void;
    readonly prompt?: string;
  },
) => {
  const [newId, setNewId] = createSignal<Id>(props.suggestedId);
  const [newIdOk, setNewIdOk] = createSignal(true);
  const [previousSuggestedId, setPreviousSuggestedNewId] = createSignal<Id>(
    props.suggestedId,
  );

  const handleNewIdChange = (
    event: Event & {currentTarget: HTMLInputElement},
  ) => {
    const id = event.currentTarget.value;
    setNewId(id);
    setNewIdOk(!props.has(id));
  };
  const handleClick = () => {
    const id = newId();
    if (props.has(id)) {
      setNewIdOk(false);
    } else {
      props.set(id);
      props.onDone();
    }
  };
  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key == 'Enter') {
      event.preventDefault();
      handleClick();
    }
  };

  createEffect(() => {
    if (props.suggestedId != previousSuggestedId()) {
      setNewId(props.suggestedId);
      setPreviousSuggestedNewId(props.suggestedId);
    }
  });

  return (
    <>
      {(props.prompt ?? 'New Id') + ': '}
      <input
        type="text"
        value={newId()}
        onInput={handleNewIdChange}
        onKeyDown={handleKeyDown}
        autofocus
      />{' '}
      <img
        onClick={handleClick}
        title={newIdOk() ? 'Confirm' : 'Id already exists'}
        class={newIdOk() ? 'ok' : 'okDis'}