@ant-design/x/lib/folder/FilePreview.js

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _antd = require("antd");
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _reactSyntaxHighlighter = require("react-syntax-highlighter");
var _prism = require("react-syntax-highlighter/dist/esm/styles/prism");
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _ActionsCopy = _interopRequireDefault(require("../actions/ActionsCopy"));
var _locale = require("../locale");
var _en_US = _interopRequireDefault(require("../locale/en_US"));
var _xProvider = require("../x-provider");
var _style = _interopRequireDefault(require("./style"));
const customOneLight = {
  ..._prism.oneLight,
  'pre[class*="language-"]': {
    ..._prism.oneLight['pre[class*="language-"]'],
    margin: 0,
    background: 'transparent',
    padding: 0,
    borderRadius: 0
  }
};
const FileView = props => {
  const {
    prefixCls: customizePrefixCls,
    classNames,
    styles,
    style,
    selectedFile,
    fileContent = '',
    loading = false,
    previewTitle,
    getFileNode,
    emptyRender,
    previewRender
  } = props;
  const [contextLocale] = (0, _locale.useLocale)('Folder', _en_US.default.Folder);
  // ============================ Prefix ============================
  const {
    getPrefixCls
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('folder', customizePrefixCls);
  const contextConfig = (0, _useXComponentConfig.default)('folder');
  const previewCls = `${prefixCls}-preview`;
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
  // ============================ Helpers ============================
  const getFileExtension = (path = '') => {
    const parts = path.split('.');
    return parts[parts.length - 1] || '';
  };
  const getLanguageFromExtension = ext => {
    return ext.toLowerCase() || 'txt';
  };

  // ============================ Render ============================
  const renderContent = () => {
    if (loading) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _clsx.clsx)(`${previewCls}-loading-container`, classNames?.previewRender)
      }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null));
    }
    if (!selectedFile || selectedFile.length === 0) {
      // If emptyRender is false or null, do not display empty state
      if (emptyRender === false || emptyRender === null) {
        return null;
      }
      const emptyNode = typeof emptyRender === 'function' ? emptyRender() : emptyRender || /*#__PURE__*/_react.default.createElement(_antd.Empty, {
        image: _antd.Empty.PRESENTED_IMAGE_SIMPLE,
        description: contextLocale.selectFile
      });
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _clsx.clsx)(`${previewCls}-empty-container`, classNames?.previewRender)
      }, emptyNode);
    }
    const fileNode = getFileNode?.(selectedFile);
    const title = fileNode?.title || selectedFile[selectedFile.length - 1];
    const path = selectedFile;

    // Get file extension from filename
    const fileName = selectedFile[selectedFile.length - 1];
    const extension = getFileExtension(fileName);
    const language = getLanguageFromExtension(extension);

    // Handle custom content title
    let headerNode;
    if (previewTitle === false || previewTitle === null) {
      // If previewTitle is false or null, do not display title
      headerNode = null;
    } else if (previewTitle) {
      headerNode = typeof previewTitle === 'function' ? previewTitle({
        title,
        path,
        content: fileContent
      }) : previewTitle;
    } else {
      headerNode = /*#__PURE__*/_react.default.createElement(_antd.Flex, {
        justify: "space-between",
        align: "center",
        className: `${previewCls}-title`
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: `${previewCls}-filename`
      }, title), /*#__PURE__*/_react.default.createElement(_ActionsCopy.default, {
        text: fileContent,
        className: `${previewCls}-copy`
      }));
    }

    // Handle custom preview content
    let contentNode;
    const originContentNode = /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.PrismLight, {
      language: language,
      wrapLines: true,
      style: customOneLight,
      codeTagProps: {
        style: {
          background: 'transparent'
        }
      }
    }, fileContent.replace(/\n$/, ''));
    if (previewRender) {
      if (typeof previewRender === 'function') {
        contentNode = previewRender({
          content: fileContent,
          path: selectedFile,
          title: fileNode?.title,
          language
        }, {
          originNode: originContentNode
        });
      } else {
        contentNode = previewRender;
      }
    } else {
      contentNode = /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.PrismLight, {
        language: language,
        wrapLines: true,
        style: customOneLight,
        codeTagProps: {
          style: {
            background: 'transparent'
          }
        }
      }, fileContent.replace(/\n$/, ''));
    }
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerNode && /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.clsx)(`${previewCls}-title-wrapper`, classNames?.previewTitle)
    }, headerNode), /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.clsx)(`${previewCls}-content`, classNames?.previewRender)
    }, contentNode));
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-preview`, classNames?.filePreview, hashId, cssVarCls),
    style: {
      ...contextConfig.styles?.filePreview,
      ...styles?.filePreview,
      ...style
    }
  }, renderContent());
};
var _default = exports.default = FileView;