@tanstack/table-devtools/dist/components/Shell.js

Devtools for TanStack Table.

import { useTableDevtoolsContext } from "../TableContextProvider.js";
import { useStyles } from "../styles/use-styles.js";
import { ColumnsPanel } from "./ColumnsPanel.js";
import { FeaturesPanel } from "./FeaturesPanel.js";
import { RowsPanel } from "./RowsPanel.js";
import { StatePanel } from "./StatePanel.js";
import { OptionsPanel } from "./OptionsPanel.js";
import { For, Match, Show, Switch } from "solid-js";
import { className, createComponent, delegateEvents, effect, insert, memo, template } from "solid-js/web";
import { Header, HeaderLogo, MainPanel, Select } from "@tanstack/devtools-ui";

//#region src/components/Shell.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div><div></div><div>`);
var _tmpl$2 = /*#__PURE__*/ template(`<button type=button>`);
const EMPTY_PANEL_KEY = "__table-devtools-empty__";
const tabs = [
	{
		id: "features",
		label: "Features"
	},
	{
		id: "options",
		label: "Options"
	},
	{
		id: "state",
		label: "State"
	},
	{
		id: "rows",
		label: "Rows"
	},
	{
		id: "columns",
		label: "Columns"
	}
];
function Shell() {
	const styles = useStyles();
	const { activeTab, setActiveTab, selectedTargetId, setSelectedTargetId, targets } = useTableDevtoolsContext();
	const tableOptions = () => targets().map((target) => ({
		value: target.id,
		label: target.id
	}));
	return createComponent(MainPanel, { get children() {
		return [createComponent(Header, { get children() {
			return createComponent(HeaderLogo, {
				flavor: {
					light: "#06b6d4",
					dark: "#2563eb"
				},
				onClick: () => {
					window.open("https://tanstack.com/table", "_blank");
				},
				children: "TanStack Table"
			});
		} }), (() => {
			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
			insert(_el$, createComponent(Show, {
				get when() {
					return memo(() => tableOptions().length > 0)() && tableOptions();
				},
				children: (tableOptions) => createComponent(Show, {
					get when() {
						return selectedTargetId() ?? EMPTY_PANEL_KEY;
					},
					children: (selectedTargetId) => createComponent(Select, {
						label: "Table",
						get options() {
							return tableOptions();
						},
						get value() {
							return selectedTargetId();
						},
						onChange: (value) => setSelectedTargetId(value)
					})
				})
			}), _el$2);
			insert(_el$2, createComponent(For, {
				each: tabs,
				children: (tab) => (() => {
					var _el$4 = _tmpl$2();
					_el$4.$$click = () => setActiveTab(tab.id);
					insert(_el$4, () => tab.label);
					effect(() => className(_el$4, `${styles().tabButton} ${activeTab() === tab.id ? styles().tabButtonActive : ""}`));
					return _el$4;
				})()
			}));
			insert(_el$3, createComponent(Show, {
				get when() {
					return selectedTargetId() ?? EMPTY_PANEL_KEY;
				},
				keyed: true,
				children: (_selectedTargetId) => createComponent(Switch, { get children() {
					return [
						createComponent(Match, {
							get when() {
								return activeTab() === "features";
							},
							get children() {
								return createComponent(FeaturesPanel, {});
							}
						}),
						createComponent(Match, {
							get when() {
								return activeTab() === "state";
							},
							get children() {
								return createComponent(StatePanel, {});
							}
						}),
						createComponent(Match, {
							get when() {
								return activeTab() === "options";
							},
							get children() {
								return createComponent(OptionsPanel, {});
							}
						}),
						createComponent(Match, {
							get when() {
								return activeTab() === "rows";
							},
							get children() {
								return createComponent(RowsPanel, {});
							}
						}),
						createComponent(Match, {
							get when() {
								return activeTab() === "columns";
							},
							get children() {
								return createComponent(ColumnsPanel, {});
							}
						})
					];
				} })
			}));
			effect((_p$) => {
				var _v$ = styles().mainContainer, _v$2 = styles().tabBar, _v$3 = styles().contentArea;
				_v$ !== _p$.e && className(_el$, _p$.e = _v$);
				_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
				_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
				return _p$;
			}, {
				e: void 0,
				t: void 0,
				a: void 0
			});
			return _el$;
		})()];
	} });
}
delegateEvents(["click"]);

//#endregion
export { Shell };