@razorpay/blade
Version:
The Design System that powers Razorpay
200 lines (197 loc) • 8.73 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { memo } from 'react';
import { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper.js';
import { FileUploadItemIcon } from './FileUploadItemIcon.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.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 '../Link/BaseLink/index.js';
import '../Box/styledProps/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
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 RotateClockWiseIcon from '../Icons/RotateClockWiseIcon/RotateClockWiseIcon.js';
import { MAKE_ANALYTICS_CONSTANTS } from '../../utils/makeAnalyticsAttribute/makeAnalyticsConstants.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 _excluded = ["file", "onPreview", "onRemove", "onReupload", "onDismiss", "size", "width", "minWidth", "maxWidth", "flexShrink", "flexGrow", "flexBasis"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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,
width = _ref.width,
minWidth = _ref.minWidth,
maxWidth = _ref.maxWidth,
flexShrink = _ref.flexShrink,
flexGrow = _ref.flexGrow,
flexBasis = _ref.flexBasis,
rest = _objectWithoutProperties(_ref, _excluded);
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, _objectSpread(_objectSpread({
size: containerSize !== null && containerSize !== void 0 ? containerSize : 'medium',
status: status !== null && status !== void 0 ? status : 'success',
borderRadius: "medium",
borderWidth: "thin",
width: width,
minWidth: minWidth,
maxWidth: maxWidth,
flexShrink: flexShrink,
flexGrow: flexGrow,
flexBasis: flexBasis
}, getStyledProps(rest)), {}, {
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', 'spacing.4', 'spacing.3', 'spacing.3'],
children: [/*#__PURE__*/jsx(BaseBox, {
marginRight: "spacing.4",
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',
truncateAfterLines: 1,
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: RotateClockWiseIcon,
color: "negative",
size: "small",
onClick: function onClick() {
onReupload === null || onReupload === void 0 || onReupload({
file: file
});
},
"data-analytics-name": MAKE_ANALYTICS_CONSTANTS.FILE_UPLOAD.REUPLOAD_BUTTON,
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