@trellixio/roaster-coffee
Version:
Beans' product component library
59 lines (56 loc) • 2.78 kB
JavaScript
import * as React from 'react';
import { classNames } from '../../utils/classNames/index.js';
import { useUid } from '../../utils/useUid/index.js';
import '@floating-ui/react';
function EmptyMarkupPlaceholder({ type, defaultValue }) {
if (type === "file")
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fa-regular fa-file-csv" }), /* @__PURE__ */ React.createElement("span", { className: "filename" }, "No file added"));
if (defaultValue) {
return /* @__PURE__ */ React.createElement("img", { src: defaultValue, alt: "" });
}
return /* @__PURE__ */ React.createElement("div", { className: "image-placeholder" }, /* @__PURE__ */ React.createElement("i", { className: "fa-regular fa-image" }));
}
function Preview({ type, file }) {
if (type === "image" && file) {
const imageUrl = URL.createObjectURL(file);
return /* @__PURE__ */ React.createElement("img", { src: imageUrl, alt: file.name });
}
return /* @__PURE__ */ React.createElement("span", { className: "filename" }, file?.name);
}
const FileField = React.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 = useUid(id);
const [value, setValue] = React.useState(null);
const handleChange = (event) => {
setValue(event.currentTarget.files?.[0] || null);
onChange?.(event.currentTarget.files?.[0] || null);
};
return /* @__PURE__ */ React.createElement("label", { htmlFor: uid }, /* @__PURE__ */ React.createElement("p", null, label), /* @__PURE__ */ React.createElement("div", { className: classNames("file-uploader", size, { uploaded: value }) }, /* @__PURE__ */ React.createElement("div", { className: classNames({ "file-preview": type === "file", "image-preview": type === "image" }) }, !value && /* @__PURE__ */ React.createElement(EmptyMarkupPlaceholder, { type, defaultValue }), value && /* @__PURE__ */ React.createElement(Preview, { type, file: value })), /* @__PURE__ */ React.createElement("div", { className: "file-input" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("i", { className: "fa-regular fa-arrow-up-from-bracket" }), " Upload a file"), /* @__PURE__ */ React.createElement(
"input",
{
id: uid,
name,
ref,
type: "file",
disabled,
accept,
onChange: handleChange,
className: inputClassName
}
))), /* @__PURE__ */ React.createElement("small", null, helpText));
});
FileField.displayName = "FileField";
export { FileField };
//# sourceMappingURL=FileField.js.map