@arudovwen/react-form-builder/lib/DocumentViewer.js

A complete form builder for react.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _lucideReact = require("lucide-react");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const EXTENSION_MAP = {
  jpg: 'image',
  jpeg: 'image',
  png: 'image',
  gif: 'image',
  bmp: 'image',
  webp: 'image',
  svg: 'image',
  pdf: 'pdf',
  doc: 'word',
  docx: 'word',
  xls: 'excel',
  xlsx: 'excel',
  ppt: 'powerpoint',
  pptx: 'powerpoint'
};
const FILE_TYPE_ICONS = {
  image: _lucideReact.Image,
  pdf: _lucideReact.FileText,
  word: _lucideReact.File,
  excel: _lucideReact.FileSpreadsheet,
  powerpoint: _lucideReact.FileBarChart,
  other: _lucideReact.FileQuestion
};
const UniversalFileViewer = ({
  fileUrl,
  fileName
}) => {
  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
  const [fileType, setFileType] = (0, _react.useState)('unknown');
  (0, _react.useEffect)(() => {
    if (!fileUrl) return;
    const extension = fileUrl.split('.').pop()?.toLowerCase() || '';
    const type = EXTENSION_MAP[extension] || 'other';
    setFileType(type);
  }, [fileUrl]);
  const handleFileClick = () => {
    if (fileType === 'image') {
      setIsModalOpen(true);
    } else {
      window.open(fileUrl, '_blank');
    }
  };
  const closeModal = () => setIsModalOpen(false);
  const renderIcon = () => {
    const IconComponent = FILE_TYPE_ICONS[fileType] || _lucideReact.FileQuestion;
    return /*#__PURE__*/_react.default.createElement(IconComponent, {
      size: 40,
      className: "text-gray-500"
    });
  };
  const getThumbnailElement = () => {
    if (fileType === 'image') {
      return /*#__PURE__*/_react.default.createElement("button", {
        className: "btn btn-view",
        type: "button",
        "aria-label": "Preview file"
      }, /*#__PURE__*/_react.default.createElement("span", null, "Preview File"));
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      onClick: handleFileClick,
      style: {
        cursor: 'pointer',
        width: '120px',
        height: '130px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid #eee',
        borderRadius: '4px',
        padding: '10px'
      },
      title: `Click to ${fileType === 'pdf' ? 'open' : 'download'} ${fileName || 'file'}`
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        marginBottom: '10px'
      }
    }, renderIcon()), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        fontSize: '12px',
        textAlign: 'center',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        width: '100%'
      }
    }, fileName || fileUrl?.split('/').pop() || 'Unknown file'));
  };
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    onClick: handleFileClick
  }, getThumbnailElement()), isModalOpen && fileType === 'image' && /*#__PURE__*/_react.default.createElement("div", {
    className: "modal",
    style: {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    },
    onClick: closeModal
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-content",
    style: {
      position: 'relative',
      backgroundColor: 'white',
      padding: '20px',
      borderRadius: '8px',
      width: '90vw',
      maxHeight: '90vh',
      overflow: 'auto'
    },
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "close",
    onClick: closeModal,
    style: {
      position: 'absolute',
      top: '10px',
      right: '10px',
      fontSize: '24px',
      cursor: 'pointer'
    }
  }, "\xD7"), /*#__PURE__*/_react.default.createElement("img", {
    src: fileUrl || '/place.png',
    alt: fileName || 'Full Image',
    style: {
      maxWidth: '100%',
      maxHeight: '80vh',
      objectFit: 'contain',
      display: 'block',
      margin: '0 auto'
    }
  }))));
};
var _default = exports.default = UniversalFileViewer;