@ozen-ui/kit
Version:
React component library
34 lines (33 loc) • 2.24 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { DeleteIcon, DownloadFileIcon } from '@ozen-ui/icons';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn } from '../../../../utils/classname';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { FileIconButton } from '../../../FileNext';
import { Stack } from '../../../Stack';
import { useFileUploaderContext } from '../../context';
import { FileUploaderListItem } from '../FileUploaderListItem';
import { FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS, FILE_UPLOADER_LIST_DEFAULT_TAG, } from './constants';
export var cnFileUploaderList = cn('FileUploaderList');
export var FileUploaderList = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'FileUploaderList',
});
var _a = props.as, as = _a === void 0 ? FILE_UPLOADER_LIST_DEFAULT_TAG : _a, className = props.className, renderItem = props.renderItem, other = __rest(props, ["as", "className", "renderItem"]);
var _b = useFileUploaderContext(), filesInfos = _b.filesInfos, deleteFile = _b.deleteFile;
if (filesInfos.length === 0) {
return null;
}
var renderItemDefault = function (info) {
var _a, _b;
return (React.createElement(FileUploaderListItem, { key: info.id, file: (_a = info.format) !== null && _a !== void 0 ? _a : React.createElement(DownloadFileIcon, null), status: FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS[info.status], hint: info.status === 'error'
? (_b = info.errorMessage) !== null && _b !== void 0 ? _b : info.description
: info.description, trailing: React.createElement(FileIconButton, { icon: DeleteIcon, onClick: function () { return deleteFile(info); }, disabled: info.status === 'loading' }) }, info.name));
};
return (React.createElement(Stack, __assign({}, other, { as: as, className: cnFileUploaderList('', [className]), gap: "xs", direction: "column", ref: ref }), filesInfos.map(function (info) {
return renderItem ? renderItem(info) : renderItemDefault(info);
})));
});
FileUploaderList.displayName = 'FileUploaderList';