@frontify/fondue/dist/components/AssetInput/AssetInput.es.js

Design system of Frontify

import { jsx as e, jsxs as c } from "react/jsx-runtime";
import { useRef as F } from "react";
import b from "../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
import y from "../../foundation/Icon/Generated/IconImageStack.es.js";
import { useMemoizedId as j } from "../../hooks/useMemoizedId.es.js";
import { merge as o } from "../../utilities/merge.es.js";
import { SelectedAsset as A } from "./SingleAsset/SelectedAsset.es.js";
import { MultiAssetPreview as D } from "./MultiAssetPreview/MultiAssetPreview.es.js";
import { Button as p } from "../Button/Button.es.js";
import { ButtonEmphasis as f, ButtonStyle as u } from "../Button/ButtonTypes.es.js";
var W = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(W || {});
const E = ({
  assets: t = [],
  numberOfLocations: w = 1,
  actions: a = [],
  size: h = "Small",
  isLoading: d = !1,
  hideSize: g = !1,
  hideExtension: x = !1,
  onLibraryClick: s,
  onUploadClick: r,
  onMultiAssetClick: l,
  acceptFileType: v
}) => {
  const m = t.length, i = F(null), I = j(), N = (B) => {
    const n = B.target.files;
    n && r && r(n);
  }, S = () => {
    i.current && i.current.click();
  };
  return (d || m === 1) && a ? /* @__PURE__ */ e(
    A,
    {
      asset: t[0],
      size: h,
      actions: a,
      isLoading: d,
      hideExtension: x,
      hideSize: g
    }
  ) : m > 1 && l ? /* @__PURE__ */ e(D, { assets: t, onClick: l, numberOfLocations: w }) : /* @__PURE__ */ c(
    "div",
    {
      "data-test-id": "asset-input-placeholder",
      className: o([
        "tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded",
        r && s ? "tw-grid-cols-2 tw-divide-x tw-divide-black-10" : "tw-grid-cols-1"
      ]),
      children: [
        r && /* @__PURE__ */ c(
          "div",
          {
            className: o(["tw-flex tw-flex-col tw-h-8", s && "tw-pr-3"]),
            "data-test-id": "asset-input-upload",
            children: [
              /* @__PURE__ */ e(
                p,
                {
                  style: u.Default,
                  onClick: S,
                  emphasis: f.Weak,
                  icon: /* @__PURE__ */ e(b, {}),
                  children: "Upload"
                }
              ),
              /* @__PURE__ */ e(
                "input",
                {
                  id: I,
                  ref: i,
                  className: "tw-hidden",
                  type: "file",
                  accept: v,
                  multiple: !!l,
                  onChange: N
                }
              )
            ]
          }
        ),
        s && /* @__PURE__ */ e(
          "div",
          {
            className: o(["tw-flex tw-flex-col tw-h-8", r && "tw-pl-3"]),
            "data-test-id": "asset-input-library",
            children: /* @__PURE__ */ e(
              p,
              {
                style: u.Default,
                onClick: s,
                emphasis: f.Weak,
                icon: /* @__PURE__ */ e(y, {}),
                children: "Browse"
              }
            )
          }
        )
      ]
    }
  );
};
E.displayName = "FondueAssetInput";
export {
  E as AssetInput,
  W as AssetInputSize
};
//# sourceMappingURL=AssetInput.es.js.map