@plusscommunities/pluss-core-web 1.4.24 → 1.4.26

package/dist/index.cjs.js

@@ -1126,21 +1126,38 @@ var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput,
   dateObject.setMinutes(time.minutes);
   return dateObject;
 };
-var minutesToString = function minutesToString(minutes) {
+var formatTime = function formatTime(hours, minutes) {
+  var period = hours >= 12 ? 'pm' : 'am'; // Convert 24-hour format to 12-hour format
+
+  var adjustedHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Ensure minutes are two digits
+
+  var adjustedMinutes = String(minutes).padStart(2, '0');
+  return "".concat(adjustedHours, ":").concat(adjustedMinutes).concat(period);
+};
+var minutesToString = function minutesToString(minutes, isTimeOfDay) {
   var hours = Math.floor(minutes / 60);
   var remainingMinutes = minutes % 60;
+
+  if (isTimeOfDay) {
+    return formatTime(hours, remainingMinutes);
+  }
+
   var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
   var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
 
   if (hours && remainingMinutes) {
     return "".concat(hoursString, " ").concat(minutesString);
-  } else if (hours) {
+  }
+
+  if (hours) {
     return hoursString;
-  } else if (remainingMinutes) {
+  }
+
+  if (remainingMinutes) {
     return minutesString;
-  } else {
-    return '0 minutes';
   }
+
+  return '0 minutes';
 };
 var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
@@ -1804,6 +1821,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   hasTimeframeOverlap: hasTimeframeOverlap,
   timepickerToMinutes: timepickerToMinutes,
   getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+  formatTime: formatTime,
   minutesToString: minutesToString,
   getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
   getPluralS: getPluralS,
@@ -8885,6 +8903,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 +8970,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 +9019,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

@@ -1096,21 +1096,38 @@ var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput,
   dateObject.setMinutes(time.minutes);
   return dateObject;
 };
-var minutesToString = function minutesToString(minutes) {
+var formatTime = function formatTime(hours, minutes) {
+  var period = hours >= 12 ? 'pm' : 'am'; // Convert 24-hour format to 12-hour format
+
+  var adjustedHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Ensure minutes are two digits
+
+  var adjustedMinutes = String(minutes).padStart(2, '0');
+  return "".concat(adjustedHours, ":").concat(adjustedMinutes).concat(period);
+};
+var minutesToString = function minutesToString(minutes, isTimeOfDay) {
   var hours = Math.floor(minutes / 60);
   var remainingMinutes = minutes % 60;
+
+  if (isTimeOfDay) {
+    return formatTime(hours, remainingMinutes);
+  }
+
   var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
   var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
 
   if (hours && remainingMinutes) {
     return "".concat(hoursString, " ").concat(minutesString);
-  } else if (hours) {
+  }
+
+  if (hours) {
     return hoursString;
-  } else if (remainingMinutes) {
+  }
+
+  if (remainingMinutes) {
     return minutesString;
-  } else {
-    return '0 minutes';
   }
+
+  return '0 minutes';
 };
 var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
@@ -1774,6 +1791,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   hasTimeframeOverlap: hasTimeframeOverlap,
   timepickerToMinutes: timepickerToMinutes,
   getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+  formatTime: formatTime,
   minutesToString: minutesToString,
   getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
   getPluralS: getPluralS,
@@ -8855,6 +8873,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 +8940,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 +8989,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

@@ -1094,21 +1094,38 @@
     dateObject.setMinutes(time.minutes);
     return dateObject;
   };
-  var minutesToString = function minutesToString(minutes) {
+  var formatTime = function formatTime(hours, minutes) {
+    var period = hours >= 12 ? 'pm' : 'am'; // Convert 24-hour format to 12-hour format
+
+    var adjustedHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Ensure minutes are two digits
+
+    var adjustedMinutes = String(minutes).padStart(2, '0');
+    return "".concat(adjustedHours, ":").concat(adjustedMinutes).concat(period);
+  };
+  var minutesToString = function minutesToString(minutes, isTimeOfDay) {
     var hours = Math.floor(minutes / 60);
     var remainingMinutes = minutes % 60;
+
+    if (isTimeOfDay) {
+      return formatTime(hours, remainingMinutes);
+    }
+
     var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
     var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
 
     if (hours && remainingMinutes) {
       return "".concat(hoursString, " ").concat(minutesString);
-    } else if (hours) {
+    }
+
+    if (hours) {
       return hoursString;
-    } else if (remainingMinutes) {
+    }
+
+    if (remainingMinutes) {
       return minutesString;
-    } else {
-      return '0 minutes';
     }
+
+    return '0 minutes';
   };
   var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
     var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
@@ -1772,6 +1789,7 @@
     hasTimeframeOverlap: hasTimeframeOverlap,
     timepickerToMinutes: timepickerToMinutes,
     getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+    formatTime: formatTime,
     minutesToString: minutesToString,
     getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
     getPluralS: getPluralS,
@@ -8853,6 +8871,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 +8938,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 +8987,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.26",
   "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>

package/src/helper/helper.js

@@ -134,22 +134,39 @@ export const getDateFromTimeDatePickers = (dateInput, timeInput) => {
   return dateObject;
 };
 
-export const minutesToString = (minutes) => {
-  let hours = Math.floor(minutes / 60);
-  let remainingMinutes = minutes % 60;
+export const formatTime = (hours, minutes) => {
+  const period = hours >= 12 ? 'pm' : 'am'; // Convert 24-hour format to 12-hour format
 
-  let hoursString = hours > 1 ? `${hours} hours` : `${hours} hour`;
-  let minutesString = remainingMinutes > 1 ? `${remainingMinutes} minutes` : `${remainingMinutes} minute`;
+  const adjustedHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Ensure minutes are two digits
+
+  const adjustedMinutes = String(minutes).padStart(2, '0');
+  return `${adjustedHours}:${adjustedMinutes}${period}`;
+};
+
+export const minutesToString = (minutes, isTimeOfDay) => {
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+
+  if (isTimeOfDay) {
+    return formatTime(hours, remainingMinutes);
+  }
+
+  const hoursString = hours > 1 ? `${hours} hours` : `${hours} hour`;
+  const minutesString = remainingMinutes > 1 ? `${remainingMinutes} minutes` : `${remainingMinutes} minute`;
 
   if (hours && remainingMinutes) {
     return `${hoursString} ${minutesString}`;
-  } else if (hours) {
+  }
+
+  if (hours) {
     return hoursString;
-  } else if (remainingMinutes) {
+  }
+
+  if (remainingMinutes) {
     return minutesString;
-  } else {
-    return '0 minutes';
   }
+
+  return '0 minutes';
 };
 
 export const getUTCFromTimeDatePickers = (dateInput, timeInput) => {