@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
43 lines (42 loc) • 1.49 kB
JavaScript
"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { genericFactory } from "../../core/factory/factory.mjs";
import { useRef } from "react";
import { assignRef, useMergedRef } from "@mantine/hooks";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/FileButton/FileButton.tsx
const FileButton = genericFactory((props) => {
const { onChange, children, multiple, accept, name, form, resetRef, disabled, capture, inputProps, ref, ...others } = useProps("FileButton", null, props);
const inputRef = useRef(null);
const onClick = () => {
!disabled && inputRef.current?.click();
};
const handleChange = (event) => {
if (event.currentTarget.files === null) return onChange(multiple ? [] : null);
if (multiple) onChange(Array.from(event.currentTarget.files));
else onChange(event.currentTarget.files[0] || null);
};
const reset = () => {
if (inputRef.current) inputRef.current.value = "";
};
assignRef(resetRef, reset);
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
style: { display: "none" },
type: "file",
accept,
multiple,
onChange: handleChange,
ref: useMergedRef(ref, inputRef),
name,
form,
capture,
...inputProps
}), children({
onClick,
...others
})] });
});
FileButton.displayName = "@mantine/core/FileButton";
//#endregion
export { FileButton };
//# sourceMappingURL=FileButton.mjs.map