extracted selection logic to own feature and anhanched with range selection
This commit is contained in:
parent
40f46eba1d
commit
1a963a665e
15 changed files with 295 additions and 254 deletions
|
@ -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}`)
|
||||
// },
|
||||
|
|
|
@ -15,6 +15,10 @@
|
|||
overflow: auto clip;
|
||||
}
|
||||
|
||||
&.open > .content {
|
||||
inline-size: max-content;
|
||||
}
|
||||
|
||||
&.closed > .content {
|
||||
inline-size: 0;
|
||||
}
|
||||
|
|
|
@ -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)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue