quickblox-react-ui-kit 0.1.6 → 0.1.8

package/src/Presentation/components/UI/Dialogs/MessagesView/HighLightLink/HighLightLink.scss

@@ -0,0 +1,92 @@
+.high-light-link-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+
+  width: 240px;
+  height: 70px;
+
+  background: #E4E6E8;
+  border-radius: 8px;
+
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+
+  &--header-wrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px 16px;
+
+    width: 240px;
+    height: 32px;
+
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+
+    &__link_url{
+      width: 208px;
+      height: 20px;
+
+      text-decoration: none;
+      cursor: pointer;
+
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+
+      display: flex;
+      align-items: center;
+      letter-spacing: 0.25px;
+
+      color: #636D78;
+
+      flex: none;
+      order: 0;
+      flex-grow: 1;
+    }
+  }
+
+  &--footer-wrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px 16px;
+
+    width: 240px;
+    height: 32px;
+
+    flex: none;
+    order: 4;
+    align-self: stretch;
+    flex-grow: 0;
+
+    &__content{
+      width: 208px;
+      height: 16px;
+
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 11px;
+      line-height: 16px;
+
+      display: flex;
+      align-items: center;
+      letter-spacing: 0.5px;
+
+      color: #636D78;
+
+      flex: none;
+      order: 0;
+      flex-grow: 1;
+    }
+  }
+}
+

package/src/Presentation/components/UI/Dialogs/MessagesView/HighLightLink/HighLightLink.tsx

