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

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialog.scss

@@ -1,126 +0,0 @@
-@import "../../../../../index";
-
-$preview-dialog-color-divider: var(--color-divider);
-$row-center-container-base-font-size: 12px;
-$row-center-container-base-font-line-height: 32px;
-$row--main-container-min-height: 72px;
-$row--main-container-min-width: 320px;
-$row--main-container-text-title-width: 120px;
-$row--main-container-text-content-long-width: 200px;
-$row--main-container-text-content-short-width: 180px;
-
-$preview-dialog-avatar-wrapper-background-color-public: var(--color-background-modal);
-$preview-dialog-avatar-wrapper-background-color-private: var(--caption);
-
-.preview-dialog-container{
-  height: $row--main-container-min-height;
-  min-height: $row--main-container-min-height;
-  min-width: $row--main-container-min-width;
-
-  padding: 8px 16px;
-  //padding-left: 16px;
-  //padding-right: 16px;
-  //padding-top: 8px;
-  //padding-bottom: 8px;
-
-  border: 1px solid $preview-dialog-color-divider;
-  &.preview-selected{
-    background-color: $preview-dialog-color-divider;
-  }
-  &__text-title{
-    text-align: left;
-    max-width: $row--main-container-text-title-width;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--main-text, #0b121b);
-    text-align: left;
-    font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
-    position: relative;
-  }
-  &__text {
-    position: relative;
-    font-size: $row-center-container-base-font-size;
-    font-family: 'Roboto';
-    color: var(--color-font);
-    width: $row--main-container-text-content-long-width; /* Could be anything you like. */
-  }
-  &__text-left {
-    position: relative;
-    font-size: $row-center-container-base-font-size;
-    font-family: 'Roboto';
-    color: var(--color-font);
-    width: $row--main-container-text-content-short-width; /* Could be anything you like. */
-  }
-
-  &__text-concat {
-    position: relative;
-    display: inline-block;
-    word-wrap: break-word;
-    overflow: hidden;
-    max-height: $row-center-container-base-font-line-height; /* (Number of lines you want visible) * (line-height) */
-    line-height: 11px; // $row-center-container-base-font-size;
-    //text-align:justify;
-    color: var(--main-text);
-    text-align: left;
-    font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
-    position: relative;
-    align-self: stretch;
-    height: 32px;
-  }
-
-  //&__text.ellipsis::after {
-  //  content: "...";
-  //  position: absolute;
-  //  right: -6px;
-  //  // bottom: -1px;
-  //}
-  //&__text-left.ellipsis::after {
-  //  content: "...";
-  //  position: absolute;
-  //  right: -6px;
-  //  // bottom: -1px;
-  //}
-
-}
-
-.avatar-wrapper{
-  background: $preview-dialog-avatar-wrapper-background-color-private;
-  &.public_avatar{
-    background: $preview-dialog-avatar-wrapper-background-color-public;
-  }
-  width: 55px;
-  height: 55px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin: 0 auto;
-  &.icon_colors{
-    color: var(--color-icon);
-    background-color: var(--secondary-text);
-  }
-}
-.badge-text-style{
-  align-items: center;
-  text-align: center;
-  margin: 0 auto;
-  padding-top: 2px;
-}
-
-.dialog-item-preview-text{
-  color: var(--main-text);
-  text-align: left;
-  font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
-  position: relative;
-  align-self: stretch;
-  height: 32px;
-}
-
-.dialog-item-date-time-sent{
-  color: var(--secondary-text);
-  text-align: right;
-  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
-  position: relative;
-}
-

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialog.tsx

