phonograph/svelte/src/datum-editor.svelte

<script lang="ts">
  import type { Datum } from "./datum.svelte";
  import {
    datum_from_editor_state,
    editor_state_from_datum,
    type EditorState,
  } from "./editor-state.svelte";
  import { type FieldInfo } from "./field.svelte";

  const BLUR_DEBOUNCE_MS = 100;

  type Props = {
    /**
     * For use cases in which the user may select between multiple datum types,
     * such as when embedded in an expression editor, this array represents the
     * permissible set of field parameters.
     */
    assignable_fields?: ReadonlyArray<FieldInfo>;

    field_info: FieldInfo;

    on_blur?(ev: FocusEvent): unknown;

    on_cancel_edit?(): unknown;

    on_change?(value?: Datum): unknown;

    on_focus?(ev: FocusEvent): unknown;

    /**
     * In addition to `on_blur()`, this callback is invoked when the component
     * blurs *itself*, for example when a user presses "Enter" or "Escape", as
     * opposed to blurring in response to a user focusing another element. This
     * typically indicates that the parent component should restore focus to a
     * previously focused table cell.
     */
    on_restore_focus?(): unknown;

    value?: Datum;
  };

  let {
    assignable_fields = [],
    field_info = $bindable(),
    on_blur,
    on_cancel_edit,
    on_change,
    on_focus,
    on_restore_focus,
    value = $bindable(),
  }: Props = $props();

  let editor_state = $state<EditorState | undefined>();
  let type_selector_menu_button_element = $state<
    HTMLButtonElement | undefined
  >();
  let type_selector_popover_element = $state<HTMLDivElement | undefined>();
  let date_input_element = $state<HTMLInputElement | undefined>();
  let text_input_element = $state<HTMLInputElement | undefined>();
  let blur_timeout = $state<number | undefined>();

  $effect(() => {
    if (value) {
      editor_state = editor_state_from_datum(value);
    }
  });

  export function focus() {
    if (
      field_info.field.presentation.t === "Dropdown" ||
      field_info.field.presentation.t === "Numeric" ||
      field_info.field.presentation.t === "Text" ||
      field_info.field.presentation.t === "Uuid"
    ) {
      text_input_element?.focus();
    } else if (field_info.field.presentation.t === "Timestamp") {
      date_input_element?.focus();
    }
  }

  function handle_blur(ev: FocusEvent) {
    // Propagating of blur events upwards is debounced, so that switching focus
    // between elements does not cause spurious `on_blur()` calls.
    if (blur_timeout !== undefined) {
      clearTimeout(blur_timeout);
    }
    blur_timeout = setTimeout(() => on_blur?.(ev), BLUR_DEBOUNCE_MS);
  }

  function handle_focus(ev: FocusEvent) {
    if (blur_timeout === undefined) {
      on_focus?.(ev);
    } else {
      clearTimeout(blur_timeout);
    }
  }

  function handle_input() {
    if (!editor_state) {
      console.warn("preconditions for handle_input() not met");
      return;
    }
    value = datum_from_editor_state(
      editor_state,
      field_info.field.presentation,
    );
    on_change?.(value);
  }

  function handle_type_selector_menu_button_click() {
    type_selector_popover_element?.togglePopover();
  }

  function handle_type_selector_field_button_click(value: FieldInfo) {
    field_info = value;
    type_selector_popover_element?.hidePopover();
    type_selector_menu_button_element?.focus();
  }

  function handle_keydown(ev: KeyboardEvent) {
    if (ev.key === "Enter") {
      on_restore_focus?.();
    } else if (ev.key === "Escape") {
      // Cancel edit before blurring, or else the table will try to commit it.
      on_cancel_edit?.();
      on_restore_focus?.();
    }
  }

  const interactive_handlers = {
    onblur: handle_blur,
    onfocus: handle_focus,
    onkeydown: handle_keydown,
  };
</script>

<div
  class="datum-editor__container"
  class:datum-editor__container--incomplete={!value}
  onblur={handle_blur}
  onfocus={handle_focus}
