cleanup date range field picker

huntabyte · Jul 18, 2024 · dbbcf2a · dbbcf2a
1 parent 1a51417
commit dbbcf2a
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 23 deletions.
diff --git a/packages/bits-ui/src/lib/bits/date-range-field/date-range-field.svelte.ts b/packages/bits-ui/src/lib/bits/date-range-field/date-range-field.svelte.ts
@@ -137,10 +137,10 @@ export class DateRangeFieldRootState {
 			const value = this.value.value;
 
 			untrack(() => {
-				if (value && value.start !== this.startValue.value) {
+				if (value.start !== undefined && value.start !== this.startValue.value) {
 					this.setStartValue(value.start);
 				}
-				if (value && value.end !== this.endValue.value) {
+				if (value.end !== undefined && value.end !== this.endValue.value) {
 					this.setEndValue(value.end);
 				}
 			});

diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte b/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte
@@ -83,7 +83,7 @@
 		value: box.with(
 			() => value as DateRange,
 			(v) => {
-				if (value !== v) {
+				if (!$state.is(value, v)) {
 					value = v;
 					onValueChange(v);
 				}

diff --git a/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts b/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts
@@ -199,7 +199,6 @@ class LinkPreviewContentState {
 			this.root.isPointerInTransit = isPointerInTransit;
 
 			onPointerExit(() => {
-				console.log("pointer exit");
 				this.root.handleClose();
 			});
 		});

diff --git a/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts b/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts
@@ -239,8 +239,8 @@ export class RangeCalendarRootState {
 						if (isBefore(endValue, startValue)) {
 							const start = startValue;
 							const end = endValue;
-							this.startValue.value = end;
-							this.endValue.value = start;
+							this.setStartValue(end);
+							this.setEndValue(start);
 							return { start: endValue, end: startValue };
 						} else {
 							return {
@@ -268,6 +268,14 @@ export class RangeCalendarRootState {
 		}
 	};
 
+	setStartValue = (value: DateValue | undefined) => {
+		this.startValue.value = value;
+	};
+
+	setEndValue = (value: DateValue | undefined) => {
+		this.endValue.value = value;
+	};
+
 	#setMonths = (months: Month<DateValue>[]) => (this.months = months);
 
 	/**
@@ -449,14 +457,14 @@ export class RangeCalendarRootState {
 				!this.preventDeselect.value &&
 				!this.endValue.value
 			) {
-				this.startValue.value = undefined;
+				this.setStartValue(undefined);
 				this.placeholder.value = date;
 				this.#announceEmpty();
 				return;
-			} else if (!this.endValue) {
+			} else if (!this.endValue.value) {
 				e.preventDefault();
 				if (prevLastPressedDate && isSameDay(prevLastPressedDate, date)) {
-					this.startValue.value = date;
+					this.setStartValue(date);
 					this.#announceSelectedDate(date);
 				}
 			}
@@ -468,23 +476,23 @@ export class RangeCalendarRootState {
 			isSameDay(this.endValue.value, date) &&
 			!this.preventDeselect.value
 		) {
-			this.startValue.value = undefined;
-			this.endValue.value = undefined;
+			this.setStartValue(undefined);
+			this.setEndValue(undefined);
 			this.placeholder.value = date;
 			this.#announceEmpty();
 			return;
 		}
 
 		if (!this.startValue.value) {
 			this.#announceSelectedDate(date);
-			this.startValue.value = date;
+			this.setStartValue(date);
 		} else if (!this.endValue.value) {
 			this.#announceSelectedRange(this.startValue.value, date);
-			this.endValue.value = date;
+			this.setEndValue(date);
 		} else if (this.endValue.value && this.startValue.value) {
-			this.endValue.value = undefined;
+			this.setEndValue(undefined);
 			this.#announceSelectedDate(date);
-			this.startValue.value = date;
+			this.setStartValue(date);
 		}
 	};
 

diff --git a/packages/bits-ui/src/lib/internal/useGraceArea.svelte.ts b/packages/bits-ui/src/lib/internal/useGraceArea.svelte.ts
@@ -21,7 +21,6 @@ export function useGraceArea(
 	}
 
 	function handleCreateGraceArea(e: PointerEvent, hoverTarget: HTMLElement) {
-		console.log("creating grace area");
 		const currentTarget = e.currentTarget;
 		if (!isHTMLElement(currentTarget)) return;
 		const exitPoint = { x: e.clientX, y: e.clientY };
@@ -36,11 +35,7 @@ export function useGraceArea(
 	$effect(() => {
 		const trigger = triggerNode();
 		const content = contentNode();
-		console.log("trigger", trigger);
-		console.log("content", content);
 		if (!trigger || !content) return;
-		console.log("triggernode", trigger);
-		console.log("contentnode", content);
 
 		const handleTriggerLeave = (e: PointerEvent) => {
 			handleCreateGraceArea(e, content!);

diff --git a/packages/bits-ui/src/tests/slider/Slider.spec.ts b/packages/bits-ui/src/tests/slider/Slider.spec.ts
@@ -574,7 +574,5 @@ function expectPercentages({
 		expect(isCloseEnough(percentage, thumb.style.left)).toBeTruthy();
 	}
 	expect(isCloseEnough(lesserPercentage, range.style.left)).toBeTruthy();
-	console.log("higherPercentage", higherPercentage);
-	console.log("rangeStyleRight", range.style.right);
 	expect(isCloseEnough(100 - higherPercentage, range.style.right)).toBeTruthy();
 }
diff --git a/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte b/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte
@@ -3,7 +3,7 @@
 	import { CalendarBlank, CaretLeft, CaretRight } from "$icons/index.js";
 	import { cn } from "$lib/utils/index.js";
 
-	let value: DateRange = { start: undefined, end: undefined };
+	let value: DateRange = $state({ start: undefined, end: undefined });
 </script>
 
 <DateRangePicker.Root