@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-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),S=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=b.styled.label`
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  background-color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border-radius: 8px;
  ${e=>e.focused===!0&&e.readOnly!==!0?t.getOutlineCss(e.theme):""}
`,q=b.styled.input`
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
`,_=b.styled.div`
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.625rem 0.75rem;
  ${e=>t.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
  cursor: ${e=>e.disabled===!0?"default":"pointer"};
  background-color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border: 1px solid
    ${e=>t.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?t.getDisabledStateCss(e.theme):""} */
  ${e=>e.disabled===!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${o=>t.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
`,N=b.styled.input`
  width: 100%;
  appearance: none;
  outline: none;
  padding: 0.625rem 0.75rem;
  ${e=>t.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  border: 1px solid
    ${e=>t.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=>t.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};

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

  /* ${e=>e.disabled===!0?t.getDisabledStateCss(e.theme):""} */

  ${e=>e.disabled===!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${o=>t.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
`,T=g.forwardRef((e,o)=>{const{className:x="",style:y={},onChange:i,onFocus:d,onBlur:u,disabled:r,readOnly:m,multiple:$=!1,accept:C="",label:I="Choose File",color:R="primary",size:V="small",...k}=e,w=S.useTheme(),[n,z]=g.useState([]),[h,f]=g.useState(!1);var s={theme:w,size:V,color:R,disabled:r,focused:h};const F=()=>{if(n.length>0){var l="";for(const a in n)l+=a==n.length-1?`${n[a].name}`:`${n[a].name}, `;return l}return""},v=l=>{var a=[];if(l.target.files&&l.target.files.length>0)for(const O of l.target.files)a.push(O);else a=[];z(a),i&&(i==null||i(l,a))};return c.jsxs(j,{...s,className:x,style:y,focused:h,readOnly:m,children:[c.jsx(q,{...s,accept:C,multiple:$,ref:o,onChange:r||m?()=>{}:v,type:"file",onFocus:l=>{r||f(!0),d&&!r&&(d==null||d(l))},onBlur:l=>{r||f(!1),u&&!r&&(u==null||u(l))},...k}),c.jsx(_,{...s,children:I}),c.jsx(N,{tabIndex:-1,...s,onChange:()=>{},value:F()})]})});module.exports=T;