@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/media/chat/ChatRoomItem.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _reactFeather = require("react-feather");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _AppManager = _interopRequireDefault(require("../../../common/service/AppManager"));
+
+var _SocketManager = _interopRequireDefault(require("../../service/SocketManager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ChatRoomItem = props => {
+  const {
+    event,
+    selectedChat
+  } = props;
+  const [currentUser, setCurrentUser] = (0, _react.useState)(_AppManager.default.getUserDetails());
+  (0, _react.useEffect)(() => {
+    setCurrentUser(_AppManager.default.getUserDetails());
+  }, []);
+
+  const goToRoom = id => {
+    props.selectionHandler(event);
+  };
+
+  const getUnreadMessagesCount = () => {
+    let unread = _SocketManager.default.unreadMessages.find(u => u.id === event.id);
+
+    if (unread) {
+      return unread.numberOfUnread;
+    }
+
+    return 0;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingLeft: '16px',
+      paddingRight: '16px'
+    },
+    className: "chatroom__item ".concat(selectedChat && event.id === selectedChat.id ? 'active-tab' : ''),
+    onClick: () => {
+      goToRoom(event.id);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.Badge, {
+    color: "error",
+    badgeContent: getUnreadMessagesCount(),
+    max: 9
+  }, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, event.type === 'CALENDAR_MEETING' || event.participants.length > 2 ? /*#__PURE__*/_react.default.createElement(_reactFeather.Calendar, null) : _Utils.default.getInitials(event.participants.find(p => p.userId !== currentUser.userId).name))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatroom__info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatRoom__title"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '16px'
+    }
+  }, event.type === 'CALENDAR_MEETING' || event.title ? event.title : _Utils.default.getChatMeetingTitle(event.participants, currentUser.userId, 22)), /*#__PURE__*/_react.default.createElement("p", null, _Utils.default.isToday(event.updatedAt) ? (0, _moment.default)(event.updatedAt).format('HH:mm') : (0, _moment.default)(event.updatedAt).format('DD/MM'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatroom__message"
+  }, event.messages && event.messages.length > 0 && currentUser ? [event.messages[event.messages.length - 1].participant.userId === currentUser.userId ? [event.messages[event.messages.length - 1].type === 'FILE' ? /*#__PURE__*/_react.default.createElement("span", null, 'You: ', event.messages[event.messages.length - 1].content ? event.messages[event.messages.length - 1].content : /*#__PURE__*/_react.default.createElement("span", null, "document")) : [event.messages[event.messages.length - 1].content.length > 42 ? /*#__PURE__*/_react.default.createElement("span", null, 'You: ', event.messages[event.messages.length - 1].content.slice(0, 42), '...') : /*#__PURE__*/_react.default.createElement("span", null, 'You: ', event.messages[event.messages.length - 1].content)]] : [event.messages[event.messages.length - 1].type === 'FILE' ? /*#__PURE__*/_react.default.createElement("span", null, event.messages[event.messages.length - 1].participant.name, ': ', event.messages[event.messages.length - 1].content ? event.messages[event.messages.length - 1].content : /*#__PURE__*/_react.default.createElement("span", null, "document")) : [event.messages[event.messages.length - 1].content.length > 42 ? /*#__PURE__*/_react.default.createElement("span", null, event.messages[event.messages.length - 1].participant.name, ': ', event.messages[event.messages.length - 1].content.slice(0, 42), '...') : /*#__PURE__*/_react.default.createElement("span", null, event.messages[event.messages.length - 1].participant.name, ': ', event.messages[event.messages.length - 1].content)]]] : null)));
+};
+
+var _default = ChatRoomItem;
+exports.default = _default;

package/dist/components/media/chat/ChatRoomList.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ChatRoomItem = _interopRequireDefault(require("./ChatRoomItem"));
+
+require("./ChatRooms.scss");
+
+var _core = require("@material-ui/core");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _SocketManager = _interopRequireDefault(require("../../service/SocketManager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ChatRoomList = props => {
+  const [chats, setChats] = (0, _react.useState)([]);
+
+  const updateChatList = chat => {
+    setChats([...chats, chat]);
+  };
+
+  const addChat = () => {
+    props.addHandler();
+  };
+
+  (0, _react.useEffect)(() => {
+    setChats([].concat(props.chatEvents));
+    console.log('socketManager.unreadMessages: ', _SocketManager.default.unreadMessages);
+  }, [props.chatEvents]);
+  (0, _react.useEffect)(() => {
+    if (props.addedChat) {
+      updateChatList(props.addedChat);
+    }
+  }, [props.addedChat]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatrooms"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatrooms__header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header__left"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, "Chat")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header__right"
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "New Chat"
+  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: () => {
+      addChat();
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: require('/assets/edit-chat-history.png'),
+    alt: "new chat"
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chatrooms__rooms"
+  }, chats.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)).map((event, index) => {
+    let newArr = [...event.messages];
+    event.messages = newArr.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate));
+    return /*#__PURE__*/_react.default.createElement(_ChatRoomItem.default, {
+      selectedChat: props.selectedChat,
+      key: index,
+      event: event,
+      selectionHandler: props.selectionHandler
+    });
+  })));
+};
+
+var _default = ChatRoomList;
+exports.default = _default;

