taxonium-component/dist/AddCustomPluginDialog-CkqFwYdd.js

React component for exploring large phylogenetic trees in the browser

import { jsx as n, jsxs as t } from "react/jsx-runtime";
import { useState as i } from "react";
import { o as D, m as y, u as E, a as A, D as L, c, a7 as M, d as N, B as p } from "./JBrowsePanel-uJIA-L6s.js";
import { E as O } from "./ExpandMore-DnyR9BQr.js";
import { D as g } from "./DialogContentText-CYI22CWW.js";
import { C as j } from "./Collapse-BMgUH2t2.js";
const k = y()((a) => ({
  dialogContent: {
    display: "flex",
    flexDirection: "column"
  },
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: a.transitions.create("transform", {
      duration: a.transitions.duration.shortest
    })
  },
  expandOpen: {
    transform: "rotate(180deg)"
  }
})), F = D(function({ onClose: a, model: f }) {
  const { classes: o, cx: v } = k(), [l, b] = i(""), [s, C] = i(""), [r, U] = i(""), [d, x] = i(""), [u, P] = i(!1), { jbrowse: m } = E.getSession(f), S = !!(l && s || r || d);
  function h() {
    l && s ? m.addPlugin({ name: l, umdUrl: s }) : r ? m.addPlugin({ esmUrl: r }) : d && m.addPlugin({ cjsUrl: d });
  }
  return n(A.Dialog, { open: !0, onClose: a, title: "Add custom plugin", children: t("form", { onSubmit: h, children: [t(L, { className: o.dialogContent, children: [n(g, { children: "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build." }), n(c, { label: "Plugin name", variant: "outlined", value: l, onChange: (e) => {
    b(e.target.value);
  } }), n(c, { label: "Plugin URL", variant: "outlined", value: s, onChange: (e) => {
    C(e.target.value);
  } }), t(g, { onClick: () => {
    P(!u);
  }, children: [n(M, { className: v(o.expand, {
    [o.expandOpen]: u
  }), "aria-expanded": u, "aria-label": "show more", children: n(O, {}) }), "Advanced options"] }), n(j, { in: u, children: t("div", { className: o.dialogContent, children: [n(g, { children: "The above fields assume that the plugin is built in UMD format. If your plugin is in another format, or you have additional builds you want to add (such as a CJS build for using NodeJS APIs in desktop), you can enter the URLs for those builds below." }), n(c, { label: "ESM build URL", variant: "outlined", value: r, onChange: (e) => {
    U(e.target.value);
  } }), n(c, { label: "CJS build URL", variant: "outlined", value: d, onChange: (e) => {
    x(e.target.value);
  } })] }) })] }), t(N, { children: [n(p, { variant: "contained", onClick: a, children: "Cancel" }), n(p, { variant: "contained", color: "primary", onClick: h, disabled: !S, children: "Submit" })] })] }) });
});
export {
  F as default
};
//# sourceMappingURL=AddCustomPluginDialog-CkqFwYdd.js.map