@autobusal/common 1.3.0 → 1.3.2

package/ChangeLanguage/ChangeLanguage.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { TFunction, i18n } from 'i18next';
-import { IoGlobeOutline } from 'react-icons/io5';
 import { useOutside } from '@autobusal/hooks';
+import Flag from './Flag';
 import { Container, Title, ContainerButtons, ButtonChange } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
@@ -28,7 +28,7 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
 
   const items = available.map((item, index) => (
     <ButtonChange key={ index } onClick={ () => onChange(item) }>
-      <IoGlobeOutline />
+      <Flag language={ item } size={ 22 } />
       { `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
     </ButtonChange>
   ));

package/ChangeLanguage/Flag.tsx

@@ -0,0 +1,12 @@
+import { ContainerFlag } from './styles';
+
+interface Props {
+  language: string
+  size: number
+}
+
+const Flag = ({ language, size }: Props): JSX.Element => (
+  <ContainerFlag $size={ size } src={ `${ import.meta.env.VITE_API_OBT }/languages/${ language }.svg` } />
+);
+
+export default Flag;

package/ChangeLanguage/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div<{
   $type: 'top' | 'bottom'
@@ -12,6 +12,11 @@ export const Container = styled.div<{
   background-color: ${ props => props.theme.background.normal };
   box-shadow: ${ props => props.theme.boxShadow };
   border-radius: ${ props => props.theme.borderRadius };
+
+  ${ props => props.$type === 'bottom' && css`
+    right: 10px;
+    bottom: 50px; 
+  ` }
 `;
 
 export const Title = styled.h5`
@@ -23,7 +28,13 @@ export const Title = styled.h5`
 export const ContainerButtons = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 6px;
+`;
+
+export const ContainerFlag = styled.img<{ $size: number }>`
+  display: block;
+  width: ${ props => props.$size }px;
+  border-radius: 4px;
 `;
 
 export const ButtonChange = styled.button`
@@ -33,13 +44,10 @@ export const ButtonChange = styled.button`
   justify-content: center;
   gap: 8px;
   font-size: ${ props => props.theme.size.xs };
+  background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
   transition: all 0.3s ease;
 
-  > svg {
-    color: ${ props => props.theme.primary.normal };
-  }
-
   &:hover {
     background-color: ${ props => props.theme.primary.neutral };
   }

package/Viewer/Items/TextareaHtml.tsx

@@ -5,6 +5,7 @@ import { Editor } from '@tinymce/tinymce-react';
 import { Editor as TinyMceEditor } from 'tinymce';
 import { Validate } from '@autobusal/utilities/form';
 import { Textarea } from './styles';
+import { useFileUpload } from '../services';
 
 interface Props {
   name: string
@@ -18,10 +19,18 @@ interface Props {
 const TextareaHtml = ({ name, value, validation, t, refs, onUpdate }: Props): JSX.Element => {
   const editorRef = useRef<TinyMceEditor | null>(null);
 
+  const { mutateAsync: Upload } = useFileUpload();
+
   const onChange = (content: string): void => {
     onUpdate(name, content);
   };
 
+  const onFileUpload = async (blobinfo: any): Promise<string> => {
+    const uploaded = await Upload(blobinfo);
+
+    return uploaded.filename;
+  };
+
   return (
     <div className="row-data">
       <Editor
@@ -43,6 +52,7 @@ const TextareaHtml = ({ name, value, validation, t, refs, onUpdate }: Props): JS
             'image media table | ' +
             'removeformat | help'
           ),
+          images_upload_handler: onFileUpload,
           content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; }',
           promotion: false,
           highlight_on_focus: false

package/Viewer/services.ts

@@ -0,0 +1,24 @@
+import { UseMutationResult, useMutation } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { UploadData } from '@autobusal/providers/types';
+
+export const useFileUpload = (): UseMutationResult<UploadData, Error, any, unknown> => (
+  useMutation({
+    mutationKey: ['textarea-html'],
+    mutationFn: async (blobData) => {
+      const formData = new FormData();
+
+      formData.append('image', blobData.blob(), blobData.filename());
+
+      return await apiClient
+        .post('/api/label/admin/upload', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "main": "index.ts"
 }