From 159b0f80ea225077dd5cdb4a7336cdccfe5f5504 Mon Sep 17 00:00:00 2001 From: jer3m01 Date: Wed, 3 Apr 2024 04:28:06 +0200 Subject: [PATCH] refactor: polymorphic collapsible --- .../src/collapsible/collapsible-content.tsx | 29 ++++++++++-------- .../core/src/collapsible/collapsible-root.tsx | 30 ++++++++++++++----- .../src/collapsible/collapsible-trigger.tsx | 21 +++++++++---- packages/core/src/collapsible/index.tsx | 14 +++++++++ 4 files changed, 70 insertions(+), 24 deletions(-) diff --git a/packages/core/src/collapsible/collapsible-content.tsx b/packages/core/src/collapsible/collapsible-content.tsx index d01c68a6..aac8ba6a 100644 --- a/packages/core/src/collapsible/collapsible-content.tsx +++ b/packages/core/src/collapsible/collapsible-content.tsx @@ -7,7 +7,6 @@ */ import { - OverrideComponentProps, mergeDefaultProps, mergeRefs, } from "@kobalte/utils"; @@ -20,31 +19,37 @@ import { onCleanup, onMount, splitProps, + ValidComponent, } from "solid-js"; -import { AsChildProp, Polymorphic } from "../polymorphic"; +import { Polymorphic, PolymorphicProps } from "../polymorphic"; import { createPresence } from "../primitives"; -import { useCollapsibleContext } from "./collapsible-context"; +import { CollapsibleDataSet, useCollapsibleContext } from "./collapsible-context"; -export interface CollapsibleContentOptions extends AsChildProp { - /** The HTML styles attribute (object form only). */ +export interface CollapsibleContentOptions { +} + +export interface CollapsibleContentCommonProps { + id: string; + ref: HTMLElement | ((el: HTMLElement) => void); style?: JSX.CSSProperties; } -export interface CollapsibleContentProps - extends OverrideComponentProps<"div", CollapsibleContentOptions> {} +export interface CollapsibleContentRenderProps extends CollapsibleContentCommonProps, CollapsibleDataSet {} + +export type CollapsibleContentProps = CollapsibleContentOptions & Partial; /** * Contains the content to be rendered when the collapsible is expanded. */ -export function CollapsibleContent(props: CollapsibleContentProps) { - let ref: HTMLDivElement | undefined; +export function CollapsibleContent(props: PolymorphicProps) { + let ref: HTMLElement | undefined; const context = useCollapsibleContext(); const mergedProps = mergeDefaultProps( { id: context.generateId("content") }, - props, + props as CollapsibleContentProps, ); const [local, others] = splitProps(mergedProps, ["ref", "id", "style"]); @@ -107,11 +112,11 @@ export function CollapsibleContent(props: CollapsibleContentProps) { ), ); - createEffect(() => onCleanup(context.registerContentId(local.id!))); + createEffect(() => onCleanup(context.registerContentId(local.id))); return ( - as="div" ref={mergeRefs((el) => { presence.setRef(el); diff --git a/packages/core/src/collapsible/collapsible-root.tsx b/packages/core/src/collapsible/collapsible-root.tsx index 4b00905d..6fa2f21e 100644 --- a/packages/core/src/collapsible/collapsible-root.tsx +++ b/packages/core/src/collapsible/collapsible-root.tsx @@ -17,9 +17,10 @@ import { createSignal, createUniqueId, splitProps, + ValidComponent, } from "solid-js"; -import { AsChildProp, Polymorphic } from "../polymorphic"; +import { Polymorphic, PolymorphicProps } from "../polymorphic"; import { createDisclosureState, createRegisterId } from "../primitives"; import { CollapsibleContext, @@ -27,7 +28,7 @@ import { CollapsibleDataSet, } from "./collapsible-context"; -export interface CollapsibleRootOptions extends AsChildProp { +export interface CollapsibleRootOptions { /** The controlled open state of the collapsible. */ open?: boolean; @@ -50,16 +51,27 @@ export interface CollapsibleRootOptions extends AsChildProp { forceMount?: boolean; } -export interface CollapsibleRootProps - extends OverrideComponentProps<"div", CollapsibleRootOptions> {} +export interface CollapsibleRootCommonProps { + id: string; +} + +export interface CollapsibleRootRenderProps + extends CollapsibleRootCommonProps, CollapsibleDataSet { +} + +export type CollapsibleRootProps = CollapsibleRootOptions & + Partial; /** * An interactive component which expands/collapses a content. */ -export function CollapsibleRoot(props: CollapsibleRootProps) { +export function CollapsibleRoot(props: PolymorphicProps) { const defaultId = `collapsible-${createUniqueId()}`; - const mergedProps = mergeDefaultProps({ id: defaultId }, props); + const mergedProps = mergeDefaultProps( + { id: defaultId }, + props as CollapsibleRootProps, + ); const [local, others] = splitProps(mergedProps, [ "open", @@ -96,7 +108,11 @@ export function CollapsibleRoot(props: CollapsibleRootProps) { return ( - + + as="div" + {...dataset()} + {...others} + /> ); } diff --git a/packages/core/src/collapsible/collapsible-trigger.tsx b/packages/core/src/collapsible/collapsible-trigger.tsx index 8b372e64..7286977a 100644 --- a/packages/core/src/collapsible/collapsible-trigger.tsx +++ b/packages/core/src/collapsible/collapsible-trigger.tsx @@ -7,19 +7,30 @@ */ import { OverrideComponentProps, callHandler } from "@kobalte/utils"; -import { JSX, splitProps } from "solid-js"; +import { JSX, splitProps, ValidComponent } from "solid-js"; import * as Button from "../button"; -import { AsChildProp } from "../polymorphic"; +import { PolymorphicProps } from "../polymorphic"; import { useCollapsibleContext } from "./collapsible-context"; -export interface CollapsibleTriggerProps - extends OverrideComponentProps<"button", AsChildProp> {} +export interface CollapsibleTriggerOptions { + onClick?: any; // TODO +} + +export interface CollapsibleTriggerCommonProps { + id: string; + ref: HTMLElement | ((el: HTMLElement) => void); +} + +// TODO impl ButtonRenderProps! +export interface CollapsibleTriggerRenderProps extends CollapsibleTriggerCommonProps {} + +export type CollapsibleTriggerProps = CollapsibleTriggerOptions & Partial; /** * The button that expands/collapses the collapsible content. */ -export function CollapsibleTrigger(props: CollapsibleTriggerProps) { +export function CollapsibleTrigger(props: PolymorphicProps) { const context = useCollapsibleContext(); const [local, others] = splitProps(props, ["onClick"]); diff --git a/packages/core/src/collapsible/index.tsx b/packages/core/src/collapsible/index.tsx index 2bd6e1fb..713bb5ed 100644 --- a/packages/core/src/collapsible/index.tsx +++ b/packages/core/src/collapsible/index.tsx @@ -1,23 +1,37 @@ import { CollapsibleContent as Content, type CollapsibleContentOptions, + type CollapsibleContentCommonProps, + type CollapsibleContentRenderProps, type CollapsibleContentProps, } from "./collapsible-content"; import { CollapsibleRoot as Root, type CollapsibleRootOptions, + type CollapsibleRootCommonProps, + type CollapsibleRootRenderProps, type CollapsibleRootProps, } from "./collapsible-root"; import { CollapsibleTrigger as Trigger, + type CollapsibleTriggerOptions, + type CollapsibleTriggerCommonProps, + type CollapsibleTriggerRenderProps, type CollapsibleTriggerProps, } from "./collapsible-trigger"; export type { CollapsibleContentOptions, + CollapsibleContentCommonProps, + CollapsibleContentRenderProps, CollapsibleContentProps, CollapsibleRootOptions, + CollapsibleRootCommonProps, + CollapsibleRootRenderProps, CollapsibleRootProps, + CollapsibleTriggerOptions, + CollapsibleTriggerCommonProps, + CollapsibleTriggerRenderProps, CollapsibleTriggerProps, }; export { Content, Root, Trigger };