Merge pull request #295 from performant-software/feature/rc291_timeline_facet

RC #291 - Timeline Facet

Author: dleadbetter

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.9",
-    "@performant-software/shared-components": "^2.2.9",
+    "@performant-software/semantic-components": "^2.2.10",
+    "@performant-software/shared-components": "^2.2.10",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/core-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -22,8 +22,11 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@samvera/clover-iiif": "^2.3.2",
     "@turf/turf": "^6.5.0",
     "clsx": "^2.1.0",
@@ -37,8 +40,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/shared-components": "^2.2.9",
-    "@performant-software/geospatial": "^2.2.9",
+    "@performant-software/geospatial": "^2.2.10",
+    "@performant-software/shared-components": "^2.2.10",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",

packages/core-data/src/components/EventDetails.js

@@ -6,6 +6,11 @@ import LoadAnimation from './LoadAnimation';
 import { useEventsService, useLoader } from '../hooks/CoreData';
 
 type Props = {
+  /**
+   * (Optional) class name to apply to the root element.
+   */
+  className?: string,
+
   /**
    * Identifier for the event to fetch.
    */
@@ -25,7 +30,7 @@ const EventDetails = (props: Props) => {
    */
   const onLoad = useCallback(() => EventsService.fetchOne(props.id), [props.id]);
 
-  const { data: { event } = {}, loading } = useLoader(onLoad);
+  const { data: { event } = {}, loading } = useLoader(onLoad, {}, [props.id]);
 
   if (loading) {
     return (
@@ -38,7 +43,9 @@ const EventDetails = (props: Props) => {
   }
 
   return (
-    <div>
+    <div
+      className={props.className}
+    >
       <h1
         className='pr-6 py-1 font-bold text-2xl'
       >

packages/core-data/src/components/EventsList.js

@@ -0,0 +1,99 @@
+// @flow
+
+import clsx from 'clsx';
+import React from 'react';
+import _ from 'underscore';
+import type { Event as EventType } from '../types/Event';
+import EventUtils from '../utils/Event';
+
+type Props = {
+  /**
+   * (Optional) class name to apply to the root element.
+   */
+  className?: string,
+
+  /**
+   * If `true`, the event description will be displayed on the card.
+   */
+  description?: boolean,
+
+  /**
+   * The list of events records to display.
+   */
+  events: Array<EventType>,
+
+  /**
+   * Callback that returns `true` if the passed event is selected.
+   */
+  isSelected?: (event: EventType) => boolean,
+
+  /**
+   * Callback fired when the event row is clicked.
+   */
+  onClick?: (event: EventType) => void
+};
+
+const EventsList = (props: Props) => (
+  <ul
+    className={props.className}
+  >
+    { _.map(props.events, (event) => (
+      <li>
+        <div
+          className='min-h-[5.5em] border-b flex flex-col justify-start'
+        >
+          <button
+            className={clsx(
+              'py-3',
+              'px-4',
+              'flex-grow',
+              'text-left',
+              'inline-flex',
+              'flex-col',
+              'rounded-none',
+              { 'hover:bg-event-selected': props.isSelected(event) },
+              { 'text-white': props.isSelected(event) },
+              { 'bg-event-selected': props.isSelected(event) }
+            )}
+            onClick={() => props.onClick(event)}
+            type='button'
+          >
+            <div
+              className='flex justify-between w-full items-center'
+            >
+              <div
+                className='flex-grow'
+              >
+                <div>
+                  { EventUtils.getDateView(event) }
+                </div>
+                <h2
+                  className='text-xl font-bold'
+                >
+                  { event.name }
+                </h2>
+              </div>
+            </div>
+            { props.description && (
+              <p
+                className={clsx(
+                  'py-2',
+                  { 'text-muted': !props.isSelected(event) }
+                )}
+              >
+                { event.description }
+              </p>
+            )}
+          </button>
+        </div>
+      </li>
+    ))}
+  </ul>
+);
+
+EventsList.defaultProps = {
+  isSelected: () => false,
+  onClick: () => {}
+};
+
+export default EventsList;