linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/inputs/file/DefaultFile.js

@@ -1,68 +1,80 @@
-import { j as i } from "../../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as S } from "../../chunks/compiler-runtime.Cu50tn6L.js";
-import { useState as $ } from "react";
-import { _ as k } from "../../chunks/lodash.CIAK_hAg.js";
-import z from "../base/InputTextBase.js";
-import L from "./FileButtonSettings.js";
-import _ from "../../buttons/Button.js";
-import P from "../../icons/index.js";
-import '../../assets/button.css';import '../../assets/DefaultFile.css';/* empty css                           */
-import T from "../../popover/index.js";
-import U from "../../popover/PopoverText.js";
-const ee = (t) => {
-  const e = S.c(27), {
-    id: y,
-    accept: B,
-    onBtnClickInsert: x,
-    onBtnClickRemove: h,
-    inputRef: v,
-    defaultFiles: A,
-    hint: c,
-    onChange: j
-  } = t, n = y === void 0 ? "file" : y, g = B === void 0 ? "image/*" : B;
-  let m;
-  e[0] !== c ? (m = c === void 0 ? [] : c, e[0] = c, e[1] = m) : m = e[1];
-  const C = m, D = q, [a, I] = $(A), s = a instanceof Array && a.length > 0;
-  let p;
-  e[2] !== a || e[3] !== s ? (p = () => /* @__PURE__ */ i.jsx("div", { className: `size-position-icon ${s ? "" : "-disabled-popover"}`, children: /* @__PURE__ */ i.jsx(T, { iconSize: 16, children: /* @__PURE__ */ i.jsxs(U, { children: [
-    /* @__PURE__ */ i.jsx("strong", { children: "Arquivos" }),
-    /* @__PURE__ */ i.jsx("br", {}),
-    s && a.map(w)
-  ] }) }) }), e[2] = a, e[3] = s, e[4] = p) : p = e[4];
-  const b = p;
-  let f;
-  e[5] !== s || e[6] !== h ? (f = () => /* @__PURE__ */ i.jsx(_, { disabled: !s, className: "-pointerEventsRemove", transparent: !0, boxShadow: !1, onClick: () => {
-    h(), I([]);
-  }, icon: /* @__PURE__ */ i.jsx(P, { customClass: "colorIconUpload", name: "close" }) }), e[5] = s, e[6] = h, e[7] = f) : f = e[7];
-  const F = f;
-  let d;
-  e[8] !== j ? (d = (R) => {
-    R.preventDefault?.();
-    const N = D(R.target.files);
-    I(N), j?.(N, R);
-  }, e[8] = j, e[9] = d) : d = e[9];
-  const E = d;
-  let o;
-  e[10] !== n || e[11] !== x ? (o = /* @__PURE__ */ i.jsx(L, { id: n, onBtnClickInsert: x }), e[10] = n, e[11] = x, e[12] = o) : o = e[12];
-  let l;
-  e[13] !== b ? (l = b(), e[13] = b, e[14] = l) : l = e[14];
-  let r;
-  e[15] !== F ? (r = F(), e[15] = F, e[16] = r) : r = e[16];
-  let u;
-  return e[17] !== g || e[18] !== E || e[19] !== C || e[20] !== n || e[21] !== v || e[22] !== t || e[23] !== o || e[24] !== l || e[25] !== r ? (u = /* @__PURE__ */ i.jsx("div", { className: "input-simple-file-container", children: /* @__PURE__ */ i.jsxs(z, { ...t, hint: C, readOnlyClass: "-disabledVisualApply", customClassForInputContent: "-absolute -pointEventDisabled -disabledVisualApply", type: "file", id: n, accept: g, inputRef: v, onChange: E, rightElements: o, children: [
-    l,
-    r
-  ] }) }), e[17] = g, e[18] = E, e[19] = C, e[20] = n, e[21] = v, e[22] = t, e[23] = o, e[24] = l, e[25] = r, e[26] = u) : u = e[26], u;
-};
-function V(t) {
-  return t;
-}
-function q(t) {
-  return t?.length ? k.map(t, V) : [];
-}
-function w(t) {
-  return /* @__PURE__ */ i.jsx("div", { className: "list-simple-file", children: /* @__PURE__ */ i.jsx("div", { className: "file-name", children: /* @__PURE__ */ i.jsx("span", { children: t.name }) }) }, `${t.name}${t.size}`);
-}
-export {
-  ee as default
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _FileButtonSettings = _interopRequireDefault(require("./FileButtonSettings"));
+require("../../assets/styles/file.scss");
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _popover = _interopRequireWildcard(require("../../popover"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DefaultFile = props => {
+  const {
+    id = 'file',
+    accept = 'image/*',
+    onBtnClickInsert,
+    onBtnClickRemove,
+    inputRef,
+    defaultFiles,
+    hint = '',
+    multiple,
+    onChange
+  } = props;
+  const getFilesList = files => !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, file => file);
+  const [fileList, setFileList] = (0, _react.useState)(defaultFiles);
+  const ifExistFiles = fileList instanceof Array && fileList.length > 0;
+  const handleChange = e => {
+    var _e$preventDefault;
+    (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+    const files = getFilesList(e.target.files);
+    setFileList(files);
+    onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-simple-file-container"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    hint: hint,
+    readOnlyClass: "-disabledVisualApply",
+    customClassForWrapper: "file-wrapper",
+    customClassForInputContent: "file-content -absolute -pointEventDisabled -disabledVisualApply",
+    type: "file",
+    id: id,
+    accept: accept,
+    inputRef: inputRef,
+    onChange: handleChange,
+    rightElements: /*#__PURE__*/_react.default.createElement(_FileButtonSettings.default, {
+      id: id,
+      onBtnClickInsert: () => onBtnClickInsert()
+    })
+  }), multiple && /*#__PURE__*/_react.default.createElement("div", {
+    className: "size-position-icon ".concat(!ifExistFiles ? '-disabled-popover' : '')
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
+    iconSize: 16
+  }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(file => /*#__PURE__*/_react.default.createElement("div", {
+    className: "list-simple-file",
+    key: "".concat(file.name).concat(file.size)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, file.name))))))), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    disabled: !ifExistFiles,
+    className: "-pointerEventsRemove",
+    transparent: true,
+    boxShadow: false,
+    onClick: () => {
+      onBtnClickRemove();
+      setFileList([]);
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      customClass: "colorIconUpload",
+      name: "close"
+    })
+  })));
 };
