@performant-software/semantic-components 1.0.12 → 1.0.13-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.12",
+  "version": "1.0.13-beta.1",
   "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.12",
+    "@performant-software/shared-components": "^1.0.13-beta.1",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -21,7 +21,7 @@
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-i18next": "^11.4.0",
-    "react-pdf": "^5.7.2",
+    "react-pdf": "^7.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^1.0.2",
     "semantic-ui-less": "2.4.1",

package/src/components/Items.js

@@ -35,6 +35,11 @@ type Props = ListProps & {
    */
   items: Array<any>,
 
+  /**
+   * If true, the list items will be formatted as a link.
+   */
+  link?: boolean,
+
   /**
    * Callback fired when a table row is dragged
    */
@@ -56,6 +61,11 @@ 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>.
@@ -197,9 +207,10 @@ class ItemsClass extends Component<Props, {}> {
    * @returns {*}
    */
   renderCard(item, index) {
-    const card = (
+    let card = (
       <Card
         key={item.id || index}
+        link={this.props.link}
       >
         { this.props.renderImage && this.props.renderImage(item) }
         <Card.Content>
@@ -255,21 +266,25 @@ class ItemsClass extends Component<Props, {}> {
       </Card>
     );
 
-    if (!this.props.onDrag) {
-      return card;
+    if (this.props.onDrag) {
+      card = (
+        <Draggable
+          id={item.id || item.uid}
+          index={index}
+          item={item}
+          key={item.id || item.uid}
+          onDrag={this.props.onDrag.bind(this)}
+        >
+          { card }
+        </Draggable>
+      );
     }
 
-    return (
-      <Draggable
-        id={item.id || item.uid}
-        index={index}
-        item={item}
-        key={item.id || item.uid}
-        onDrag={this.props.onDrag.bind(this)}
-      >
-        { card }
-      </Draggable>
-    );
+    if (this.props.renderContainer) {
+      card = this.props.renderContainer(item, card);
+    }
+
+    return card;
   }
 
   /**
@@ -330,7 +345,7 @@ class ItemsClass extends Component<Props, {}> {
    * @returns {*}
    */
   renderItem(item, index) {
-    const listItem = (
+    let listItem = (
       <Item
         key={item.id || index}
       >
@@ -387,21 +402,25 @@ class ItemsClass extends Component<Props, {}> {
       </Item>
     );
 
-    if (!this.props.onDrag) {
-      return listItem;
+    if (this.props.onDrag) {
+      listItem = (
+        <Draggable
+          id={item.id || item.uid}
+          index={index}
+          item={item}
+          key={item.id || item.uid}
+          onDrag={this.props.onDrag.bind(this)}
+        >
+          { listItem }
+        </Draggable>
+      );
     }
 
-    return (
-      <Draggable
-        id={item.id || item.uid}
-        index={index}
-        item={item}
-        key={item.id || item.uid}
-        onDrag={this.props.onDrag.bind(this)}
-      >
-        { listItem }
-      </Draggable>
-    );
+    if (this.props.renderContainer) {
+      listItem = this.props.renderContainer(item, listItem);
+    }
+
+    return listItem;
   }
 
   /**
@@ -417,6 +436,7 @@ class ItemsClass extends Component<Props, {}> {
     return (
       <Item.Group
         divided
+        link={this.props.link}
         relaxed='very'
       >
         { _.map(this.props.items, this.renderItem.bind(this)) }

package/types/components/Items.js.flow

@@ -35,6 +35,11 @@ type Props = ListProps & {
    */
   items: Array<any>,
 
+  /**
+   * If true, the list items will be formatted as a link.
+   */
+  link?: boolean,
+
   /**
    * Callback fired when a table row is dragged
    */
@@ -56,6 +61,11 @@ 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>.
@@ -197,9 +207,10 @@ class ItemsClass extends Component<Props, {}> {
    * @returns {*}
    */
   renderCard(item, index) {
-    const card = (
+    let card = (
       <Card
         key={item.id || index}
+        link={this.props.link}
       >
         { this.props.renderImage && this.props.renderImage(item) }
         <Card.Content>
@@ -255,21 +266,25 @@ class ItemsClass extends Component<Props, {}> {
       </Card>
     );
 
-    if (!this.props.onDrag) {
-      return card;
+    if (this.props.onDrag) {
+      card = (
+        <Draggable
+          id={item.id || item.uid}
+          index={index}
+          item={item}
+          key={item.id || item.uid}
+          onDrag={this.props.onDrag.bind(this)}
+        >
+          { card }
+        </Draggable>
+      );
     }
 
-    return (
-      <Draggable
-        id={item.id || item.uid}
-        index={index}
-        item={item}
-        key={item.id || item.uid}
-        onDrag={this.props.onDrag.bind(this)}
-      >
-        { card }
-      </Draggable>
-    );
+    if (this.props.renderContainer) {
+      card = this.props.renderContainer(item, card);
+    }
+
+    return card;
   }
 
   /**
@@ -330,7 +345,7 @@ class ItemsClass extends Component<Props, {}> {
    * @returns {*}
    */
   renderItem(item, index) {
-    const listItem = (
+    let listItem = (
       <Item
         key={item.id || index}
       >
@@ -387,21 +402,25 @@ class ItemsClass extends Component<Props, {}> {
       </Item>
     );
 
-    if (!this.props.onDrag) {
-      return listItem;
+    if (this.props.onDrag) {
+      listItem = (
+        <Draggable
+          id={item.id || item.uid}
+          index={index}
+          item={item}
+          key={item.id || item.uid}
+          onDrag={this.props.onDrag.bind(this)}
+        >
+          { listItem }
+        </Draggable>
+      );
     }
 
-    return (
-      <Draggable
-        id={item.id || item.uid}
-        index={index}
-        item={item}
-        key={item.id || item.uid}
-        onDrag={this.props.onDrag.bind(this)}
-      >
-        { listItem }
-      </Draggable>
-    );
+    if (this.props.renderContainer) {
+      listItem = this.props.renderContainer(item, listItem);
+    }
+
+    return listItem;
   }
 
   /**
@@ -417,6 +436,7 @@ class ItemsClass extends Component<Props, {}> {
     return (
       <Item.Group
         divided
+        link={this.props.link}
         relaxed='very'
       >
         { _.map(this.props.items, this.renderItem.bind(this)) }