@trellixio/roaster-coffee/cjs/components/FileField/FileField.js

Beans' product component library

'use strict';

var React = require('react');
var index$1 = require('../../utils/classNames/index.js');
var index = require('../../utils/useUid/index.js');
require('@floating-ui/react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    for (var k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

function EmptyMarkupPlaceholder({ type, defaultValue }) {
  if (type === "file")
    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("i", { className: "fa-regular fa-file-csv" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "filename" }, "No file added"));
  if (defaultValue) {
    return /* @__PURE__ */ React__namespace.createElement("img", { src: defaultValue, alt: "" });
  }
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "image-placeholder" }, /* @__PURE__ */ React__namespace.createElement("i", { className: "fa-regular fa-image" }));
}
function Preview({ type, file }) {
  if (type === "image" && file) {
    const imageUrl = URL.createObjectURL(file);
    return /* @__PURE__ */ React__namespace.createElement("img", { src: imageUrl, alt: file.name });
  }
  return /* @__PURE__ */ React__namespace.createElement("span", { className: "filename" }, file?.name);
}
const FileField = React__namespace.forwardRef((props, ref) => {
  const {
    id,
    label,
    name,
    disabled,
    helpText,
    inputClassName,
    onChange,
    type = "image",
    accept = type === "image" ? "image/*" : ".csv, .xls",
    size = "small",
    defaultValue
  } = props;
  const uid = index.useUid(id);
  const [value, setValue] = React__namespace.useState(null);
  const handleChange = (event) => {
    setValue(event.currentTarget.files?.[0] || null);
    onChange?.(event.currentTarget.files?.[0] || null);
  };
  return /* @__PURE__ */ React__namespace.createElement("label", { htmlFor: uid }, /* @__PURE__ */ React__namespace.createElement("p", null, label), /* @__PURE__ */ React__namespace.createElement("div", { className: index$1.classNames("file-uploader", size, { uploaded: value }) }, /* @__PURE__ */ React__namespace.createElement("div", { className: index$1.classNames({ "file-preview": type === "file", "image-preview": type === "image" }) }, !value && /* @__PURE__ */ React__namespace.createElement(EmptyMarkupPlaceholder, { type, defaultValue }), value && /* @__PURE__ */ React__namespace.createElement(Preview, { type, file: value })), /* @__PURE__ */ React__namespace.createElement("div", { className: "file-input" }, /* @__PURE__ */ React__namespace.createElement("span", null, /* @__PURE__ */ React__namespace.createElement("i", { className: "fa-regular fa-arrow-up-from-bracket" }), " Upload a file"), /* @__PURE__ */ React__namespace.createElement(
    "input",
    {
      id: uid,
      name,
      ref,
      type: "file",
      disabled,
      accept,
      onChange: handleChange,
      className: inputClassName
    }
  ))), /* @__PURE__ */ React__namespace.createElement("small", null, helpText));
});
FileField.displayName = "FileField";

exports.FileField = FileField;
//# sourceMappingURL=FileField.js.map