@brizy/ui
Version:
React elements in Brizy style
32 lines (31 loc) • 2.31 kB
JavaScript
import React, { useCallback, useMemo } from "react";
import { classNames } from "../classNamesFn";
import AntUpload from "antd/lib/upload";
import { Icon } from "../Icon";
import { CmsRemove, CmsAddIcon } from "../icons";
import { Loading } from "../Loading";
import { BRZ_PREFIX, IMAGE_ACCEPTABLE_TYPES } from "../constants";
import { useTranslation } from "../utils/localization/useTranslation";
export const Upload = ({ openFileDialogOnClick = true, source, loading, size = "middle", errorMessage, disabled = source ? true : false, onChange, onRemove, children, acceptableTypes = IMAGE_ACCEPTABLE_TYPES, }) => {
const { t } = useTranslation();
const className = classNames()("upload", `upload--${size}`, {
"upload--source": source,
});
const handleRemove = useCallback((e) => {
e.stopPropagation();
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
}, [onRemove]);
const handleRequest = useCallback(({ file }) => {
onChange === null || onChange === void 0 ? void 0 : onChange(file);
}, [onChange]);
const accept = useMemo(() => acceptableTypes.join(","), [acceptableTypes]);
return (React.createElement(AntUpload, { accept: accept, className: className, listType: "picture-card", disabled: disabled, showUploadList: false, customRequest: handleRequest, openFileDialogOnClick: openFileDialogOnClick }, loading ? (React.createElement(Loading, null)) : errorMessage ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: `${BRZ_PREFIX}-upload__remove`, onClick: handleRemove },
React.createElement(Icon, { source: CmsRemove, color: "dark", size: "6px" })),
React.createElement("div", { className: `${BRZ_PREFIX}-upload__error` }, errorMessage))) : source ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: `${BRZ_PREFIX}-upload__remove`, onClick: handleRemove },
React.createElement(Icon, { source: CmsRemove, color: "dark", size: "6px" })),
children)) : (React.createElement("div", { className: `${BRZ_PREFIX}-upload__add` },
React.createElement(Icon, { source: CmsAddIcon, color: "inherit" }),
React.createElement("span", { className: `${BRZ_PREFIX}-upload__add-text` }, t("Add"))))));
};