extracted selection logic to own feature and anhanched with range selection

This commit is contained in:
Chris Kruining 2024-10-16 13:37:26 +02:00
parent 40f46eba1d
commit 1a963a665e
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
15 changed files with 295 additions and 254 deletions

View file

@ -1,7 +1,7 @@
import { Accessor, Component, createContext, createSignal, For, JSX, Show, useContext } from "solid-js";
import css from "./filetree.module.css";
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
import { SelectionProvider, selectable } from "~/features/selectable";
import css from "./filetree.module.css";
export interface FileEntry {
name: string;
@ -45,15 +45,15 @@ interface TreeContextType {
const TreeContext = createContext<TreeContextType>();
export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open: TreeContextType['open'] }> = (props) => {
const [selection, setSelection] = createSignal();
export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open?: TreeContextType['open'] }> = (props) => {
const [selection, setSelection] = createSignal<object[]>([]);
// createEffect(() => {
// console.log(selection());
// console.log(selection());
// });
const context = {
open: props.open,
open: props.open ?? (() => { }),
// open(file: File) {
// console.log(`open ${file.name}`)
// },

View file

@ -15,6 +15,10 @@
overflow: auto clip;
}
&.open > .content {
inline-size: max-content;
}
&.closed > .content {
inline-size: 0;
}

View file

@ -1,13 +1,15 @@
import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarLeftExpand } from "solid-icons/tb";
import { createMemo, createSignal, ParentComponent, Show } from "solid-js";
import { createMemo, createSignal, ParentComponent, Show, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import css from "./sidebar.module.css";
export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string }> = (props) => {
const [open, setOpen] = createSignal(props.open ?? true);
const name = createMemo(() => props.name ?? 'sidebar');
export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string } & Record<string, any>> = (props) => {
const [local, forwarded] = splitProps(props, ['as', 'open', 'name', 'class']);
return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed}`}>
const [open, setOpen] = createSignal(local.open ?? true);
const name = createMemo(() => local.name ?? 'sidebar');
return <Dynamic component={local.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed} ${local.class}`} {...forwarded}>
<button
role="button"
onclick={() => setOpen(o => !o)}