package/dist/components/media/chat/ChatRooms.scss

@@ -0,0 +1,567 @@
+.chatroom .peerchat > .peer,
+.chatroom .mychat {
+  color: #525f7f !important;
+}
+
+.chat-time {
+  display: flex !important;
+  align-items: center !important;
+  padding: 0 !important;
+}
+
+.chats-file-upload {
+  width: 100%;
+}
+
+.file-upload {
+  position: absolute;
+  margin-top: 8px;
+  margin-left: -54px;
+  z-index: 1;
+  width: 50%;
+}
+
+.chat-input {
+  width: 100%;
+}
+
+.chat-input label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
+}
+
+.chat-avatar {
+
+}
+
+.chatrooms {
+  display: flex;
+  flex-direction: column;
+
+  .chatrooms__rooms {
+    max-height: 84.7vh;
+    overflow: auto;
+  }
+
+  .chatrooms__rooms::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chatrooms__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e1e1e1;
+  }
+
+  .header__left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .header__left > h5 {
+    margin: 20px 5px;
+    margin-left: 20px;
+  }
+
+  .header__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .header__right > .MuiSvgIcon-root {
+    margin: 0 5px;
+  }
+
+  .header__right > .MuiButtonBase-root > .MuiIconButton-label > img {
+    margin: 0 5px;
+    height: 20px;
+  }
+
+  .chatroom__item {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid #e1e1e1;
+    padding: 10px;
+
+    .MuiAvatar-root {
+      background-color: #2d6597;
+    }
+  }
+
+  .active-tab {
+    background-color: #ebebeb;
+  }
+
+  .chatroom__item:hover {
+    background-color: #ebebeb;
+  }
+
+  .chatroom__info {
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 0 20px;
+    width: 100%;
+  }
+
+  .chatRoom__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .chatRoom__title > h6 {
+    font-size: 14px;
+  }
+
+  .chatroom__message {
+    font-size: 12px;
+  }
+
+  .back-drop {
+    background-color: rgba(48, 49, 48, 0.42);
+    height: 100%;
+    position: fixed;
+    transition: all 1.3s;
+    width: 100%;
+  }
+}
+
+.chatroom {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: 8px;
+
+  .image__text {
+    padding: 0 9%;
+    color: #929292;
+    font-size: 12px;
+  }
+
+  .chatroom__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 4px 4px 4px 8px;
+    padding-right: 7%;
+    border-bottom: 1px solid #e1e1e1;
+    width: 100%;
+    margin-bottom: 16px;
+
+    .chatroom__headerleft {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      max-width: 80%;
+    }
+
+    .chatroom__headerleft > .MuiAvatar-root {
+      background-color: #464775;
+    }
+  }
+
+  .chatroom__header > .chatroom__headerleft > h5 {
+    margin: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .chatroom__body {
+    height: 95%;
+    overflow: auto;
+    padding: 0 15px;
+  }
+
+  .chatroom__sendMessage {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 9% 0 3%;
+
+    .message__imageSelector > input {
+      display: none;
+    }
+
+    .message__imageSelector > .MuiSvgIcon-root {
+      margin: 0 10px;
+      font-size: 40px;
+      cursor: pointer;
+    }
+
+    input[type=file]::file-selector-button {
+      display: none;
+    }
+
+    .MuiSvgIcon-root {
+      font-size: 36px;
+    }
+  }
+
+  .mychat a {
+    overflow-wrap: break-word;
+  }
+
+  .mychat {
+    position: relative;
+    flex-direction: column;
+    margin-left: auto;
+    width: fit-content;
+    margin-right: 7%;
+    background-color: #D7D7E9;
+    padding: 0.1px 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-radius: 15px;
+    max-width: 100%;
+  }
+
+  .mychat > span {
+    font-size: 10px !important;
+    font-weight: 500;
+    padding: 7px;
+  }
+
+  .mychat > span {
+    font-size: 12px;
+    padding: 3px;
+  }
+
+  .peerchat {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    margin-left: 3%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 5px;
+    margin-bottom: 5px;
+
+    .MuiAvatar-root {
+      background-color: #2d6597;
+    }
+  }
+
+  .peerchat > .peer {
+    margin-left: 10px;
+    background-color: #eadfd5;
+    padding: 0.1px 10px;
+    margin-top: 5px;
+    border-radius: 15px;
+  }
+
+  .peerchat > .peer-event {
+    margin-left: 10px;
+    background-color: red;
+    padding: 0.1px 10px;
+    margin-top: 5px;
+    border-radius: 15px;
+  }
+
+  .peerchat > div > span {
+    font-size: 10px !important;
+    font-weight: 500;
+    padding: 7px;
+  }
+
+  .peerchat > div > span {
+    font-size: 12px;
+    padding: 3px;
+  }
+
+  @media screen and (max-width: 991px) {
+    .chatroom__header > .chatroom__headerleft > h5 {
+      margin: 8px;
+    }
+
+    .chatroom__headerleft {
+      max-width: 70%;
+    }
+  }
+}
+
+.createChatModal {
+  position: absolute;
+  left: 35%;
+  margin-left: -50px;
+  top: 30%;
+  margin-top: -50px;
+  z-index: 1;
+
+  .modal-wrapper {
+    background: white;
+    border: 1px solid #d0cccc;
+    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
+    margin: 0;
+    transition: all .8s;
+    width: 80vh;
+  }
+
+  .modal-header {
+    background: #EBEBEB;
+    height: 40px;
+    line-height: 40px;
+    padding: 5px 20px;
+    text-align: right;
+  }
+
+  .modal-header h4 {
+    float: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  .modal-body {
+    padding: 10px 15px;
+    text-align: center;
+  }
+
+  .modal-footer {
+    background: #EBEBEB;
+    height: fit-content;
+    padding: 15px;
+  }
+
+  .close-modal-btn {
+    cursor: pointer;
+    float: right;
+    font-size: 30px;
+    margin: 0;
+  }
+
+  .close-modal-btn:hover {
+    color: black;
+  }
+
+  .btn-continue {
+    background-color: #464775;
+    float: right;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-weight: bold;
+    outline: none;
+    padding: 10px;
+  }
+}
+
+.emptychat {
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+    height: 400px;
+    object-fit: contain;
+  }
+
+  h4 {
+    margin-top: 60px;
+    text-align: center;
+  }
+}
+
+.poll-content {
+  margin-top: 16px;
+  margin-bottom: 28px;
+  padding: 20px 15px 20px 15px;
+  letter-spacing: .01em;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  background-color: white;
+}
+
+.poll-question {
+  font-weight: 500;
+  font-size: 21px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 4px;
+}
+
+@media (max-width: 768px) {
+  .poll-question {
+    font-size: 18px;
+  }
+}
+
+.poll-choices {
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+
+.poll-choice-radio-group {
+  display: block;
+  width: 100%;
+}
+
+.poll-choice-radio {
+  display: block;
+  line-height: 1.7;
+  font-size: 12px;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.vote-button {
+  border-radius: 15px;
+  margin-right: 15px;
+  color: #975f2d;
+  border-color: #975f2d;
+}
+
+.vote-button:hover {
+  color: #975f2d;
+  border-color: #975f2d;
+}
+
+.vote-button[disabled], .vote-button[disabled]:hover, .vote-button[disabled]:focus {
+  color: #975f2d;
+  border-color: #975f2d;
+  background-color: #fff;
+  opacity: 0.4;
+}
+
+.separator {
+  margin-left: 10px;
+  margin-right: 10px;
+  color: #8899A6;
+}
+
+.cv-poll-choice {
+  position: relative;
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.cv-poll-choice-details {
+  position: relative;
+  z-index: 1;
+  display: block;
+  line-height: 1.7;
+  font-size: 15px;
+  padding-left: 10px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  max-width: 100%;
+}
+
+.cv-choice-percentage {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.cv-choice-text {
+  margin-left: 10px;
+  display: inline-block;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.selected-choice-icon {
+  margin-left: 10px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.cv-choice-percent-chart {
+  position: absolute;
+  background: #E1E8ED;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: .35em;
+  transition: all .3s cubic-bezier(0.5, 1.2, .5, 1.2);
+  opacity: 1;
+}
+
+.cv-choice-percent-chart.winner {
+  background-color: #eadfd5;
+}
+
+.cv-choice-percent-chart.event {
+  background-color: #d2d7d8;
+}
+
+.poll-creator-info {
+  margin-left: 58px;
+  margin-bottom: 10px;
+  height: 58px;
+}
+
+.poll-creator-info .creator-link {
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.poll-creator-info .creator-link:hover .poll-creator-name {
+  color: #1890ff;
+  text-decoration: underline;
+}
+
+.poll-creator-avatar {
+  float: left;
+  margin-top: 3px;
+  margin-left: -58px;
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 24px;
+}
+
+.poll-creator-avatar > * {
+  line-height: 48px;
+  font-size: 18px;
+}
+
+.poll-creator-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-top: 4px;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.poll-creator-username {
+  color: #657786;
+  font-size: 15px;
+  display: inline-block;
+}
+
+.poll-creation-date {
+  display: block;
+  color: #657786;
+  font-size: 13px;
+  margin-top: 2px;
+}
+
+.header-title {
+  color: black !important;
+}
+
+@media screen and (max-width: 991px) {
+  .chat-avatar {
+    display: none;
+  }
+}
+