fix: properly manage states

kobaltedev · Nov 19, 2024 · 31df2d7 · 31df2d7
1 parent 08496c2
commit 31df2d7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 46 deletions.
diff --git a/packages/core/src/segmented-control/segmented-control-context.tsx b/packages/core/src/segmented-control/segmented-control-context.tsx
@@ -7,6 +7,7 @@ import {
 } from "solid-js";
 
 export interface SegmentedControlContextValue {
+	value: Accessor<string | undefined>;
 	defaultValue: Accessor<string | undefined>;
 	orientation: Accessor<Orientation | undefined>;
 	root: Accessor<HTMLElement | undefined>;

diff --git a/packages/core/src/segmented-control/segmented-control-indicator.tsx b/packages/core/src/segmented-control/segmented-control-indicator.tsx
@@ -38,13 +38,18 @@ export function SegmentedControlIndicator<T extends ValidComponent = "div">(
 	const [resizing, setResizing] = createSignal(false);
 
 	const computeStyle = () => {
-		const el = context.selectedItem();
-		if (!el) return;
+		const element = context.selectedItem();
+
+		if (!element) {
+			// TODO: Listen for transition to end here before removing the style.
+			setStyle(undefined);
+			return;
+		}
 
 		setStyle({
-			width: `${el.offsetWidth}px`,
-			height: `${el.offsetHeight}px`,
-			transform: computeTransform(el),
+			width: `${element.offsetWidth}px`,
+			height: `${element.offsetHeight}px`,
+			transform: computeTransform(element),
 			"transition-duration": resizing() ? "0ms" : undefined,
 		});
 	};
@@ -59,12 +64,10 @@ export function SegmentedControlIndicator<T extends ValidComponent = "div">(
 	};
 
 	createEffect(
-		on(context.selectedItem, () => {
-			// This effect should only run if the style is set; otherwise, the style will be computed
-			// in the resize observer callback, which will prevent the initial transition while resizing.
-			if (!style()) return;
-
+		on(context.value, () => {
+			setResizing(!style());
 			computeStyle();
+			setResizing(false);
 		}),
 	);
 

diff --git a/packages/core/src/segmented-control/segmented-control-item-input.tsx b/packages/core/src/segmented-control/segmented-control-item-input.tsx
@@ -2,20 +2,19 @@ import { mergeRefs } from "@kobalte/utils";
 import {
 	type Component,
 	type ValidComponent,
-	createEffect,
 	createSignal,
-	onCleanup,
 	splitProps,
 } from "solid-js";
+
 import type { ElementOf, PolymorphicProps } from "../polymorphic";
+import { createFormResetListener } from "../primitives";
 import {
 	RadioGroup,
 	type RadioGroupItemInputCommonProps,
 	type RadioGroupItemInputOptions,
 	type RadioGroupItemInputRenderProps,
 } from "../radio-group";
 import { useRadioGroupItemContext } from "../radio-group/radio-group-item-context";
-import { useSegmentedControlContext } from "./segmented-control-context";
 
 export interface SegmentedControlItemInputOptions
 	extends RadioGroupItemInputOptions {}
@@ -36,34 +35,16 @@ export const SegmentedControlItemInput = <T extends ValidComponent = "input">(
 	props: PolymorphicProps<T, SegmentedControlItemInputProps<T>>,
 ) => {
 	const radioGroupItemContext = useRadioGroupItemContext();
-	const segmentedControlContext = useSegmentedControlContext();
 
 	const [localProps, otherProps] = splitProps(props, ["ref"]);
 
 	const [ref, setRef] = createSignal<HTMLInputElement>();
 
-	createEffect(() => {
-		const element = ref();
-		if (!element) return;
-
-		const form = element.form;
-		if (!form) return;
-
-		const handleReset = (_e: Event) => {
-			requestAnimationFrame(() => {
-				if (
-					radioGroupItemContext.value() ===
-					segmentedControlContext.defaultValue()
-				) {
-					radioGroupItemContext.select();
-				}
-			});
-		};
-
-		form.addEventListener("reset", handleReset);
-
-		onCleanup(() => {
-			form.removeEventListener("reset", handleReset);
+	createFormResetListener(ref, () => {
+		requestAnimationFrame(() => {
+			if (radioGroupItemContext.isDefault()) {
+				radioGroupItemContext.select();
+			}
 		});
 	});
 

diff --git a/packages/core/src/segmented-control/segmented-control-root.tsx b/packages/core/src/segmented-control/segmented-control-root.tsx
@@ -1,6 +1,7 @@
 import { mergeRefs } from "@kobalte/utils";
 import {
 	type ValidComponent,
+	createEffect,
 	createSignal,
 	mergeProps,
 	splitProps,
@@ -17,18 +18,9 @@ export type SegmentedControlRootProps = RadioGroupRootProps;
 export const SegmentedControlRoot = <T extends ValidComponent = "div">(
 	props: PolymorphicProps<T, SegmentedControlRootProps>,
 ) => {
-	if (!props.value && !props.defaultValue) {
-		throw new Error(
-			"[kobalte]: No value or default value provided for the segmented control.",
-		);
-	}
-
-	if (!props.defaultValue) {
-		props.defaultValue = props.value;
-	}
-
 	const mergedProps = mergeProps(
 		{
+			defaultValue: props.value,
 			orientation: "horizontal",
 		},
 		props,
@@ -40,13 +32,20 @@ export const SegmentedControlRoot = <T extends ValidComponent = "div">(
 	const [selectedItem, setSelectedItem] = createSignal<HTMLElement>();
 
 	const context: SegmentedControlContextValue = {
+		value: () => otherProps.value,
 		defaultValue: () => otherProps.defaultValue,
 		orientation: () => otherProps.orientation,
 		root: ref,
 		selectedItem: selectedItem,
 		setSelectedItem: setSelectedItem,
 	};
 
+	createEffect(() => {
+		if (context.value()) return;
+
+		setSelectedItem(undefined);
+	});
+
 	return (
 		<SegmentedControlContext.Provider value={context}>
 			<RadioGroup ref={mergeRefs(setRef, localProps.ref)} {...otherProps} />