@chayns-components/core/lib/esm/components/file-list/file-item/FileItem.js

A set of beautiful React components for developing your own applications with chayns.

import React, { useMemo } from 'react';
import { getHumanSize, getIconByMimeType } from '../../../utils/file';
import Icon from '../../icon/Icon';
import ListItem from '../../list/list-item/ListItem';
import { StyledFileItem } from './FileItem.styles';
const FileItem = _ref => {
  let {
    mimeType,
    onRemove,
    size,
    name,
    id
  } = _ref;
  const humanFileSize = useMemo(() => getHumanSize(size), [size]);
  const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);
  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
    title: name,
    subtitle: humanFileSize,
    icons: [icon],
    rightElements: typeof onRemove === 'function' ? /*#__PURE__*/React.createElement(Icon, {
      icons: ['ts-wrong'],
      onClick: () => onRemove(id)
    }) : undefined
  })), [humanFileSize, icon, id, name, onRemove]);
};
FileItem.displayName = 'FileList';
export default FileItem;
//# sourceMappingURL=FileItem.js.map