@hanzo/ui 4.8.5 → 4.9.0

package/dist/upload/index.mjs

@@ -0,0 +1,163 @@
+import { ScrollArea } from '../chunk-LB3I52KZ.mjs';
+import { Button } from '../chunk-QFA6U75G.mjs';
+import { cn } from '../chunk-TH2UKMCO.mjs';
+import { partial } from 'filesize';
+import { Upload, Trash, Loader2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/helpers/file.ts
+var getFileExt = (fileName) => {
+  const nameParts = fileName.split(".");
+  return nameParts.pop() || "";
+};
+var fileIconMap = {};
+var FileTypeIcon = Upload;
+var openFile = (file) => {
+  const fileURL = window.URL.createObjectURL(file);
+  window.open(fileURL, "_blank");
+  URL.revokeObjectURL(fileURL);
+};
+var FileItem = ({
+  file,
+  actions
+}) => {
+  const size = partial({ standard: "jedec" });
+  const hasPreviewImage = file?.type?.includes("image/");
+  return /* @__PURE__ */ jsxs("div", { className: "bg-bg-quaternary relative flex items-center gap-2 rounded-xl px-3 py-1.5 pr-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex w-[30px] items-center justify-center", children: hasPreviewImage ? /* @__PURE__ */ jsx(
+      FileImagePreview,
+      {
+        className: "h-full rounded-md object-cover",
+        file
+      }
+    ) : fileIconMap[getFileExt(file.name)] ? /* @__PURE__ */ jsx(
+      FileTypeIcon,
+      {
+        className: "text-text-secondary",
+        type: getFileExt(file.name)
+      }
+    ) : /* @__PURE__ */ jsx(Upload, { className: "text-text-secondary h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "line-clamp-1 flex flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "text-left hover:underline",
+          onClick: () => openFile(file),
+          type: "button",
+          children: /* @__PURE__ */ jsx("span", { className: "text-text-default line-clamp-1 text-sm", children: decodeURIComponent(file.name) })
+        }
+      ),
+      file.size && /* @__PURE__ */ jsx("span", { className: "text-text-tertiary shrink-0 text-xs", children: size(file.size) })
+    ] }),
+    !!actions?.length && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions?.map((action) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: "h-8 w-8 border-0 bg-transparent",
+        onClick: () => action.onClick(file),
+        size: "icon",
+        type: "button",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: action.label }),
+          action.icon
+        ]
+      },
+      action.label
+    )) })
+  ] });
+};
+var FileUploader = ({
+  value,
+  onChange,
+  maxFiles,
+  accept,
+  allowMultiple,
+  disabled,
+  descriptionText,
+  shouldDisableScrolling
+}) => {
+  const t = (key) => key;
+  const { getRootProps: getRootFileProps, getInputProps: getInputFileProps } = useDropzone({
+    multiple: allowMultiple,
+    maxFiles,
+    onDrop: (acceptedFiles) => {
+      onChange(acceptedFiles);
+    },
+    disabled
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...getRootFileProps({
+          className: "dropzone py-4 bg-bg-secondary group relative mt-3 flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-dashed border-divider transition-colors hover:border-border-input-focus"
+        }),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center space-y-1 px-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-bg-tertiary rounded-full p-2 shadow-xs", children: /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-white", children: t("common.clickToUpload") }),
+            descriptionText && /* @__PURE__ */ jsx("p", { className: "text-text-tertiary line-clamp-1 text-xs", children: descriptionText })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputFileProps({
+                accept
+              })
+            }
+          )
+        ]
+      }
+    ),
+    !!value?.length && /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        className: cn(
+          "max-h-[40vh] flex-1 grow overflow-y-scroll pr-1 [&>div>div]:!block",
+          shouldDisableScrolling && "max-h-full overflow-y-auto pr-0"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: value?.map((file, idx) => /* @__PURE__ */ jsx(
+          FileItem,
+          {
+            actions: [
+              {
+                label: "Delete",
+                icon: /* @__PURE__ */ jsx(Trash, { className: "text-text-tertiary h-4 w-4" }),
+                onClick: (file2) => {
+                  const newFiles = [...value];
+                  newFiles.splice(newFiles.indexOf(file2), 1);
+                  onChange(newFiles);
+                }
+              }
+            ],
+            file
+          },
+          file.name + idx
+        )) })
+      }
+    )
+  ] });
+};
+var FileImagePreview = ({ file, ...props }) => {
+  const [imageSrc, setImageSrc] = useState("");
+  useEffect(() => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      "load",
+      function() {
+        setImageSrc(reader.result);
+      },
+      false
+    );
+    if (file) {
+      reader.readAsDataURL(file);
+    }
+  }, [file]);
+  return imageSrc ? /* @__PURE__ */ jsx("img", { alt: "preview", src: imageSrc, ...props }) : /* @__PURE__ */ jsx(Loader2, {});
+};
+
+export { FileItem, FileUploader };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/upload/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/helpers/file.ts","../../src/upload/file-uploader.tsx"],"names":["PaperClipIcon","file"],"mappings":";;;;;;;;;;AAIO,IAAM,UAAA,GAAa,CAAC,QAAA,KAA6B;AACtD,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,KAAA,CAAM,GAAG,CAAA;AACpC,EAAA,OAAO,SAAA,CAAU,KAAI,IAAK,EAAA;AAC5B,CAAA;ACCA,IAAM,cAAmB,EAAC;AAC1B,IAAM,YAAA,GAAeA,MAAA;AAMrB,IAAM,QAAA,GAAW,CAAC,IAAA,KAAqB;AACrC,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,GAAA,CAAI,eAAA,CAAgB,IAAI,CAAA;AAC/C,EAAA,MAAA,CAAO,IAAA,CAAK,SAAS,QAAQ,CAAA;AAC7B,EAAA,GAAA,CAAI,gBAAgB,OAAO,CAAA;AAC7B,CAAA;AAEO,IAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA;AACF,CAAA,KAOM;AACJ,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,EAAE,QAAA,EAAU,SAAS,CAAA;AAC1C,EAAA,MAAM,eAAA,GAAkB,IAAA,EAAM,IAAA,EAAM,QAAA,CAAS,QAAQ,CAAA;AAErD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+EAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA,eAAA,mBACC,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,gCAAA;AAAA,QACV;AAAA;AAAA,QAEA,WAAA,CAAY,UAAA,CAAW,IAAA,CAAK,IAAI,CAAC,CAAA,mBACnC,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,qBAAA;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA,CAAK,IAAI;AAAA;AAAA,KAC5B,mBAEA,GAAA,CAACA,MAAA,EAAA,EAAc,SAAA,EAAU,+BAA8B,CAAA,EAE3D,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,2BAAA;AAAA,UACV,OAAA,EAAS,MAAM,QAAA,CAAS,IAAI,CAAA;AAAA,UAC5B,IAAA,EAAK,QAAA;AAAA,UAEL,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CACb,QAAA,EAAA,kBAAA,CAAmB,IAAA,CAAK,IAAI,CAAA,EAC/B;AAAA;AAAA,OACF;AAAA,MACC,IAAA,CAAK,wBACJ,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,qCAAA,EACb,QAAA,EAAA,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EACjB;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC,CAAC,CAAC,OAAA,EAAS,MAAA,oBACV,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACZ,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAC,MAAA,qBACb,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,iCAAA;AAAA,QAEV,OAAA,EAAS,MAAM,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA;AAAA,QAClC,IAAA,EAAK,MAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAQ,SAAA;AAAA,QAER,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM,CAAA;AAAA,UACvC,MAAA,CAAO;AAAA;AAAA,OAAA;AAAA,MAPH,MAAA,CAAO;AAAA,KASf,CAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,IAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,KASM;AAEJ,EAAA,MAAM,CAAA,GAAI,CAAC,GAAA,KAAgB,GAAA;AAC3B,EAAA,MAAM,EAAE,YAAA,EAAc,gBAAA,EAAkB,aAAA,EAAe,iBAAA,KACrD,WAAA,CAAY;AAAA,IACV,QAAA,EAAU,aAAA;AAAA,IACV,QAAA;AAAA,IACA,MAAA,EAAQ,CAAC,aAAA,KAAkB;AACzB,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,IACxB,CAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA,CAAiB;AAAA,UACnB,SAAA,EACE;AAAA,SACH,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAI,SAAA,EAAU,2CAAA,EACb,8BAAC,MAAA,EAAA,EAAO,SAAA,EAAU,WAAU,CAAA,EAC9B,CAAA;AAAA,gCACC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EAAsB,QAAA,EAAA,CAAA,CAAE,sBAAsB,CAAA,EAAE,CAAA;AAAA,YAC5D,eAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2CACV,QAAA,EAAA,eAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACE,GAAG,iBAAA,CAAkB;AAAA,gBACpB;AAAA,eACD;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,IAEC,CAAC,CAAC,KAAA,EAAO,MAAA,oBACR,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,oEAAA;AAAA,UACA,sBAAA,IAA0B;AAAA,SAC5B;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,qBAAA,EACZ,iBAAO,GAAA,CAAI,CAAC,MAAM,GAAA,qBACjB,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS;AAAA,cACP;AAAA,gBACE,KAAA,EAAO,QAAA;AAAA,gBACP,IAAA,kBAAM,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,4BAAA,EAA6B,CAAA;AAAA,gBACpD,OAAA,EAAS,CAACC,KAAAA,KAAS;AACjB,kBAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,kBAAA,QAAA,CAAS,MAAA,CAAO,QAAA,CAAS,OAAA,CAAQA,KAAI,GAAG,CAAC,CAAA;AACzC,kBAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,gBACnB;AAAA;AACF,aACF;AAAA,YACA;AAAA,WAAA;AAAA,UACK,KAAK,IAAA,GAAO;AAAA,SAEpB,CAAA,EACH;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AAMA,IAAM,mBAAmB,CAAC,EAAE,IAAA,EAAM,GAAG,OAAM,KAAwB;AACjE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,EAAE,CAAA;AAC3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAA,GAAS,IAAI,UAAA,EAAW;AAC9B,IAAA,MAAA,CAAO,gBAAA;AAAA,MACL,MAAA;AAAA,MACA,WAAY;AACV,QAAA,WAAA,CAAY,OAAO,MAAgB,CAAA;AAAA,MACrC,CAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAA,CAAO,cAAc,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACT,EAAA,OAAO,QAAA,mBACL,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,SAAA,EAAU,GAAA,EAAK,QAAA,EAAW,GAAG,KAAA,EAAO,CAAA,mBAE7C,GAAA,CAAC,OAAA,EAAA,EAAQ,CAAA;AAEb,CAAA","file":"index.mjs","sourcesContent":["export const getFileName = (fileName: string): string => {\n  const nameParts = fileName.split('.');\n  return nameParts.slice(0, -1).join('.');\n};\nexport const getFileExt = (fileName: string): string => {\n  const nameParts = fileName.split('.');\n  return nameParts.pop() || '';\n};\n\nexport const isFileTypeImageOrPdf = (file: File): boolean => {\n  if (!file) return false;\n  return (\n    file?.type.startsWith('image/') || file?.type.startsWith('application/pdf')\n  );\n};\n","// import { useTranslation } from '@hanzo_network/hanzo-i18n';\nimport { partial } from 'filesize';\nimport { Loader2, Trash, Upload } from 'lucide-react';\nimport React, { useEffect, useState } from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nimport { Upload as PaperClipIcon } from 'lucide-react';\n// TODO: Add file icon mapping\nconst fileIconMap: any = {};\nconst FileTypeIcon = PaperClipIcon;\nimport { getFileExt } from '../helpers/file';\nimport { cn } from '../lib/utils';\nimport { Button } from '../components/button';\nimport { ScrollArea } from '../components/scroll-area';\n\nconst openFile = (file: File): void => {\n  const fileURL = window.URL.createObjectURL(file);\n  window.open(fileURL, '_blank');\n  URL.revokeObjectURL(fileURL);\n};\n\nexport const FileItem = ({\n  file,\n  actions,\n}: {\n  file: File;\n  actions?: {\n    label: string;\n    icon: React.ReactNode;\n    onClick: (file: File) => void;\n  }[];\n}) => {\n  const size = partial({ standard: 'jedec' });\n  const hasPreviewImage = file?.type?.includes('image/');\n\n  return (\n    <div className=\"bg-bg-quaternary relative flex items-center gap-2 rounded-xl px-3 py-1.5 pr-2\">\n      <span className=\"flex w-[30px] items-center justify-center\">\n        {hasPreviewImage ? (\n          <FileImagePreview\n            className=\"h-full rounded-md object-cover\"\n            file={file}\n          />\n        ) : fileIconMap[getFileExt(file.name)] ? (\n          <FileTypeIcon\n            className=\"text-text-secondary\"\n            type={getFileExt(file.name)}\n          />\n        ) : (\n          <PaperClipIcon className=\"text-text-secondary h-4 w-4\" />\n        )}\n      </span>\n      <div className=\"line-clamp-1 flex flex-1 flex-col gap-1\">\n        <button\n          className=\"text-left hover:underline\"\n          onClick={() => openFile(file)}\n          type=\"button\"\n        >\n          <span className=\"text-text-default line-clamp-1 text-sm\">\n            {decodeURIComponent(file.name)}\n          </span>\n        </button>\n        {file.size && (\n          <span className=\"text-text-tertiary shrink-0 text-xs\">\n            {size(file.size)}\n          </span>\n        )}\n      </div>\n      {!!actions?.length && (\n        <div className=\"shrink-0\">\n          {actions?.map((action) => (\n            <Button\n              className=\"h-8 w-8 border-0 bg-transparent\"\n              key={action.label}\n              onClick={() => action.onClick(file)}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <span className=\"sr-only\">{action.label}</span>\n              {action.icon}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const FileUploader = ({\n  value,\n  onChange,\n  maxFiles,\n  accept,\n  allowMultiple,\n  disabled,\n  descriptionText,\n  shouldDisableScrolling,\n}: {\n  value: File[];\n  onChange: (files: File[]) => void;\n  maxFiles?: number;\n  accept?: string;\n  allowMultiple?: boolean;\n  disabled?: boolean;\n  descriptionText?: string;\n  shouldDisableScrolling?: boolean;\n}) => {\n  // const { t } = useTranslation();\n  const t = (key: string) => key; // Temporary translation function\n  const { getRootProps: getRootFileProps, getInputProps: getInputFileProps } =\n    useDropzone({\n      multiple: allowMultiple,\n      maxFiles: maxFiles,\n      onDrop: (acceptedFiles) => {\n        onChange(acceptedFiles);\n      },\n      disabled: disabled,\n    });\n\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\">\n      <div\n        {...getRootFileProps({\n          className:\n            'dropzone py-4 bg-bg-secondary group relative mt-3 flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-dashed border-divider transition-colors hover:border-border-input-focus',\n        })}\n      >\n        <div className=\"flex flex-col items-center justify-center space-y-1 px-2\">\n          <div className=\"bg-bg-tertiary rounded-full p-2 shadow-xs\">\n            <Upload className=\"h-4 w-4\" />\n          </div>\n          <p className=\"text-sm text-white\">{t('common.clickToUpload')}</p>\n          {descriptionText && (\n            <p className=\"text-text-tertiary line-clamp-1 text-xs\">\n              {descriptionText}\n            </p>\n          )}\n        </div>\n\n        <input\n          {...getInputFileProps({\n            accept: accept,\n          })}\n        />\n      </div>\n\n      {!!value?.length && (\n        <ScrollArea\n          className={cn(\n            'max-h-[40vh] flex-1 grow overflow-y-scroll pr-1 [&>div>div]:!block',\n            shouldDisableScrolling && 'max-h-full overflow-y-auto pr-0',\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {value?.map((file, idx) => (\n              <FileItem\n                actions={[\n                  {\n                    label: 'Delete',\n                    icon: <Trash className=\"text-text-tertiary h-4 w-4\" />,\n                    onClick: (file) => {\n                      const newFiles = [...value];\n                      newFiles.splice(newFiles.indexOf(file), 1);\n                      onChange(newFiles);\n                    },\n                  },\n                ]}\n                file={file}\n                key={file.name + idx}\n              />\n            ))}\n          </div>\n        </ScrollArea>\n      )}\n    </div>\n  );\n};\n\ninterface FileImagePreview extends React.HTMLAttributes<HTMLDivElement> {\n  file: File;\n}\n\nconst FileImagePreview = ({ file, ...props }: FileImagePreview) => {\n  const [imageSrc, setImageSrc] = useState('');\n  useEffect(() => {\n    const reader = new FileReader();\n    reader.addEventListener(\n      'load',\n      function () {\n        setImageSrc(reader.result as string);\n      },\n      false,\n    );\n    if (file) {\n      reader.readAsDataURL(file);\n    }\n  }, [file]);\n  return imageSrc ? (\n    <img alt=\"preview\" src={imageSrc} {...props} />\n  ) : (\n    <Loader2 />\n  );\n};\n"]}