@razorpay/blade
Version:
The Design System that powers Razorpay
175 lines (172 loc) • 6.82 kB
JavaScript
import { memo } from 'react';
import { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper.js';
import { FileUploadItemIcon } from './FileUploadItemIcon.js';
import '../Icons/index.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../Divider/index.js';
import '../Button/IconButton/index.js';
import '../ProgressBar/index.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import '../Link/BaseLink/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Text } from '../Typography/Text/Text.js';
import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
import BaseLink from '../Link/BaseLink/BaseLink.js';
import RefreshIcon from '../Icons/RefreshIcon/RefreshIcon.js';
import EyeIcon from '../Icons/EyeIcon/EyeIcon.js';
import { Divider } from '../Divider/Divider.js';
import TrashIcon from '../Icons/TrashIcon/TrashIcon.js';
import { ProgressBar } from '../ProgressBar/ProgressBar.js';
var FileUploadItem = /*#__PURE__*/memo(function (_ref) {
var file = _ref.file,
onPreview = _ref.onPreview,
onRemove = _ref.onRemove,
onReupload = _ref.onReupload,
onDismiss = _ref.onDismiss,
containerSize = _ref.size;
var name = file.name,
size = file.size,
uploadPercent = file.uploadPercent,
errorText = file.errorText,
status = file.status;
var isUploading = status === 'uploading';
var sizeInKB = size / 1024;
var sizeInMB = sizeInKB / 1024;
var showSizeInKB = sizeInKB < 1024;
return /*#__PURE__*/jsx(StyledFileUploadItemWrapper, {
size: containerSize !== null && containerSize !== void 0 ? containerSize : 'medium',
status: status !== null && status !== void 0 ? status : 'success',
borderRadius: "medium",
borderWidth: "thin",
children: /*#__PURE__*/jsxs(BaseBox, {
width: "100%",
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
margin: containerSize === 'large' ? 'spacing.4' : 'spacing.3',
children: [/*#__PURE__*/jsx(BaseBox, {
marginRight: "spacing.3",
children: /*#__PURE__*/jsx(FileUploadItemIcon, {
fileName: name,
uploadStatus: status
})
}), /*#__PURE__*/jsxs(BaseBox, {
flexGrow: 1,
children: [/*#__PURE__*/jsxs(BaseBox, {
alignItems: "center",
display: "flex",
children: [/*#__PURE__*/jsx(BaseBox, {
alignItems: "center",
maxWidth: "70%",
display: "flex",
marginRight: "spacing.3",
children: /*#__PURE__*/jsx(Text, {
size: "medium",
weight: "medium",
color: "surface.text.gray.subtle",
truncateAfterLines: 1,
children: name
})
}), status === 'success' && /*#__PURE__*/jsx(CheckCircleIcon, {
size: "medium",
marginRight: "spacing.2",
color: "interactive.icon.positive.normal"
})]
}), /*#__PURE__*/jsx(Text, {
size: "small",
weight: "regular",
color: status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted',
children: errorText !== null && errorText !== void 0 ? errorText : "".concat((showSizeInKB ? sizeInKB : sizeInMB).toFixed(2), " ").concat(showSizeInKB ? 'KB' : 'MB', " ").concat(isUploading && uploadPercent ? "(".concat(uploadPercent, "%)") : '')
})]
}), status === 'uploading' ? /*#__PURE__*/jsx(BaseBox, {
display: "flex",
alignItems: "center",
children: /*#__PURE__*/jsx(IconButton, {
accessibilityLabel: "Remove File",
icon: CloseIcon,
onClick: function onClick() {
return onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss({
file: file
});
}
})
}) : status === 'error' ? /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
children: /*#__PURE__*/jsx(BaseLink, {
marginX: "spacing.1",
variant: "button",
icon: RefreshIcon,
color: "negative",
size: "small",
onClick: function onClick() {
onReupload === null || onReupload === void 0 ? void 0 : onReupload({
file: file
});
},
children: "Re-upload"
})
}) : /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
children: onPreview ? /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "spacing.0",
gap: "spacing.3",
children: [/*#__PURE__*/jsx(IconButton, {
accessibilityLabel: "Preview File",
icon: EyeIcon,
onClick: function onClick() {
return onPreview === null || onPreview === void 0 ? void 0 : onPreview({
file: file
});
}
}), /*#__PURE__*/jsx(Divider, {
orientation: "vertical",
thickness: "thinner",
variant: "normal"
}), /*#__PURE__*/jsx(IconButton, {
accessibilityLabel: "Remove File",
icon: TrashIcon,
onClick: function onClick() {
return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
file: file
});
}
})]
}) : /*#__PURE__*/jsx(IconButton, {
accessibilityLabel: "Remove File",
icon: TrashIcon,
onClick: function onClick() {
return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
file: file
});
}
})
})]
}), isUploading && /*#__PURE__*/jsx(BaseBox, {
width: "100%",
position: "absolute",
bottom: "spacing.0",
children: /*#__PURE__*/jsx(ProgressBar, {
left: "spacing.0",
showPercentage: false,
value: uploadPercent !== null && uploadPercent !== void 0 ? uploadPercent : 0,
isIndeterminate: isUndefined(uploadPercent)
})
})]
})
});
});
export { FileUploadItem };
//# sourceMappingURL=FileUploadItem.js.map