siam-ui-utils 3.1.4 → 3.2.0

package/dist/dropzone-uploader/styled/index.css

@@ -1,348 +1,165 @@
-.dzu-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  min-height: 120px;
-  overflow: scroll;
-  margin: 0 auto;
-  position: relative;
-  box-sizing: border-box;
-  transition: all .15s linear;
-  border: 2px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.dzu-dropzoneActive {
-  background-color: #DEEBFF;
-  border-color: #2484FF;
-}
-
-.dzu-dropzoneDisabled {
-  opacity: 0.5;
-}
-
-.dzu-dropzoneDisabled *:hover {
-  cursor: unset;
-}
-
-.dzu-input {
-  display: none;
-}
-
-.dzu-inputLabel {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 20px;
-  font-weight: 600;
-  color: #2484FF;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-inputLabelWithFiles {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-start;
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #E6E6E6;
-  color: #2484FF;
-  border: none;
-  font-family: 'Helvetica', sans-serif;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  margin-top: 20px;
-  margin-left: 3%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-previewContainer {
-  padding: 40px 3%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100%;
-  min-height: 60px;
-  z-index: 1;
-  border-bottom: 1px solid #ECECEC;
-  box-sizing: border-box;
-}
-
-.dzu-previewStatusContainer {
-  display: flex;
-  align-items: center;
-}
-
-.dzu-previewFileName {
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  color: #333333;
-}
-
-.dzu-previewImage {
-  width: auto;
-  max-height: 40px;
-  max-width: 140px;
-  border-radius: 4px;
-}
-
-.dzu-previewButton {
-  background-size: 14px 14px;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  opacity: 0.9;
-  margin: 0 0 2px 10px;
-}
-
-.dzu-submitButtonContainer {
-  margin: 24px 0;
-  z-index: 1;
-}
-
-.dzu-submitButton {
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #2484FF;
-  border: none;
-  border-radius: 4px;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: #FFF;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-submitButton:disabled {
-  background-color: #E6E6E6;
-  color: #333333;
-  cursor: unset;
-}
-
-.dropzone-upload-button {
-  padding: 25;
-  border-radius: 5px !important;
-  cursor: pointer;
-  color: #fff;
-  width: 10rem !important;
-  height: 2rem !important;
-  line-height: 1.5 !important;
-  font-size: 13px;
-  text-align: center;
-  vertical-align: middle !important;
-  border: none;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-  background-color: #af251b;
-  &:hover {
-    background-color: rgb(108, 31, 1);
-  }
-}
-.dropzone-upload-frame {
-  border: 0px !important;
-  overflow: 'none' !important;
-}
-.dropzone-upload-previewContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100px;
-  min-height: 60px;
-  z-index: 1;
-  border-bottom: 1px solid #ececec;
-  box-sizing: border-box;
-}
-
-.dropzone-upload-previewImage {
-  width: 60rem;
-  max-height: 60px;
-  max-width: 10rem;
-  border-radius: 4px;
-  padding-right: 1rem;
-}
-
-.dropzone-upload-delete-btn {
-  width: 2rem;
-  line-height: 1.5;
-  border: 0;
-  color: #ff0000;
-  background-color: #f8f8f8;
-  padding-right: 1rem;
-}
-
-.dropzone-upload-file-name-container {
-  position: relative;
-  display: inline-block;
-  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
-}
-
-.dropzone-upload-file-name {
-  padding-right: 1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
-}
-
-.dzu-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  min-height: 120px;
-  overflow: scroll;
-  margin: 0 auto;
-  position: relative;
-  box-sizing: border-box;
-  transition: all 0.15s linear;
-  border: 2px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.dzu-dropzoneActive {
-  background-color: #deebff;
-  border-color: #2484ff;
-}
-
-.dzu-dropzoneDisabled {
-  opacity: 0.5;
-}
-
-.dzu-dropzoneDisabled *:hover {
-  cursor: unset;
-}
-
-.dzu-input {
-  display: none;
-}
-
-.dzu-inputLabel {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 20px;
-  font-weight: 600;
-  color: #2484ff;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-inputLabelWithFiles {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-start;
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #e6e6e6;
-  color: #2484ff;
-  border: none;
-  font-family: 'Helvetica', sans-serif;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  margin-top: 20px;
-  margin-left: 3%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-previewContainer {
-  padding: 40px 3%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100%;
-  min-height: 60px;
-  z-index: 1;
-  border-bottom: 1px solid #ececec;
-  box-sizing: border-box;
-}
-
-.dzu-previewStatusContainer {
-  display: flex;
-  align-items: center;
-}
-
-.dzu-previewFileName {
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  color: #333333;
-}
-
-.dzu-previewImage {
-  width: auto;
-  max-height: 40px;
-  max-width: 140px;
-  border-radius: 4px;
-}
-
-.dzu-previewButton {
-  background-size: 14px 14px;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  opacity: 0.9;
-  margin: 0 0 2px 10px;
-}
-
-.dzu-submitButtonContainer {
-  margin: 24px 0;
-  z-index: 1;
-}
-
-.dzu-submitButton {
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #2484ff;
-  border: none;
-  border-radius: 4px;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-submitButton:disabled {
-  background-color: #e6e6e6;
-  color: #333333;
-  cursor: unset;
-}
+.dzu-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 120px;
+  overflow: scroll;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  transition: all 0.15s linear;
+  border: 2px solid var(--dropzone-border, #D6D6D6);
+  border-radius: 4px;
+}
+
+.dzu-dropzoneActive {
+  background-color: var(--dropzone-active-bg, #E6F1F1);
+  border-color: var(--dropzone-primary, #016E6C);
+}
+
+.dzu-dropzoneDisabled {
+  opacity: 0.5;
+}
+
+.dzu-dropzoneDisabled *:hover {
+  cursor: unset;
+}
+
+.dzu-input {
+  display: none;
+}
+
+.dzu-inputLabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--dropzone-primary, #016E6C);
+  cursor: pointer;
+}
+
+.dzu-inputLabelWithFiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #E6E6E6;
+  color: var(--dropzone-primary, #016E6C);
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-left: 3%;
+  cursor: pointer;
+}
+
+.dzu-previewContainer {
+  padding: 40px 3%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ECECEC;
+  box-sizing: border-box;
+}
+
+.dzu-previewStatusContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dzu-previewFileName {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+
+.dzu-previewImage {
+  width: auto;
+  max-height: 40px;
+  max-width: 140px;
+  border-radius: 4px;
+}
+
+.dzu-previewButton {
+  background-size: 14px 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  margin: 0 0 2px 10px;
+}
+
+.dzu-submitButtonContainer {
+  margin: 24px 0;
+  z-index: 1;
+}
+
+.dzu-submitButton {
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: var(--dropzone-primary, #016E6C);
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFF;
+  cursor: pointer;
+}
+
+.dzu-submitButton:disabled {
+  background-color: #E6E6E6;
+  color: #333333;
+  cursor: unset;
+}
+
+.dropzone-upload-frame {
+  border: 0 !important;
+}
+
+.dropzone-upload-previewContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100px;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ECECEC;
+  box-sizing: border-box;
+}
+
+.dropzone-upload-previewImage {
+  max-height: 60px;
+  max-width: 10rem;
+  border-radius: 4px;
+  padding-right: 1rem;
+}
+
+.dropzone-upload-file-name-container {
+  position: relative;
+  display: inline-block;
+  max-width: 150px;
+}
+
+.dropzone-upload-file-name {
+  padding-right: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}

package/dist/dropzone-uploader/styled/index.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { getDroppedOrSelectedFiles } from "html5-file-selector";
-import { useState } from "react";
-import Button from "../../node_modules/@neolution-ch/reactstrap/esm/Button.js";
+import { useState, useRef } from "react";
+import { useTheme } from "styled-components";
+import { Button } from "siam-ui";
 import { Dropzone } from "../../dropzone/index.js";
 import "./index.css";
 import { IconButtonSvg as _t } from "../../iconos/icon-button-svg.js";
@@ -18,19 +19,18 @@ const DropzoneUploaderStyled = ({
     alert("El archivo supera el tamaño máximo");
   }
 }) => {
+  const theme = useTheme();
+  const primaryColor = theme?.colors?.primary?.base ?? "#016E6C";
+  const borderColor = theme?.colors?.neutral?.borderLight ?? "#D6D6D6";
+  const surfaceHover = theme?.colors?.primary?.surfaceHover ?? "#E6F1F1";
   const [files, setFiles] = useState([]);
   const handleChangeStatus = ({ file }, status) => {
     if (status === "done") {
-      const filesTemp = files;
-      filesTemp.push(file);
+      const filesTemp = [...files, file];
       setFiles(filesTemp);
       onChangeFiles(filesTemp);
     } else if (status === "removed") {
-      const filesTemp = files;
-      const index = filesTemp.indexOf(file);
-      if (index > -1) {
-        filesTemp.splice(index, 1);
-      }
+      const filesTemp = files.filter((f) => f !== file);
       setFiles(filesTemp);
       onChangeFiles(filesTemp);
     }
@@ -74,74 +74,85 @@ const DropzoneUploaderStyled = ({
                 className: "dropzone-upload-previewImage mt-1",
                 src: meta.previewUrl,
                 alt: meta.name,
-                style: {
-                  width: "110px",
-                  height: "110px",
-                  objectFit: "cover",
-                  marginRight: "0.5rem"
-                }
+                style: { width: "110px", height: "110px", objectFit: "cover", marginRight: "0.5rem" }
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "dropzone-upload-file-name-container", children: /* @__PURE__ */ jsx("p", { className: "dropzone-upload-file-name", title: meta.name, children: meta.name }) })
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
-              style: { marginTop: "0rem" },
+              $variant: "transparent",
+              $size: "small",
               onClick: remove,
-              className: "dropzone-upload-delete-btn simple-icon-trash"
+              style: { color: theme?.colors?.error?.base ?? "#FE4727", padding: "0 4px" },
+              children: /* @__PURE__ */ jsx(TrashIcon, { color: theme?.colors?.error?.base ?? "#FE4727" })
             }
           )
         ]
       }
     );
   };
