refactor: merge playground into webui
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import type { Accessor, Component, ComponentProps, VoidProps } from "solid-js"
|
||||
import type { Accessor, Component, ComponentProps, VoidProps } from 'solid-js';
|
||||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
@@ -6,118 +6,122 @@ import {
|
||||
createSignal,
|
||||
mergeProps,
|
||||
splitProps,
|
||||
useContext
|
||||
} from "solid-js"
|
||||
useContext,
|
||||
} from 'solid-js';
|
||||
|
||||
import type { CreateEmblaCarouselType } from "embla-carousel-solid"
|
||||
import createEmblaCarousel from "embla-carousel-solid"
|
||||
import type { CreateEmblaCarouselType } from 'embla-carousel-solid';
|
||||
import createEmblaCarousel from 'embla-carousel-solid';
|
||||
|
||||
import { cn } from "~/styles/utils"
|
||||
import type { ButtonProps } from "~/components/ui/button"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import type { ButtonProps } from '~/components/ui/button';
|
||||
import { Button } from '~/components/ui/button';
|
||||
import { cn } from '~/utils/styles';
|
||||
|
||||
export type CarouselApi = CreateEmblaCarouselType[1]
|
||||
export type CarouselApi = CreateEmblaCarouselType[1];
|
||||
|
||||
type UseCarouselParameters = Parameters<typeof createEmblaCarousel>
|
||||
type CarouselOptions = NonNullable<UseCarouselParameters[0]>
|
||||
type CarouselPlugin = NonNullable<UseCarouselParameters[1]>
|
||||
type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
|
||||
type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
|
||||
type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: ReturnType<CarouselOptions>
|
||||
plugins?: ReturnType<CarouselPlugin>
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
opts?: ReturnType<CarouselOptions>;
|
||||
plugins?: ReturnType<CarouselPlugin>;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
setApi?: (api: CarouselApi) => void;
|
||||
};
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof createEmblaCarousel>[0]
|
||||
api: ReturnType<typeof createEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: Accessor<boolean>
|
||||
canScrollNext: Accessor<boolean>
|
||||
} & CarouselProps
|
||||
carouselRef: ReturnType<typeof createEmblaCarousel>[0];
|
||||
api: ReturnType<typeof createEmblaCarousel>[1];
|
||||
scrollPrev: () => void;
|
||||
scrollNext: () => void;
|
||||
canScrollPrev: Accessor<boolean>;
|
||||
canScrollNext: Accessor<boolean>;
|
||||
} & CarouselProps;
|
||||
|
||||
const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(null)
|
||||
const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const useCarousel = () => {
|
||||
const context = useContext(CarouselContext)
|
||||
const context = useContext(CarouselContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
throw new Error('useCarousel must be used within a <Carousel />');
|
||||
}
|
||||
|
||||
return context()
|
||||
}
|
||||
return context();
|
||||
};
|
||||
|
||||
const Carousel: Component<CarouselProps & ComponentProps<"div">> = (rawProps) => {
|
||||
const props = mergeProps<(CarouselProps & ComponentProps<"div">)[]>(
|
||||
{ orientation: "horizontal" },
|
||||
const Carousel: Component<CarouselProps & ComponentProps<'div'>> = (
|
||||
rawProps
|
||||
) => {
|
||||
const props = mergeProps<(CarouselProps & ComponentProps<'div'>)[]>(
|
||||
{ orientation: 'horizontal' },
|
||||
rawProps
|
||||
)
|
||||
);
|
||||
|
||||
const [local, others] = splitProps(props, [
|
||||
"orientation",
|
||||
"opts",
|
||||
"setApi",
|
||||
"plugins",
|
||||
"class",
|
||||
"children"
|
||||
])
|
||||
'orientation',
|
||||
'opts',
|
||||
'setApi',
|
||||
'plugins',
|
||||
'class',
|
||||
'children',
|
||||
]);
|
||||
|
||||
const [carouselRef, api] = createEmblaCarousel(
|
||||
() => ({
|
||||
...local.opts,
|
||||
axis: local.orientation === "horizontal" ? "x" : "y"
|
||||
axis: local.orientation === 'horizontal' ? 'x' : 'y',
|
||||
}),
|
||||
() => (local.plugins === undefined ? [] : local.plugins)
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = createSignal(false)
|
||||
const [canScrollNext, setCanScrollNext] = createSignal(false)
|
||||
);
|
||||
const [canScrollPrev, setCanScrollPrev] = createSignal(false);
|
||||
const [canScrollNext, setCanScrollNext] = createSignal(false);
|
||||
|
||||
const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}
|
||||
setCanScrollPrev(api.canScrollPrev());
|
||||
setCanScrollNext(api.canScrollNext());
|
||||
};
|
||||
|
||||
const scrollPrev = () => {
|
||||
api()?.scrollPrev()
|
||||
}
|
||||
api()?.scrollPrev();
|
||||
};
|
||||
|
||||
const scrollNext = () => {
|
||||
api()?.scrollNext()
|
||||
}
|
||||
api()?.scrollNext();
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
scrollPrev();
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
scrollNext();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!api() || !local.setApi) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
local.setApi(api)
|
||||
})
|
||||
local.setApi(api);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (!api()) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
onSelect(api()!)
|
||||
api()!.on("reInit", onSelect)
|
||||
api()!.on("select", onSelect)
|
||||
onSelect(api()!);
|
||||
api()!.on('reInit', onSelect);
|
||||
api()!.on('select', onSelect);
|
||||
|
||||
return () => {
|
||||
api()?.off("select", onSelect)
|
||||
}
|
||||
})
|
||||
api()?.off('select', onSelect);
|
||||
};
|
||||
});
|
||||
|
||||
const value = createMemo(
|
||||
() =>
|
||||
@@ -125,19 +129,21 @@ const Carousel: Component<CarouselProps & ComponentProps<"div">> = (rawProps) =>
|
||||
carouselRef,
|
||||
api,
|
||||
opts: local.opts,
|
||||
orientation: local.orientation || (local.opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
orientation:
|
||||
local.orientation ||
|
||||
(local.opts?.axis === 'y' ? 'vertical' : 'horizontal'),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext
|
||||
canScrollNext,
|
||||
}) satisfies CarouselContextProps
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider value={value}>
|
||||
<div
|
||||
onKeyDown={handleKeyDown}
|
||||
class={cn("relative", local.class)}
|
||||
class={cn('relative', local.class)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
{...others}
|
||||
@@ -145,57 +151,64 @@ const Carousel: Component<CarouselProps & ComponentProps<"div">> = (rawProps) =>
|
||||
{local.children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const CarouselContent: Component<ComponentProps<"div">> = (props) => {
|
||||
const [local, others] = splitProps(props, ["class"])
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
const CarouselContent: Component<ComponentProps<'div'>> = (props) => {
|
||||
const [local, others] = splitProps(props, ['class']);
|
||||
const { carouselRef, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div ref={carouselRef} class="overflow-hidden">
|
||||
<div
|
||||
class={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", local.class)}
|
||||
class={cn(
|
||||
'flex',
|
||||
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const CarouselItem: Component<ComponentProps<"div">> = (props) => {
|
||||
const [local, others] = splitProps(props, ["class"])
|
||||
const { orientation } = useCarousel()
|
||||
const CarouselItem: Component<ComponentProps<'div'>> = (props) => {
|
||||
const [local, others] = splitProps(props, ['class']);
|
||||
const { orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
class={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
'min-w-0 shrink-0 grow-0 basis-full',
|
||||
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type CarouselButtonProps = VoidProps<ButtonProps>
|
||||
type CarouselButtonProps = VoidProps<ButtonProps>;
|
||||
|
||||
const CarouselPrevious: Component<CarouselButtonProps> = (rawProps) => {
|
||||
const props = mergeProps<CarouselButtonProps[]>({ variant: "outline", size: "icon" }, rawProps)
|
||||
const [local, others] = splitProps(props, ["class", "variant", "size"])
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
const props = mergeProps<CarouselButtonProps[]>(
|
||||
{ variant: 'outline', size: 'icon' },
|
||||
rawProps
|
||||
);
|
||||
const [local, others] = splitProps(props, ['class', 'variant', 'size']);
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant={local.variant}
|
||||
size={local.size}
|
||||
class={cn(
|
||||
"absolute size-8 touch-manipulation rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-left-12 top-1/2 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
'absolute size-8 touch-manipulation rounded-full',
|
||||
orientation === 'horizontal'
|
||||
? '-left-12 -translate-y-1/2 top-1/2'
|
||||
: '-top-12 -translate-x-1/2 left-1/2 rotate-90',
|
||||
local.class
|
||||
)}
|
||||
disabled={!canScrollPrev()}
|
||||
@@ -218,23 +231,26 @@ const CarouselPrevious: Component<CarouselButtonProps> = (rawProps) => {
|
||||
</svg>
|
||||
<span class="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const CarouselNext: Component<CarouselButtonProps> = (rawProps) => {
|
||||
const props = mergeProps<CarouselButtonProps[]>({ variant: "outline", size: "icon" }, rawProps)
|
||||
const [local, others] = splitProps(props, ["class", "variant", "size"])
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
const props = mergeProps<CarouselButtonProps[]>(
|
||||
{ variant: 'outline', size: 'icon' },
|
||||
rawProps
|
||||
);
|
||||
const [local, others] = splitProps(props, ['class', 'variant', 'size']);
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant={local.variant}
|
||||
size={local.size}
|
||||
class={cn(
|
||||
"absolute size-8 touch-manipulation rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-right-12 top-1/2 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
'absolute size-8 touch-manipulation rounded-full',
|
||||
orientation === 'horizontal'
|
||||
? '-right-12 -translate-y-1/2 top-1/2'
|
||||
: '-bottom-12 -translate-x-1/2 left-1/2 rotate-90',
|
||||
local.class
|
||||
)}
|
||||
disabled={!canScrollNext()}
|
||||
@@ -257,7 +273,13 @@ const CarouselNext: Component<CarouselButtonProps> = (rawProps) => {
|
||||
</svg>
|
||||
<span class="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
|
||||
export {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user