@braineet/ui
Version:
Braineet design system
116 lines • 4.6 kB
JavaScript
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, 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 } from "react/jsx-runtime";
import { 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
};