@@ -1,492 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-import React from 'react';
-import './PreviewDialog.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import RowCenterContainer from '../../../containers/RowCenterContainer/RowCenterContainer';
-import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-import { IconTheme } from '../../svgs/Icons/IconsCommonTypes';
-import ThemeScheme from '../../../../assets/ThemeScheme';
-import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import User from '../../svgs/Icons/Contents/User';
-import GroupChat from '../../svgs/Icons/Contents/GroupChat';
-import RowLeftContainer from '../../../containers/RowLeftContainer/RowLeftContainer';
-import PreviewDialogViewModel from './PreviewDialogViewModel';
-import NotifyOff from '../../svgs/Icons/Toggle/NotifyOff';
-import EditDots from '../../svgs/Icons/Actions/EditDots';
-import UiKitTheme from '../../../../assets/UiKitTheme';
-import PreviewImageFile from './PreviewImageFile/PreviewImageFile';
-import PreviewAudioFile from './PreviewAudioFile/PreviewAudioFile';
-import PreviewVideoFile from './PreviewVideoFile/PreviewVideoFile';
-import PreviewDefaultFile from './PreviewDefaultFile/PreviewDefaultFile';
-
-export type ThemeNames = 'light' | 'dark' | 'custom';
-type PreviewDialogsColorTheme = {
-  backgroundColorMainSection: string;
-  backgroundColorAvatarSection: string;
-  colorAvatarIcon: string;
-  fontColorTitle: string;
-  fontColorMessage: string;
-  divider: string;
-};
-type PreviewDialogsTheme = {
-  themeName?: ThemeNames;
-  colorTheme?: UiKitTheme;
-  selected: boolean;
-  muted: boolean;
-};
-
-type PreviewDialogSettings = {
-  showAvatarSection: boolean;
-  showTitleSection: boolean;
-  showMessageSection: boolean;
-
-  showPublicIconInTitle: boolean;
-  showNotifyIconInTitle: boolean;
-  showTimeInTitle: boolean;
-  showBadgePlaceholderInMessage: boolean;
-};
-
-type PreviewDialogsProps = {
-  typeDialog: DialogType;
-  dialogAvatar?: JSX.Element;
-  dialogViewModel?: PreviewDialogViewModel;
-  title?: string;
-  previewMessage?: string;
-  unreadMessageCount?: number;
-  message_date_time_sent?: string;
-  theme?: PreviewDialogsTheme;
-  additionalSettings?: PreviewDialogSettings;
-};
-// eslint-disable-next-line react/function-component-definition
-const PreviewDialog: React.FC<PreviewDialogsProps> = ({
-  typeDialog,
-  dialogViewModel,
-  dialogAvatar,
-  title,
-  previewMessage,
-  unreadMessageCount,
-  message_date_time_sent,
-  theme = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  additionalSettings = undefined,
-}: PreviewDialogsProps) => {
-  // const colorIcon = window
-  //   .getComputedStyle(document.documentElement)
-  //   .getPropertyValue('--color-icon')
-  //   .trim();
-
-  const colorIcon = theme?.colorTheme
-    ? theme?.colorTheme.mainElements()
-    : 'var(--main-elements)';
-
-  const defaultLightTheme: PreviewDialogsColorTheme = {
-    backgroundColorMainSection: theme?.colorTheme
-      ? theme?.colorTheme.mainBackground()
-      : 'var(--main-background)', // ThemeScheme.primary_a_100,
-    backgroundColorAvatarSection: theme?.colorTheme
-      ? theme?.colorTheme.disabledElements()
-      : 'var(--disabled-elements)', // ThemeScheme.secondary_100,
-    colorAvatarIcon: theme?.colorTheme
-      ? theme?.colorTheme.secondaryText()
-      : 'var(--secondary-text)', // ThemeScheme.secondary_300,
-    fontColorMessage: theme?.colorTheme
-      ? theme?.colorTheme.inputElements()
-      : 'var(--input-elements)', // ThemeScheme.secondary_500,
-    fontColorTitle: theme?.colorTheme
-      ? theme?.colorTheme.mainText()
-      : 'var(--main-text)', // ThemeScheme.secondary_900,
-    divider: theme?.colorTheme ? theme?.colorTheme.divider() : 'var(--divider)', // ThemeScheme.primary_50,
-  };
-
-  const darkDefaultTheme: PreviewDialogsColorTheme = {
-    backgroundColorMainSection: theme?.colorTheme
-      ? theme?.colorTheme.mainBackground()
-      : 'var(--main-background)', // ThemeScheme.primary_a_100,
-    backgroundColorAvatarSection: theme?.colorTheme
-      ? theme?.colorTheme.disabledElements()
-      : 'var(--disabled-elements)', // ThemeScheme.secondary_100,
-    colorAvatarIcon: theme?.colorTheme
-      ? theme?.colorTheme.secondaryText()
-      : 'var(--secondary-text)', // ThemeScheme.secondary_300,
-    fontColorMessage: theme?.colorTheme
-      ? theme?.colorTheme.inputElements()
-      : 'var(--input-elements)', // ThemeScheme.secondary_500,
-    fontColorTitle: theme?.colorTheme
-      ? theme?.colorTheme.mainText()
-      : 'var(--main-text)', // ThemeScheme.secondary_900,
-    divider: theme?.colorTheme ? theme?.colorTheme.divider() : 'var(--divider)', // ThemeScheme.secondary_400, // 'var(--color-divider)'
-  };
-
-  const hoverTheme: PreviewDialogsColorTheme = darkDefaultTheme;
-
-  if (theme?.themeName === 'light') {
-    hoverTheme.backgroundColorMainSection = theme?.colorTheme
-      ? theme?.colorTheme.chatInput()
-      : 'var(--chat-input)'; // ThemeScheme.primary_a_200;
-    hoverTheme.divider = theme?.colorTheme
-      ? theme?.colorTheme.divider()
-      : 'var(--divider)'; // ThemeScheme.primary_50;
-  } else {
-    hoverTheme.backgroundColorMainSection = theme?.colorTheme
-      ? theme?.colorTheme.fieldBorder()
-      : 'var(--field-border)'; // ThemeScheme.secondary_200;
-  }
-
-  const workTheme: PreviewDialogsColorTheme =
-    theme?.themeName === 'light' ? defaultLightTheme : darkDefaultTheme;
-
-  if (theme?.colorTheme) {
-    workTheme.colorAvatarIcon = theme?.colorTheme.secondaryText();
-    workTheme.backgroundColorAvatarSection =
-      theme?.colorTheme.disabledElements();
-    workTheme.backgroundColorMainSection = theme?.colorTheme.mainBackground();
-    workTheme.fontColorMessage = theme?.colorTheme.inputElements();
-    workTheme.fontColorTitle = theme?.colorTheme.mainText();
-    workTheme.divider = theme?.colorTheme.divider();
-    hoverTheme.backgroundColorMainSection = theme?.colorTheme
-      ? theme?.colorTheme.fieldBorder()
-      : 'var(--field-border)'; // ThemeScheme.secondary_200;
-  }
-
-  const avatarSectionStyles = {
-    backgroundColor: `${workTheme.backgroundColorAvatarSection}`,
-  };
-  const titleDialogStyles = theme?.colorTheme
-    ? {
-        border: `1px solid ${workTheme.divider}`,
-        backgroundColor: `${workTheme.backgroundColorMainSection}`,
-        color: `${workTheme.fontColorTitle}`,
-      }
-    : {};
-
-  const messageDialogStyles = theme?.colorTheme
-    ? { color: `${workTheme.colorAvatarIcon}` }
-    : {};
-
-  const publicIconTheme: IconTheme = {
-    color: colorIcon || ThemeScheme.primary_400,
-    width: '42',
-    height: '42',
-  };
-  const itemTheme: IconTheme = {
-    color: workTheme.colorAvatarIcon,
-    width: '42',
-    height: '42',
-  };
-  const previewDialogContainerStyles = [
-    'preview-dialog-container',
-    theme && theme.selected ? 'preview-selected' : '',
-  ].join(' ');
-
-  const avatarWrapperStyles = [
-    'avatar-wrapper',
-    typeDialog === DialogType.public ? 'public_avatar' : '',
-  ].join(' ');
-  const textWrapperContainer = [
-    unreadMessageCount && unreadMessageCount > 0
-      ? 'preview-dialog-container__text-left'
-      : 'preview-dialog-container__text',
-    previewMessage?.length && previewMessage?.length > 40 ? 'ellipsis' : '',
-  ].join(' ');
-  let avatar: JSX.Element;
-
-  switch (typeDialog) {
-    case DialogType.public:
-      avatar = (
-        <PublicChannel
-          color={publicIconTheme.color}
-          width={publicIconTheme.width}
-          height={publicIconTheme.height}
-        />
-      );
-      break;
-    case DialogType.group:
-      avatar = (
-        <GroupChat
-          color={itemTheme.color}
-          width={itemTheme.width}
-          height={itemTheme.height}
-        />
-      );
-      break;
-    case DialogType.private:
-      avatar = (
-        <User
-          color={itemTheme.color}
-          width={itemTheme.width}
-          height={itemTheme.height}
-        />
-      );
-      break;
-    default:
-      avatar = (
-        <GroupChat
-          color={itemTheme.color}
-          width={itemTheme.width}
-          height={itemTheme.height}
-        />
-      );
-      break;
-  }
-  avatar = dialogAvatar || avatar;
-  const [haveHover, setHaveHover] = React.useState(false);
-
-  const avatarSectionContainer = {
-    flexBasis: '56px',
-    minWidth: '56px',
-    maxWidth: '56px',
-    minHeight: '56px',
-    maxHeight: '56px',
-  };
-  const titleContainer = {
-    flexBasis: '150px',
-    minHeight: '20px',
-    maxHeight: '20px',
-    maxWidth: '150px',
-    minWidth: '150px',
-  };
-
-  const badgeContainer = {
-    flexBasis: '18px',
-    minHeight: '29px',
-    maxHeight: '29px',
-    maxWidth: '18px',
-    minWidth: '18px',
-  };
-  const badgeItemStyle = {
-    width: '19px',
-    height: '20px',
-    borderRadius: '50%',
-    backgroundColor: `${
-      publicIconTheme.color ? publicIconTheme.color : 'blue'
-    }`,
-    color: 'white',
-    fontSize: '12px',
-    lineHeight: '16px',
-  };
-  const hoverItemStyle = {
-    width: '19px',
-    height: '20px',
-    borderRadius: '50%',
-    color: 'white',
-    fontSize: '12px',
-    lineHeight: '16px',
-  };
-
-  const messageMinContainer = {
-    flexBasis: '182px',
-    minHeight: '29px',
-    maxHeight: '29px',
-    maxWidth: '182px',
-    minWidth: '182px',
-  };
-
-  const messageMaxContainer = {
-    flexBasis: '182px',
-    minHeight: '29px',
-    maxHeight: '29px',
-    maxWidth: '182px',
-    minWidth: '182px',
-  };
-
-  const getMessageParts = (message: string) => {
-    if (
-      message.includes('MediaContentEntity') ||
-      message.includes('[Attachment]')
-    ) {
-      const messageParts = message.split('|');
-
-      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
-      // 0, 1, 2, 3
-      return messageParts;
-    }
-
-    return [];
-  };
-
-  const getPreviewMessage = (message: string): JSX.Element => {
-    const messageParts = getMessageParts(message);
-
-    if (messageParts && messageParts.length > 0) {
-      const fileName: string = messageParts[1];
-      const fileUid: string = messageParts[2];
-      const fileUrl: string = fileUid && QB.content.privateUrl(fileUid);
-
-      const result: JSX.Element = (
-        <div className="dialog-item-preview-text">{message}</div>
-      );
-
-      if (messageParts[3].includes('audio')) {
-        return <PreviewAudioFile fileName={fileName} />;
-      }
-      if (messageParts[3].includes('video')) {
-        return <PreviewVideoFile fileName={fileName} />;
-      }
-      if (messageParts[3].includes('image')) {
-        return <PreviewImageFile fileName={fileName} imgUrl={fileUrl} />;
-      }
-      if (fileName.length > 0 && fileName.includes('.')) {
-        return <PreviewDefaultFile fileName={fileName} />;
-      }
-
-      return result;
-    }
-
-    return <div>{message}</div>;
-  };
-
-  return (
-    <div
-      onMouseEnter={() => setHaveHover(true)}
-      onMouseLeave={() => setHaveHover(false)}
-      style={
-        haveHover
-          ? {
-              ...titleDialogStyles,
-              // background: hoverTheme.backgroundColorMainSection,
-              background: 'var(--chat-input)',
-              border: `1px solid ${hoverTheme.divider}`,
-            }
-          : titleDialogStyles
-      }
-      className={previewDialogContainerStyles}
-      onClick={() => {
-        if (dialogViewModel && dialogViewModel.itemClickActionHandler) {
-          const it = dialogViewModel?.item;
-
-          dialogViewModel.itemClickActionHandler(it);
-        }
-      }}
-      onTouchStart={() => {
-        if (dialogViewModel && dialogViewModel.itemTouchActionHandler) {
-          const it = dialogViewModel?.item;
-
-          dialogViewModel.itemTouchActionHandler(it);
-        }
-      }}
-    >
-      <RowCenterContainer
-        minWidthContainer="288px"
-        minHeightContainer="56px"
-        gapBetweenItem="16px"
-        LeftItem={
-          <div style={avatarSectionStyles} className={avatarWrapperStyles}>
-            <div
-              style={{
-                margin: '0 auto',
-              }}
-            >
-              <div>{avatar}</div>
-            </div>
-          </div>
-        }
-        LeftContainerSize={avatarSectionContainer}
-        CenterItem={
-          <ColumnContainer gapBetweenItem="3px" maxWidth="213px">
-            <RowLeftContainer
-              RightItem={
-                <div className="dialog-item-date-time-sent">
-                  {!haveHover ? message_date_time_sent : ''}
-                </div>
-              }
-              CenterContainerSize={titleContainer}
-              CenterItem={
-                <div className="row-left-layout-main-container">
-                  {typeDialog === DialogType.public && (
-                    <div>
-                      <PublicChannel
-                        color={publicIconTheme.color}
-                        width="20px"
-                        height="20px"
-                        applyZoom
-                      />
-                    </div>
-                  )}
-                  <div className="preview-dialog-container__text-title">
-                    {title}
-                  </div>
-                  {theme?.muted && (
-                    <div>
-                      <NotifyOff
-                        color={publicIconTheme.color}
-                        width="20px"
-                        height="20px"
-                        applyZoom
-                      />
-                    </div>
-                  )}
-                </div>
-              }
-            />
-            {haveHover ? (
-              <RowLeftContainer
-                gapBetweenItem="7px"
-                RightContainerSize={badgeContainer}
-                RightItem={
-                  <div>
-                    <div style={hoverItemStyle}>
-                      <EditDots
-                        color={
-                          theme?.colorTheme
-                            ? theme?.colorTheme.mainElements()
-                            : 'var(--main-elements)'
-                        }
-                      />
-                    </div>
-                  </div>
-                }
-                CenterContainerSize={messageMinContainer}
-                CenterItem={
-                  <div className="preview-dialog-container__text-left">
-                    <span className="preview-dialog-container__text-concat">
-                      {getPreviewMessage(previewMessage || '')}
-                    </span>
-                  </div>
-                }
-              />
-            ) : (
-              <RowLeftContainer
-                gapBetweenItem="7px"
-                RightContainerSize={badgeContainer}
-                RightItem={
-                  unreadMessageCount && (
-                    <div>
-                      <div className="badge-text-style" style={badgeItemStyle}>
-                        {unreadMessageCount &&
-                        unreadMessageCount.toString().length > 1
-                          ? '9+'
-                          : unreadMessageCount}
-                      </div>
-                    </div>
-                  )
-                }
-                CenterContainerSize={
-                  unreadMessageCount && unreadMessageCount > 0
-                    ? messageMinContainer
-                    : messageMaxContainer
-                }
-                CenterItem={
-                  <div
-                    style={messageDialogStyles}
-                    className={textWrapperContainer}
-                  >
-                    <span className="preview-dialog-container__text-concat">
-                      {getPreviewMessage(previewMessage || '')}
-                    </span>
-                  </div>
-                }
-              />
-            )}
-          </ColumnContainer>
-        }
-        CenterContainerSize={{
-          flexBasis: '50px',
-          minHeight: '50px',
-          maxHeight: '50px',
-        }}
-      />
-    </div>
-  );
-};
-
-export default PreviewDialog;

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialogViewModel.ts

