quickblox-react-ui-kit 0.4.2-beta.3 → 0.4.2-beta.5

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

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

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

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

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

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

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

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