quickblox-react-ui-kit 0.4.1 → 0.4.2-beta.2

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.tsx

@@ -1,122 +0,0 @@
-import './ForwardMessageFlow.scss';
-import React, { useState } from 'react';
-import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
-import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
-import ForwardMessagePreview from './ForwardMessagePreview/ForwardMessagePreview';
-import DialogsWithSearch from './DialogsWithSearch/DialogsWithSearch';
-import InputForForwarding from './InputForForwarding/InputForForwarding';
-
-//! !! Where render errors!!!!
-type ForwardMessageFlowProps = {
-  messages: MessageEntity[];
-  dialogs: DialogEntity[];
-  currentDialog: DialogEntity;
-  currentUserName: string;
-  onSendData: (
-    dialogs: DialogEntity[],
-    messages: MessageEntity[],
-    relatedText: string,
-  ) => void;
-  disableActions: boolean;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
-  messages,
-  dialogs,
-  currentDialog,
-  currentUserName,
-  onSendData,
-  disableActions,
-}: ForwardMessageFlowProps) => {
-  const [activeChatsTab, setActiveChatsTab] = useState(true);
-  const [selectedDialogs, setSelectedDialogs] = useState<string[]>([]);
-  const [inputText, setInputText] = useState('');
-
-  const userName = currentUserName;
-  const sendMessageHandler = () => {
-    if (!disableActions) {
-      const dialogsForSend: DialogEntity[] = dialogs.filter((item) =>
-        selectedDialogs.includes(item.id),
-      );
-
-      onSendData(dialogsForSend, messages, inputText);
-    }
-  };
-
-  return (
-    <div className="forward-message-flow">
-      <div className="forward-message-flow-tabs">
-        <div
-          className="forward-message-flow-tabs-buttons"
-          onClick={() => {
-            setActiveChatsTab(!activeChatsTab);
-          }}
-        >
-          <div
-            className={
-              activeChatsTab ? 'active-tab-button' : 'no-active-tab-button'
-            }
-          >
-            <div
-              className={
-                activeChatsTab
-                  ? 'active-tab-button-content'
-                  : 'no-active-tab-button-content'
-              }
-            >
-              Chats
-            </div>
-          </div>
-          <div
-            className={
-              activeChatsTab ? 'no-active-tab-button' : 'active-tab-button'
-            }
-            style={{ display: 'none' }}
-          >
-            <div
-              className={
-                activeChatsTab
-                  ? 'no-active-tab-button-content'
-                  : 'active-tab-button-content'
-              }
-            >
-              Contacts
-            </div>
-          </div>
-        </div>
-        <svg
-          className="forward-message-flow-tabs-buttons-divider"
-          width="332"
-          height="0"
-        />
-      </div>
-      <DialogsWithSearch
-        dialogs={dialogs}
-        currentDialog={currentDialog}
-        selectedDialogs={selectedDialogs}
-        onSelect={(idItem) => {
-          const newSelectedDialogs = [idItem];
-
-          setSelectedDialogs(newSelectedDialogs);
-        }}
-      />
-      <div className="forward-message-flow-message-input">
-        <div className="forward-message-flow-message-input-row">
-          <ForwardMessagePreview
-            messages={messages}
-            userNameSentMessage={userName}
-          />
-        </div>
-        <InputForForwarding
-          inputText={inputText}
-          onChange={(s) => setInputText(s)}
-          onSend={sendMessageHandler}
-          disabled={selectedDialogs.length === 0 || disableActions}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ForwardMessageFlow;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessagePreview/ForwardMessagePreview.scss

@@ -1,100 +0,0 @@
-.forward-message-preview,
-.forward-message-preview * {
-  box-sizing: border-box;
-}
-.forward-message-preview {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 1;
-  position: relative;
-}
-.forward-message-preview-photo {
-  border-radius: 8px;
-  flex-shrink: 0;
-  width: 44px;
-  height: 44px;
-  position: relative;
-}
-.forward-message-preview-message {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.forward-message-preview-message-caption {
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: flex-start;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  position: relative;
-}
-.forward-message-preview-caption-info {
-  display: flex;
-  flex-direction: row;
-  gap: 2px;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  position: relative;
-}
-.forward-message-preview-caption-info-icon {
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  position: relative;
-}
-.actions-forward-filled {
-  align-self: stretch;
-  flex: 1;
-  position: relative;
-  overflow: visible;
-}
-.forwarded-message-from-name {
-  color: var(--tertiary-elements, #636d78);
-  text-align: left;
-  font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
-  position: relative;
-}
-.forwarded-message-text {
-  color: var(--main-text, #90979f);
-  text-align: center;
-  font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.forward-message-preview-message-caption-info-text {
-  color: var(--main-text, #0b1b0f);
-  text-align: center;
-  font: var(--body-body-large, 400 16px/24px "Roboto", sans-serif);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.forward-message-preview-message-caption-info-file {
-  color: var(--caption, #90979f);
-  text-align: center;
-  font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessagePreview/ForwardMessagePreview.tsx

@@ -1,90 +0,0 @@
-import React, { useEffect } from 'react';
-import './ForwardMessagePreview.scss';
-import ForwardFilled from '../../../../components/UI/svgs/Icons/Actions/ForwardFilled';
-import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
-import { FileType } from '../../../../../Domain/entity/FileTypes';
-import ReplyImagePreviewAttachment from '../../../../ui-components/MessageInput/ReplyMessagePreview/ReplyImagePreviewAttachment/ReplyImagePreviewAttachment';
-import TextDocument from '../../../../components/UI/svgs/Icons/Media/TextDocument';
-import { MessageDTOMapper } from '../../../../../Data/source/remote/Mapper/MessageDTOMapper';
-
-type ForwardMessagePreviewProps = {
-  messages: MessageEntity[];
-  userNameSentMessage: string;
-};
-
-function trimMessage(messageText: string) {
-  return `${messageText.substring(0, 29)} ...`;
-}
-
-// eslint-disable-next-line react/function-component-definition
-const ForwardMessagePreview: React.FC<ForwardMessagePreviewProps> = ({
-  messages,
-  userNameSentMessage,
-}: ForwardMessagePreviewProps) => {
-  const [messageTextValue, setMessageTextValue] = React.useState<string>('');
-
-  useEffect(() => {
-    const value = MessageDTOMapper.formatMessage(messages[0].message);
-
-    setMessageTextValue(value);
-  }, [messages[0]?.message]);
-
-  return (
-    <div className="forward-message-preview">
-      {messages.length > 0 &&
-      messages[0].attachments &&
-      messages[0].attachments.length > 0 ? (
-        <div className="forward-message-preview-placeholder">
-          <div className="forward-message-preview-placeholder-icon">
-            {messages &&
-            messages[0].attachments &&
-            messages[0].attachments.length > 0 &&
-            messages[0].attachments[0].type
-              .toString()
-              .includes(FileType.image) &&
-            messages[0].attachments[0].file ? (
-              <ReplyImagePreviewAttachment
-                imageFile={messages[0].attachments[0].file}
-              />
-            ) : (
-              <TextDocument width="24" height="24" color="var(--caption)" />
-            )}
-          </div>
-        </div>
-      ) : null}
-
-      <div className="forward-message-preview-message">
-        <div className="forward-message-preview-message-caption">
-          <div className="forward-message-preview-caption-info">
-            <div className="forward-message-preview-caption-info-icon">
-              <ForwardFilled width="16" height="16" color="var(--caption)" />
-            </div>
-            <div className="forwarded-message-from-name">
-              Forwarded from {userNameSentMessage}
-            </div>
-          </div>
-        </div>
-        <div className="forwarded-message-text">
-          {messages.length > 0 &&
-          (!messages[0].attachments ||
-            (messages[0].attachments &&
-              messages[0].attachments.length === 0)) ? (
-            <div className="forward-message-preview-message-caption-info-text">
-              {messages.length > 1
-                ? '2 messages'
-                : trimMessage(messageTextValue)}
-            </div>
-          ) : (
-            <div className="forward-message-preview-message-caption-info-file">
-              {messages.length > 1
-                ? '2 messages'
-                : trimMessage(messageTextValue)}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ForwardMessagePreview;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.scss

@@ -1,95 +0,0 @@
-.forwarding-message-input,
-.forwarding-message-input * {
-  box-sizing: border-box;
-}
-.forwarding-message-input {
-  background: var(--main-background, #ffffff);
-  padding: 10px 12px 10px 12px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-end;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-}
-.forwarding-message-input-input {
-  background: var(--incoming-background, #e4e6e8);
-  border-radius: 4px;
-  padding: 10px 8px 10px 16px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-end;
-  justify-content: flex-start;
-  flex: 1;
-  position: relative;
-}
-.forwarding-message-input-input-type-message {
-  color: var(--main-text, #636d78);
-  background: var(--incoming-background, #e4e6e8);
-  text-align: left;
-  font: var(--body-body-large, 400 16px/24px "Roboto", sans-serif);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  resize: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 26px;
-  min-height: 26px;
-  max-height: 26px;
-}
-
-.forwarding-message-input-icon-send {
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 44px;
-  position: relative;
-
-  &__icon{
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    fill: var(--secondary-elements);
-    &__send {
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-      fill: var(--main-elements);
-    }
-
-    svg path{
-      width: 24px;
-      height: 24px;
-      fill: var(--main-elements);
-    }
-  }
-  &__icon--disable{
-    fill: var(--disabled-elements);
-    cursor: default;
-    width: 24px;
-    height: 24px;
-    svg path{
-      width: 24px;
-      height: 24px;
-      fill: var(--disabled-elements);
-    }
-  }
-
-}
-.actions-send {
-  flex-shrink: 0;
-  position: relative;
-  overflow: visible;
-}

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.tsx

@@ -1,47 +0,0 @@
-import cn from 'classnames';
-import {
-  FunctionTypeStringToVoid,
-  FunctionTypeVoidToVoid,
-} from '../../../../../CommonTypes/BaseViewModel';
-import { SendSvg } from '../../../../icons';
-import './InputForForwarding.scss';
-
-type InputForForwardingProps = {
-  inputText: string;
-  onChange: FunctionTypeStringToVoid;
-  onSend: FunctionTypeVoidToVoid;
-  disabled?: boolean;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const InputForForwarding: React.FC<InputForForwardingProps> = ({
-  inputText,
-  onChange,
-  onSend,
-  disabled = false,
-}: InputForForwardingProps) => {
-  return (
-    <div className="forwarding-message-input">
-      <div className="forwarding-message-input-input">
-        <textarea
-          className="forwarding-message-input-input-type-message"
-          value={inputText}
-          onChange={(e) => {
-            onChange(e.target.value);
-          }}
-          placeholder="Type message"
-        />
-      </div>
-      <div className="forwarding-message-input-icon-send">
-        <SendSvg
-          className={cn('forwarding-message-input-icon-send__icon__send', {
-            'forwarding-message-input-icon-send__icon--disable': disabled,
-          })}
-          onClick={onSend}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default InputForForwarding;

package/src/Presentation/Views/Dialog/InputMessage/InputMessage.scss

@@ -1,92 +0,0 @@
-$message-view-container-header-min-height: 64px;
-$message-view-container-chat-input-min-height: 54px;
-.chat-input{
-  &:disabled{
-    background-color: dimgrey;
-    color: linen;
-    opacity: 1;
-    cursor: not-allowed;
-  }
-  // border: 1px solid red;
-  //border-top: 1px solid var(--divider);
-  // flex: 1 1 $message-view-container-wrapper-min-width;
-  min-height: $message-view-container-chat-input-min-height;
-  max-height: calc(2 * $message-view-container-header-min-height + $message-view-container-chat-input-min-height);
-  height: $message-view-container-chat-input-min-height;
-
-  width: 100%;
-  display: flex;
-  //
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 auto;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-bottom: 2px;
-
-  gap: 6px;
-
-  textarea{
-    // border: 3px solid blue;
-    width: 100%;
-    height: 44px;
-    min-Height: 44px;
-    max-Height: calc(2 * $message-view-container-header-min-height);
-    background-Color: var(--chat-input);
-    border-Radius: 4px;
-    padding-left: 16px;
-    padding-top: 8px;
-    // padding: 5px 5px;
-    // text-align: center;
-    //vertical-align: middle;
-    line-height: 24px;
-    font-size: 16px;
-    margin: 0 auto;
-    resize: none;
-  }
-
-}
-.input-text-message * {
-  box-sizing: border-box;
-}
-.input-text-message {
-  background: var(--chat-input);
-  border-radius: 4px;
-  //padding: 10px 8px 10px 16px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-end;
-  justify-content: flex-start;
-  flex: 1;
-  position: relative;
-}
-.type-message {
-  color: var(--field-border);
-  text-align: left;
-  font: var(--body-body-large);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.type-message textarea{
-  color: var(--input-elements);
-  font: var(--body-body-large);
-  border: none;
-  outline: none;
-}
-.right {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-  position: relative;
-  margin-bottom: 5px;
-}

package/src/Presentation/Views/Dialog/InputMessage/InputMessage.tsx

@@ -1,145 +0,0 @@
-import React, { ChangeEvent, useState } from 'react';
-import UiKitTheme from '../../../themes/UiKitTheme';
-import ActiveSvg from '../../../components/UI/svgs/ActiveSvg/ActiveSvg';
-import LoaderComponent from '../../../components/UI/Placeholders/LoaderComponent/LoaderComponent';
-import { DialogViewModel } from '../DialogViewModel';
-import { FunctionTypeStringToVoid } from '../../../../CommonTypes/BaseViewModel';
-
-type MessageInputProps = {
-  messageText: string;
-  onChangeText: FunctionTypeStringToVoid;
-  sendText: FunctionTypeStringToVoid;
-  renderSendIcon: React.ReactNode;
-  renderAttachment: React.ReactNode;
-  isRecording: boolean;
-  renderVoiceRecorder: React.ReactNode;
-  renderVoiceRecordProgress: React.ReactNode;
-  renderAIWidget: React.ReactNode;
-  waitAIWidget: boolean;
-  messagesViewModel: DialogViewModel;
-  maxWidthToResizing: string;
-  theme?: UiKitTheme;
-};
-// eslint-disable-next-line react/function-component-definition
-const InputMessage: React.FC<MessageInputProps> = ({
-  messageText,
-  onChangeText,
-  sendText,
-  renderSendIcon,
-  renderAttachment,
-  isRecording,
-  renderVoiceRecorder,
-  renderVoiceRecordProgress,
-  renderAIWidget,
-  waitAIWidget,
-  messagesViewModel,
-  maxWidthToResizing,
-  theme = undefined,
-}: MessageInputProps) => {
-  const [isVoiceMessage, setVoiceMessage] = useState(true);
-
-  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    onChangeText(event.target.value);
-  };
-
-  function sendTextMessageActions() {
-    if (sendText) {
-      sendText(messageText);
-      onChangeText('');
-    }
-  }
-
-  return (
-    <div
-      style={{
-        flex: `flex: 1 1 ${maxWidthToResizing}`,
-      }}
-      onBlur={() => {
-        if (!(messageText && messageText.length > 0)) {
-          setVoiceMessage(true);
-        }
-      }}
-      className="message-view-container--chat-input"
-    >
-      {renderAttachment}
-      {/*  start InputWidgetToRightPlaceHolder */}
-      {/* {InputWidgetToRightPlaceHolder && ( */}
-      {/*  <div> */}
-      {/*    <ActiveSvg */}
-      {/*      content={InputWidgetToRightPlaceHolder.renderWidget()} */}
-      {/*      onClick={() => { */}
-      {/*        console.log('click left place golder widget'); */}
-      {/*        if (messagesViewModel?.loading) return; */}
-      {/*        setIsRecording(!isRecording); */}
-      {/*        setUseAudioWidget(true); */}
-      {/*      }} */}
-      {/*      onTouch={() => { */}
-      {/*        console.log('touch left place golder widget'); */}
-      {/*      }} */}
-      {/*    /> */}
-      {/*  </div> */}
-      {/* )} */}
-      {/* end InputWidgetToRightPlaceHolder */}
-      {!isRecording && (
-        <div className="input-text-message">
-          <div className="type-message">
-            <textarea
-              style={theme ? { backgroundColor: theme.chatInput() } : {}}
-              disabled={messagesViewModel?.loading}
-              value={messageText}
-              onFocus={() => {
-                setVoiceMessage(false);
-              }}
-              onChange={handleChange}
-              onInput={() => {
-                messagesViewModel.sendTypingTextMessage();
-              }}
-              onKeyDown={(e) => {
-                console.log(
-                  `onKeyDown: ${e.key} shift ${
-                    e.shiftKey ? 'true' : 'false'
-                  } ctrl ${e.ctrlKey ? 'true' : 'false'}`,
-                );
-                if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
-                  sendTextMessageActions();
-                }
-              }}
-              placeholder="Type message"
-            />
-          </div>
-          {renderAIWidget}
-        </div>
-      )}
-
-      {isRecording && renderVoiceRecordProgress}
-      {!isVoiceMessage && !waitAIWidget && (
-        <div>
-          <ActiveSvg
-            content={renderSendIcon}
-            onClick={() => {
-              console.log('click send message');
-              sendTextMessageActions();
-            }}
-            onTouch={() => {
-              console.log('touch send message');
-            }}
-          />
-        </div>
-      )}
-      {waitAIWidget ? (
-        <div
-          style={{
-            height: '44px',
-            width: '24px',
-          }}
-        >
-          <LoaderComponent width="24" height="24" color="var(--caption)" />
-        </div>
-      ) : (
-        isVoiceMessage && renderVoiceRecorder
-      )}
-    </div>
-  );
-};
-
-export default InputMessage;