@emmveqz/react-components
Version:
Diverse Components for React
202 lines (201 loc) • 10.1 kB
JavaScript
;
//
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const FolderOpenRounded_1 = __importDefault(require("@mui/icons-material/FolderOpenRounded"));
const GetAppRounded_1 = __importDefault(require("@mui/icons-material/GetAppRounded"));
const HighlightOffRounded_1 = __importDefault(require("@mui/icons-material/HighlightOffRounded"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const TextField_1 = __importDefault(require("../TextField"));
//
const FileField = (_a) => {
var { acceptedMimeType, defaultValue, disabled, file: fileProp, getFileUrl, InputLabelProps, name, onChange, onNotification, sizeLimit, type } = _a, props = __rest(_a, ["acceptedMimeType", "defaultValue", "disabled", "file", "getFileUrl", "InputLabelProps", "name", "onChange", "onNotification", "sizeLimit", "type"]);
const textFieldRef = (0, react_1.useRef)(null);
const [file, setFile,] = (0, react_1.useState)(fileProp);
const removeFileClickHandler = (0, react_1.useCallback)(() => {
if (textFieldRef.current) {
textFieldRef.current.value = '';
}
onNotification === null || onNotification === void 0 ? void 0 : onNotification({
message: 'Change will take effect after saving',
type: 'info',
});
onChange === null || onChange === void 0 ? void 0 : onChange({
persist: () => { },
target: {
name,
type,
value: undefined,
},
});
setFile(undefined);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
onChange,
onNotification,
]);
const downloadClickHandler = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
const fileId = defaultValue || (file === null || file === void 0 ? void 0 : file.Id);
if (!fileId || !getFileUrl) {
return;
}
const fullUrl = yield getFileUrl(fileId);
const link = globalThis.document.createElement('a');
link.href = fullUrl;
link.rel = 'noopener';
link.target = '_blank';
link.click();
// eslint-disable-next-line react-hooks/exhaustive-deps
}), [
getFileUrl,
file === null || file === void 0 ? void 0 : file.Id,
defaultValue,
]);
const selectClickHandler = (0, react_1.useCallback)(() => {
if (!sizeLimit) {
onNotification === null || onNotification === void 0 ? void 0 : onNotification({
message: 'Undefined Size Limit',
type: 'error',
});
return;
}
const input = globalThis.document.createElement('input');
input.type = 'file';
if (acceptedMimeType) {
input.accept = `${acceptedMimeType}/*`;
}
let MimeSubtype;
let MimeType;
let Name;
const reader = new globalThis.FileReader();
reader.addEventListener('loadend', (ev) => {
var _a;
const Data = ((_a = ev.target) === null || _a === void 0 ? void 0 : _a.result)
? new Uint8Array(ev.target.result)
: undefined;
if (!Data) {
return;
}
if (textFieldRef.current) {
textFieldRef.current.value = Name;
}
const file2 = Object.assign(Object.assign({}, (file || {
Id: defaultValue,
})), { hasChanged: true, Data,
MimeSubtype,
MimeType,
Name, Size: Data.byteLength });
onNotification === null || onNotification === void 0 ? void 0 : onNotification({
message: 'Change will take effect after saving',
type: 'info',
});
onChange === null || onChange === void 0 ? void 0 : onChange({
persist: () => { },
target: {
name,
type,
value: file2,
},
});
setFile(file2);
});
input.addEventListener('change', (ev) => {
var _a, _b;
const fileInput = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.item(0);
if (!fileInput) {
return;
}
// eslint-disable-next-line prefer-destructuring
MimeType = fileInput.type.split('/')[0];
MimeSubtype = fileInput.type.split('/')[1] || '';
Name = fileInput.name;
if (acceptedMimeType && acceptedMimeType !== MimeType) {
onNotification === null || onNotification === void 0 ? void 0 : onNotification({
message: 'File type is not accepted',
type: 'warning',
});
return;
}
if (fileInput.size > sizeLimit) {
const sizeLimitStr = sizeLimit < 1048576
? `${parseInt(sizeLimit / 1024, 10)} KB`
: `${parseInt(sizeLimit / 1024 / 1024, 10)} MB`;
onNotification === null || onNotification === void 0 ? void 0 : onNotification({
message: `Size limit is: ${sizeLimitStr}`,
type: 'warning',
});
return;
}
reader.readAsArrayBuffer(fileInput);
});
input.click();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
onChange,
onNotification,
defaultValue,
file,
]);
return (react_1.default.createElement(TextField_1.default, Object.assign({}, props, { defaultValue: file === null || file === void 0 ? void 0 : file.Name, disabled: true, InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { shrink: true }), inputRef: textFieldRef, name: name, type: "text", endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
!disabled && (!!defaultValue || !!(file === null || file === void 0 ? void 0 : file.Id)) && (react_1.default.createElement(InputAdornment_1.default, { position: "end" },
react_1.default.createElement(Tooltip_1.default, { arrow: true, placement: "left", title: "Remove File" },
react_1.default.createElement(IconButton_1.default, { edge: "end", onClick: removeFileClickHandler },
react_1.default.createElement(HighlightOffRounded_1.default, null))))),
react_1.default.createElement(InputAdornment_1.default, { position: "end" },
react_1.default.createElement(Tooltip_1.default, { arrow: true, placement: "left", title: "Download File" },
react_1.default.createElement(IconButton_1.default, { disabled: !defaultValue && !(file === null || file === void 0 ? void 0 : file.Id), edge: "end", onClick: downloadClickHandler },
react_1.default.createElement(GetAppRounded_1.default, null)))),
!disabled && (react_1.default.createElement(InputAdornment_1.default, { position: "end" },
react_1.default.createElement(Tooltip_1.default, { arrow: true, placement: "left", title: "Select File" },
react_1.default.createElement(IconButton_1.default, { edge: "end", onClick: selectClickHandler },
react_1.default.createElement(FolderOpenRounded_1.default, null))))))) })));
};
exports.default = FileField;