mui-extended
Version:
Extended UI Components built on Material UI
35 lines (34 loc) • 2.04 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Typography } from "@mui/material";
import { createRef, useMemo } from "react";
import { withFormField } from "../FormField";
import { withFormInputControl } from "./FormInputControl";
var DefaultFileRenderer = function (_a) {
var files = _a.files;
return (_jsx(Typography, { variant: "body2", children: files.map(function (f) { return f.name; }).join(", ") }));
};
var ControlledFileInput = function (_a) {
var name = _a.name, accept = _a.accept, capture = _a.capture, multiple = _a.multiple, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, children = _a.children, RenderFiles = _a.RenderFiles, props = __rest(_a, ["name", "accept", "capture", "multiple", "value", "onChange", "onBlur", "children", "RenderFiles"]);
var _onChange = useMemo(function () {
return function (event) {
var _value = multiple
? Array.from(event.target.files)
: event.target.files.item(0);
onChange(event.target.name, _value);
};
}, [onChange, multiple]);
var _onBlur = useMemo(function () {
return function () {
onBlur(name);
};
}, [onBlur, name]);
var inputRef = createRef();
var onButtonClick = function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
};
var FileRendererComponent = RenderFiles || DefaultFileRenderer;
return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({}, props, { onBlur: _onBlur, onClick: onButtonClick, children: children })), _jsx(FileRendererComponent, { files: (multiple ? value || [] : value ? [value] : []) }), _jsx("input", { type: "file", style: { display: "none" }, name: name, accept: accept, capture: capture, multiple: multiple, onChange: _onChange, ref: inputRef })] }));
};
export var FormFileInput = withFormField(withFormInputControl(ControlledFileInput));