@ebay/ui-core-react
Version:
Skin components build off React
2 lines (1 loc) • 1.58 kB
JavaScript
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),v=require("../icon-CR8ApQBy.js"),l=require("../utils-C9NL3q0j.js"),p=require("classnames"),I=require("../random-id-DlJj_RWH.js"),c=n=>{var{className:t,as:a="span"}=n,s=u.__rest(n,["className","as"]);return e.createElement(a,Object.assign({className:p("file-input__content-header",t)},s))},o=n=>{var{className:t,as:a="span"}=n,s=u.__rest(n,["className","as"]);return e.createElement(a,Object.assign({className:p("file-input__content-subheader",t)},s))},y=n=>{var{children:t,onInput:a,className:s}=n,i=u.__rest(n,["children","onInput","className"]);const d=I.useRandomId(),[b,m]=e.useState(!1),E=r=>{a&&a(r,{files:r.target.files})},g=()=>m(!0),_=()=>m(!1),h=l.findComponent(t,c),N=l.findComponent(t,o),f=l.excludeComponent(t,c).filter(({type:r})=>r!==o);return e.createElement("div",{className:p("file-input",b&&"file-input___container--dragged-over",s)},e.createElement("div",{className:"file-input__container"},e.createElement("div",{className:"file-input__upload-icon"},e.createElement(v.EbayIcon,{name:"upload24"})),e.createElement("div",{className:"file-input__content"},h,N,f&&e.createElement("label",{htmlFor:i.id||d},e.createElement("span",{className:"file-input__content-cta"},f)))),e.createElement("input",Object.assign({},i,{id:i.id||d,type:"file",className:"file-input__input",onChange:E,onDragEnter:g,onDragOver:g,onDragLeave:_,onDrop:_})))};exports.EbayFileInput=y;exports.EbayFileInputHeader=c;exports.EbayFileInputSubheader=o;
;