@performant-software/semantic-components 1.0.13-beta.2 → 1.0.13-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.13-beta.2",
+  "version": "1.0.13-beta.3",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.13-beta.2",
+    "@performant-software/shared-components": "^1.0.13-beta.3",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/Items.js

@@ -20,6 +20,16 @@ import './Items.css';
 import type { Props as ListProps } from './List';
 
 type Props = ListProps & {
+  /**
+   * Renders the Card/Item component as the passed component.
+   */
+  as?: Element<any>,
+
+  /**
+   * Props to supply to the Card/Item component.
+   */
+  asProps?: any,
+
   /**
    * Child elements to append below the list content.
    */
@@ -61,11 +71,6 @@ type Props = ListProps & {
    */
   renderAdditionalContent?: (item: any) => Element<any>,
 
-  /**
-   * Renders the container element for passed item.
-   */
-  renderContainer?: (item: any, children: Element<any>) => ComponentType<any>,
-
   /**
    * A function that returns a JSX element to render as the card description.
    * See Semantic UI <a href="https://react.semantic-ui.com/views/card/">Card</a>.
@@ -171,6 +176,17 @@ class ItemsClass extends Component<Props, {}> {
     return classNames.join(' ');
   }
 
+  /**
+   * Returns as asProps function value for the passed item, if provided.
+   *
+   * @param item
+   *
+   * @returns {*|{}}
+   */
+  getItemProps(item) {
+    return (this.props.asProps && this.props.asProps(item)) || {};
+  }
+
   /**
    * Returns true if the component has the necessary props to render itself in the "selectable" state.
    *
@@ -209,8 +225,10 @@ class ItemsClass extends Component<Props, {}> {
   renderCard(item, index) {
     let card = (
       <Card
+        as={this.props.as}
         key={item.id || index}
         link={this.props.link}
+        {...this.getItemProps(item)}
       >
         { this.props.renderImage && this.props.renderImage(item) }
         <Card.Content>
@@ -280,10 +298,6 @@ class ItemsClass extends Component<Props, {}> {
       );
     }
 
-    if (this.props.renderContainer) {
-      card = this.props.renderContainer(item, card);
-    }
-
     return card;
   }
 
@@ -347,7 +361,9 @@ class ItemsClass extends Component<Props, {}> {
   renderItem(item, index) {
     let listItem = (
       <Item
+        as={this.props.as}
         key={item.id || index}
+        {...this.getItemProps(item)}
       >
         { this.props.renderImage && (
           <Item.Image>
@@ -416,10 +432,6 @@ class ItemsClass extends Component<Props, {}> {
       );
     }
 
-    if (this.props.renderContainer) {
-      listItem = this.props.renderContainer(item, listItem);
-    }
-
     return listItem;
   }
 

package/types/components/Items.js.flow

@@ -20,6 +20,16 @@ import './Items.css';
 import type { Props as ListProps } from './List';
 
 type Props = ListProps & {
+  /**
+   * Renders the Card/Item component as the passed component.
+   */
+  as?: Element<any>,
+
+  /**
+   * Props to supply to the Card/Item component.
+   */
+  asProps?: any,
+
   /**
    * Child elements to append below the list content.
    */
@@ -61,11 +71,6 @@ type Props = ListProps & {
    */
   renderAdditionalContent?: (item: any) => Element<any>,
 
-  /**
-   * Renders the container element for passed item.
-   */
-  renderContainer?: (item: any, children: Element<any>) => ComponentType<any>,
-
   /**
    * A function that returns a JSX element to render as the card description.
    * See Semantic UI <a href="https://react.semantic-ui.com/views/card/">Card</a>.
@@ -171,6 +176,17 @@ class ItemsClass extends Component<Props, {}> {
     return classNames.join(' ');
   }
 
+  /**
+   * Returns as asProps function value for the passed item, if provided.
+   *
+   * @param item
+   *
+   * @returns {*|{}}
+   */
+  getItemProps(item) {
+    return (this.props.asProps && this.props.asProps(item)) || {};
+  }
+
   /**
    * Returns true if the component has the necessary props to render itself in the "selectable" state.
    *
@@ -209,8 +225,10 @@ class ItemsClass extends Component<Props, {}> {
   renderCard(item, index) {
     let card = (
       <Card
+        as={this.props.as}
         key={item.id || index}
         link={this.props.link}
+        {...this.getItemProps(item)}
       >
         { this.props.renderImage && this.props.renderImage(item) }
         <Card.Content>
@@ -280,10 +298,6 @@ class ItemsClass extends Component<Props, {}> {
       );
     }
 
-    if (this.props.renderContainer) {
-      card = this.props.renderContainer(item, card);
-    }
-
     return card;
   }
 
@@ -347,7 +361,9 @@ class ItemsClass extends Component<Props, {}> {
   renderItem(item, index) {
     let listItem = (
       <Item
+        as={this.props.as}
         key={item.id || index}
+        {...this.getItemProps(item)}
       >
         { this.props.renderImage && (
           <Item.Image>
@@ -416,10 +432,6 @@ class ItemsClass extends Component<Props, {}> {
       );
     }
 
-    if (this.props.renderContainer) {
-      listItem = this.props.renderContainer(item, listItem);
-    }
-
     return listItem;
   }