@ihatecode/react-file-picker/lib/index.js

A file picker component written in React.

"use strict";Object.defineProperty(exports,"__esModule",{value:true});const React=require("react");const classnames_1=require("classnames");const PlusIcon=()=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"ihs-plus-icon",width:"1em",height:"1em",viewBox:"0 0 24 24"},React.createElement("path",{fill:"currentColor",d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"}));const FilePicker=props=>{const[dragging,setDragging]=React.useState(false);const handleClick=e=>{e.stopPropagation();const input=document.createElement("input");input.type="file";input.accept=props.accept||"*/*";input.multiple=Boolean(props.multiple);input.webkitdirectory=Boolean(props.directory);input.onchange=()=>{props.onChange?.(input.files)};input.click();input.remove()};const handleDragEnter=e=>{e.preventDefault();setDragging(true)};const handleDragOver=e=>{e.preventDefault()};const handleDragLeave=e=>{e.preventDefault();setDragging(false)};const handleDrop=e=>{e.preventDefault();setDragging(false);if(e.dataTransfer.types.includes("Files")){props.onChange?.(e.dataTransfer.files)}};const classes=(0,classnames_1.default)("ihc-file-picker__wrapper",{"ihc-file-picker__draggable":props.draggable,"ihc-file-picker__dragging":dragging},props.className);const dragProps=props.draggable?{onDragEnter:handleDragEnter,onDragOver:handleDragOver,onDragLeave:handleDragLeave,onDrop:handleDrop}:{};return React.createElement("div",{style:props.style,className:classes,onClick:handleClick,...dragProps},props.children||React.createElement(PlusIcon,null))};exports.default=FilePicker;