quickblox-react-ui-kit 0.1.0

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

@@ -0,0 +1,100 @@
+@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

@@ -0,0 +1,405 @@
+/* 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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,35 @@
+$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

@@ -0,0 +1,89 @@
+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;