Add renderItem prop to Core Data RelatedList parent components (#285)

* add onclicks to related components

* fix onClick args

* replace new onClicks with renderItems

* remove redundant RelatedList example

* remove stray onclick reference

* change renderItem output type

Author: camdendotlol

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

@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedOrganizations = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(organization) => (
+    renderItem={props.renderItem || ((organization) => (
       <>
         <Building2
           className='h-4 w-4 mr-1.5'
         />
         { organization.name }
       </>
-    )}
+    ))}
   />
 );
 

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

@@ -31,7 +31,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -57,14 +62,14 @@ const RelatedPeople = (props: Props) => {
       itemsPerRow={props.itemsPerRow}
       moreLabel={props.moreLabel}
       onLoad={props.onLoad}
-      renderItem={(person) => (
+      renderItem={props.renderItem || ((person) => (
         <>
           <UserCircle
             className='h-4 w-4 mr-1.5'
           />
           { getName(person) }
         </>
-      )}
+      ))}
       showMoreLabel={props.showMoreLabel}
     />
   );

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

@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedPlaces = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(place) => (
+    renderItem={props.renderItem || ((place) => (
       <>
         <MapPin
           className='h-4 w-4 mr-0.5 inline-block mb-0.5'
         />
         { place.name }
       </>
-    )}
+    ))}
   />
 );
 

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

@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedTaxonomies = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(taxonomy) => (
+    renderItem={props.renderItem || ((taxonomy) => (
       <>
         <ListTree
           className='h-4 w-4 mr-1.5'
         />
         { taxonomy.name }
       </>
-    )}
+    ))}
   />
 );
 

packages/storybook/src/core-data/RelatedOrganizations.stories.js

@@ -21,6 +21,26 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedOrganizations
+      onLoad={(params) => PlacesService.fetchRelatedOrganizations('1', params)}
+      renderItem={(item) => (
+        <p>
+          {`${item.name}:`}
+          &nbsp;
+          {Math.random() > 0.5
+            ? <span style={{ color: 'green' }}>↑</span>
+            : <span style={{ color: 'red' }}>↓</span>}
+          <strong>{`$${(Math.random() * 100).toPrecision(4)}`}</strong>
+        </p>
+      )}
+    />
+  );
+});
+
 export const EmptyList = withCoreDataContextProvider(() => (
   <RelatedOrganizations
     emptyMessage='No related organizations'

packages/storybook/src/core-data/RelatedPeople.stories.js

@@ -23,6 +23,24 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedPeople
+      onLoad={(params) => (
+        PlacesService.fetchRelatedPeople('1', params)
+      )}
+      renderItem={(item) => (
+        <p>
+          {`My name is ${item.first_name} ${item.middle_name}\
+           ${item.last_name} but you can just call me ${item.first_name}`}
+        </p>
+      )}
+    />
+  );
+});
+
 export const Horizontal = withCoreDataContextProvider(() => {
   const PlacesService = usePlacesService();
 

packages/storybook/src/core-data/RelatedPlaces.stories.js

@@ -21,6 +21,21 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedPlaces
+      onLoad={(params) => PlacesService.fetchRelatedPlaces('1', params)}
+      renderItem={(item) => (
+        <p>
+          {`I've ${Math.random() < 0.5 ? 'never' : ''} been to ${item.name}.`}
+        </p>
+      )}
+    />
+  );
+});
+
 export const EmptyMessage = withCoreDataContextProvider(() => (
   <RelatedPlaces
     emptyMessage='No related places'

…c/core-data/RelatedTaxonimies.stories.js …c/core-data/RelatedTaxonomies.stories.jspackages/storybook/src/core-data/RelatedTaxonimies.stories.js renamed to packages/storybook/src/core-data/RelatedTaxonomies.stories.js packages/storybook/src/core-data/RelatedTaxonimies.stories.js renamed to packages/storybook/src/core-data/RelatedTaxonomies.stories.js

@@ -21,6 +21,17 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedTaxonomies
+      onLoad={(params) => PlacesService.fetchRelatedTaxonomies('1', params)}
+      renderItem={(item) => <p style={{ color: 'pink' }}>{item.name}</p>}
+    />
+  );
+});
+
 export const EmptyList = withCoreDataContextProvider(() => (
   <RelatedTaxonomies
     emptyMessage='No related taxonomies'