quickblox-react-ui-kit 0.1.0 → 0.1.2

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

@@ -1,100 +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: 24px;
-$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;
-  }
-  &__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: $row-center-container-base-font-size;
-    text-align:justify;
-  }
-
-  //&__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;
-}
-

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

@@ -1,405 +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 Theme from '../../../../assets/Theme';
-
-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?: Theme;
-  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 = 'var(--color-icon)';
-
-  const defaultLightTheme: PreviewDialogsColorTheme = {
-    backgroundColorMainSection: 'var(--main-background)', // ThemeScheme.primary_a_100,
-    backgroundColorAvatarSection: 'var(--disabled-elements)', // ThemeScheme.secondary_100,
-    colorAvatarIcon: 'var(--secondary-text)', // ThemeScheme.secondary_300,
-    fontColorMessage: 'var(--input-elements)', // ThemeScheme.secondary_500,
-    fontColorTitle: 'var(--main-text)', // ThemeScheme.secondary_900,
-    divider: 'var(--divider)', // ThemeScheme.primary_50,
-  };
-
-  const darkDefaultTheme: PreviewDialogsColorTheme = {
-    backgroundColorMainSection: 'var(--main-background)', // ThemeScheme.primary_a_100,
-    backgroundColorAvatarSection: 'var(--disabled-elements)', // ThemeScheme.secondary_100,
-    colorAvatarIcon: 'var(--secondary-text)', // ThemeScheme.secondary_300,
-    fontColorMessage: 'var(--input-elements)', // ThemeScheme.secondary_500,
-    fontColorTitle: 'var(--main-text)', // ThemeScheme.secondary_900,
-    divider: 'var(--color-divider)', // ThemeScheme.secondary_400,
-  };
-
-  const hoverTheme: PreviewDialogsColorTheme = darkDefaultTheme;
-
-  if (theme?.themeName === 'light') {
-    hoverTheme.backgroundColorMainSection = 'var(--chat-input)'; // ThemeScheme.primary_a_200;
-    hoverTheme.divider = 'var(--divider)'; // ThemeScheme.primary_50;
-  } else {
-    hoverTheme.backgroundColorMainSection = '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 = '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',
-  };
-
-  return (
-    <div
-      onMouseEnter={() => setHaveHover(true)}
-      onMouseLeave={() => setHaveHover(false)}
-      style={
-        haveHover
-          ? {
-              ...titleDialogStyles,
-              background: hoverTheme.backgroundColorMainSection,
-              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 style={{ textAlign: 'right' }}>
-                  {!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 />
-                    </div>
-                  </div>
-                }
-                CenterContainerSize={messageMinContainer}
-                CenterItem={
-                  <div className="preview-dialog-container__text-left">
-                    <span className="preview-dialog-container__text-concat">
-                      {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-d  ialog-container__text-concat">
-                      {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/YesNoQuestion/YesNoQuestion.scss

@@ -1,35 +0,0 @@
-$yesno-container-background-color: var(--main-background);
-$yesno-container-message-text-color: var(--caption);
-$yesno-container-divider: var(--divider);
-
-.yesno-container-wrapper {
-  min-width: 336px;
-}
-
-.yesno-container {
-  display: flex;
-  flex-flow: column nowrap;
-  min-width: 380px;
-  min-height: 176px;
-  margin: 0 auto;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-  background-color: $yesno-container-background-color;
-
-  &__message-text {
-    min-height: 24px;
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-    letter-spacing: 0.15px;
-    color: $yesno-container-message-text-color;
-  }
-  &__footer{
-     //border: 2px solid brown;
-    min-width: 336px;
-  }
-}

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

@@ -1,89 +0,0 @@
-import './YesNoQuestion.scss';
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import RowRightContainer from '../../../containers/RowRightContainer/RowRightContainer';
-import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-
-type YesNoQuestionProps = {
-  messageText?: string;
-  ClickYesActionHandler?: FunctionTypeVoidToVoid;
-  TouchYesActionHandler?: FunctionTypeVoidToVoid;
-  ClickNoActionHandler?: FunctionTypeVoidToVoid;
-  TouchNoActionHandler?: FunctionTypeVoidToVoid;
-  yesActionCaption?: string;
-  noActionCaption?: string;
-};
-// eslint-disable-next-line react/function-component-definition
-const YesNoQuestionComponent: React.FC<YesNoQuestionProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  messageText,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ClickYesActionHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  TouchYesActionHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ClickNoActionHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  TouchNoActionHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  yesActionCaption = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  noActionCaption = undefined,
-}: YesNoQuestionProps) => {
-  return (
-    <div className="yesno-container-wrapper">
-      <ColumnContainer>
-        <div className="yesno-container__message-text">{messageText}</div>
-        <div className="yesno-container__footer">
-          <RowRightContainer
-            minHeightContainer="32px"
-            gapBetweenItem="8px"
-            RightContainerSize={{
-              flexBasis: '63px',
-              minWidth: '63px',
-              maxWidth: '63px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            RightItem={
-              <div>
-                <MainButton
-                  clickHandler={() => {
-                    if (ClickYesActionHandler) {
-                      ClickYesActionHandler();
-                    }
-                  }}
-                  title={yesActionCaption || 'Yes'}
-                  typeButton={TypeButton.danger}
-                />
-              </div>
-            }
-            CenterContainerSize={{
-              flexBasis: '78px',
-              minWidth: '78px',
-              maxWidth: '78px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            CenterItem={
-              <div>
-                <MainButton
-                  title={noActionCaption || 'No'}
-                  clickHandler={() => {
-                    if (ClickNoActionHandler) {
-                      ClickNoActionHandler();
-                    }
-                  }}
-                  typeButton={TypeButton.outlined}
-                />
-              </div>
-            }
-          />
-        </div>
-      </ColumnContainer>
-    </div>
-  );
-};
-
-export default YesNoQuestionComponent;