quickblox-react-ui-kit 0.2.4 → 0.2.6-patch

package/src/Presentation/components/UI/Dialogs/MessagesView/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.tsx

@@ -1,43 +0,0 @@
-import './ItemDropDownMenu.scss';
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../../../../Views/Base/BaseViewModel';
-
-type ItemDropDownMenuProps = {
-  item: string;
-  icon?: React.ReactNode;
-  touchAction?: FunctionTypeVoidToVoid;
-  clickAction?: FunctionTypeVoidToVoid;
-};
-
-// eslint-disable-next-line react/function-component-definition
-export const ItemDropDownMenu: React.FC<ItemDropDownMenuProps> = ({
-  item,
-  icon,
-  touchAction,
-  clickAction,
-}: ItemDropDownMenuProps) => {
-  return (
-    <div
-      className="item-drop-down-menu-container"
-      onTouchStart={() => {
-        // eslint-disable-next-line no-unused-expressions
-        touchAction && typeof touchAction === 'function'
-          ? touchAction()
-          : () => {
-              console.log('item menu touched');
-            };
-      }}
-      onClick={() => {
-        // eslint-disable-next-line no-unused-expressions
-        clickAction && typeof clickAction === 'function'
-          ? clickAction()
-          : () => {
-              console.log('item menu clicked');
-            };
-      }}
-    >
-      <span className="item-drop-down-menu-container--title">{item}</span>
-      <div className="item-drop-down-menu-container--icon">{icon}</div>
-    </div>
-  );
-};

package/src/Presentation/components/UI/Dialogs/MessagesView/ErrorToast/ErrorToast.scss

@@ -1,26 +0,0 @@
-.error-toast,
-.error-toast * {
-  box-sizing: border-box;
-}
-.error-toast {
-  background: var(--color-background-overlay);
-  border-radius: 4px;
-  opacity: 0.6000000238418579;
-  padding: 4px 12px 4px 12px;
-  // margin-top: 36px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-}
-.translation-failed-try-again {
-  color: var(--color-background);
-  text-align: left;
-  font: 500 12px/16px "Roboto", sans-serif;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}

package/src/Presentation/components/UI/Dialogs/MessagesView/ErrorToast/ErrorToast.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import './ErrorToast.scss';
-
-type ErrorToastProps = {
-  messageText: string;
-  // displayTimeout: number;
-};
-
-// eslint-disable-next-line react/function-component-definition
-export const ErrorToast: React.FC<ErrorToastProps> = ({
-  messageText,
-}: // displayTimeout,
-ErrorToastProps) => {
-  return (
-    // <div>
-    //   {messageText} - {displayTimeout}
-    // </div>
-
-    <div className="error-toast">
-      <div className="translation-failed-try-again">
-        {messageText} Try again.
-      </div>
-    </div>
-  );
-};

package/src/Presentation/components/UI/Dialogs/MessagesView/HeaderMessages/HeaderMessages.scss

@@ -1,133 +0,0 @@
-$dialog-information-container-height: 64px;
-$dialog-information-container-width: 720px;
-$dialog-information-container-dialog-information-height: 64px;
-
-.message-header-container {
-  border-bottom: 1px solid var(--divider);
-  min-height: $dialog-information-container-height;
-  max-height: $dialog-information-container-height;
-  height: $dialog-information-container-height;
-
-  // todo: delete this comment
-  // min-width: $dialog-information-container-width; // !!!
-
-  display: flex;
-  flex-direction: column;
-  //align-items: center;
-  padding: 0px;
-
-  //position: absolute;
-  //width: 720px;
-  //height: 64px;
-  //left: 0px;
-  //top: 0px;
-
-  // border: 1px solid green;
-
-  &--info-wrapper{
-    min-height: $dialog-information-container-dialog-information-height;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-
-    margin: 0px;
-    //padding: 0px;
-
-    //align-items: center;
-    //gap: 16px;
-
-    // border: 1px solid orange;
-
-    &__dialog-icon{
-      flex: 1 1 40px;
-      min-height: 40px;
-      min-width: 40px;
-      max-width: 40px;
-      margin-left: 20px;
-      margin-top: 12px;
-      margin-bottom: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--disabled-elements);
-      border-radius: 50%;
-
-      // border: 1px solid red;
-    }
-
-    &__detail{
-      flex: 2 3;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 0px;
-
-
-      min-height: 40px;
-      // border: 1px solid orange;
-
-      &__dialog-name{
-        margin-top: 12px;
-        //margin-bottom: 28px;
-        margin-left: 8px;
-
-        max-width: 250px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 0.15px;
-        color: var(--main-text);
-
-        // border: 1px solid blue;
-      }
-
-      &__dialog-members{
-        margin-left: 8px;
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 11px;
-        line-height: 16px;
-        letter-spacing: 0.5px;
-        color: var(--secondary-text)
-        // border: 1px solid green;
-      }
-    }
-
-    &__detail-button{
-      flex: 1 1 80px;
-      min-width: 80px;
-      max-width: 80px;
-      display: flex;
-      flex-direction: row;
-      //justify-content: flex-end;
-      align-items: flex-end;
-      padding: 0px;
-      gap: 16px;
-
-      min-height: 32px;
-      min-width: 80px;
-      margin: 16px 16px 16px 0px;
-      // flex: 1 1 40px;
-
-      // border: 1px solid green;
-
-      &__call {
-        // border: 1px solid orange;
-      }
-
-      &__info {
-        // border: 1px solid blue;
-      }
-    }
-  }
-}