-  const Input = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
-    const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : `${label}`;
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        outline: true,
-        block: true,
-        size: "xs",
-        className: "mt-5 ml-5",
-        onClick: () => document.getElementById("fileInput").click(),
-        children: [
-          text,
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: "fileInput",
-              style: { display: "none" },
-              type: "file",
-              accept: accept2,
-              multiple: true,
-              onChange: (e) => {
-                getFilesFromEvent2(e).then((chosenFiles) => {
-                  onFiles(chosenFiles);
-                });
-              }
-            }
-          )
-        ]
-      }
-    ) });
+  const fileInputRef = useRef(null);
+  const InputComponent = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
+    const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : label;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          $variant: "outline",
+          style: { width: "100%" },
+          onClick: () => fileInputRef.current?.click(),
+          children: text
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          style: { display: "none" },
+          type: "file",
+          accept: accept2,
+          multiple: true,
+          onChange: (e) => {
+            getFilesFromEvent2(e).then((chosenFiles) => onFiles(chosenFiles));
+          }
+        }
+      )
+    ] });
   };
-  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(
-    Dropzone,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      disableUpload: false,
-      maxFiles: totalFiles < maxFiles ? maxFiles : 0,
-      maxSize,
-      InputComponent: Input,
-      PreviewComponent: CustomPreview,
-      classNames: { dropzone: "dropzone-upload-frame" },
-      onChangeStatus: handleChangeStatus,
-      getFilesFromEvent,
-      accept
+      className: classNames,
+      style: {
+        "--dropzone-primary": primaryColor,
+        "--dropzone-border": borderColor,
+        "--dropzone-active-bg": surfaceHover
+      },
+      children: /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          disableUpload: false,
+          maxFiles: totalFiles < maxFiles ? maxFiles : 0,
+          maxSize,
+          InputComponent,
+          PreviewComponent: CustomPreview,
+          classNames: { dropzone: "dropzone-upload-frame" },
+          onChangeStatus: handleChangeStatus,
+          getFilesFromEvent,
+          accept
+        }
+      )
     }
-  ) });
+  );
 };
+const TrashIcon = ({ color }) => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
+] });
 export {
   DropzoneUploaderStyled
 };