@teppen/react-ui 1.6.2 → 1.7.0

package/dist/esm/src/file-uploader/component.js

@@ -0,0 +1,2 @@
+import{__assign as e,__spreadArray as r}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as n,Fragment as o,jsx as i}from"react/jsx-runtime";import{useState as l}from"react";import{useFileUploader as d}from"./hook.js";import{LuUpload as t}from"../../node_modules/react-icons/lu/index.js";function a(a){var c=l([]),s=c[0],m=c[1],u=l([]),p=u[0],h=u[1],g=d({addFiles:function(e){m((function(n){return r(r([],n,!0),e,!0)}))},onValidationError:function(e){h(e)}}),f=g.inputProps,b=g.dropSpaceProps,x=g.isDragging;return n(o,{children:[n("div",{className:"w-full mx-auto border-2 border-dashed border-gray-300 rounded-lg bg-gray-50",children:[n("div",e({},b,{className:"cursor-pointer w-full h-40 flex flex-col gap-5 items-center justify-center rounded-lg transition-colors hover:bg-blue-100 ".concat(x?"bg-blue-100":""),children:[i("div",{children:i(t,{size:48})}),i("p",{children:x?"ここにファイルをドロップ":"ファイルの選択"})]})),i("input",e({},f))]}),s.length>0&&i("ul",{className:"space-y-2 mt-4",children:s.map((function(e){return i("li",{className:"bg-white border border-gray-300 p-2 rounded-lg",children:e.name},e.name)}))}),p.length>0&&n("div",{className:"mt-4 text-red-500",children:[i("p",{children:"These files are not accepted:"}),i("ul",{className:"space-y-2",children:p.map((function(e){return i("li",{className:"bg-red-100 border border-red-300 p-2 rounded-lg",children:e.name},e.name)}))})]})]})}export{a as FileUploader};
+//# sourceMappingURL=component.js.map