>
  {#if editor_state}
    {#if assignable_fields?.length > 0}
      <div class="datum-editor__type-selector">
        <button
          {...interactive_handlers}
          bind:this={type_selector_menu_button_element}
          class="datum-editor__type-selector-menu-button"
          onclick={handle_type_selector_menu_button_click}
          type="button"
        >
          {field_info.field.presentation.t}
        </button>
        <div
          bind:this={type_selector_popover_element}
          class="datum-editor__type-selector-popover"
          onblur={handle_blur}
          onfocus={handle_focus}
          popover="auto"
        >
          {#each assignable_fields as assignable_field_info}
            <button
              {...interactive_handlers}
              onclick={() =>
                handle_type_selector_field_button_click(assignable_field_info)}
              type="button"
            >
              {assignable_field_info.field.presentation.t}
            </button>
          {/each}
        </div>
      </div>
    {/if}
    <button
      {...interactive_handlers}
      type="button"
      class="datum-editor__null-control"
      class:datum-editor__null-control--disabled={editor_state.text_value !==
        ""}
      disabled={editor_state.text_value !== ""}
      onclick={() => {
        if (!editor_state) {
          console.warn("null control onclick() preconditions not met");
          return;
        }
        editor_state.is_null = !editor_state.is_null;
        handle_input();
      }}
    >
      {#if editor_state.is_null}
        <i class="ti ti-cube-3d-sphere-off"></i>
      {:else}
        <i class="ti ti-cube"></i>
      {/if}
    </button>
    {#if ["Dropdown", "Numeric", "Text", "Uuid"].includes(field_info.field.presentation.t)}
      <input
        {...interactive_handlers}
        bind:this={text_input_element}
        value={editor_state.text_value}
        oninput={({ currentTarget }) => {
          if (!editor_state) {
            console.warn("text input oninput() preconditions not met");
            return;
          }
          editor_state.text_value = currentTarget.value;
          if (currentTarget.value !== "") {
            editor_state.is_null = false;
          }
          handle_input();
        }}
        class="datum-editor__text-input"
        type="text"
      />
    {:else if field_info.field.presentation.t === "Timestamp"}
      <div class="datum-editor__timestamp-inputs">
        <input
          {...interactive_handlers}
          bind:this={date_input_element}
          oninput={({ currentTarget }) => {
            if (!editor_state) {
              console.warn("date input oninput() preconditions not met");
              return;
            }
            editor_state.date_value = currentTarget.value;
            editor_state.is_null = false;
            handle_input();
          }}
          value={editor_state.date_value}
          type="date"
        />
        <input
          {...interactive_handlers}
          oninput={({ currentTarget }) => {
            if (!editor_state) {
              console.warn("time input oninput() preconditions not met");
              return;
            }
            editor_state.time_value = currentTarget.value;
            editor_state.is_null = false;
            handle_input();
          }}
          value={editor_state.time_value}
          step="1"
          type="time"
        />
      </div>
    {/if}
    <div class="datum-editor__helpers" tabindex="-1">
      {#if field_info.field.presentation.t === "Dropdown"}
        <!-- TODO: This is an awkward way to implement a keyboard-navigable listbox. -->
        <menu class="datum-editor__dropdown-options">
          {#each field_info.field.presentation.c.options as dropdown_option}
            <!-- FIXME: validate or escape dropdown_option.color -->
            <li
              class={[
                "dropdown-option-badge",
                `dropdown-option-badge--${dropdown_option.color.toLocaleLowerCase("en-US")}`,
              ]}
              role="option"
              aria-selected={dropdown_option.value === value?.c}
            >
              <button
                {...interactive_handlers}
                class="datum-editor__dropdown-option-button"
                onclick={() => {
                  if (!editor_state || !text_input_element) {
                    console.warn(
                      "dropdown option onclick() preconditions not met",
                    );
                    return;
                  }
                  editor_state.text_value = dropdown_option.value;
                  editor_state.is_null = false;
                  text_input_element.focus();
                  handle_input();
                }}
                type="button"
              >
                {dropdown_option.value}
              </button>
            </li>
          {/each}
        </menu>
      {/if}
    </div>
  {/if}
</div>