refactor changes on time brush

microsoft · Sep 19, 2023 · 74063a0 · 74063a0
1 parent f257451
commit 74063a0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/packages/components/src/TimeBrush/TimeBrush.stories.tsx b/packages/components/src/TimeBrush/TimeBrush.stories.tsx
@@ -4,6 +4,7 @@
  */
 import { TimeBrush } from './TimeBrush.js'
 import type { TimeBrushProps } from './TimeBrush.types.js'
+import { useState } from 'react'
 
 const meta = {
 	title: '@essex:components/TimeBrush',
@@ -12,9 +13,12 @@ const meta = {
 export default meta
 
 const PrimaryComponent: React.FC<TimeBrushProps> = (args) => {
+	const [from, setFrom] = useState<string>('from')
+	const [to, setTo] = useState<string>('to')
+
 	return (
 		<div style={{ display: 'flex', alignItems: 'center' }}>
-			<TimeBrush {...args}/>
+			<TimeBrush {...args} from={from} onChangeFrom={setFrom} to={to} onChangeTo={setTo}/>
 		</div>
 	)
 }

diff --git a/packages/components/src/TimeBrush/TimeBrush.tsx b/packages/components/src/TimeBrush/TimeBrush.tsx
@@ -21,9 +21,13 @@ export const TimeBrush: React.FC<TimeBrushProps> = memo(function TimeBrush({
 	dateRange,
 	markedDate,
 	elements,
+	from,
+	to,
+	onChangeFrom,
+	onChangeTo
 }) {
-	const [from, setFrom] = useState<string>('from')
-	const [to, setTo] = useState<string>('to')
+	//const [from, setFrom] = useState<string>('from')
+	//const [to, setTo] = useState<string>('to')
 
 	const barWidth = useMemo(() => {
 		if (dateRange && chartWidth) {
@@ -37,10 +41,10 @@ export const TimeBrush: React.FC<TimeBrushProps> = memo(function TimeBrush({
 
 	const handleBrushEnd = useCallback(
 		(range: [Date, Date] | null) => {
-			setFrom(range?.[0]?.toISOString() ?? '')
-			setTo(range?.[1]?.toISOString() ?? '')
+			onChangeFrom(range?.[0]?.toISOString() ?? '')
+			onChangeTo(range?.[1]?.toISOString() ?? '')
 		},
-		[setFrom, setTo],
+		[onChangeFrom, onChangeTo],
 	)
 
 	const selectionRange: [Date, Date] | undefined = useMemo(() => {

diff --git a/packages/components/src/TimeBrush/TimeBrush.types.ts b/packages/components/src/TimeBrush/TimeBrush.types.ts
@@ -16,6 +16,10 @@ export interface TimeBrushProps {
 	chartWidth?: number
 	selectionRange?: [Date, Date]
 	markedDate?: Date
+	from: string,
+	to: string,
+	onChangeFrom: () => void
+	onChangeTo: () => void
 }
 
 export interface TermBarProps {