@plusscommunities/pluss-core-web 1.4.24 → 1.4.25

package/dist/index.cjs.js

@@ -8885,6 +8885,55 @@ var UserListing = /*#__PURE__*/function (_Component) {
     value: function getSize() {
       return this.props.size || 30;
     }
+  }, {
+    key: "getImage",
+    value: function getImage() {
+      if (this.props.user && this.props.user.profilePic) {
+        return this.props.user.profilePic;
+      }
+
+      if (this.props.image) {
+        return this.props.image;
+      }
+
+      return undefined;
+    }
+  }, {
+    key: "getKey",
+    value: function getKey() {
+      if (this.props.user && this.props.user.id) {
+        return this.props.user.id;
+      }
+
+      return this.props.id;
+    }
+  }, {
+    key: "getText",
+    value: function getText() {
+      if (this.props.user && this.props.user.displayName) {
+        return this.props.user.displayName;
+      }
+
+      return this.props.title;
+    }
+  }, {
+    key: "getBorderRadius",
+    value: function getBorderRadius() {
+      if (this.props.squareImage) {
+        return 4;
+      }
+
+      return this.getSize() / 2;
+    }
+  }, {
+    key: "isLoading",
+    value: function isLoading() {
+      if (this.props.user && this.props.user.loading) {
+        return this.props.user && this.props.user.loading;
+      }
+
+      return this.props.isLoading;
+    }
   }, {
     key: "renderRight",
     value: function renderRight() {
@@ -8903,25 +8952,45 @@ var UserListing = /*#__PURE__*/function (_Component) {
 
       return this.props.subContent;
     }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      if (this.props.squareImage) {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: "url(".concat(this.getImage(), ")")
+          },
+          alt: "".concat(this.getText(), " Image")
+        });
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+        size: this.getSize(),
+        className: "userListing_profilePic",
+        image: this.getImage()
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+        key: this.getKey(),
         className: "userListing",
         style: {
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+          opacity: this.isLoading() ? 0.5 : 1
         },
         onClick: this.props.onClick
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "userListing_inner"
-      }, /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
-        size: this.getSize(),
-        className: "userListing_profilePic",
-        image: this.props.user.profilePic
-      }), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, this.renderImage(), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "userListing_middle",
         style: {
           height: this.getSize()
@@ -8932,7 +9001,7 @@ var UserListing = /*#__PURE__*/function (_Component) {
           color: '#fff'
         } : null,
         className: this.props.textClass
-      }, this.props.user.displayName), this.renderSub())), this.renderRight());
+      }, this.getText()), this.renderSub())), this.renderRight());
     }
   }]);
 

package/dist/index.esm.js

@@ -8855,6 +8855,55 @@ var UserListing = /*#__PURE__*/function (_Component) {
     value: function getSize() {
       return this.props.size || 30;
     }
+  }, {
+    key: "getImage",
+    value: function getImage() {
+      if (this.props.user && this.props.user.profilePic) {
+        return this.props.user.profilePic;
+      }
+
+      if (this.props.image) {
+        return this.props.image;
+      }
+
+      return undefined;
+    }
+  }, {
+    key: "getKey",
+    value: function getKey() {
+      if (this.props.user && this.props.user.id) {
+        return this.props.user.id;
+      }
+
+      return this.props.id;
+    }
+  }, {
+    key: "getText",
+    value: function getText() {
+      if (this.props.user && this.props.user.displayName) {
+        return this.props.user.displayName;
+      }
+
+      return this.props.title;
+    }
+  }, {
+    key: "getBorderRadius",
+    value: function getBorderRadius() {
+      if (this.props.squareImage) {
+        return 4;
+      }
+
+      return this.getSize() / 2;
+    }
+  }, {
+    key: "isLoading",
+    value: function isLoading() {
+      if (this.props.user && this.props.user.loading) {
+        return this.props.user && this.props.user.loading;
+      }
+
+      return this.props.isLoading;
+    }
   }, {
     key: "renderRight",
     value: function renderRight() {
@@ -8873,25 +8922,45 @@ var UserListing = /*#__PURE__*/function (_Component) {
 
       return this.props.subContent;
     }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      if (this.props.squareImage) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: "url(".concat(this.getImage(), ")")
+          },
+          alt: "".concat(this.getText(), " Image")
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(ProfilePic, {
+        size: this.getSize(),
+        className: "userListing_profilePic",
+        image: this.getImage()
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+        key: this.getKey(),
         className: "userListing",
         style: {
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+          opacity: this.isLoading() ? 0.5 : 1
         },
         onClick: this.props.onClick
       }, /*#__PURE__*/React.createElement("div", {
         className: "userListing_inner"
-      }, /*#__PURE__*/React.createElement(ProfilePic, {
-        size: this.getSize(),
-        className: "userListing_profilePic",
-        image: this.props.user.profilePic
-      }), /*#__PURE__*/React.createElement("div", {
+      }, this.renderImage(), /*#__PURE__*/React.createElement("div", {
         className: "userListing_middle",
         style: {
           height: this.getSize()
@@ -8902,7 +8971,7 @@ var UserListing = /*#__PURE__*/function (_Component) {
           color: '#fff'
         } : null,
         className: this.props.textClass
-      }, this.props.user.displayName), this.renderSub())), this.renderRight());
+      }, this.getText()), this.renderSub())), this.renderRight());
     }
   }]);
 

