quickblox-react-ui-kit 0.2.5 → 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,27 +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>
-      <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">
-        <img
-          className="image-body"
-          key={imageFile.id}
-          src={imageFile.url}
-          alt={imageFile.name || 'attached image'}
-        />
-      </a>
-    </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;
-}