@braineet/ui/dist/esm/components/file/File.js

Braineet design system

var _excluded = ["file", "status", "children", "display"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable no-nested-ternary */
import React from 'react';
import Icon from '../icon';
import Link from '../link';
import Pane from '../pane';
import Text from '../text';
import { Tooltip } from '../tooltip';
import { getFileIcon } from '../upload/useUploadState/utils';
import { FileContainer, FileIconWrapper, FileThumb } from './styles';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var File = function File(_ref) {
  var file = _ref.file,
    status = _ref.status,
    children = _ref.children,
    display = _ref.display,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var name = file.name,
    thumbUrl = file.thumbUrl,
    icon = file.icon,
    tooltipText = file.tooltipText;
  var iconPropsByStatus = React.useMemo(function () {
    if (icon === null) return;
    switch (status) {
      case 'error':
        return {
          color: null
        };
      default:
        {
          var _getFileIcon, _getFileIcon2;
          return {
            name: (icon == null ? void 0 : icon.name) || ((_getFileIcon = getFileIcon(file)) == null ? void 0 : _getFileIcon.name),
            color: (icon == null ? void 0 : icon.color) || ((_getFileIcon2 = getFileIcon(file)) == null ? void 0 : _getFileIcon2.color)
          };
        }
    }
  }, [status]);
  return /*#__PURE__*/_jsxs(FileContainer, _extends({
    status: status,
    $display: display
  }, restProps, {
    children: [/*#__PURE__*/_jsx(Tooltip, {
      placement: "bottom-start",
      content: /*#__PURE__*/_jsx(Text, {
        display: "block",
        textAlign: "left",
        "aria-hidden": "true",
        maxWidth: "240px",
        minWidth: "auto",
        size: "xs",
        children: tooltipText || name
      }),
      children: /*#__PURE__*/_jsxs(Pane, {
        display: "flex",
        maxWidth: "100%",
        minWidth: "0",
        children: [thumbUrl || iconPropsByStatus ? thumbUrl ? /*#__PURE__*/_jsx(FileThumb, {
          thumbUrl: thumbUrl
        }) : iconPropsByStatus != null && iconPropsByStatus.name ? /*#__PURE__*/_jsx(FileIconWrapper, {
          children: /*#__PURE__*/_jsx(Icon, _extends({}, iconPropsByStatus))
        }) : null : null, display === 'row' ? /*#__PURE__*/_jsx(Pane, {
          display: "flex",
          alignY: "center",
          minWidth: "0",
          flexGrow: 1,
          marginLeft: "8px",
          children: (file == null ? void 0 : file.type) === 'link' ? /*#__PURE__*/_jsx(Link, _extends({
            size: "small",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            display: "block",
            overflow: "hidden"
          }, file, {
            children: name
          })) : /*#__PURE__*/_jsx(Text, {
            size: "xs",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            display: "block",
            overflow: "hidden",
            children: name
          })
        }) : null]
      })
    }), children]
  }));
};
File.defaultProps = {
  display: 'row'
};