@lanaco/lnc-react-ui/dist/FileInput.cjs

React component library

"use strict";const c=require("react/jsx-runtime"),g=require("react"),b=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./index-BPVoEhTF.cjs"),r=require("./utils-NZLCh-J5.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=b.newStyled.label`
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border-radius: 8px;
  ${e=>e.focused===!0&&e.readOnly!==!0?r.getOutlineCss(e.theme):""}
`,q=b.newStyled.input`
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
`,v=b.newStyled.div`
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.625rem 0.75rem;
  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
  cursor: ${e=>e.disabled===!0?"default":"pointer"};
  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border: 1px solid
    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
  border-radius: 8px 0 0 8px;

  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
`,N=b.newStyled.input`
  width: 100%;
  appearance: none;
  outline: none;
  padding: 0.625rem 0.75rem;
  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  border: 1px solid
    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
  border-radius: 0 8px 8px 0;
  border-left: transparent;
  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};

  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};

  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
`,h=g.forwardRef((e,f)=>{const{className:x="",style:T={},onChange:s,onFocus:i,onBlur:d,disabled:l,readOnly:m,multiple:C=!1,accept:$="",label:P="Choose File",color:I="primary",size:w="small",...R}=e,z=j.useTheme(),[a,S]=g.useState([]),[p,y]=g.useState(!1);var u={theme:z,size:w,color:I,disabled:l,focused:p};const V=()=>{if(a.length>0){var o="";for(const n in a)o+=n==a.length-1?`${a[n].name}`:`${a[n].name}, `;return o}return""},F=o=>{var n=[];if(o.target.files&&o.target.files.length>0)for(const O of o.target.files)n.push(O);else n=[];S(n),s&&(s==null||s(o,n))};return c.jsxs(k,{...u,className:x,style:T,focused:p,readOnly:m,children:[c.jsx(q,{...u,accept:$,multiple:C,ref:f,onChange:l||m?()=>{}:F,type:"file",onFocus:o=>{l||y(!0),i&&!l&&(i==null||i(o))},onBlur:o=>{l||y(!1),d&&!l&&(d==null||d(o))},...R}),c.jsx(v,{...u,children:P}),c.jsx(N,{tabIndex:-1,...u,onChange:()=>{},value:V()})]})});h.propTypes={id:t.PropTypes.any,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,multiple:t.PropTypes.bool,accept:t.PropTypes.string,label:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),tabIndex:t.PropTypes.number,onChange:t.PropTypes.func,onFocus:t.PropTypes.func,onBlur:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=h;