package/dist/index.umd.js

@@ -8853,6 +8853,55 @@
       value: function getSize() {
         return this.props.size || 30;
       }
+    }, {
+      key: "getImage",
+      value: function getImage() {
+        if (this.props.user && this.props.user.profilePic) {
+          return this.props.user.profilePic;
+        }
+
+        if (this.props.image) {
+          return this.props.image;
+        }
+
+        return undefined;
+      }
+    }, {
+      key: "getKey",
+      value: function getKey() {
+        if (this.props.user && this.props.user.id) {
+          return this.props.user.id;
+        }
+
+        return this.props.id;
+      }
+    }, {
+      key: "getText",
+      value: function getText() {
+        if (this.props.user && this.props.user.displayName) {
+          return this.props.user.displayName;
+        }
+
+        return this.props.title;
+      }
+    }, {
+      key: "getBorderRadius",
+      value: function getBorderRadius() {
+        if (this.props.squareImage) {
+          return 4;
+        }
+
+        return this.getSize() / 2;
+      }
+    }, {
+      key: "isLoading",
+      value: function isLoading() {
+        if (this.props.user && this.props.user.loading) {
+          return this.props.user && this.props.user.loading;
+        }
+
+        return this.props.isLoading;
+      }
     }, {
       key: "renderRight",
       value: function renderRight() {
@@ -8871,25 +8920,45 @@
 
         return this.props.subContent;
       }
+    }, {
+      key: "renderImage",
+      value: function renderImage() {
+        if (this.props.squareImage) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            style: {
+              height: this.getSize(),
+              width: this.getSize(),
+              borderRadius: this.getBorderRadius(),
+              marginRight: 8,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundImage: "url(".concat(this.getImage(), ")")
+            },
+            alt: "".concat(this.getText(), " Image")
+          });
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+          size: this.getSize(),
+          className: "userListing_profilePic",
+          image: this.getImage()
+        });
+      }
     }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+          key: this.getKey(),
           className: "userListing",
           style: {
             minHeight: this.getSize() + 5,
             cursor: this.props.onClick ? 'pointer' : 'inherit',
-            opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+            opacity: this.isLoading() ? 0.5 : 1
           },
           onClick: this.props.onClick
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "userListing_inner"
-        }, /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
-          size: this.getSize(),
-          className: "userListing_profilePic",
-          image: this.props.user.profilePic
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, this.renderImage(), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "userListing_middle",
           style: {
             height: this.getSize()
@@ -8900,7 +8969,7 @@
             color: '#fff'
           } : null,
           className: this.props.textClass
-        }, this.props.user.displayName), this.renderSub())), this.renderRight());
+        }, this.getText()), this.renderSub())), this.renderRight());
       }
     }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.4.24",
+  "version": "1.4.25",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/UserListing.js

@@ -7,6 +7,44 @@ class UserListing extends Component {
     return this.props.size || 30;
   }
 
+  getImage() {
+    if (this.props.user && this.props.user.profilePic) {
+      return this.props.user.profilePic;
+    }
+    if (this.props.image) {
+      return this.props.image;
+    }
+    return undefined;
+  }
+
+  getKey() {
+    if (this.props.user && this.props.user.id) {
+      return this.props.user.id;
+    }
+    return this.props.id;
+  }
+
+  getText() {
+    if (this.props.user && this.props.user.displayName) {
+      return this.props.user.displayName;
+    }
+    return this.props.title;
+  }
+
+  getBorderRadius() {
+    if (this.props.squareImage) {
+      return 4;
+    }
+    return this.getSize() / 2;
+  }
+
+  isLoading() {
+    if (this.props.user && this.props.user.loading) {
+      return this.props.user && this.props.user.loading;
+    }
+    return this.props.isLoading;
+  }
+
   renderRight() {
     if (!this.props.rightContent) {
       return null;
@@ -21,23 +59,43 @@ class UserListing extends Component {
     return this.props.subContent;
   }
 
+  renderImage() {
+    if (this.props.squareImage) {
+      return (
+        <div
+          style={{
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: `url(${this.getImage()})`,
+          }}
+          alt={`${this.getText()} Image`}
+        />
+      );
+    }
+    return <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.getImage()} />;
+  }
+
   render() {
     return (
       <div
-        key={this.props.user.userId || this.props.user.Id || this.props.user.id}
+        key={this.getKey()}
         className="userListing"
         style={{
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1,
+          opacity: this.isLoading() ? 0.5 : 1,
         }}
         onClick={this.props.onClick}
       >
         <div className="userListing_inner">
-          <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.props.user.profilePic} />
+          {this.renderImage()}
           <div className="userListing_middle" style={{ height: this.getSize() }}>
             <Text type="name" style={this.props.whiteText ? { color: '#fff' } : null} className={this.props.textClass}>
-              {this.props.user.displayName}
+              {this.getText()}
             </Text>
             {this.renderSub()}
           </div>