alinea/dist/picker/url/UrlPicker.browser.js

Headless git-based CMS

import "../../chunks/chunk-NZLE2WMY.js";

// src/picker/url/UrlPicker.browser.tsx
import { createId } from "alinea/core/Id";
import { pickerWithView } from "alinea/core/Picker";
import { Reference } from "alinea/core/Reference";
import { type } from "alinea/core/Type";
import { useForm } from "alinea/dashboard/atoms/FormAtoms";
import { InputForm } from "alinea/dashboard/editor/InputForm";
import { Modal } from "alinea/dashboard/view/Modal";
import { check } from "alinea/field/check";
import { text } from "alinea/field/text";
import { Button, HStack, Stack } from "alinea/ui";
import { useMemo } from "react";
import { UrlReference, urlPicker as createUrlPicker } from "./UrlPicker.js";
import { UrlPickerRow } from "./UrlPickerRow.js";
export * from "./UrlPicker.js";
import { jsx, jsxs } from "react/jsx-runtime";
var urlPicker = pickerWithView(createUrlPicker, {
  view: UrlPickerModal,
  viewRow: UrlPickerRow
});
function UrlPickerForm({
  selection,
  options,
  onConfirm,
  onCancel
}) {
  const preSelected = selection?.[0];
  const linkForm = useMemo(
    () => type("Link", {
      fields: {
        url: text("Url", {
          required: true,
          help: "Url of the link"
        }),
        title: text("Description", {
          help: "Text to display inside the link element"
        }),
        blank: check("Target", {
          description: "Open link in new tab",
          initialValue: true
        })
      }
    }),
    []
  );
  const form = useForm(linkForm, {
    initialValue: preSelected ? {
      url: preSelected[UrlReference.url],
      title: preSelected[UrlReference.title],
      blank: preSelected[UrlReference.target] === "_blank"
    } : void 0
  });
  function handleSubmit(e) {
    e.preventDefault();
    e.stopPropagation();
    const data = form.data();
    const reference = {
      [Reference.id]: preSelected?._id ?? createId(),
      [Reference.type]: "url",
      [UrlReference.url]: data.url,
      [UrlReference.title]: data.title || "",
      [UrlReference.target]: data.blank ? "_blank" : "_self"
    };
    onConfirm([reference]);
  }
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
    /* @__PURE__ */ jsx(InputForm, { border: false, form }),
    /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(Stack.Right, { children: /* @__PURE__ */ jsxs(HStack, { gap: 16, children: [
      /* @__PURE__ */ jsx(Button, { outline: true, type: "button", onClick: onCancel, children: "Cancel" }),
      /* @__PURE__ */ jsx(Button, { children: "Confirm" })
    ] }) }) })
  ] });
}
function UrlPickerModal(props) {
  return /* @__PURE__ */ jsx(Modal, { open: true, onClose: props.onCancel, children: /* @__PURE__ */ jsx(UrlPickerForm, { ...props }) });
}
export {
  UrlPickerForm,
  UrlPickerModal,
  urlPicker
};