@brizy/ui
Version:
React elements in Brizy style
34 lines (33 loc) • 2.07 kB
JavaScript
import React, { useCallback } from "react";
import { classNames } from "../../classNamesFn";
import { Icon } from "../../Icon";
import { CmsRemove, Settings } from "../../icons";
import LoadingOutlined from "@ant-design/icons/lib/icons/LoadingOutlined";
import { BRZ_PREFIX } from "../../constants";
import { useTranslation } from "../../utils/localization/useTranslation";
export const MultipleUploadItem = (props) => {
const { t } = useTranslation();
const { src, loading, errorMessage, main, onRemove, onClickSettings, onClick } = props;
const _onClickSettings = useCallback(() => {
onClickSettings === null || onClickSettings === void 0 ? void 0 : onClickSettings();
}, [onClickSettings]);
const handleClick = useCallback(() => {
onClick === null || onClick === void 0 ? void 0 : onClick();
}, [onClick]);
const _onRemove = useCallback((e) => {
e.stopPropagation();
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
}, [onRemove]);
const className = classNames()("multiupload__single", {
multiupload__onclicksettings: onClickSettings,
multiupload__main: main,
});
const image = (React.createElement(React.Fragment, null,
onRemove && (React.createElement("div", { className: `${BRZ_PREFIX}-multiupload__single-remove`, onClick: _onRemove },
React.createElement(Icon, { source: CmsRemove, color: "dark", size: "6px" }))),
errorMessage ? (React.createElement("div", { draggable: false, className: `${BRZ_PREFIX}-multiupload__error` }, errorMessage)) : (React.createElement("img", { draggable: false, src: src, alt: t("Multiple Upload Item") }))));
return (React.createElement("div", { className: className, onClick: handleClick },
loading ? React.createElement(LoadingOutlined, null) : image,
onClickSettings && (React.createElement("div", { className: `${BRZ_PREFIX}-multiupload__settings`, onClick: _onClickSettings },
React.createElement(Icon, { source: Settings, color: "dark", size: "12px" })))));
};