package/src/Presentation/components/UI/Dialogs/MessagesView/HeaderMessages/HeaderMessages.tsx

@@ -1,144 +0,0 @@
-import './HeaderMessages.scss';
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
-import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
-import GroupChat from '../../../svgs/Icons/Contents/GroupChat';
-import InformationFill from '../../../svgs/Icons/Status/InformationFill';
-import ActiveSvg from '../../../svgs/ActiveSvg/ActiveSvg';
-import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
-import { GroupDialogEntity } from '../../../../../../Domain/entity/GroupDialogEntity';
-import UserAvatar from '../../EditDialog/UserAvatar/UserAvatar';
-import User from '../../../svgs/Icons/Contents/User';
-import { PublicDialogEntity } from '../../../../../../Domain/entity/PublicDialogEntity';
-import PublicChannel from '../../../svgs/Icons/Contents/PublicChannel';
-import UiKitTheme from '../../../../../assets/UiKitTheme';
-
-type HeaderMessagesProps = {
-  dialog: DialogEntity;
-  countMembers?: number;
-  InformationHandler?: FunctionTypeVoidToVoid;
-  CallHandler?: FunctionTypeVoidToVoid;
-  theme?: UiKitTheme;
-};
-// eslint-disable-next-line react/function-component-definition
-const HeaderMessages: React.FC<HeaderMessagesProps> = ({
-  dialog,
-  countMembers = 0,
-  InformationHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  CallHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  theme = undefined,
-}: HeaderMessagesProps) => {
-  // TODO: check showDialogInformation, add handler for close DialogInformation
-  const [showDialogInformation, setShowDialogInformation] =
-    React.useState(false);
-
-  // eslint-disable-next-line consistent-return
-  const renderIconForTypeDialog = (dialogEntity: DialogEntity) => {
-    if (dialogEntity.type === DialogType.group) {
-      const groupDialogEntity = dialogEntity as GroupDialogEntity;
-
-      if (groupDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={groupDialogEntity.photo}
-            iconTheme={{ width: '40px', height: '40px' }}
-          />
-        );
-      }
-
-      return (
-        <GroupChat
-          width="24"
-          height="24"
-          applyZoom
-          color="var(--secondary-text)"
-        />
-      );
-    }
-    if (dialogEntity.type === DialogType.private) {
-      return (
-        <User width="24" height="24" applyZoom color="var(--secondary-text)" />
-      );
-    }
-    if (dialogEntity.type === DialogType.public) {
-      const publicDialogEntity = dialogEntity as PublicDialogEntity;
-
-      if (publicDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={publicDialogEntity.photo}
-            iconTheme={{ width: '40px', height: '40px' }}
-          />
-        );
-      }
-
-      return (
-        <PublicChannel
-          width="24"
-          height="24"
-          applyZoom
-          color="var(--secondary-text)"
-        />
-      );
-    }
-  };
-
-  return (
-    <div className="message-header-container">
-      <div className="message-header-container--info-wrapper">
-        <div className="message-header-container--info-wrapper__dialog-icon">
-          {renderIconForTypeDialog(dialog)}
-          {/* <GroupChat width="40" height="40" applyZoom color="#636D78" /> */}
-        </div>
-        <div className="message-header-container--info-wrapper__detail">
-          <div className="message-header-container--info-wrapper__detail__dialog-name">
-            {dialog?.name || 'Dialog name'}
-          </div>
-          <div className="message-header-container--info-wrapper__detail__dialog-members">
-            {countMembers || 0} members
-          </div>
-        </div>
-        <div className="message-header-container--info-wrapper__detail-button">
-          <div
-            className="message-header-container--info-wrapper__detail-button__call"
-            style={{ width: '32px' }}
-          >
-            {/* <ActiveSvg */}
-            {/*  content={<Phone width="32" height="32" applyZoom />} */}
-            {/*  clickAction={() => { */}
-            {/*    if (CallHandler) CallHandler(); */}
-            {/*  }} */}
-            {/*  touchAction={() => { */}
-            {/*    if (CallHandler) CallHandler(); */}
-            {/*  }} */}
-            {/* /> */}
-          </div>
-          <div className="message-header-container--info-wrapper__detail-button__info">
-            <ActiveSvg
-              content={
-                <InformationFill
-                  width="32"
-                  height="32"
-                  applyZoom
-                  color="var(--secondary-background)"
-                />
-              }
-              clickAction={() => {
-                setShowDialogInformation(!showDialogInformation);
-                if (InformationHandler) InformationHandler();
-              }}
-              touchAction={() => {
-                setShowDialogInformation(!showDialogInformation);
-                if (InformationHandler) InformationHandler();
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HeaderMessages;

package/src/Presentation/components/UI/Dialogs/MessagesView/HighLightLink/HighLightLink.scss

@@ -1,92 +0,0 @@
-.high-light-link-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-
-  width: 240px;
-  height: 70px;
-
-  background: #E4E6E8;
-  border-radius: 8px;
-
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-
-  &--header-wrapper{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 6px 16px;
-
-    width: 240px;
-    height: 32px;
-
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-
-    &__link_url{
-      width: 208px;
-      height: 20px;
-
-      text-decoration: none;
-      cursor: pointer;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-
-      display: flex;
-      align-items: center;
-      letter-spacing: 0.25px;
-
-      color: #636D78;
-
-      flex: none;
-      order: 0;
-      flex-grow: 1;
-    }
-  }
-
-  &--footer-wrapper{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 16px;
-
-    width: 240px;
-    height: 32px;
-
-    flex: none;
-    order: 4;
-    align-self: stretch;
-    flex-grow: 0;
-
-    &__content{
-      width: 208px;
-      height: 16px;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 11px;
-      line-height: 16px;
-
-      display: flex;
-      align-items: center;
-      letter-spacing: 0.5px;
-
-      color: #636D78;
-
-      flex: none;
-      order: 0;
-      flex-grow: 1;
-    }
-  }
-}
-

package/src/Presentation/components/UI/Dialogs/MessagesView/HighLightLink/HighLightLink.tsx

@@ -1,128 +0,0 @@
-import './HighLightLink.scss';
-import React from 'react';
-
-const pattern =
-  '^(https?:\\/\\/)?' + // protocol
-  '((([a-zA-Z\\d]([a-zA-Z\\d-]{0,61}[a-zA-Z\\d])*\\.)+' + // sub-domain + domain name
-  '[a-zA-Z]{2,13})' + // extension
-  '|((\\d{1,3}\\.){3}\\d{1,3})' + // OR ip (v4) address
-  '|localhost)' + // OR localhost
-  '(\\:\\d{1,5})?' + // port
-  '(\\/[a-zA-Z\\&\\d%_.~+-:@]*)*' + // path
-  '(\\?[a-zA-Z\\&\\d%_.,~+-:@=;&]*)?' + // query string
-  '(\\#[-a-zA-Z&\\d_]*)?$'; // fragment locator
-
-function removeLastPunctuation(str: string): string {
-  const punctuationRegex = /[!;%:?*_.,:-]/;
-  const decimalSeparatorRegex = /[.,]/;
-
-  if (str.length > 0) {
-    const lastChar = str.charAt(str.length - 1);
-
-    if (
-      punctuationRegex.test(lastChar) ||
-      decimalSeparatorRegex.test(lastChar)
-    ) {
-      return str.slice(0, -1);
-    }
-  }
-
-  return str;
-}
-
-export const isURL = (str: string) => {
-  const regex = new RegExp(pattern);
-
-  // return regex.test(str);
-  const result = regex.test(str) || regex.test(removeLastPunctuation(str));
-  // const result = str.match(pattern);
-
-  return result;
-};
-
-const getURIParts = (url: string) => {
-  const matches = url.match(/^(\w+?:\/\/)?([\w-\\.]+(?=\/?))?:?(\d*)?([^:]*)/);
-
-  return {
-    scheme: matches ? matches[1] : undefined,
-    host: matches ? matches[2] : '',
-    port: matches ? matches[3] : undefined,
-    pathname: matches ? matches[4] : '',
-  };
-};
-
-const getRuleUrl = (url: string) => {
-  const uriParts = getURIParts(url);
-  let result = url;
-
-  if (uriParts.scheme === undefined) {
-    result = `http://${url}`;
-  }
-
-  return result;
-};
-
-export const messageHasUrls = (message: string) => {
-  let result = 0;
-
-  const strings = message.split(/\n| /);
-
-  strings.forEach((s: string) => {
-    if (s.match(pattern) || removeLastPunctuation(s).match(pattern)) {
-      result += 1;
-    }
-  });
-
-  return result > 0;
-};
-
-type HighLightLinkProps = {
-  messageText: string;
-};
-
-// eslint-disable-next-line react/function-component-definition
-//
-// export const HighLightLink: React.FC<HighLightLinkProps> = ({
-//   urlText,
-// }: HighLightLinkProps) => {
-//   return (
-//     <div className="high-light-link-container">
-//       <div className="high-light-link-container--header-wrapper">
-//         <a
-//           href={urlText}
-//           target="blank"
-//           className="high-light-link-container--header-wrapper__link_url"
-//         >
-//           {getNameUrl(urlText)}
-//         </a>
-//       </div>
-//       <div className="high-light-link-container--footer-wrapper">
-//         <div className="high-light-link-container--footer-wrapper__content">
-//           {getURIParts(urlText).host}
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// eslint-disable-next-line react/function-component-definition
-export const HighLightLink: React.FC<HighLightLinkProps> = ({
-  messageText,
-}: HighLightLinkProps) => {
-  const strings = messageText.split(/\n| /);
-  const elements = strings.map((item, index) => {
-    if (isURL(item)) {
-      return (
-        <span>
-          <a key={index} href={`${getRuleUrl(item)}`} target="blank">
-            {item}
-          </a>{' '}
-        </span>
-      );
-    }
-
-    return <span>{item} </span>;
-  });
-
-  return <div>{elements}</div>;
-};

package/src/Presentation/components/UI/Dialogs/MessagesView/ImageAttachmentComponent/ImageAttachmentComponent.scss

@@ -1,11 +0,0 @@
-.image-body{
-  // border: 1px solid red;
-  max-width: 240px;
-  max-height: 160px;
-  min-width: 240px;
-  min-height: 160px;
-  width: 240px;
-  height: 160px;
-  padding: 0;
-  border-radius: 4px;
-}

package/src/Presentation/components/UI/Dialogs/MessagesView/ImageAttachmentComponent/ImageAttachmentComponent.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import './ImageAttachmentComponent.scss';
-import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
-
-type ImageAttachmentComponentProps = {
-  imageFile: FileEntity;
-};
-// eslint-disable-next-line react/function-component-definition
-const ImageAttachmentComponent: React.FC<ImageAttachmentComponentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  imageFile,
-}: ImageAttachmentComponentProps) => {
-  return (
-    <div>
-      <img
-        className="image-body"
-        key={imageFile.id}
-        src={imageFile.url}
-        alt={imageFile.name || 'attached image'}
-      />
-    </div>
-  );
-};
-
-export default ImageAttachmentComponent;

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.scss

