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

package/src/Presentation/ui-components/Message/TimeAndStatus/TimeAndStatus.scss

@@ -0,0 +1,51 @@
+.time-status {
+  background: var(--main-background, #ffffff);
+  padding: 0px 8px 8px 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-end;
+  align-self: stretch;
+  flex-shrink: 0;
+  width: 320px;
+  position: relative;
+
+  &__caption {
+    display: flex;
+    gap: 2px;
+    align-items: flex-end;
+    flex-shrink: 0;
+
+    &__status {
+      width: 13px;
+      height: 13px;
+    }
+  }
+  &__time {
+    color: var(--tertiary-elements, #636d78);
+    text-align: left;
+    font: var(--label-label-small);
+    position: relative;
+    // padding-bottom: 10px;
+  }
+}
+
+.status-message {
+  &--sent {
+    fill: var(--tertiary-elements, #636D78);
+  }
+
+  &--delivered {
+    fill: var(--tertiary-elements, #636D78);
+  }
+
+  &--viewed {
+    fill: var(--main-elements, #3978fc);
+  }
+
+  &--error {
+    fill: var(--error, #FF3B30);
+  }
+}
+

package/src/Presentation/ui-components/Message/TimeAndStatus/TimeAndStatus.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ReactComponent as StatusSentSvg } from '../../../icons/status/sent.svg';
+import { ReactComponent as StatusViewedDeliveredSvg } from '../../../icons/status/viewed-delivered.svg';
+import { ReactComponent as StatusErrorSvg } from '../../../icons/status/error.svg';
+import './TimeAndStatus.scss';
+
+const statusIconDictionary = {
+  sent: StatusSentSvg,
+  delivered: StatusViewedDeliveredSvg,
+  viewed: StatusViewedDeliveredSvg,
+  error: StatusErrorSvg,
+};
+
+interface TimeAndStatusProps {
+  status?: 'sent' | 'delivered' | 'viewed' | 'error';
+  time: string;
+}
+
+export default function TimeAndStatus({ status, time }: TimeAndStatusProps) {
+  const StatusIcon = statusIconDictionary[status!];
+
+  return (
+    <div className="time-status__caption">
+      {status && (
+        <div className="time-status__caption__status">
+          <StatusIcon className={`status-message--${status}`} />
+        </div>
+      )}
+      <div className="time-status__time">{time}</div>
+    </div>
+  );
+}

package/src/Presentation/ui-components/MessageInput/AttachmentUploader/AttachmentUploader.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type AttachmentMessageProps = {
+  icon: React.ReactNode;
+  onChangeFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disableAction: boolean;
+};
+// eslint-disable-next-line react/function-component-definition
+const AttachmentUploader: React.FC<AttachmentMessageProps> = ({
+  icon,
+  onChangeFile,
+  disableAction,
+}: AttachmentMessageProps) => {
+  return (
+    <label
+      htmlFor="btnUploadAttachment"
+      style={{
+        cursor: 'pointer',
+      }}
+    >
+      <div>{icon}</div>
+      <input
+        id="btnUploadAttachment"
+        type="file"
+        accept="image/*, audio/*, video/*, .pdf, .txt, .apk, .zip, .ipa, .ppt, .pptx, .doc, .docx, .xls, .xlsx, .json, .log"
+        style={{ display: 'none' }}
+        onChange={(event) => {
+          onChangeFile(event);
+          // eslint-disable-next-line no-param-reassign
+          event.target.value = '';
+        }}
+        disabled={disableAction}
+      />
+    </label>
+  );
+};
+
+export default AttachmentUploader;

package/src/Presentation/ui-components/MessageInput/MessageInput.scss

@@ -0,0 +1,137 @@
+$message-view-container-header-min-height: 64px;
+$message-view-container-chat-input-min-height: 54px;
+.chat-container{
+  width: 100%;
+  &__icon{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--secondary-elements);
+    &__send {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      fill: var(--main-elements);
+    }
+
+    svg path{
+      fill: var(--main-elements);
+    }
+  }
+  &__icon--mute{
+    fill: var(--disabled-elements);
+    svg path{
+      fill: var(--disabled-elements);
+    }
+  }
+  &__icon--disable{
+    fill: var(--disabled-elements);
+    cursor: default;
+    svg path{
+      fill: var(--disabled-elements);
+    }
+  }
+  &__icon--red{
+    fill: var(--error);
+    svg path{
+      fill: var(--error);
+    }
+  }
+  &__loader{
+    fill: var(--color-background-info);
+
+    svg path{
+      fill: var(--color-background-info);
+    }
+  }
+}
+.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/ui-components/MessageInput/MessageInput.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import MessageInput from './MessageInput';
+import ReplyMessagePreview from './ReplyMessagePreview/ReplyMessagePreview';
+import { Stubs } from '../../../Data/Stubs';
+
+const meta: Meta<typeof MessageInput> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/MessageInput',
+  component: MessageInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    rephrase: {
+      control: false,
+    },
+    value: {
+      control: 'text',
+      description: 'Input value',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Change event handler',
+    },
+    onSend: {
+      action: 'sent',
+      description: 'Send event handler',
+    },
+    enableVoice: {
+      control: 'boolean',
+      description: 'Enable voice message option',
+    },
+    onVoice: {
+      action: 'voice activated',
+      description: 'Voice event handler',
+    },
+    disableAttachment: {
+      control: 'boolean',
+      description: 'Disable attachment option',
+    },
+    onAttachment: {
+      action: 'attachment added',
+      description: 'Attachment event handler',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Enable loading state',
+    },
+    previewMessage: {
+      description: 'Last message by type',
+      control: 'select',
+      options: ['Text', 'Image', 'Video', 'Audio', 'None'],
+      mapping: {
+        Text: (
+          <ReplyMessagePreview
+            messages={[Stubs.initializeMessagesWithMockData()[3]]}
+            userNameSentMessage=""
+            onClose={() => {
+              console.log('closed');
+            }}
+          />
+        ),
+        Image: (
+          <ReplyMessagePreview
+            messages={[Stubs.initializeMessagesWithMockData()[0]]}
+            userNameSentMessage=""
+            onClose={() => {
+              console.log('closed');
+            }}
+          />
+        ),
+        Video: (
+          <ReplyMessagePreview
+            messages={[Stubs.initializeMessagesWithMockData()[1]]}
+            userNameSentMessage=""
+            onClose={() => {
+              console.log('closed');
+            }}
+          />
+        ),
+        Audio: (
+          <ReplyMessagePreview
+            messages={[Stubs.initializeMessagesWithMockData()[2]]}
+            userNameSentMessage=""
+            onClose={() => {
+              console.log('closed');
+            }}
+          />
+        ),
+        None: undefined,
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class',
+    },
+  },
+};
+
+export default meta;
+
+export const MessageInputDefault: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput Default',
+  args: {
+    value: '',
+    enableVoice: false,
+    disableAttachment: false,
+    loading: false,
+  },
+};
+
+export const MessageInputWithVoiceMessage: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput With Voice Message',
+  args: {
+    ...MessageInputDefault.args,
+    enableVoice: true,
+  },
+};
+
+export const MessageInputWithPreview: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput With Preview',
+  args: {
+    ...MessageInputDefault.args,
+    previewMessage: (
+      <ReplyMessagePreview
+        messages={[Stubs.initializeMessagesWithMockData()[0]]}
+        userNameSentMessage=""
+        onClose={() => {
+          console.log('closed');
+        }}
+      />
+    ),
+  },
+};
+
+export const MessageInputLoadingState: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput Loading State',
+  args: {
+    ...MessageInputDefault.args,
+    loading: true,
+  },
+};
+
+// Дополните примеры в соответствии с вашими требованиями

