RC #291 - Adding "useRange" prop to FacetTimeline component; Removing…

… "defaultMin" and "defaultMax" props
performant-software · Aug 12, 2024 · 9d203e8 · 9d203e8
1 parent 86c8e4e
commit 9d203e8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 33 deletions.
diff --git a/packages/core-data/src/components/FacetTimeline.js b/packages/core-data/src/components/FacetTimeline.js
@@ -34,26 +34,11 @@ type Props = {
    */
   classNames?: ClassNamesType,
 
-  /**
-   * Default maximum value.
-   */
-  defaultMax: number,
-
-  /**
-   * Default minimum value.
-   */
-  defaultMin: number,
-
   /**
    * If `true`, the event popover content will display the event description.
    */
   description?: boolean,
 
-  /**
-   * Callback fired when the range or min/max properties are changed.
-   */
-  onChange?: (range: [number, number], minMax: [number, number]) => void,
-
   /**
    * Callback fired when the event popover is clicked.
    */
@@ -64,12 +49,19 @@ type Props = {
    */
   onLoad?: (events: Array<EventType>) => void,
 
+  /**
+   * Typesense `useRange` hook.
+   */
+  useRange: ({ attribute: string }) => ({ refine: (range: [number, number]) => void }) => void,
+
   /**
    * Zoom level increment.
    */
   zoom?: number
 };
 
+const FACET_EVENT_RANGE = 'event_range_facet';
+
 const FacetTimeline = (props: Props) => {
   const [events, setEvents] = useState();
   const [max, setMax] = useState();
@@ -81,6 +73,8 @@ const FacetTimeline = (props: Props) => {
 
   const ref = useRef();
 
+  const { range: defaultRange, refine } = props.useRange({ attribute: FACET_EVENT_RANGE });
+
   /**
    * Returns the year value for the passed event.
    *
@@ -142,10 +136,8 @@ const FacetTimeline = (props: Props) => {
         .then(onLoad)
     ));
 
-    if (props.onChange) {
-      props.onChange(range, [min, max]);
-    }
-  }, [max, min, range]);
+    refine(range);
+  }, [range]);
 
   /**
    * Calls the onLoad prop when the events are changed.
@@ -156,11 +148,28 @@ const FacetTimeline = (props: Props) => {
     }
   }, [events, props.onLoad]);
 
+  /**
+   * Sets the default min/max values based on the facet range.
+   */
+  useEffect(() => {
+    if (!min && defaultRange?.min) {
+      setMin(defaultRange.min);
+    }
+
+    if (!max && defaultRange?.max) {
+      setMax(defaultRange.max);
+    }
+  }, [max, min, defaultRange]);
+
+  if (!(min && max)) {
+    return null;
+  }
+
   return (
     <div
       className={clsx(
         'py-7',
-        { 'pt-12': !props.description },
+        { 'pt-16': !props.description },
         { 'pt-40': props.description },
         props.className
       )}
@@ -261,8 +270,8 @@ const FacetTimeline = (props: Props) => {
         childrenPosition='top'
         classNames={props.classNames}
         onChange={onChange}
-        defaultMin={props.defaultMin}
-        defaultMax={props.defaultMax}
+        defaultMin={min}
+        defaultMax={max}
         zoom={props.zoom}
       />
     </div>

diff --git a/packages/storybook/.storybook/api/core-data/Events.js b/packages/storybook/.storybook/api/core-data/Events.js
@@ -14,7 +14,7 @@ class Events extends Base {
    * Builds a single event item.
    */
   buildItem(params) {
-    const { min, max } = params;
+    const { min_year: min, max_year: max } = params;
 
     const startDate = this.createFuzzyDate(min, max);
     // const endDate = this.createFuzzyDate(startDate.end_date);

diff --git a/packages/storybook/src/core-data/FacetTimeline.stories.js b/packages/storybook/src/core-data/FacetTimeline.stories.js
@@ -13,10 +13,17 @@ export default {
   component: FacetTimeline
 };
 
+const useRange = () => ({
+  range: {
+    min: 1768,
+    max: 1777
+  },
+  refine: () => {}
+});
+
 export const Default = withCoreDataContextProvider(() => (
   <FacetTimeline
-    defaultMin={2000}
-    defaultMax={2024}
+    useRange={useRange}
     zoom={10}
   />
 ));
@@ -31,8 +38,7 @@ export const Styled = withCoreDataContextProvider(() => (
       track: 'bg-gray-400',
       zoom: 'text-white'
     }}
-    defaultMin={2000}
-    defaultMax={2024}
+    useRange={useRange}
     zoom={10}
   />
 ));
@@ -43,9 +49,8 @@ export const EventModal = withCoreDataContextProvider(() => {
   return (
     <>
       <FacetTimeline
-        defaultMin={2000}
-        defaultMax={2024}
         onClick={(event) => setSelectedEvent(event)}
+        useRange={useRange}
         zoom={10}
       />
       { selectedEvent && (
@@ -84,9 +89,8 @@ export const ListView = withCoreDataContextProvider(() => {
           ),
           onClick: () => setListView(true)
         }]}
-        defaultMin={2000}
-        defaultMax={2024}
         onLoad={setEvents}
+        useRange={useRange}
         zoom={10}
       />
       { listView && (
@@ -122,9 +126,8 @@ export const ListView = withCoreDataContextProvider(() => {
 
 export const Description = withCoreDataContextProvider(() => (
   <FacetTimeline
-    defaultMin={2000}
-    defaultMax={2024}
     description
+    useRange={useRange}
     zoom={10}
   />
 ));