@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.2

package/es/components/shared/file-viewer/FileViewer.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState } from 'react';
 import { Flex, Hspace, Icon } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -19,43 +17,31 @@ import phrasesKo from './locales/ko.json.js';
 import phrasesTh from './locales/th.json.js';
 import FileViewerNonViewable from './FileViewerNonViewable.js';
 
-var AsyncFileViewerCsv = React.lazy(function () {
-  return import('./FileViewerCsv.js');
-});
-var AsyncFileViewerImage = React.lazy(function () {
-  return import('./FileViewerImage.js');
-});
-var AsyncFileViewerIpynb = React.lazy(function () {
-  return import('./FileViewerIpynb.js');
-});
-var AsyncFileViewerText = React.lazy(function () {
-  return import('./FileViewerText.js');
-});
-var StyledFileWrapper = styled.div.withConfig({
+const AsyncFileViewerCsv = React.lazy(() => import('./FileViewerCsv.js'));
+const AsyncFileViewerImage = React.lazy(() => import('./FileViewerImage.js'));
+const AsyncFileViewerIpynb = React.lazy(() => import('./FileViewerIpynb.js'));
+const AsyncFileViewerText = React.lazy(() => import('./FileViewerText.js'));
+const StyledFileWrapper = styled.div.withConfig({
   componentId: "sc-197v06u-0"
 })(["display:flex;justify-content:center;align-items:center;background-color:", ";width:100%;height:100%;"], base.color.navy9);
-var StyledReadonlyBanner = styled.div.withConfig({
+const StyledReadonlyBanner = styled.div.withConfig({
   componentId: "sc-197v06u-1"
 })(["width:100%;padding:0.7rem;color:white;font-size:0.7rem;a{color:", ";font-weight:bold;text-decoration:underline;.eb-icon{margin-right:0.25rem;}}"], base.color.primary5);
-var FileViewer = function FileViewer(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    locale = _ref.locale,
-    __intl = _ref.__intl;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showInTextViewer = _useState2[0],
-    setShowInTextViewer = _useState2[1];
+const FileViewer = ({
+  filename,
+  fileurl,
+  locale,
+  __intl
+}) => {
+  const [showInTextViewer, setShowInTextViewer] = useState(false);
   /**
    * Mime type of file.
    */
-  var mimeType = React.useMemo(function () {
-    return mime.getType(filename || '') || filename.split('.').pop() || '';
-  }, [filename]);
+  const mimeType = React.useMemo(() => mime.getType(filename || '') || filename.split('.').pop() || '', [filename]);
   /**
    * Preview component.
    */
-  var PreviewComponent = React.useMemo(function () {
+  const PreviewComponent = React.useMemo(() => {
     // Binary file which shows as text
     if (showInTextViewer) {
       return AsyncFileViewerText;
@@ -84,17 +70,13 @@ var FileViewer = function FileViewer(_ref) {
   /**
    * Handle download button click.
    */
-  var handleDownloadClick = function handleDownloadClick(e) {
+  const handleDownloadClick = e => {
     e.preventDefault();
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.blob();
-    }).then(function (blob) {
-      return FileSaver.saveAs(blob, filename);
-    }).catch(function () {
-      var win = window.open(fileurl, '_blank');
+    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
+      const win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();
       }
@@ -103,52 +85,47 @@ var FileViewer = function FileViewer(_ref) {
   /**
    * Readonly banner.
    */
-  var renderReadonlyBanner = function renderReadonlyBanner() {
+  const renderReadonlyBanner = () => {
     if (!fileurl) {
       return null;
     }
-    return jsxs(StyledReadonlyBanner, {
-      children: [__intl.formatMessage({
-        id: 'fileViewer.readOnlyBanner.content'
-      }), jsx(Hspace, {
-        width: 0.25
-      }), jsxs("a", {
-        href: fileurl,
-        onClick: handleDownloadClick,
-        children: [jsx(Icon, {
-          icon: eilDownload,
-          size: "tiny"
-        }), __intl.formatMessage({
-          id: 'fileViewer.readOnlyBanner.downloadButton'
-        })]
-      })]
-    });
+    return React.createElement(StyledReadonlyBanner, null, __intl.formatMessage({
+      id: 'fileViewer.readOnlyBanner.content'
+    }), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement("a", {
+      href: fileurl,
+      onClick: handleDownloadClick
+    }, React.createElement(Icon, {
+      icon: eilDownload,
+      size: "tiny"
+    }), __intl.formatMessage({
+      id: 'fileViewer.readOnlyBanner.downloadButton'
+    })));
   };
   /**
    * File viewer.
    */
-  var renderFileViewer = function renderFileViewer() {
+  const renderFileViewer = () => {
     // preview-able file
     if (PreviewComponent) {
-      return jsx(React.Suspense, {
-        fallback: jsx(ExerciseFileShimmer, {}),
-        children: jsxs(Flex, {
-          column: true,
-          width: "100%",
-          height: "100%",
-          children: [renderReadonlyBanner(), jsx(PreviewComponent, {
-            filename: filename,
-            fileurl: fileurl
-          })]
-        })
-      });
+      return React.createElement(React.Suspense, {
+        fallback: React.createElement(ExerciseFileShimmer, null)
+      }, React.createElement(Flex, {
+        column: true,
+        width: "100%",
+        height: "100%"
+      }, renderReadonlyBanner(), React.createElement(PreviewComponent, {
+        filename: filename,
+        fileurl: fileurl
+      })));
     }
     // binary file
-    return jsx(FileViewerNonViewable, {
+    return React.createElement(FileViewerNonViewable, {
       fileurl: fileurl,
       filename: filename,
       locale: locale,
-      onTextViewerClick: function onTextViewerClick() {
+      onTextViewerClick: () => {
         setShowInTextViewer(true);
       }
     });
@@ -156,7 +133,7 @@ var FileViewer = function FileViewer(_ref) {
   //
   //
   //
-  return jsx(StyledFileWrapper, {
+  return React.createElement(StyledFileWrapper, {
     children: renderFileViewer()
   });
 };