package/src/Presentation/ui-components/MessageInput/MessageInput.tsx

@@ -0,0 +1,161 @@
+import React, { ChangeEvent, ReactElement, useState } from 'react';
+import cn from 'classnames';
+import {
+  FunctionTypeStringToVoid,
+  FunctionTypeVoidToVoid,
+} from '../../../CommonTypes/BaseViewModel';
+import VoiceRecordingProgress from './VoiceRecordingProgress/VoiceRecordingProgress';
+import AttachmentUploader from './AttachmentUploader/AttachmentUploader';
+import './MessageInput.scss';
+import { AttachmentSvg, SendSvg, VoiceSvg } from '../../icons';
+import Loader from '../Loader/Loader';
+
+export type MessageInputProps = {
+  value: string;
+  onChange?: FunctionTypeStringToVoid;
+  onChanging?: FunctionTypeStringToVoid;
+  onSend?: FunctionTypeStringToVoid;
+  enableVoice?: boolean;
+  onVoice?: FunctionTypeVoidToVoid;
+  disableAttachment?: boolean;
+  onAttachment: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  previewMessage?: ReactElement;
+  rephrase?: ReactElement;
+  loading?: boolean;
+  placeholder?: string;
+  disableActions?: boolean;
+  className?: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const MessageInput: React.FC<MessageInputProps> = ({
+  value,
+  onChange,
+  onChanging,
+  onSend,
+  enableVoice,
+  onVoice,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  disableAttachment,
+  onAttachment,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  previewMessage,
+  rephrase,
+  loading,
+  placeholder,
+  disableActions = false,
+  className,
+}: MessageInputProps) => {
+  const [isVoiceMessage, setVoiceMessage] = useState(true);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  };
+  const handleChanging = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChanging) {
+      onChanging(event.target.value);
+    }
+  };
+
+  function sendTextMessageActions() {
+    if (value && onSend) {
+      onSend(value);
+      if (onChange && !disableActions) {
+        onChange('');
+      }
+    }
+  }
+
+  return (
+    <div className={cn('chat-container', className)}>
+      {previewMessage}
+      <div
+        onBlur={() => {
+          if (!(value && value.length > 0)) {
+            setVoiceMessage(true);
+          }
+        }}
+        className="chat-input"
+      >
+        <AttachmentUploader
+          disableAction={disableActions}
+          icon={
+            <AttachmentSvg
+              className={cn('chat-container__icon', {
+                'chat-container__icon--mute': disableAttachment || loading,
+                'chat-container__icon--disable': disableActions,
+              })}
+            />
+          }
+          onChangeFile={onAttachment}
+        />
+        {!enableVoice && (
+          <div className="input-text-message type-message">
+            <textarea
+              disabled={loading}
+              value={value}
+              onFocus={() => {
+                setVoiceMessage(false);
+              }}
+              onChange={handleChange}
+              onInput={handleChanging}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
+                  sendTextMessageActions();
+                }
+              }}
+              placeholder={placeholder || 'Type message'}
+            />
+            {rephrase}
+          </div>
+        )}
+
+        {enableVoice && (
+          <VoiceRecordingProgress
+            startStatus={enableVoice}
+            longRecInSec={60}
+            onClick={() => {
+              if (onVoice) {
+                onVoice();
+              }
+            }}
+          />
+        )}
+        {!isVoiceMessage && !loading && (
+          <div>
+            <SendSvg
+              className={cn('chat-container__icon__send', {
+                'chat-container__icon--mute': loading,
+                'chat-container__icon--disable': disableActions,
+              })}
+              onClick={() => {
+                sendTextMessageActions();
+              }}
+            />
+          </div>
+        )}
+        {loading ? (
+          <Loader size="sm" className="chat-container__loader" />
+        ) : (
+          isVoiceMessage && (
+            <VoiceSvg
+              className={cn('chat-container__icon', {
+                'chat-container__icon--red': enableVoice,
+                'chat-container__icon--disable': disableActions,
+              })}
+              onClick={() => {
+                if (onVoice) {
+                  onVoice();
+                }
+              }}
+            />
+          )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MessageInput;

package/src/Presentation/ui-components/MessageInput/ReplyMessagePreview/ReplyImagePreviewAttachment/ReplyImagePreviewAttachment.scss

@@ -0,0 +1,16 @@
+.reply-preview-image-body{
+  // border: 1px solid red;
+  //max-width: 44px;
+  //max-height: 44px;
+  //min-width: 44px;
+  //min-height: 44px;
+  //width: 44px;
+  //height: 44px;
+  //padding: 0;
+  //border-radius: 8px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  position: relative;
+}

package/src/Presentation/ui-components/MessageInput/ReplyMessagePreview/ReplyImagePreviewAttachment/ReplyImagePreviewAttachment.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './ReplyImagePreviewAttachment.scss';
+import { FileEntity } from '../../../../../Domain/entity/FileEntity';
+
+type ReplyImagePreviewAttachmentProps = {
+  imageFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const ReplyImagePreviewAttachment: React.FC<
+  ReplyImagePreviewAttachmentProps
+  // eslint-disable-next-line react/function-component-definition
+> = ({ imageFile }: ReplyImagePreviewAttachmentProps) => {
+  return (
+    <div>
+      <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">
+        <img
+          className="reply-preview-image-body"
+          key={imageFile.id}
+          src={imageFile.url}
+          alt={imageFile.name || 'attached image'}
+        />
+      </a>
+    </div>
+  );
+};
+
+export default ReplyImagePreviewAttachment;