@kbfront/kb-ui
Version:
KB React UI Library
152 lines • 7.09 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var Button_1 = __importStar(require("../Button"));
var enum_1 = require("../../enum/");
require("./index.scss");
var Upload = react_1.forwardRef(function (_a, ref) {
var types = _a.types, _b = _a.multiple, multiple = _b === void 0 ? false : _b, _c = _a.limit, limit = _c === void 0 ? 1 : _c, size = _a.size, _d = _a.color, color = _d === void 0 ? enum_1.EColor.SUCCESS : _d, _e = _a.label, label = _e === void 0 ? "upload" : _e, _f = _a.className, className = _f === void 0 ? "" : _f, name = _a.name, _required = _a._required, _g = _a.preview, preview = _g === void 0 ? false : _g, getFiles = _a.getFiles;
var _h = react_1.useState([]), files = _h[0], setFiles = _h[1];
var _j = react_1.useState([]), rawFiles = _j[0], setRawFiles = _j[1];
var _k = react_1.useState(), error = _k[0], setError = _k[1];
var errorObject = {
size: "maksimum ölçü limitini aşmısınız",
type: "format düzgün qeyd edilməyib",
limit: limit + " fayldan art\u0131q y\u00FCkl\u0259m\u0259k olmaz",
};
var imageTypes = ["jpg", "jpeg", "png", "svg"];
var defaultAllowedTypes = __spreadArrays(imageTypes, [
"pdf",
"xml",
"doc",
"docx",
]);
var defaultAllowedSize = 1000000;
/****default values */
var allowedSize = size ? size : defaultAllowedSize;
var allowedTypes = types ? types : defaultAllowedTypes;
var validateType = function (data) { return allowedTypes.includes(getType(data)); };
var validateSize = function (data) { return allowedSize >= data.size; };
var isImage = function (file) { return imageTypes.includes(getType(file)); };
var getType = function (data) { return data.type.split("/")[1]; };
var validate = function (data, file) {
setError("");
if (validateType(data) && validateSize(data) && limit >= file.length) {
multiple ? setFiles(function (files) { return __spreadArrays(files, [data]); }) : setFiles([data]);
setRawFiles(file);
}
else {
if (!validateType(data)) {
setError(errorObject.type);
}
if (!validateSize(data)) {
setError(errorObject.size);
}
if (limit <= file.length) {
setError(errorObject.limit);
}
}
};
var remove = function (index) {
return setFiles(files.filter(function (data, i) {
return i !== index;
}));
};
react_1.useEffect(function () {
if (typeof getFiles === "function") {
getFiles(files, rawFiles);
}
}, [files, rawFiles]);
var previewList = function (data) {
return data.map(function (file, i) {
return (react_1.default.createElement("li", { key: i, title: file.name },
preview && (react_1.default.createElement("div", { className: "kb-form-upload__preview__img" }, isImage(file) ? (react_1.default.createElement("img", { src: file.src, alt: file.name })) : (react_1.default.createElement("span", { className: "kb-form-upload__preview__img-type" }, getType(file))))),
react_1.default.createElement("button", { className: "kb-form-upload__preview-close", onClick: function () { return remove(i); } }, "x"),
react_1.default.createElement("h3", { className: "kb-form-upload__preview__name" },
" ",
file.name,
" ")));
});
};
var multiUpload = function (files) {
var _a;
(_a = __spreadArrays(files)) === null || _a === void 0 ? void 0 : _a.forEach(function (file) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var name = file.name, size = file.size, type = file.type;
var data = {
src: reader.result,
name: name,
size: size,
type: type,
};
validate(data, files);
}, false);
reader.readAsDataURL(file);
});
};
var changeFile = function (target) {
setError("");
setFiles([]);
multiUpload(target.files);
};
var handleClick = function (e) {
e.target.previousSibling.click();
};
/* show files */
var showFiles = function (data, preview) {
return data && react_1.default.createElement("ul", { className: "kb-form-upload__preview" },
" ",
preview,
" ");
};
/* show error */
var showError = error && (react_1.default.createElement("div", { className: "kb-form-upload__error" },
" ",
error,
" "));
return (react_1.default.createElement("div", { className: "kb-form-upload " + className },
react_1.default.createElement("input", __assign({ type: "file", id: "redeb" }, { _required: _required, multiple: multiple, name: name, ref: ref }, { onChange: function (e) { return changeFile(e === null || e === void 0 ? void 0 : e.target); } })),
react_1.default.createElement(Button_1.default, __assign({}, { color: color }, { size: Button_1.EButtonSize.XSMALL, type: Button_1.EButtonType.BUTTON, onClick: handleClick }), label),
showFiles(files, previewList(files)),
showError));
});
exports.default = Upload;
//# sourceMappingURL=index.js.map