@s_mart/dropzone 0.0.0-font-awesome-20240308181754

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FileValidated } from '@dropzone-ui/react';
+import { DropzoneProps as DropzoneProps$1 } from '@dropzone-ui/react/build/components/dropzone/components/Dropzone/DropzoneProps';
+import { FileItemProps } from '@dropzone-ui/react/build/components/file-item/components/FileItem/FileItemProps';
+
+interface DropzoneProps extends Omit<DropzoneProps$1, 'children' | 'onReset' | 'onClean'> {
+    children?: React.ReactNode;
+    /**
+     * @description Prop responsável por exibir o botão de deletar todos os arquivos no canto superior direito do dropzone
+     * @default true
+     * @type boolean
+     */
+    showDeleteAllFilesButton?: boolean;
+    /**
+     * @description Texto que é renderizado no centro do dropzone quando não há arquivos selecionados
+     * @default "Arraste os arquivos aqui ou clique para selecionar"
+     */
+    placeholder?: React.ReactNode | string;
+    /**
+     * @description Props que são passadas para o componente FileItem do dropzone
+     * @default {}
+     */
+    fileItemProps?: FileItemProps;
+    /**
+     * @description Valor inicial do state que armazena os arquivos selecionados no dropzone
+     * @default []
+     * @type FileValidated[]
+     **/
+    initialValue?: DropzoneFile[];
+    /**
+     * @description Função que é chamada quando o usuário clica no botão de deletar um arquivo
+     * @param files Lista de arquivos que restaram no dropzone
+     */
+    onClean?: (files: DropzoneFile[]) => void;
+    /**
+     *  @description Função que é chamada quando o usuário clica no botão de deletar todos os arquivos
+     */
+    onReset?: () => void;
+    /**
+     *  @description Função que é chamada dentro do OnChange para caso necessário fazer um tratamento nos files
+     */
+    tratamentoFilesOnChange?: (incomingFiles: FileValidated[]) => Promise<FileValidated[]> | FileValidated[];
+}
+interface DropzoneFile extends FileValidated {
+}
+
+declare const Dropzone: ({ showDeleteAllFilesButton, placeholder, fileItemProps, initialValue, onClean, onReset, tratamentoFilesOnChange, ...rest }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+
+export { Dropzone, DropzoneFile, DropzoneProps };

package/dist/index.mjs

@@ -0,0 +1,27 @@
+import P,{useEffect as T}from"react";import{Dropzone as b,FileItem as A}from"@dropzone-ui/react";import{Typography as q}from"@s_mart/core";import{LIcon as w,Tooltip as N}from"@s_mart/core";import{lineTimes as k}from"@s_mart/regular-icons";import x from"@emotion/styled";import{colorPalette as c}from"@s_mart/tokens";var m=x.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  top: 12px;
+  right: 12px;
+
+  width: 24px;
+  height: 24px;
+
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  color: ${c.neutral[500]};
+
+  &:hover {
+    background-color: ${c.neutral[40]};
+    transition: all 0.3s ease;
+  }
+`;import{useNotification as B}from"@s_mart/hooks";import{Fragment as U,jsx as t,jsxs as _}from"react/jsx-runtime";var I=({showDeleteAllFilesButton:u=!0,placeholder:h,fileItemProps:D,initialValue:n=[],onClean:v,onReset:g,tratamentoFilesOnChange:p,...f})=>{let{setNotification:d}=B(),[l,a]=P.useState(n),z=e=>{let o=e.filter(i=>i.valid===!0);a(o);let r={variant:"warning",autoHideDuration:5e3};if(e.length>0){let i=e.filter(s=>s.valid===!1);i.length===1?d({...r,title:`Arquivo ${i[0].file.name} inv\xE1lido`,message:i[0].errors?.[0]}):i.length>1&&i.forEach(s=>{d({...r,title:`Arquivo ${s.file.name} inv\xE1lido`,message:s.errors?.[0]})})}},y=()=>{a([]),g?.()},F=e=>{let o=l.filter(r=>r.id!==e.id);a(o),v?.(o)};return T(()=>{n.length&&a(n)},[n]),t(b,{localization:"PT-pt",header:!1,footer:!1,headerClassName:"header",view:"grid",value:l,...f,onChange:async e=>{let o=e;if(p){let r=await p(e);r&&(o=r)}z(o),f.onChange?.(o)},children:l.length===0?t("div",{children:h||"Arraste os arquivos aqui ou clique para selecionar"}):_(U,{children:[u&&t(N,{title:t(q,{variant:"bodyMD",children:"Remover"}),children:t(m,{onClick:e=>{e.preventDefault(),e.stopPropagation(),y()},children:t(w,{icon:k,size:"24px"})})}),t("div",{style:{display:"flex"},children:l?.map(e=>t(A,{info:!0,localization:"PT-pt",preview:!0,...e,...D,onDelete:()=>F(e)},e.id))})]})})};export{I as Dropzone};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@s_mart/dropzone",
+  "version": "0.0.0-font-awesome-20240308181754",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "dependencies": {
+    "@dropzone-ui/react": "^6.7.20",
+    "tsup": "^6.7.0",
+    "@types/react": ">=18.2.21",
+    "@types/react-dom": ">=18.2.4",
+    "typescript": "^5.2.2",
+    "@s_mart/core": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/hooks": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/regular-icons": "0.0.0-font-awesome-20240308181754",
+    "eslint-config-smarten": "4.0.1",
+    "@s_mart/tokens": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/typed": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/tsconfig": "0.0.0-font-awesome-20240308181754"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.10.8",
+    "@emotion/styled": ">=11.10.8",
+    "@types/react": ">=18.2.21",
+    "@types/react-dom": ">=18.2.4",
+    "axios": ">=1.3.3",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "typescript": ">=5.2.2",
+    "@s_mart/core": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/hooks": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/regular-icons": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/tokens": "0.0.0-font-awesome-20240308181754",
+    "@s_mart/typed": "0.0.0-font-awesome-20240308181754"
+  },
+  "devDependencies": {
+    "eslint": "^8.47.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --minify --format esm --dts --external react",
+    "dev": "tsup src/index.tsx --format esm --watch --dts --external react",
+    "lint": "eslint src/**/*.ts* --fix"
+  }
+}