+var _default = exports.default = DefaultFile;

package/lib/inputs/file/DragDropFile.d.ts

@@ -1,3 +1,13 @@
-import { IDragDropFileProps } from './types';
-declare const DragDropFile: (props: IDragDropFileProps) => import("react/jsx-runtime").JSX.Element;
-export default DragDropFile;
+import { IDragDropFileProps } from './types.js';
+import 'react';
+import '../../@types/Size.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+
+declare const DragDropFile: (props: IDragDropFileProps) => JSX.Element;
+
+export { DragDropFile as default };

package/lib/inputs/file/DragDropFile.js

@@ -1,135 +1,273 @@
-import { j as t } from "../../chunks/jsx-runtime.D1SHvdVE.js";
-import { useState as D, Fragment as w } from "react";
-import { _ as ee } from "../../chunks/lodash.CIAK_hAg.js";
-import "../../chunks/compiler-runtime.Cu50tn6L.js";
-import "../../buttons/DefaultButton.js";
-import S from "../../buttons/PrimaryButton.js";
-import $ from "../../buttons/DangerButton.js";
-import F from "../../icons/index.js";
-import '../../assets/button.css';/* empty css                           */
-import te from "../base/InputTextBase.js";
-import se from "../../hint/index.js";
-import { ErrorMessage as ae } from "../errorMessage/index.js";
-const q = (n) => n?.length ? ee.map(n, (i) => i) : [], g = (n) => n.split(",").map((i) => i.includes(".") ? i.split(".")[1] : i.split("/")[1]).join(", "), re = (n) => n.split(", "), he = (n) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _buttons = require("../../buttons");
+var _icons = _interopRequireDefault(require("../../icons"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _hint = _interopRequireDefault(require("../../hint"));
+var _errorMessage = require("../errorMessage");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const getFilesList = files => !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, file => file);
+const getAcceptFilesLabel = valueAccept => valueAccept.split(',').map(value => value.includes('.') ? value.split('.')[1] : value.split('/')[1]).join(', ');
+const getAcceptFilesWithoutRemoveText = value => value.split(', ');
+const DragDropFile = props => {
   const {
-    id: i = Math.random().toString(36).substring(2, 7),
-    accept: o = "image/png, image/jpeg",
-    labelButton: L = "Selecionar",
-    subtitleDragDrop: f = "Selecione arquivos do tipo ",
-    titleDragDrop: u = "Arquivo para importação",
-    onBtnClickInsert: A,
-    inputRef: z,
-    onChange: C,
-    onDragEnter: M,
-    onDragOver: P,
-    onDragLeave: U,
-    onDrop: I,
-    showSubtitle: H = !0,
-    multiple: x = !1,
-    hint: R = [],
-    hintPosition: W = "below",
-    errorMessages: G = [],
-    skeletonize: b = !1
-  } = n, [J, N] = D(!1), [r, h] = D([]), [j, T] = D(!1), [c, m] = D({
-    class: "",
-    text: u,
-    subtitle: f + g(o),
-    error: !1
-  }), v = (e) => {
-    e.preventDefault?.(), e.stopPropagation?.();
-  }, K = (e, s, a) => {
-    T(!1), s.forEach((l) => (!j && e.indexOf(l) === -1 && T(!0), j)), !x && (a.dataTransfer.items.length > 1 || r.length > 0) ? m({
-      class: "disapprovedFile",
-      text: "Não é permitido anexar mais de um arquivo.",
-      subtitle: "",
-      error: !0
-    }) : m(j ? {
-      class: "disapprovedFile",
-      text: "Por favor, verifique a extensão do(s) arquivo(s) inserido(s).",
-      subtitle: `Apenas as extensões ${g(o)} são permitidas.`,
-      error: !0
-    } : {
-      class: "approvedFile",
-      text: u,
-      subtitle: f + g(o),
-      error: !1
+    id = Math.random().toString(36).substring(2, 7),
+    accept = 'image/png, image/jpeg',
+    labelButton = 'Selecionar',
+    subtitleDragDrop = 'Selecione arquivos do tipo ',
+    titleDragDrop = 'Arquivo para importação',
+    onBtnClickInsert,
+    inputRef,
+    onChange,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    showSubtitle = true,
+    multiple = false,
+    hint = [],
+    hintPosition = 'below',
+    errorMessages = [],
+    skeletonize = false
+  } = props;
+  const [dragActive, setDragActive] = (0, _react.useState)(false);
+  const [fileList, setFileList] = (0, _react.useState)([]);
+  const [typeNotAccept, setTypeNotAccept] = (0, _react.useState)(false);
+  const [message, setMessage] = (0, _react.useState)({
+    class: '',
+    text: titleDragDrop,
+    subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+    error: false
+  });
+  const handleDrag = e => {
+    var _e$preventDefault, _e$stopPropagation;
+    (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+    (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
+  };
+  const checkTypeNotAccept = (types, getTypesArray, e) => {
+    setTypeNotAccept(false);
+    getTypesArray.forEach(element => {
+      if (!typeNotAccept && types.indexOf(element) === -1) {
+        setTypeNotAccept(true);
+      }
+      return typeNotAccept;
+    });
+    if (!multiple && (e.dataTransfer.items.length > 1 || fileList.length > 0)) {
+      setMessage({
+        class: 'disapprovedFile',
+        text: 'Não é permitido anexar mais de um arquivo.',
+        subtitle: '',
+        error: true
+      });
+    } else if (typeNotAccept) {
+      setMessage({
+        class: 'disapprovedFile',
+        text: 'Por favor, verifique a extensão do(s) arquivo(s) inserido(s).',
+        subtitle: "Apenas as extens\xF5es ".concat(getAcceptFilesLabel(accept), " s\xE3o permitidas."),
+        error: true
+      });
+    } else {
+      setMessage({
+        class: 'approvedFile',
+        text: titleDragDrop,
+        subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+        error: false
+      });
+    }
+  };
+  const getTypesFiles = e => {
+    let typesFilesDrag = [];
+    if (e.dataTransfer.items) {
+      Array.from(e.dataTransfer.items).map(item => {
+        if (typesFilesDrag.indexOf(item.type) === -1) {
+          typesFilesDrag = [...typesFilesDrag, item.type];
+        }
+        return typesFilesDrag;
+      });
+    }
+    return typesFilesDrag;
+  };
+  const handleDragEnter = e => {
+    const arrayTypes = getAcceptFilesWithoutRemoveText(accept);
+    const getTypesArray = getTypesFiles(e);
+    checkTypeNotAccept(arrayTypes, getTypesArray, e);
+    handleDrag(e);
+    setDragActive(true);
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(e);
+  };
+  const handleDragLeave = e => {
+    setMessage({
+      class: '',
+      text: titleDragDrop,
+      subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+      error: false
     });
-  }, Q = (e) => {
-    let s = [];
-    return e.dataTransfer.items && Array.from(e.dataTransfer.items).map((a) => (s.indexOf(a.type) === -1 && (s = [...s, a.type]), s)), s;
-  }, k = (e) => {
-    const s = re(o), a = Q(e);
-    K(s, a, e), v(e), N(!0), M?.(e);
-  }, B = (e) => {
-    m({
-      class: "",
-      text: u,
-      subtitle: f + g(o),
-      error: !1
-    }), v(e), N(!1), U?.(e);
-  }, E = (e) => {
-    v(e), P?.(e);
-  }, O = (e) => {
-    v(e), N(!1);
-    const s = e.dataTransfer;
-    if (s && !c.error) {
-      const a = q(s.files);
-      if (a.length > 0) {
-        const l = r.concat(a), y = l.map((d) => d.name), p = l.filter(({
-          name: d
-        }, _) => !y.includes(d, _ + 1));
-        h(p), C?.(a, e), I?.(e);
+    handleDrag(e);
+    setDragActive(false);
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(e);
+  };
+  const handleDragOver = e => {
+    handleDrag(e);
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(e);
+  };
+  const handleDrop = e => {
+    handleDrag(e);
+    setDragActive(false);
+    const input = e.dataTransfer;
+    if (input && !message.error) {
+      const files = getFilesList(input.files);
+      if (files.length > 0) {
+        const fileNoRepeat = fileList.concat(files);
+        const ids = fileNoRepeat.map(o => o.name);
+        const filtered = fileNoRepeat.filter((_ref, index) => {
+          let {
+            name
+          } = _ref;
+          return !ids.includes(name, index + 1);
+        });
+        setFileList(filtered);
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
       }
     }
-    m({
-      class: "",
-      text: u,
-      subtitle: f + g(o),
-      error: !1
+    setMessage({
+      class: '',
+      text: titleDragDrop,
+      subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+      error: false
     });
-  }, V = (e) => {
-    e.preventDefault?.();
-    const s = q(e.target.files);
-    if (s.length > 0 && !j) {
-      const a = r.concat(s), l = a.map((p) => p.name), y = a.filter(({
-        name: p
-      }, d) => !l.includes(p, d + 1));
-      h(y), C?.(s, e);
+  };
+  const handleChange = e => {
+    var _e$preventDefault2;
+    (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
+    const files = getFilesList(e.target.files);
+    if (files.length > 0 && !typeNotAccept) {
+      const fileNoRepeat = fileList.concat(files);
+      const ids = fileNoRepeat.map(o => o.name);
+      const filesFiltered = fileNoRepeat.filter((_ref2, index) => {
+        let {
+          name
+        } = _ref2;
+        return !ids.includes(name, index + 1);
+      });
+      setFileList(filesFiltered);
+      onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
     }
-  }, X = () => h([]), Y = (e) => {
-    h((s) => s.filter((a) => a.name !== e));
-  }, Z = () => r?.length === 1 ? /* @__PURE__ */ t.jsxs(w, { children: [
-    r[0].type === "image/jpeg" || r[0].type === "image/png" ? /* @__PURE__ */ t.jsx("img", { alt: r[0].name, src: URL.createObjectURL(r[0]) }) : /* @__PURE__ */ t.jsx(F, { size: 64, name: "file_excel" }),
-    /* @__PURE__ */ t.jsx("div", { className: "image-preview-solo", children: /* @__PURE__ */ t.jsx("div", { className: "description-file", children: /* @__PURE__ */ t.jsx("span", { className: "subtitle", children: r[0].name }) }) })
-  ] }) : /* @__PURE__ */ t.jsx("ul", { className: "file-list", children: r.length > 0 && r.map((e) => /* @__PURE__ */ t.jsxs("li", { className: "file-card", children: [
-    /* @__PURE__ */ t.jsx($, { transparent: !0, boxShadow: !1, className: "delete-button", onClick: () => Y(e.name), icon: /* @__PURE__ */ t.jsx(F, { customClass: "color-icon-upload", name: "close" }) }),
-    /* @__PURE__ */ t.jsx("div", { className: "image-content", children: (e.type === "image/jpeg" || e.type === "image/png") && /* @__PURE__ */ t.jsx("img", { alt: e.name, className: "image-preview", src: URL.createObjectURL(e) }) }),
-    /* @__PURE__ */ t.jsx("div", { className: "description-file", children: /* @__PURE__ */ t.jsx("span", { className: "subtitle", children: e.name }) })
-  ] }, `${e.name}${e.size}`)) });
-  return /* @__PURE__ */ t.jsxs("div", { className: "input-dragdrop-container", onDragEnter: k, onSubmit: (e) => e.preventDefault(), children: [
-    /* @__PURE__ */ t.jsxs("div", { className: `drag-content ${b ? "-skeletonized" : ""}`, children: [
-      /* @__PURE__ */ t.jsx("div", { className: `${c.class} ${b ? "" : "content"}`, children: c.error || r.length === 0 ? /* @__PURE__ */ t.jsxs("label", { htmlFor: i, children: [
-        /* @__PURE__ */ t.jsx("h1", { className: "title", style: {
-          paddingBottom: "20px"
-        }, children: c.text }),
-        H && /* @__PURE__ */ t.jsx("p", { className: "subtitle", children: c.subtitle }),
-        !b && /* @__PURE__ */ t.jsx(S, { onClick: A, label: L })
-      ] }) : /* @__PURE__ */ t.jsxs(w, { children: [
-        Z(),
-        /* @__PURE__ */ t.jsxs("footer", { className: "footer-button-action", children: [
-          (!x && r.length < 1 || x) && /* @__PURE__ */ t.jsx(S, { className: "selectButton", onClick: A, label: L }),
-          /* @__PURE__ */ t.jsx($, { className: "cancelButton", onClick: X, icon: /* @__PURE__ */ t.jsx(F, { name: "close", color: "white" }), label: "Limpar" })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ t.jsx(te, { ...n, inputRef: z, style: {
-        display: "none"
-      }, type: "file", id: i, accept: o, multiple: x, onDragOver: E, onDrop: O, onDragLeave: B, onChange: V }),
-      J && /* @__PURE__ */ t.jsx("div", { className: "drag-position-element", id: "dragFileElement", onDragEnter: k, onDragLeave: B, onDragOver: E, onDrop: O })
-    ] }),
-    /* @__PURE__ */ t.jsx(ae, { messages: G }),
-    /* @__PURE__ */ t.jsx(se, { visible: !!R && W === "below", customClass: "hint", description: R })
-  ] });
-};
-export {
-  he as default
+  };
+  const onButtonClickRemoveAll = () => setFileList([]);
+  const handleRemoveFile = fileName => {
+    setFileList(prevState => prevState.filter(file => file.name !== fileName));
+  };
+  const generateListArray = () => {
+    if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) === 1) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' ? /*#__PURE__*/_react.default.createElement("img", {
+        alt: fileList[0].name,
+        src: URL.createObjectURL(fileList[0])
+      }) : /*#__PURE__*/_react.default.createElement(_icons.default, {
+        size: 64,
+        name: "file_excel"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "image-preview-solo"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "description-file"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "subtitle"
+      }, fileList[0].name))));
+    }
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: "file-list"
+    }, fileList.length > 0 && fileList.map(file => /*#__PURE__*/_react.default.createElement("li", {
+      key: "".concat(file.name).concat(file.size),
+      className: "file-card"
+    }, /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
+      transparent: true,
+      boxShadow: false,
+      className: "delete-button",
+      onClick: () => handleRemoveFile(file.name),
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        customClass: "color-icon-upload",
+        name: "close"
+      })
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "image-content"
+    }, (file.type === 'image/jpeg' || file.type === 'image/png') && /*#__PURE__*/_react.default.createElement("img", {
+      alt: file.name,
+      className: "image-preview",
+      src: URL.createObjectURL(file)
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "description-file"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "subtitle"
+    }, file.name)))));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-dragdrop-container",
+    onDragEnter: handleDragEnter,
+    onSubmit: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-content ".concat(skeletonize ? '-skeletonized' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(message.class, " ").concat(!skeletonize ? 'content' : '')
+  }, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "title",
+    style: {
+      paddingBottom: '20px'
+    }
+  }, message.text), showSubtitle && /*#__PURE__*/_react.default.createElement("p", {
+    className: "subtitle"
+  }, message.subtitle), !skeletonize && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    onClick: onBtnClickInsert,
+    label: labelButton
+  })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, generateListArray(), /*#__PURE__*/_react.default.createElement("footer", {
+    className: "footer-button-action"
+  }, (!multiple && fileList.length < 1 || multiple) && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    className: "selectButton",
+    onClick: onBtnClickInsert,
+    label: labelButton
+  }), /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
+    className: "cancelButton",
+    onClick: onButtonClickRemoveAll,
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "close",
+      color: "white"
+    }),
+    label: "Limpar"
+  })))), /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: inputRef,
+    style: {
+      display: 'none'
+    },
+    type: "file",
+    id: id,
+    accept: accept,
+    multiple: multiple,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onDragLeave: handleDragLeave,
+    onChange: handleChange
+  })), dragActive && /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-position-element",
+    id: "dragFileElement",
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: errorMessages
+  }), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }));
 };
+var _default = exports.default = DragDropFile;

package/lib/inputs/file/File.d.ts

@@ -1,3 +1,13 @@
-import { IFileProps } from './types';
-declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, "onBtnClickInsert">) => import("react/jsx-runtime").JSX.Element;
-export default File;
+import { IFileProps } from './types.js';
+import 'react';
+import '../../@types/Size.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+
+declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, 'onBtnClickInsert'>) => JSX.Element;
+
+export { File as default };