@e280/quay
Version:
File-browser and outliner UI for the web
52 lines • 1.73 kB
JavaScript
import { html, shadowView } from "@benev/slate";
import styleCss from "./style.css.js";
import themeCss from "../../theme.css.js";
export const Tree = shadowView(use => (group) => {
use.styles(themeCss, styleCss);
const { config } = group;
const { dropzone, trail, config: { root } } = group;
use.mount(() => {
const dispose = group.on.upload.sub(() => use.rerender());
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 render = (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) ? render(item) : null)}
</sl-tree-item>
`;
};
return html `
<sl-tree selection=leaf>
${render(root)}
</sl-tree>`;
});
//# sourceMappingURL=component.js.map