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

React component library

import { jsxs as S, jsx as b } from "react/jsx-runtime";
import { forwardRef as T, useState as g } from "react";
import { s } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as x, c as t, f as V, d as $, i as y } from "./utils-BUdHa0nB.js";
import { u as D } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const L = s.label`
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  min-height: ${(e) => x(e.theme, e.size)};
  max-height: ${(e) => x(e.theme, e.size)};
  background-color: ${(e) => t(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
  border-radius: 8px;
  ${(e) => e.focused === !0 && e.readOnly !== !0 ? V(e.theme) : ""}
`, P = s.input`
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
`, U = s.div`
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.625rem 0.75rem;
  ${(e) => $(e.theme, "Input", e.size, "enabled")}
  color: ${(e) => t(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
  cursor: ${(e) => e.disabled === !0 ? "default" : "pointer"};
  background-color: ${(e) => t(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
  border: 1px solid
    ${(e) => t(
  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 ? y(e.theme) : ""} */
  ${(e) => e.disabled === !0 && `background-color: ${t(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(r) => t(
  r.theme,
  "Input",
  r.color,
  "disabled",
  "text"
)};`}
`, W = s.input`
  width: 100%;
  appearance: none;
  outline: none;
  padding: 0.625rem 0.75rem;
  ${(e) => $(e.theme, "Input", e.size, "enabled")}
  border: 1px solid
    ${(e) => t(
  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(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "text"
)};

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

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

  ${(e) => e.disabled === !0 && `background-color: ${t(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(r) => t(
  r.theme,
  "Input",
  r.color,
  "disabled",
  "text"
)};`}
`, J = T((e, r) => {
  const {
    className: I = "",
    style: k = {},
    onChange: d,
    onFocus: i,
    onBlur: u,
    disabled: n,
    readOnly: m,
    multiple: C = !1,
    accept: z = "",
    label: w = "Choose File",
    color: O = "primary",
    size: v = "small",
    ...F
  } = e, p = D(), [o, N] = g([]), [h, f] = g(!1);
  var c = { theme: p, size: v, color: O, disabled: n, focused: h };
  const j = () => {
    if (o.length > 0) {
      var a = "";
      for (const l in o)
        a += l == o.length - 1 ? `${o[l].name}` : `${o[l].name}, `;
      return a;
    }
    return "";
  };
  return /* @__PURE__ */ S(
    L,
    {
      ...c,
      className: I,
      style: k,
      focused: h,
      readOnly: m,
      children: [
        /* @__PURE__ */ b(
          P,
          {
            ...c,
            accept: z,
            multiple: C,
            ref: r,
            onChange: n || m ? () => {
            } : (a) => {
              var l = [];
              if (a.target.files && a.target.files.length > 0)
                for (const R of a.target.files)
                  l.push(R);
              else l = [];
              N(l), d && (d == null || d(a, l));
            },
            type: "file",
            onFocus: (a) => {
              n || f(!0), i && !n && (i == null || i(a));
            },
            onBlur: (a) => {
              n || f(!1), u && !n && (u == null || u(a));
            },
            ...F
          }
        ),
        /* @__PURE__ */ b(U, { ...c, children: w }),
        /* @__PURE__ */ b(
          W,
          {
            tabIndex: -1,
            ...c,
            onChange: () => {
            },
            value: j()
          }
        )
      ]
    }
  );
});
export {
  J as default
};