@@ -1,39 +0,0 @@
-
-.avatar-wrap {
-  padding: 0px 0px 16px 0px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: flex-end;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  position: relative;
-}
-.avatar {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  position: relative;
-}
-.rectangle {
-  width: 36px;
-  height: 36px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-}
-.ellipse {
-  background: var(--secondary-secondary-100, #bcc1c5);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-}
-.contents-user {
-  position: absolute;
-  left: 6.43px;
-  top: 6.43px;
-  overflow: visible;
-}

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import './AvatarContentIncomingUser.scss';
-
-export default function AvatarContentIncomingUser() {
-  return (
-    <div className="avatar-wrap">
-      <div className="avatar">
-        <div className="rectangle" />
-        <div className="ellipse" />
-        <svg
-          className="contents-user"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.9999 6.11828C13.1185 6.11828 14.0249 7.0247 14.0249 8.14328C14.0249 9.26185 13.1185 10.1683 11.9999 10.1683C10.8814 10.1683 9.97493 9.26185 9.97493 8.14328C9.97493 7.0247 10.8814 6.11828 11.9999 6.11828ZM11.9999 14.7968C14.8639 14.7968 17.8821 16.2047 17.8821 16.8218V17.8826H6.11779V16.8218C6.11779 16.2047 9.136 14.7968 11.9999 14.7968ZM11.9999 4.28613C9.86886 4.28613 8.14279 6.0122 8.14279 8.14328C8.14279 10.2743 9.86886 12.0004 11.9999 12.0004C14.131 12.0004 15.8571 10.2743 15.8571 8.14328C15.8571 6.0122 14.131 4.28613 11.9999 4.28613ZM11.9999 12.9647C9.42529 12.9647 4.28564 14.2568 4.28564 16.8218V19.7147H19.7142V16.8218C19.7142 14.2568 14.5746 12.9647 11.9999 12.9647Z"
-            fill="#636D78"
-          />
-        </svg>
-      </div>
-    </div>
-  );
-}