code7-leia 0.1.47 → 0.1.49

package/dist/components/FileArea/components/AreaUpload/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface FileProperties {
+    id: number;
+    lastModified: number;
+    lastModifiedDate: Date;
+    name: string;
+    size: number;
+    type: string;
+}
+interface AreaUploadProps {
+    formatFile?: string;
+    multipleFile?: boolean;
+    initialFiles?: File[];
+    removeItem?: (file: FileProperties) => void;
+    setFile?: (file: {
+        content: ArrayBuffer | string;
+        properties: File;
+    }) => void;
+    onChange?: (files: File[]) => void;
+    hasListFiles?: boolean;
+}
+declare const AreaUpload: React.FC<AreaUploadProps>;
+export default AreaUpload;

package/dist/components/FileArea/components/AreaUpload/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ContainerProps {
+    isDragAccept?: boolean;
+    isDragReject?: boolean;
+    isDragActive?: boolean;
+}
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps>>;
+export declare const ListFiles: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.47",
+  "version": "0.1.49",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/FileArea/components/AreaUpload/index.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { getLanguage } from '../../../../utils/getLanguage'
+import { useDropzone, FileRejection } from 'react-dropzone';
+import PropTypes from 'prop-types';
+
+import { Container} from './styles';
+
+interface FileProperties {
+  id: number;
+  lastModified: number;
+  lastModifiedDate: Date;
+  name: string;
+  size: number;
+  type: string;
+}
+
+interface AreaUploadProps {
+  formatFile?: string;
+  multipleFile?: boolean;
+  initialFiles?: File[];
+  removeItem?: (file: FileProperties) => void;
+  setFile?: (file: { content: ArrayBuffer | string; properties: File }) => void;
+  onChange?: (files: File[]) => void;
+  hasListFiles?: boolean;
+}
+
+const AreaUpload: React.FC<AreaUploadProps> = ({
+  formatFile = 'application/pdf',
+  multipleFile = false,
+  initialFiles = [],
+  setFile = () => {},
+  onChange = () => {},
+}) => {
+  const [myFiles, setMyFiles] = useState<File[]>([]);
+  const t = getLanguage('pt-br')
+
+  useEffect(() => {
+    setMyFiles([...initialFiles, ...myFiles]);
+  }, []);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+      if (fileRejections && fileRejections.length > 0) {
+        console.error('Arquivos rejeitados:', fileRejections);
+      }
+
+      onChange(acceptedFiles);
+
+      const files = [...myFiles, ...acceptedFiles];
+      const filesWithId = files.map((item, index) => ({
+        id: index + 1,
+        lastModified: item.lastModified,
+        name: item.name,
+        size: item.size,
+        type: item.type,
+      }));
+      setMyFiles(filesWithId as unknown as File[]);
+
+      acceptedFiles.forEach((file) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const binaryStr = reader.result;
+          setFile({ content: binaryStr as ArrayBuffer, properties: file });
+        };
+        reader.readAsArrayBuffer(file);
+      });
+    },
+    [myFiles]
+  );
+
+  const {
+    getRootProps,
+    getInputProps,
+    open,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+  } = useDropzone({
+    accept: formatFile as any,
+    noClick: true,
+    noKeyboard: true,
+    multiple: multipleFile,
+    onDrop,
+  });
+
+  return (
+    <>
+      {multipleFile || myFiles?.length === 0 ? (
+        <Container
+          {...getRootProps({ isDragActive, isDragAccept, isDragReject })}
+        >
+          <input {...getInputProps()} />
+
+          <span>
+            <p>
+              {t.fileArea.modal.descriptionUpload}
+            </p>
+          </span>
+          <button type="button" onClick={open}>
+            {t.fileArea.modal.chooseFile}
+          </button>
+        </Container>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+AreaUpload.propTypes = {
+  formatFile: PropTypes.string,
+  multipleFile: PropTypes.bool,
+  initialFiles: PropTypes.arrayOf(PropTypes.object as any),
+  removeItem: PropTypes.func,
+  setFile: PropTypes.func,
+  onChange: PropTypes.func,
+  hasListFiles: PropTypes.bool,
+};
+
+AreaUpload.defaultProps = {
+  formatFile: 'application/json',
+  multipleFile: false,
+  initialFiles: [],
+  removeItem: () => {},
+  setFile: () => {},
+  onChange: () => {},
+  hasListFiles: true,
+};
+
+export default AreaUpload;

package/src/components/FileArea/components/AreaUpload/styles.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+  isDragAccept?: boolean;
+  isDragReject?: boolean;
+  isDragActive?: boolean;
+}
+
+const getColor = (props: ContainerProps) => {
+  if (props.isDragAccept) {
+    return '#6690ff';
+  }
+  if (props.isDragReject) {
+    return '#e18976';
+  }
+  if (props.isDragActive) {
+    return '#6690ff';
+  }
+  return '#979aa5';
+};
+
+export const Container = styled.div<ContainerProps>`
+  background-color: #f3f5f9;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 4px;
+  border-color: var(${(props) => getColor(props)});
+  border-style: dashed;
+  color: #5a5d68;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+
+  & > span {
+    margin: 8px 10px 0 0;
+    display: flex;
+  }
+`;
+
+export const ListFiles = styled.div`
+  &.horizontal-itens {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & button {
+      margin: 4px;
+      white-space: nowrap;
+    }
+
+    .tag-file {
+      display: flex;
+      gap: 8px;
+      padding: 10px 24px !important;
+      color: #102693 !important;
+      font-size: 14px;
+      letter-spacing: 0px;
+    }
+
+    .tag-icon {
+      cursor: pointer;
+    }
+  }
+`;

package/src/components/FileArea/index.tsx

@@ -18,10 +18,12 @@ import ModalFooter from './components/Modal/ModalFooter'
 import ModalContent from './components/Modal/ModalContent'
 import EmptyState from '../EmptyState';
 import Select from '../Select'
+import AreaUpload from './components/AreaUpload';
 
 export const FileArea = () => {
   const [files, setFiles] = useState<FileData[]>([]);
   const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
+  const [uploadFile, setUploadFile] = useState<{ content: ArrayBuffer | string; properties: File }>();
   const { pathname } = useLocation();
   const [modal, setModal] = useState(false)
   const id = pathname.split('/')[4]
@@ -99,6 +101,7 @@ export const FileArea = () => {
 
   const handleSelect = (value: string | number) => {
     console.log(value);
+    console.log(uploadFile);
   };
 
   const renderFiles = () => {  
@@ -163,12 +166,15 @@ export const FileArea = () => {
           title={t.fileArea.modal.uploadFile}
           >
             <ModalContent>
-              <div>
-                <input type="file" id="file" name="file" />
-                <label htmlFor="file">{t.fileArea.modal.chooseFile}</label>
+              <div className='choose-file'>
+              <AreaUpload
+                setFile={setUploadFile}
+              />
+              </div>
+              <div className='presset'>
                 <p>Presset</p>
                 <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />
-              </div>
+              </div>              
             </ModalContent>
             <ModalFooter>
               <button className='button cancel' onClick={handleOpenModal}>

package/src/components/FileArea/styles.tsx

@@ -32,9 +32,9 @@ export const Container = styled.div`
   }
 
   .button {
-    padding: 8px, 16px, 8px, 16px
-    border-radius: 4px
-    gap: 10px
+    padding: 8px 16px 8px 16px;
+    border-radius: 4px;
+    gap: 10px;
   }
 
   .cancel {
@@ -46,6 +46,12 @@ export const Container = styled.div`
     background: #102693;
     color: white;
   }
+
+  .presset {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 export const Header = styled.div`