@teppen/react-ui 1.6.2 → 1.7.0

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),s=require("react"),n=require("./hook.js"),a=require("../../node_modules/react-icons/lu/index.js");exports.FileUploader=function(i){var l=s.useState([]),d=l[0],t=l[1],o=s.useState([]),c=o[0],u=o[1],p=n.useFileUploader({addFiles:function(r){t((function(s){return e.__spreadArray(e.__spreadArray([],s,!0),r,!0)}))},onValidationError:function(e){u(e)}}),g=p.inputProps,m=p.dropSpaceProps,x=p.isDragging;return r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"w-full mx-auto border-2 border-dashed border-gray-300 rounded-lg bg-gray-50",children:[r.jsxs("div",e.__assign({},m,{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:[r.jsx("div",{children:r.jsx(a.LuUpload,{size:48})}),r.jsx("p",{children:x?"ここにファイルをドロップ":"ファイルの選択"})]})),r.jsx("input",e.__assign({},g))]}),d.length>0&&r.jsx("ul",{className:"space-y-2 mt-4",children:d.map((function(e){return r.jsx("li",{className:"bg-white border border-gray-300 p-2 rounded-lg",children:e.name},e.name)}))}),c.length>0&&r.jsxs("div",{className:"mt-4 text-red-500",children:[r.jsx("p",{children:"These files are not accepted:"}),r.jsx("ul",{className:"space-y-2",children:c.map((function(e){return r.jsx("li",{className:"bg-red-100 border border-red-300 p-2 rounded-lg",children:e.name},e.name)}))})]})]})};
+//# sourceMappingURL=component.js.map

package/dist/cjs/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":["props","_a","useState","files","setFiles","_b","rejectedFiles","setRejectedFiles","_c","useFileUploader","addFiles","f","__spreadArray","onValidationError","inputProps","dropSpaceProps","isDragging","_jsxs","jsxs","_Fragment","Fragment","children","className","__assign","concat","_jsx","jsx","LuUpload","size","length","map","file","name"],"mappings":"0NAMM,SAAuBA,GACrB,IAAAC,EAAoBC,EAAAA,SAAiB,IAApCC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAoCH,EAAAA,SAAiB,IAApDI,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAChCG,EAA6CC,EAAAA,gBAAgB,CACjEC,SAAU,SAACP,GACTC,GAAS,SAACO,GAAM,OAAAC,EAAAA,cAAAA,EAAAA,cAAA,GAAID,GAAC,GAAKR,GAAK,EAAC,GACjC,EACDU,kBAAmB,SAACP,GAClBC,EAAiBD,EAClB,IANKQ,EAAUN,EAAAM,WAAEC,EAAcP,EAAAO,eAAEC,EAAUR,EAAAQ,WAS9C,OACEC,EAAAC,KAAAC,EAAAC,SAAA,CAAAC,SAAA,CACEJ,EAAKC,KAAA,MAAA,CAAAI,UAAU,8EAA6ED,SAAA,CAC1FJ,EAAAA,KACM,MAAAM,EAAAA,SAAA,CAAA,EAAAR,EACJ,CAAAO,UAAW,6HAAAE,OACTR,EAAa,cAAgB,IAG/BK,SAAA,CAAAI,EAAAC,IAAA,MAAA,CAAAL,SACEI,EAAAA,IAACE,EAAAA,SAAS,CAAAC,KAAM,OAElBH,EAAAA,IAAI,IAAA,CAAAJ,SAAAL,EAAa,eAAiB,gBAEpCS,EAAAA,IAAW,QAAAF,EAAAA,SAAA,CAAA,EAAAT,OAGZX,EAAM0B,OAAS,GACdJ,EAAIC,IAAA,KAAA,CAAAJ,UAAU,0BACXnB,EAAM2B,KAAI,SAACC,GAAS,OACnBN,EAAAA,IAEE,KAAA,CAAAH,UAAU,0DAETS,EAAKC,MAHDD,EAAKC,KAKb,MAIJ1B,EAAcuB,OAAS,GACtBZ,cAAKK,UAAU,oBAAmBD,SAAA,CAChCI,EAAAA,oDACAA,EAAAA,IAAA,KAAA,CAAIH,UAAU,YAAWD,SACtBf,EAAcwB,KAAI,SAACC,GAAS,OAC3BN,EAEEC,IAAA,KAAA,CAAAJ,UAAU,kDAAiDD,SAE1DU,EAAKC,MAHDD,EAAKC,KAFe,WAazC"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),i=["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"];exports.useFileUploader=function(a){var n=e.useRef(null),t=e.useState(!1),o=t[0],r=t[1],p=function(e){var n=function(e){var a=[],n=[];return e.forEach((function(e){i.some((function(i){return e.type.match(i)}))?a.push(e):n.push(e)})),{validFiles:a,rejectedFiles:n}}(e),t=n.validFiles,o=n.rejectedFiles;t.length>0&&a.addFiles(t),o.length>0&&a.onValidationError&&a.onValidationError(o)};return{inputProps:{ref:n,type:"file",multiple:!0,className:"hidden",accept:i.join(","),onChange:function(e){if(e.target.files){var i=Array.from(e.target.files);p(i)}}},isDragging:o,dropSpaceProps:{onClick:function(){var e;return null===(e=n.current)||void 0===e?void 0:e.click()},onDrop:function(e){if(e.preventDefault(),r(!1),e.dataTransfer.files){var i=Array.from(e.dataTransfer.files);p(i)}},onDragOver:function(e){e.preventDefault(),r(!0)},onDragLeave:function(e){r(!1)}}}};
+//# sourceMappingURL=hook.js.map

package/dist/cjs/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","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":"oCAyBMA,EAAiB,CACrB,UACA,SACA,oEACA,4EACA,0EACA,2BACA,6BACA,mBACA,kBACA,kBACA,2BACA,+BACA,qBACA,sBACA,oBACA,+BACA,8BACA,2CAGI,SACJC,GAEA,IAAMC,EAAWC,SAAyB,MACpCC,EAA8BC,EAAAA,UAAS,GAAtCC,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAmB1BI,EAAW,SAACC,GACV,IAAAL,EAlBc,SACpBK,GAEA,IAAMC,EAAqB,GACrBC,EAAwB,GAU9B,OARAF,EAAMG,SAAQ,SAACC,GACTb,EAAec,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,OAAQzB,EAAe0B,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/cjs/src/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./table/table/base.js");exports.Table=e;
+"use strict";var e=require("./table/table/base.js"),r=require("./file-uploader/component.js"),l=require("./file-uploader/hook.js");exports.Table=e,exports.FileUploader=r.FileUploader,exports.useFileUploader=l.useFileUploader;
 //# sourceMappingURL=index.js.map

package/dist/esm/node_modules/react-icons/lu/index.js

@@ -0,0 +1,2 @@
+import{GenIcon as t}from"../lib/iconBase.js";import"../lib/iconContext.js";function o(o){return t({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"path",attr:{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"},child:[]},{tag:"polyline",attr:{points:"17 8 12 3 7 8"},child:[]},{tag:"line",attr:{x1:"12",x2:"12",y1:"3",y2:"15"},child:[]}]})(o)}export{o as LuUpload};
+//# sourceMappingURL=index.js.map