Function ConfirmableActions

src/ui-solid-inspector/index.tsx:187–240

(
  props: {
    readonly actions: [
      icon: string,
      title: string,
      component: (props: OnDoneProp & Props) => JSXElement,
    ][];
  } & Props,
)

};

const ConfirmableActions = <
  Props extends TableProps | RowProps | CellProps | ValuesProps | ValueProps,
>(
  props: {
    readonly actions: [
      icon: string,
      title: string,
      component: (props: OnDoneProp & Props) => JSXElement,
    ][];
  } & Props,
) => {
  const [confirming, setConfirming] = createSignal<number>();
  const handleDone = () => setConfirming(undefined);

  createEffect(() => {
    if (!isUndefined(confirming())) {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (!isUndefined(confirming()) && event.key == 'Escape') {
          event.preventDefault();
          handleDone();
        }
      };
      document.addEventListener('keydown', handleKeyDown);
      onCleanup(() => document.removeEventListener('keydown', handleKeyDown));
    }
  });

  const content = () => {
    const confirmingIndex = confirming();
    const Component = isUndefined(confirmingIndex)
      ? undefined
      : props.actions[confirmingIndex][2];
    return (
      <>
        {Component ? (
          <>
            {Component({...props, onDone: handleDone})}
            <img onClick={handleDone} title="Cancel" class="cancel" />
          </>
        ) : (
          arrayMap(props.actions, ([icon, title], index) => (
            <img
              title={title}
              class={icon}
              onClick={() => setConfirming(index)}
            />
          ))
        )}
      </>
    );
  };

  return <>{content()}</>;
};

const NewId = (
  props: OnDoneProp & {