@e280/quay/x/dom/views/tree/component.js

File-browser and outliner UI for the web

import { html } from "lit";
import { shadow, useMount, useRender, useStyles } from "@e280/sly";
import styleCss from "./style.css.js";
import themeCss from "../../theme.css.js";
export const Tree = shadow((group) => {
    useStyles(themeCss, styleCss);
    const render = useRender();
    const { config } = group;
    const { dropzone, trail, config: { root } } = group;
    useMount(() => {
        const dispose = group.on.upload.sub(() => render());
        return () => dispose();
    });
    const renderFolderItem = (item) => html `
		<input
			@dragenter=${(e) => dropzone.dragenter(e, item)}
			@dragleave=${dropzone.dragleave}
			@dragover=${(e) => dropzone.dragover(e, item)}
			@drop=${(e) => dropzone.drop(e, item)}
			@click=${(e) => e.preventDefault()}
			id="file-import"
			class="file-import folder-hover"
		>
		<span class="folder" slot="expand-icon">${config.renderIcon(item, false)}</span>
		<span class="folder" slot="collapse-icon">${config.renderIcon(item, true)}</span>
		${config.renderLabel(item)}
	`;
    const renderItem = (item) => html `
		${config.renderIcon(item, false)}
		${config.renderLabel(item)}
	`;
    const renderTree = (item) => {
        return html `
			<sl-tree-item
				draggable="true"
				@dragstart=${(e) => dropzone.dragstart(e, item)}
				@dragend=${dropzone.dragend}
				@click=${(e) => trail.setTrail(e, item)}
				data-type=${item.kind}
				?data-hover=${dropzone.hovering?.id === item.id}
			>
				${item.kind === "folder"
            ? renderFolderItem(item)
            : renderItem(item)}
				${group.sort(item.children).map((item) => group.matches(item) ? renderTree(item) : null)}
			</sl-tree-item>
		`;
    };
    return html `
		<sl-tree selection=leaf>
			${renderTree(root)}
		</sl-tree>`;
});
//# sourceMappingURL=component.js.map