@@ -0,0 +1,128 @@
+import './HighLightLink.scss';
+import React from 'react';
+
+const pattern =
+  '^(https?:\\/\\/)?' + // protocol
+  '((([a-zA-Z\\d]([a-zA-Z\\d-]{0,61}[a-zA-Z\\d])*\\.)+' + // sub-domain + domain name
+  '[a-zA-Z]{2,13})' + // extension
+  '|((\\d{1,3}\\.){3}\\d{1,3})' + // OR ip (v4) address
+  '|localhost)' + // OR localhost
+  '(\\:\\d{1,5})?' + // port
+  '(\\/[a-zA-Z\\&\\d%_.~+-:@]*)*' + // path
+  '(\\?[a-zA-Z\\&\\d%_.,~+-:@=;&]*)?' + // query string
+  '(\\#[-a-zA-Z&\\d_]*)?$'; // fragment locator
+
+function removeLastPunctuation(str: string): string {
+  const punctuationRegex = /[!;%:?*_.,:-]/;
+  const decimalSeparatorRegex = /[.,]/;
+
+  if (str.length > 0) {
+    const lastChar = str.charAt(str.length - 1);
+
+    if (
+      punctuationRegex.test(lastChar) ||
+      decimalSeparatorRegex.test(lastChar)
+    ) {
+      return str.slice(0, -1);
+    }
+  }
+
+  return str;
+}
+
+export const isURL = (str: string) => {
+  const regex = new RegExp(pattern);
+
+  // return regex.test(str);
+  const result = regex.test(str) || regex.test(removeLastPunctuation(str));
+  // const result = str.match(pattern);
+
+  return result;
+};
+
+const getURIParts = (url: string) => {
+  const matches = url.match(/^(\w+?:\/\/)?([\w-\\.]+(?=\/?))?:?(\d*)?([^:]*)/);
+
+  return {
+    scheme: matches ? matches[1] : undefined,
+    host: matches ? matches[2] : '',
+    port: matches ? matches[3] : undefined,
+    pathname: matches ? matches[4] : '',
+  };
+};
+
+const getRuleUrl = (url: string) => {
+  const uriParts = getURIParts(url);
+  let result = url;
+
+  if (uriParts.scheme === undefined) {
+    result = `http://${url}`;
+  }
+
+  return result;
+};
+
+export const messageHasUrls = (message: string) => {
+  let result = 0;
+
+  const strings = message.split(/\n| /);
+
+  strings.forEach((s: string) => {
+    if (s.match(pattern) || removeLastPunctuation(s).match(pattern)) {
+      result += 1;
+    }
+  });
+
+  return result > 0;
+};
+
+type HighLightLinkProps = {
+  messageText: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+//
+// export const HighLightLink: React.FC<HighLightLinkProps> = ({
+//   urlText,
+// }: HighLightLinkProps) => {
+//   return (
+//     <div className="high-light-link-container">
+//       <div className="high-light-link-container--header-wrapper">
+//         <a
+//           href={urlText}
+//           target="blank"
+//           className="high-light-link-container--header-wrapper__link_url"
+//         >
+//           {getNameUrl(urlText)}
+//         </a>
+//       </div>
+//       <div className="high-light-link-container--footer-wrapper">
+//         <div className="high-light-link-container--footer-wrapper__content">
+//           {getURIParts(urlText).host}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// eslint-disable-next-line react/function-component-definition
+export const HighLightLink: React.FC<HighLightLinkProps> = ({
+  messageText,
+}: HighLightLinkProps) => {
+  const strings = messageText.split(/\n| /);
+  const elements = strings.map((item, index) => {
+    if (isURL(item)) {
+      return (
+        <span>
+          <a key={index} href={`${getRuleUrl(item)}`} target="blank">
+            {item}
+          </a>{' '}
+        </span>
+      );
+    }
+
+    return <span>{item} </span>;
+  });
+
+  return <div>{elements}</div>;
+};

package/src/Presentation/components/UI/Dialogs/MessagesView/ImageAttachmentComponent/ImageAttachmentComponent.scss

@@ -0,0 +1,11 @@
+.image-body{
+  // border: 1px solid red;
+  max-width: 240px;
+  max-height: 160px;
+  min-width: 240px;
+  min-height: 160px;
+  width: 240px;
+  height: 160px;
+  padding: 0;
+  border-radius: 4px;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/ImageAttachmentComponent/ImageAttachmentComponent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './ImageAttachmentComponent.scss';
+import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
+
+type ImageAttachmentComponentProps = {
+  imageFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const ImageAttachmentComponent: React.FC<ImageAttachmentComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  imageFile,
+}: ImageAttachmentComponentProps) => {
+  return (
+    <div>
+      <img
+        className="image-body"
+        key={imageFile.id}
+        src={imageFile.url}
+        alt={imageFile.name || 'attached image'}
+      />
+    </div>
+  );
+};
+
+export default ImageAttachmentComponent;

package/src/Presentation/components/UI/Dialogs/MessagesView/InputWidget/InputWidget.ts

@@ -0,0 +1,15 @@
+import {
+  FunctionTypeFileToToVoid,
+  FunctionTypeJSXElement,
+  FunctionTypeStringToVoid,
+} from '../../../../../Views/Base/BaseViewModel';
+
+export interface InputWidget {
+  renderWidget: FunctionTypeJSXElement;
+  textToWidget: FunctionTypeStringToVoid;
+  fileToWidget: FunctionTypeFileToToVoid;
+  textToInput: string | undefined;
+  fileToInput: File | undefined;
+}
+
+

package/src/Presentation/components/UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { InputWidget } from './InputWidget';
+
+export default function useDefaultTextInputWidget(): InputWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    // return <SendIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        T2V
+      </div>
+    );
+  };
+
+  async function getData(textToSend: string): Promise<string> {
+    const response = await fetch(
+      `https://func270519800.azurewebsites.net/api/TranslateTextToEng?text=${textToSend}`,
+    );
+
+    console.log('getData: response: ', response);
+    const data = await response.text();
+
+    console.log(
+      'getData have response: ',
+      JSON.stringify(data.replaceAll('\n\n', '')),
+    );
+
+    return data.replaceAll('\n\n', '');
+  }
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      // eslint-disable-next-line promise/catch-or-return,promise/always-return
+      getData(value).then((data) => {
+        setTextFromWidgetToInput(data);
+      });
+    }
+  };
+
+  return {
+    fileToInput: undefined,
+    textToInput: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/InputWidget/useDefaultVoiceInputWidget.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { InputWidget } from './InputWidget';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import VoiceIcon from '../../../svgs/Icons/Actions/Voice';
+
+export default function useDefaultVoiceInputWidget(): InputWidget {
+  const renderWidget = (): JSX.Element => {
+    // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        v2t
+      </div>
+    );
+  };
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      setTextFromWidgetToInput(value.toUpperCase());
+    }
+  };
+
+  const [audioFromWidgetToInput, setAudioFromWidgetToInput] = useState<File>();
+
+  async function sendFile(file: File): Promise<any> {
+    if (file) {
+      // Создание объекта FormData и добавление файла
+      const formData = new FormData();
+
+      formData.append('file', file, file.name);
+
+      // Отправка запроса POST с телом formData
+      const response = await fetch(
+        'https://func270519800.azurewebsites.net/api/VoiceToText',
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      // Возвращение данных из ответа
+      console.log('sendFile: response: ', response);
+      const data = await response.text();
+
+      console.log(
+        'sendFile have response: ',
+        JSON.stringify(data.replaceAll('\n\n', '')),
+      );
+
+      return data.replaceAll('\n\n', '');
+    }
+  }
+
+  const fileToWidget = (file: File): void => {
+    setAudioFromWidgetToInput(file);
+    const fileInfo = `${file.name}, ${file.type}, ${file.size} Mb`;
+
+    console.log(fileInfo);
+    if (file) {
+      // Отправка файла и получение результата
+      sendFile(file).then((result) => {
+        // Обработка результата
+        console.log(result);
+        setTextFromWidgetToInput(result);
+      });
+    }
+  };
+
+  return {
+    fileToInput: audioFromWidgetToInput,
+    textToInput: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}