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

React component library

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

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

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