package/dist/esm/src/file-uploader/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../../src/file-uploader/component.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useFileUploader } from \"./hook\";\nimport { LuUpload } from \"react-icons/lu\";\n\ninterface FileUploaderProps {}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const [files, setFiles] = useState<File[]>([]);\n  const [rejectedFiles, setRejectedFiles] = useState<File[]>([]);\n  const { inputProps, dropSpaceProps, isDragging } = useFileUploader({\n    addFiles: (files) => {\n      setFiles((f) => [...f, ...files]);\n    },\n    onValidationError: (rejectedFiles) => {\n      setRejectedFiles(rejectedFiles);\n    },\n  });\n\n  return (\n    <>\n      <div className=\"w-full mx-auto border-2 border-dashed border-gray-300 rounded-lg bg-gray-50\">\n        <div\n          {...dropSpaceProps}\n          className={`cursor-pointer w-full h-40 flex flex-col gap-5 items-center justify-center rounded-lg transition-colors hover:bg-blue-100 ${\n            isDragging ? \"bg-blue-100\" : \"\"\n          }`}\n        >\n          <div>\n            <LuUpload size={48} />\n          </div>\n          <p>{isDragging ? \"ここにファイルをドロップ\" : \"ファイルの選択\"}</p>\n        </div>\n        <input {...inputProps} />\n      </div>\n\n      {files.length > 0 && (\n        <ul className=\"space-y-2 mt-4\">\n          {files.map((file) => (\n            <li\n              key={file.name}\n              className=\"bg-white border border-gray-300 p-2 rounded-lg\"\n            >\n              {file.name}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {rejectedFiles.length > 0 && (\n        <div className=\"mt-4 text-red-500\">\n          <p>These files are not accepted:</p>\n          <ul className=\"space-y-2\">\n            {rejectedFiles.map((file) => (\n              <li\n                key={file.name}\n                className=\"bg-red-100 border border-red-300 p-2 rounded-lg\"\n              >\n                {file.name}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["FileUploader","props","_a","useState","files","setFiles","_b","rejectedFiles","setRejectedFiles","_c","useFileUploader","addFiles","f","__spreadArray","onValidationError","inputProps","dropSpaceProps","isDragging","_jsxs","_Fragment","children","className","__assign","concat","_jsx","LuUpload","size","length","map","file","name"],"mappings":"uSAMM,SAAUA,EAAaC,GACrB,IAAAC,EAAoBC,EAAiB,IAApCC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAoCH,EAAiB,IAApDI,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAChCG,EAA6CC,EAAgB,CACjEC,SAAU,SAACP,GACTC,GAAS,SAACO,GAAM,OAAAC,EAAAA,EAAA,GAAID,GAAC,GAAKR,GAAK,EAAC,GACjC,EACDU,kBAAmB,SAACP,GAClBC,EAAiBD,EAClB,IANKQ,EAAUN,EAAAM,WAAEC,EAAcP,EAAAO,eAAEC,EAAUR,EAAAQ,WAS9C,OACEC,EAAAC,EAAA,CAAAC,SAAA,CACEF,EAAK,MAAA,CAAAG,UAAU,8EAA6ED,SAAA,CAC1FF,EACM,MAAAI,EAAA,CAAA,EAAAN,EACJ,CAAAK,UAAW,6HAAAE,OACTN,EAAa,cAAgB,IAG/BG,SAAA,CAAAI,EAAA,MAAA,CAAAJ,SACEI,EAACC,EAAS,CAAAC,KAAM,OAElBF,EAAI,IAAA,CAAAJ,SAAAH,EAAa,eAAiB,gBAEpCO,EAAW,QAAAF,EAAA,CAAA,EAAAP,OAGZX,EAAMuB,OAAS,GACdH,EAAI,KAAA,CAAAH,UAAU,0BACXjB,EAAMwB,KAAI,SAACC,GAAS,OACnBL,EAEE,KAAA,CAAAH,UAAU,0DAETQ,EAAKC,MAHDD,EAAKC,KAKb,MAIJvB,EAAcoB,OAAS,GACtBT,SAAKG,UAAU,oBAAmBD,SAAA,CAChCI,kDACAA,EAAA,KAAA,CAAIH,UAAU,YAAWD,SACtBb,EAAcqB,KAAI,SAACC,GAAS,OAC3BL,EAEE,KAAA,CAAAH,UAAU,kDAAiDD,SAE1DS,EAAKC,MAHDD,EAAKC,KAFe,WAazC"}

package/dist/esm/src/file-uploader/hook.js

@@ -0,0 +1,2 @@
+import{useRef as i,useState as n}from"react";var e=["image/*","text/*","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","application/vnd.openxmlformats-officedocument.presentationml.presentation","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/vnd.ms-excel","application/vnd.ms-outlook","application/json","application/xml","application/pdf","application/x-compressed","application/x-zip-compressed","application/x-gzip","application/x-bzip2","application/x-tar","application/x-rar-compressed","application/x-7z-compressed","application/zip"];function a(a){var o=i(null),t=n(!1),r=t[0],p=t[1],c=function(i){var n=function(i){var n=[],a=[];return i.forEach((function(i){e.some((function(n){return i.type.match(n)}))?n.push(i):a.push(i)})),{validFiles:n,rejectedFiles:a}}(i),o=n.validFiles,t=n.rejectedFiles;o.length>0&&a.addFiles(o),t.length>0&&a.onValidationError&&a.onValidationError(t)};return{inputProps:{ref:o,type:"file",multiple:!0,className:"hidden",accept:e.join(","),onChange:function(i){if(i.target.files){var n=Array.from(i.target.files);c(n)}}},isDragging:r,dropSpaceProps:{onClick:function(){var i;return null===(i=o.current)||void 0===i?void 0:i.click()},onDrop:function(i){if(i.preventDefault(),p(!1),i.dataTransfer.files){var n=Array.from(i.dataTransfer.files);c(n)}},onDragOver:function(i){i.preventDefault(),p(!0)},onDragLeave:function(i){p(!1)}}}}export{a as useFileUploader};
+//# sourceMappingURL=hook.js.map