@@ -1,42 +0,0 @@
-import BaseViewModel, {
-  FunctionTypeViewModelToVoid,
-} from '../../../../Views/Base/BaseViewModel';
-import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
-
-export default class PreviewDialogViewModel extends BaseViewModel<DialogEntity> {
-  get item(): BaseViewModel<DialogEntity> {
-    return this;
-  }
-
-  protected _isSelected: boolean;
-
-  get isSelected(): boolean {
-    return this._isSelected;
-  }
-
-  set isSelected(value: boolean) {
-    this._isSelected = value;
-  }
-
-  constructor(
-    itemClickActionHandler:
-      | FunctionTypeViewModelToVoid<DialogEntity>
-      | undefined,
-    itemTouchActionHandler:
-      | FunctionTypeViewModelToVoid<DialogEntity>
-      | undefined,
-    // id: number,
-    // name: string,
-    dialogEntity: DialogEntity,
-  ) {
-    // super(id, name, dialogEntity);
-    super(dialogEntity);
-    this.itemClickActionHandler = itemClickActionHandler;
-    this.itemTouchActionHandler = itemTouchActionHandler;
-    this._isSelected = false;
-  }
-
-  public itemClickActionHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
-
-  public itemTouchActionHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
-}

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewImageFile/PreviewImageFile.scss

@@ -1,40 +0,0 @@
-.preview-image-file-container,
-.preview-image-file-container * {
-  box-sizing: border-box;
-}
-.preview-image-file-container {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-start;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-
-  &--placeholder {
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    position: static;
-
-    &__bg {
-      border-radius: 8px;
-      width: 32px;
-      height: 32px;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-  }
-
-  &--travel-img {
-    color: var(--main-text, #0b121b);
-    text-align: left;
-    font: 400 12px/16px "Roboto", sans-serif;
-    position: relative;
-    flex: 1;
-  }
-}
-
-