@braineet/ui
Version:
Braineet design system
115 lines • 4.5 kB
JavaScript
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable react/no-array-index-key */
import React, { memo } from 'react';
import { useTransition } from 'react-spring';
import Button from '../../button';
import { File } from '../../file';
import Icon from '../../icon';
import Pane from '../../pane';
import { UPLOAD_ITEM_STATUS, getFileIcon, LIST_TYPE, canPreviewFile } from '../useUploadState';
import { FeedbackIconWrapper, UploadItemProgressBar } from './styles';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var DefaultUploadItem = /*#__PURE__*/memo(function (_ref) {
var item = _ref.item,
children = _ref.children,
disabled = _ref.disabled,
readonly = _ref.readonly,
listType = _ref.listType,
animationStatus = _ref.animationStatus,
uploadItems = _ref.uploadItems,
onPreview = _ref.onPreview,
cancelUpload = _ref.cancelUpload,
removeItem = _ref.removeItem;
var canPreview = React.useMemo(function () {
return canPreviewFile(item);
}, [item == null ? void 0 : item.type, item == null ? void 0 : item.status]);
var handleReupload = function handleReupload(e) {
e.preventDefault();
e.stopPropagation();
uploadItems([item]);
};
var handlePreview = function handlePreview(e) {
if (e.defaultPrevented) return;
e.preventDefault();
onPreview(_extends({}, item, {
fileName: item == null ? void 0 : item.name
}));
};
var handleCancel = function handleCancel(e) {
e.stopPropagation();
e.preventDefault();
if ((item == null ? void 0 : item.status) === UPLOAD_ITEM_STATUS.UPLOADING && cancelUpload) {
cancelUpload();
}
removeItem(item.uid);
};
var transitions = useTransition((item == null ? void 0 : item.status) === UPLOAD_ITEM_STATUS.SUCCESS, null, {
from: {
opacity: 0,
transform: 'translate3d(0, -5px, 0)'
},
enter: {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
},
leave: {
opacity: 0,
transform: 'translate3d(0, -5px, 0)'
},
delay: 300
});
var itemIcon = React.useMemo(function () {
if (listType === LIST_TYPE.TEXT) return null;
return getFileIcon(item);
}, [item, listType]);
return /*#__PURE__*/_jsx(File, {
id: "" + ((item == null ? void 0 : item.uid) || (item == null ? void 0 : item.name)),
file: _extends({}, item, {
icon: itemIcon
}),
status: item == null ? void 0 : item.status,
onClick: canPreview ? handlePreview : null,
children: /*#__PURE__*/_jsxs(Pane, {
display: "flex",
children: [transitions.map(function (_ref2) {
var tItem = _ref2.item,
key = _ref2.key,
styles = _extends({}, (_objectDestructuringEmpty(_ref2.props), _ref2.props));
return tItem && /*#__PURE__*/_jsx(FeedbackIconWrapper, {
style: styles,
children: /*#__PURE__*/_jsx(Icon, {
name: "add_validated",
color: "success"
})
}, key);
}), (item == null ? void 0 : item.type) === 'link' && /*#__PURE__*/_jsx(Button, {
disabled: disabled,
styleType: "ghost",
color: "black",
icon: "share",
as: "a",
target: "_blank",
href: item == null ? void 0 : item.url
}), children, !disabled && !readonly && (item == null ? void 0 : item.status) === UPLOAD_ITEM_STATUS.ERROR && /*#__PURE__*/_jsx(Button, {
icon: "reset",
styleType: "ghost",
color: "error",
onClick: handleReupload,
disabled: animationStatus === 'leave'
}), !disabled && !readonly && /*#__PURE__*/_jsx(Button, {
icon: "clear",
styleType: "ghost",
color: (item == null ? void 0 : item.status) === UPLOAD_ITEM_STATUS.ERROR ? 'error' : 'black',
onClick: handleCancel,
disabled: animationStatus === 'leave'
}), (item == null ? void 0 : item.progress) > 0 ? /*#__PURE__*/_jsx(UploadItemProgressBar, {
progress: item == null ? void 0 : item.progress
}) : null]
})
});
});
DefaultUploadItem.displayName = 'DefaultUploadItem';
DefaultUploadItem.defaultProps = {
animationStatus: null
};