zent
Version:
一套前端设计语言和基于React的实现
37 lines (36 loc) • 2.96 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from 'classnames';
import { useCallback, useMemo } from 'react';
import { Icon } from '../../../icon';
import { Progress } from '../../../progress';
import { useHover } from '../../../utils/hooks/useHover';
import { FILE_UPLOAD_STATUS } from '../../constants';
import { useItemHandler } from '../../hooks/item-handler';
var ImageUploadItem = function (props) {
var _a;
var i18n = props.i18n, item = props.item, onPreview = props.onPreview;
var isFailed = item.status === FILE_UPLOAD_STATUS.failed;
var _b = useHover(), isHover = _b.isHover, onMouseEnter = _b.onMouseEnter, onMouseLeave = _b.onMouseLeave;
var _c = useItemHandler(props), deleteHandler = _c.deleteHandler, retryHandler = _c.retryHandler;
var previewHandler = useCallback(function (e) {
e.stopPropagation();
onPreview(item);
}, [onPreview, item]);
var cls = cn('zent-image-upload-item', (_a = {},
_a['zent-image-upload-item__failed'] = isFailed,
_a['zent-image-upload-item__hover'] = isHover,
_a));
var failedFallback = useMemo(function () {
var _a;
var failedIconType = isHover ? 'upload' : 'warning';
var failedText = isHover ? i18n.retry : i18n.failed;
var failedCls = cn('zent-image-upload-item-backdrop', 'zent-image-upload-item-backdrop__white', (_a = {},
_a['zent-image-upload-item-backdrop__failed'] = !isHover,
_a['zent-image-upload-item-backdrop__retry'] = isHover,
_a));
return (isFailed && (_jsxs("div", __assign({ className: failedCls, onClick: retryHandler, "data-zv": '10.0.17' }, { children: [_jsx(Icon, { className: "zent-image-upload-item-icon", type: failedIconType }, void 0), _jsx("span", __assign({ className: "zent-image-upload-item-backdrop-text", "data-zv": '10.0.17' }, { children: failedText }), void 0)] }), void 0)));
}, [isHover, i18n, isFailed, retryHandler]);
return (_jsxs("li", __assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: cls, "data-zv": '10.0.17' }, { children: [_jsx("img", { className: "zent-image-upload-item-thumb", src: item.thumbSrc || item.src, alt: item.name, onClick: previewHandler, "data-zv": '10.0.17' }, void 0), item.status === FILE_UPLOAD_STATUS.uploading && (_jsx("div", __assign({ className: "zent-image-upload-item-backdrop zent-image-upload-item-backdrop__black", "data-zv": '10.0.17' }, { children: _jsx(Progress, { width: 48, showInfo: false, className: "zent-image-upload-item-progress", strokeWidth: 4, status: "normal", percent: item.percent }, void 0) }), void 0)), failedFallback, _jsx("i", { className: "zent-image-upload-item-delete-bg", "data-zv": '10.0.17' }, void 0), _jsx(Icon, { type: "close-circle", className: "zent-image-upload-item-delete", onClick: deleteHandler }, void 0)] }), item.id));
};
export default ImageUploadItem;