chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

convert memo to selector

Browse source
This commit is contained in:
Chris Kruining 2025-02-17 11:53:45 +11:00
parent 210d8e44a1
commit 39da4f696e
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
1 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/tabs.tsx
View file

@ -1,4 +1,4 @@
import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js"; import { Accessor, children, createContext, createEffect, createMemo, createSelector, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js";
import { Command, CommandType, noop, useCommands } from "~/features/command"; import { Command, CommandType, noop, useCommands } from "~/features/command";
import { AiOutlineClose } from "solid-icons/ai"; import { AiOutlineClose } from "solid-icons/ai";
import css from "./tabs.module.css"; import css from "./tabs.module.css";
@ -6,7 +6,7 @@ import css from "./tabs.module.css";
type CloseTabCommandType = CommandType<(id: string) => any>; type CloseTabCommandType = CommandType<(id: string) => any>;
interface TabsContextType { interface TabsContextType {
activate(id: string | undefined): void; activate(id: string | undefined): void;
isActive(id: string): Accessor<boolean>; isActive(id: string): boolean;
readonly onClose: Accessor<CloseTabCommandType | undefined> readonly onClose: Accessor<CloseTabCommandType | undefined>
} }
@ -24,6 +24,7 @@ const useTabs = () => {
export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?: Setter<string | undefined>, onClose?: CloseTabCommandType }> = (props) => { export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?: Setter<string | undefined>, onClose?: CloseTabCommandType }> = (props) => {
const [active, setActive] = createSignal<string | undefined>(props.active); const [active, setActive] = createSignal<string | undefined>(props.active);
const isActive = createSelector<string | undefined, string>(active, (id, active) => id === active);
createEffect(() => { createEffect(() => {
props.setActive?.(active()); props.setActive?.(active());
@ -34,9 +35,11 @@ export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?
setActive(id); setActive(id);
}, },
isActive(id: string) { isActive,
return createMemo(() => active() === id);
}, // isActive(id: string) {
// return createMemo(() => active() === id);
// },
onClose: createMemo(() => props.onClose), onClose: createMemo(() => props.onClose),
}; };
@ -91,7 +94,6 @@ const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClo
export const Tab: ParentComponent<{ id: string, label: string, closable?: boolean }> = (props) => { export const Tab: ParentComponent<{ id: string, label: string, closable?: boolean }> = (props) => {
const context = useTabs(); const context = useTabs();
const resolved = children(() => props.children); const resolved = children(() => props.children);
const isActive = context.isActive(props.id);
return <div return <div
id={props.id} id={props.id}
@ -99,7 +101,7 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
data-tab-label={props.label} data-tab-label={props.label}
data-tab-closable={props.closable} data-tab-closable={props.closable}
> >
<Show when={isActive()}> <Show when={context.isActive(props.id)}>
<Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context> <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>
</Show> </Show>
</div>; </div>;