@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
96 lines (95 loc) • 3.72 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_CloseButton = require("../CloseButton/CloseButton.cjs");
const require_Input = require("../Input/Input.cjs");
const require_InputBase = require("../InputBase/InputBase.cjs");
const require_FileButton = require("../FileButton/FileButton.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/FileInput/FileInput.tsx
const DefaultValue = ({ value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
style: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
children: Array.isArray(value) ? value.map((file) => file.name).join(", ") : value?.name
});
const defaultProps = {
valueComponent: DefaultValue,
size: "sm"
};
const FileInput = require_factory.genericFactory((_props) => {
const props = require_use_props.useProps("FileInput", defaultProps, _props);
const { unstyled, vars, onChange, value, defaultValue, multiple, accept, name, form, valueComponent: ValueComponent, clearable, clearSectionMode, clearButtonProps, readOnly, capture, fileInputProps, rightSection, size, placeholder, component, resetRef: resetRefProp, classNames, styles, attributes, ...others } = props;
const resetRef = (0, react.useRef)(null);
const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
classNames,
styles,
props
});
const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
value,
defaultValue,
onChange,
finalValue: multiple ? [] : null
});
const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;
const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CloseButton.CloseButton, {
...clearButtonProps,
variant: "subtle",
onClick: () => setValue(multiple ? [] : null),
size,
unstyled
});
const _clearable = clearable && hasValue && !readOnly;
(0, react.useEffect)(() => {
if (Array.isArray(_value) && _value.length === 0 || _value === null) resetRef.current?.();
}, [_value]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileButton.FileButton, {
onChange: setValue,
multiple,
accept,
name,
form,
resetRef: (0, _mantine_hooks.useMergedRef)(resetRef, resetRefProp),
disabled: readOnly,
capture,
inputProps: fileInputProps,
children: (fileButtonProps) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
component: component || "button",
rightSection,
__clearSection: clearButton,
__clearable: _clearable,
__clearSectionMode: clearSectionMode,
...fileButtonProps,
...others,
__staticSelector: "FileInput",
multiline: true,
type: "button",
pointer: true,
__stylesApiProps: props,
unstyled,
size,
classNames,
styles,
attributes,
children: !hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input.Placeholder, {
__staticSelector: "FileInput",
classNames: resolvedClassNames,
styles: resolvedStyles,
attributes,
children: placeholder
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueComponent, { value: _value })
})
});
});
FileInput.classes = require_InputBase.InputBase.classes;
FileInput.displayName = "@mantine/core/FileInput";
//#endregion
exports.FileInput = FileInput;
//# sourceMappingURL=FileInput.cjs.map