@lobehub/ui/es/FileTypeIcon/index.js

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["icon", "color", "filetype", "type", "size", "style", "variant", "className"];
var _templateObject, _templateObject2;
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; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles } from 'antd-style';
import { memo, useMemo } from 'react';
import { Center } from 'react-layout-kit';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
  var css = _ref.css;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: none;\n      line-height: 1;\n    "])))
  };
});
var FileTypeIcon = /*#__PURE__*/memo(function (_ref2) {
  var icon = _ref2.icon,
    color = _ref2.color,
    filetype = _ref2.filetype,
    _ref2$type = _ref2.type,
    type = _ref2$type === void 0 ? 'file' : _ref2$type,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 48 : _ref2$size,
    style = _ref2.style,
    variant = _ref2.variant,
    className = _ref2.className,
    rest = _objectWithoutProperties(_ref2, _excluded);
  var _useStyles = useStyles(),
    cx = _useStyles.cx,
    styles = _useStyles.styles,
    theme = _useStyles.theme;
  var filetypeShort = filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype;
  var fontSize = useMemo(function () {
    if (filetypeShort && filetypeShort.length > 3) {
      return 24 / (4 + (filetypeShort.length - 3));
    }
    return 6;
  }, [filetypeShort]);
  var isMono = variant === 'mono';
  var iconColor = isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue;
  var content;
  content = type === 'file' ? /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
    className: cx(styles.icon, !icon && className),
    height: size,
    style: icon ? undefined : style,
    viewBox: "0 0 24 24",
    width: size,
    xmlns: "http://www.w3.org/2000/svg"
  }, rest), {}, {
    children: [/*#__PURE__*/_jsx("path", {
      d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
      fill: iconColor
    }), /*#__PURE__*/_jsx("path", {
      d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
      fill: isMono ? theme.colorFill : '#fff',
      fillOpacity: ".5"
    }), filetypeShort && /*#__PURE__*/_jsx("text", {
      fill: isMono ? theme.colorTextSecondary : '#fff',
      fontSize: fontSize,
      fontWeight: "bold",
      textAnchor: "middle",
      x: "50%",
      y: "70%",
      children: filetypeShort.toUpperCase()
    }), /*#__PURE__*/_jsx("path", {
      d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
      fill: 'transparent',
      stroke: theme.colorFillSecondary,
      strokeWidth: 0.5
    })]
  })) : /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
    className: cx(styles.icon, !icon && className),
    height: size,
    style: icon ? undefined : style,
    viewBox: "0 0 24 24",
    width: size,
    xmlns: "http://www.w3.org/2000/svg"
  }, rest), {}, {
    children: [/*#__PURE__*/_jsx("path", {
      d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
      fill: iconColor,
      stroke: theme.colorFillSecondary,
      strokeWidth: 0.5
    }), !icon && filetype && /*#__PURE__*/_jsx("text", {
      fill: isMono ? theme.colorTextSecondary : '#fff',
      fontSize: fontSize,
      fontWeight: "bold",
      textAnchor: "middle",
      x: '50%',
      y: "70%",
      children: filetype.toUpperCase()
    })]
  }));
  if (!icon) return content;
  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
    className: cx(styles.container, className),
    flex: 'none',
    height: size,
    style: style,
    width: size
  }, rest), {}, {
    children: [/*#__PURE__*/_jsx("div", {
      style: {
        fontSize: size / 2.4,
        position: 'absolute',
        top: type === 'file' ? '20%' : '16%',
        zIndex: 1
      },
      children: icon
    }), content]
  }));
});
export default FileTypeIcon;