package/dist/esm/src/file-uploader/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sources":["../../../../src/file-uploader/hook.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\ninterface IPropsFileUploader {\n  addFiles: (files: File[]) => void;\n  onValidationError?: (rejectedFiles: File[]) => void;\n}\n\ninterface IReturnFileUploader {\n  inputProps: {\n    ref: React.RefObject<HTMLInputElement>;\n    type: \"file\";\n    multiple?: boolean;\n    accept?: string;\n    className?: string;\n    onChange: React.ChangeEventHandler<HTMLInputElement>;\n  };\n  isDragging: boolean;\n  dropSpaceProps: {\n    onClick?: React.MouseEventHandler;\n    onDrop: (e: React.DragEvent) => void;\n    onDragOver: (e: React.DragEvent) => void;\n    onDragLeave: (e: React.DragEvent) => void;\n  };\n}\n\nconst ACCEPTED_TYPES = [\n  \"image/*\", // image\n  \"text/*\", // .txt\n  \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\", // .xlsx\n  \"application/vnd.openxmlformats-officedocument.presentationml.presentation\", // .pptx\n  \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\", // .docx\n  \"application/vnd.ms-excel\", // .xls\n  \"application/vnd.ms-outlook\", // .msg\n  \"application/json\", // .json\n  \"application/xml\", // .xml\n  \"application/pdf\", // .pdf\n  \"application/x-compressed\", // .tgz\n  \"application/x-zip-compressed\", // .zip\n  \"application/x-gzip\", // .gz\n  \"application/x-bzip2\", // .bz2\n  \"application/x-tar\", // .tar\n  \"application/x-rar-compressed\", // .rar\n  \"application/x-7z-compressed\", // .7z\n  \"application/zip\", // .zip\n];\n\nexport function useFileUploader(\n  props: IPropsFileUploader\n): IReturnFileUploader {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const validateFiles = (\n    files: File[]\n  ): { validFiles: File[]; rejectedFiles: File[] } => {\n    const validFiles: File[] = [];\n    const rejectedFiles: File[] = [];\n\n    files.forEach((file) => {\n      if (ACCEPTED_TYPES.some((type) => file.type.match(type))) {\n        validFiles.push(file);\n      } else {\n        rejectedFiles.push(file);\n      }\n    });\n\n    return { validFiles, rejectedFiles };\n  };\n\n  const addFiles = (files: File[]) => {\n    const { validFiles, rejectedFiles } = validateFiles(files);\n    if (validFiles.length > 0) {\n      props.addFiles(validFiles);\n    }\n    if (rejectedFiles.length > 0 && props.onValidationError) {\n      props.onValidationError(rejectedFiles);\n    }\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    setIsDragging(false);\n    if (e.dataTransfer.files) {\n      const droppedFiles = Array.from(e.dataTransfer.files);\n      addFiles(droppedFiles);\n    }\n  };\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  };\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    setIsDragging(false);\n  };\n\n  return {\n    inputProps: {\n      ref: inputRef,\n      type: \"file\",\n      multiple: true,\n      className: \"hidden\",\n      accept: ACCEPTED_TYPES.join(\",\"),\n      onChange: (e) => {\n        if (e.target.files) {\n          const selectedFiles = Array.from(e.target.files);\n          addFiles(selectedFiles);\n        }\n      },\n    },\n    isDragging,\n    dropSpaceProps: {\n      onClick: () => inputRef.current?.click(),\n      onDrop: handleDrop,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n    },\n  };\n}\n"],"names":["ACCEPTED_TYPES","useFileUploader","props","inputRef","useRef","_a","useState","isDragging","setIsDragging","addFiles","files","validFiles","rejectedFiles","forEach","file","some","type","match","push","validateFiles","length","onValidationError","inputProps","ref","multiple","className","accept","join","onChange","e","target","selectedFiles","Array","from","dropSpaceProps","onClick","current","click","onDrop","preventDefault","dataTransfer","droppedFiles","onDragOver","onDragLeave"],"mappings":"6CAyBA,IAAMA,EAAiB,CACrB,UACA,SACA,oEACA,4EACA,0EACA,2BACA,6BACA,mBACA,kBACA,kBACA,2BACA,+BACA,qBACA,sBACA,oBACA,+BACA,8BACA,mBAGI,SAAUC,EACdC,GAEA,IAAMC,EAAWC,EAAyB,MACpCC,EAA8BC,GAAS,GAAtCC,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAmB1BI,EAAW,SAACC,GACV,IAAAL,EAlBc,SACpBK,GAEA,IAAMC,EAAqB,GACrBC,EAAwB,GAU9B,OARAF,EAAMG,SAAQ,SAACC,GACTd,EAAee,MAAK,SAACC,GAAS,OAAAF,EAAKE,KAAKC,MAAMD,EAAK,IACrDL,EAAWO,KAAKJ,GAEhBF,EAAcM,KAAKJ,EAEvB,IAEO,CAAEH,WAAUA,EAAEC,cAAaA,EACpC,CAGwCO,CAAcT,GAA5CC,EAAUN,EAAAM,WAAEC,EAAaP,EAAAO,cAC7BD,EAAWS,OAAS,GACtBlB,EAAMO,SAASE,GAEbC,EAAcQ,OAAS,GAAKlB,EAAMmB,mBACpCnB,EAAMmB,kBAAkBT,EAE5B,EAoBA,MAAO,CACLU,WAAY,CACVC,IAAKpB,EACLa,KAAM,OACNQ,UAAU,EACVC,UAAW,SACXC,OAAQ1B,EAAe2B,KAAK,KAC5BC,SAAU,SAACC,GACT,GAAIA,EAAEC,OAAOpB,MAAO,CAClB,IAAMqB,EAAgBC,MAAMC,KAAKJ,EAAEC,OAAOpB,OAC1CD,EAASsB,EACV,CACF,GAEHxB,WAAUA,EACV2B,eAAgB,CACdC,QAAS,WAAM,IAAA9B,EAAA,OAAkB,QAAlBA,EAAAF,EAASiC,eAAS,IAAA/B,OAAA,EAAAA,EAAAgC,OAAO,EACxCC,OAnCe,SAACT,GAGlB,GAFAA,EAAEU,iBACF/B,GAAc,GACVqB,EAAEW,aAAa9B,MAAO,CACxB,IAAM+B,EAAeT,MAAMC,KAAKJ,EAAEW,aAAa9B,OAC/CD,EAASgC,EACV,CACH,EA6BIC,WA3BmB,SAACb,GACtBA,EAAEU,iBACF/B,GAAc,EAChB,EAyBImC,YAvBoB,SAACd,GACvBrB,GAAc,EAChB,GAwBF"}

package/dist/esm/src/index.js

@@ -1,2 +1,2 @@
-export{default as Table}from"./table/table/base.js";
+export{default as Table}from"./table/table/base.js";export{FileUploader}from"./file-uploader/component.js";export{useFileUploader}from"./file-uploader/hook.js";
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -118,4 +118,31 @@ type TPropsTable<T extends DataRecord> = {
 
 declare function Table<T extends DataRecord>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
 
-export { Table };
+interface FileUploaderProps {
+}
+declare function FileUploader(props: FileUploaderProps): react_jsx_runtime.JSX.Element;
+
+interface IPropsFileUploader {
+    addFiles: (files: File[]) => void;
+    onValidationError?: (rejectedFiles: File[]) => void;
+}
+interface IReturnFileUploader {
+    inputProps: {
+        ref: React.RefObject<HTMLInputElement>;
+        type: "file";
+        multiple?: boolean;
+        accept?: string;
+        className?: string;
+        onChange: React.ChangeEventHandler<HTMLInputElement>;
+    };
+    isDragging: boolean;
+    dropSpaceProps: {
+        onClick?: React.MouseEventHandler;
+        onDrop: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+    };
+}
+declare function useFileUploader(props: IPropsFileUploader): IReturnFileUploader;
+
+export { FileUploader, Table, useFileUploader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teppen/react-ui",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "React UI Component",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",