@elice/material-exercise 1.231212.0 → 1.231228.0

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

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Hr, Flex, Text, IconButton, Hspace, AntSwitch } from '@elice/blocks';
@@ -14,8 +13,8 @@ import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 //
 //
 //
-var OPTIONS_PER_PAGE = [10, 25, 50];
-var OPTIONS_DELIMITER = [{
+const OPTIONS_PER_PAGE = [10, 25, 50];
+const OPTIONS_DELIMITER = [{
   char: ',',
   label: 'Comma [,]'
 }, {
@@ -34,157 +33,118 @@ var OPTIONS_DELIMITER = [{
 //
 //
 //
-var StyledViewer = styled.div.withConfig({
+const StyledViewer = styled.div.withConfig({
   componentId: "sc-pyv7uu-0"
 })(["flex:1;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;background-color:", ";"], base.color.navy9);
-var StyledViewerTableWrap = styled.div.withConfig({
+const StyledViewerTableWrap = styled.div.withConfig({
   componentId: "sc-pyv7uu-1"
 })(["flex:1;overflow:auto;"]);
-var StyledViewerTable = styled.table.withConfig({
+const StyledViewerTable = styled.table.withConfig({
   componentId: "sc-pyv7uu-2"
 })(["border:none;border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:first-of-type{color:", ";border-left:none;}&:last-of-type{border-right:none;}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], base.color.white, base.color.navy5, base.color.gray5, base.color.navy8, base.color.navy6);
-var StyledViewerFooter = styled.div.withConfig({
+const StyledViewerFooter = styled.div.withConfig({
   componentId: "sc-pyv7uu-3"
 })(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
-var StyledViewerFooterSelect = styled.select.withConfig({
+const StyledViewerFooterSelect = styled.select.withConfig({
   componentId: "sc-pyv7uu-4"
-})(["width:", "rem;border-radius:0.25rem;"], function (props) {
-  return props.width;
-});
-var StyledViewerFooterHr = styled(Hr).withConfig({
+})(["width:", "rem;border-radius:0.25rem;"], props => props.width);
+const StyledViewerFooterHr = styled(Hr).withConfig({
   componentId: "sc-pyv7uu-5"
 })(["height:1rem;"]);
 //
 //
 //
-var FileViewerCsv = function FileViewerCsv(_ref) {
-  var fileurl = _ref.fileurl;
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    csv = _React$useState2[0],
-    setCsv = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    csvHeader = _React$useState4[0],
-    setCsvHeader = _React$useState4[1];
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    csvRecords = _React$useState6[0],
-    setCsvRecords = _React$useState6[1];
-  var _React$useState7 = React.useState('idle'),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    csvStatus = _React$useState8[0],
-    setCsvStatus = _React$useState8[1];
-  var _React$useState9 = React.useState(1),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    page = _React$useState10[0],
-    setPage = _React$useState10[1];
-  var _React$useState11 = React.useState(OPTIONS_PER_PAGE[0]),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    perPage = _React$useState12[0],
-    setPerPage = _React$useState12[1];
-  var _React$useState13 = React.useState(OPTIONS_DELIMITER[0].char),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    delimiter = _React$useState14[0],
-    setDelimiter = _React$useState14[1];
-  var _React$useState15 = React.useState(true),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    isUsingHeader = _React$useState16[0],
-    setUsingHeader = _React$useState16[1];
-  var csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
-  var maxPage = Math.ceil(csvRecordCount / perPage);
-  var tableWrapElRef = React.useRef(null);
+const FileViewerCsv = ({
+  fileurl
+}) => {
+  const [csv, setCsv] = React.useState('');
+  const [csvHeader, setCsvHeader] = React.useState(null);
+  const [csvRecords, setCsvRecords] = React.useState([]);
+  const [csvStatus, setCsvStatus] = React.useState('idle');
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(OPTIONS_PER_PAGE[0]);
+  const [delimiter, setDelimiter] = React.useState(OPTIONS_DELIMITER[0].char);
+  const [isUsingHeader, setUsingHeader] = React.useState(true);
+  const csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
+  const maxPage = Math.ceil(csvRecordCount / perPage);
+  const tableWrapElRef = React.useRef(null);
   //
   // Fetch csv file
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!fileurl) {
       setCsvRecords([]);
       return;
     }
-    var abortCtrl = new AbortController();
+    const abortCtrl = new AbortController();
     setCsvStatus('pending');
     fetch(fileurl, {
       signal: abortCtrl.signal
-    }).then(function (res) {
-      return res.text();
-    }).then(setCsv).then(function () {
-      return setCsvStatus('resolved');
-    }).catch(function (err) {
+    }).then(res => res.text()).then(setCsv).then(() => setCsvStatus('resolved')).catch(err => {
       if (err.name === 'AbortError') {
         return;
       }
       setCsvRecords([]);
       setCsvStatus('rejected');
     });
-    return function () {
+    return () => {
       abortCtrl.abort();
     };
   }, [fileurl]);
   //
   // Parse csv file and save as records
   //
-  React.useEffect(function () {
-    return setCsvRecords(csv.split('\n').filter(Boolean).map(function (row) {
-      return row.split(delimiter);
-    }));
-  }, [csv, delimiter]);
+  React.useEffect(() => setCsvRecords(csv.split('\n').filter(Boolean).map(row => row.split(delimiter))), [csv, delimiter]);
   //
   // Set CSV header.
   //
-  React.useEffect(function () {
-    return setCsvHeader(isUsingHeader ? csvRecords[0] : null);
-  }, [csvRecords, isUsingHeader]);
+  React.useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]);
   //
   // Scroll to top when page changes.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a;
     return (_a = tableWrapElRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
   }, [page]);
   /**
    *
    */
-  var renderViewerTableThead = function renderViewerTableThead() {
+  const renderViewerTableThead = () => {
     if (!csvHeader) {
       return null;
     }
-    var colunms = [''].concat(_toConsumableArray(csvHeader));
-    return React.createElement("thead", null, React.createElement("tr", null, colunms.map(function (col, colIdx) {
-      return React.createElement("th", {
-        key: colIdx
-      }, col);
-    })));
+    const colunms = ['', ...csvHeader];
+    return React.createElement("thead", null, React.createElement("tr", null, colunms.map((col, colIdx) => React.createElement("th", {
+      key: colIdx
+    }, col))));
   };
   /**
    *
    */
-  var renderViewerTableTbody = function renderViewerTableTbody() {
-    var start = (page - 1) * perPage;
-    var end = page * perPage;
-    var records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
-    return React.createElement("tbody", null, records.map(function (row, rowIdx) {
-      var curRecordNo = start + rowIdx + 1;
-      var curRow = [curRecordNo].concat(_toConsumableArray(row));
+  const renderViewerTableTbody = () => {
+    const start = (page - 1) * perPage;
+    const end = page * perPage;
+    const records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
+    return React.createElement("tbody", null, records.map((row, rowIdx) => {
+      const curRecordNo = start + rowIdx + 1;
+      const curRow = [curRecordNo, ...row];
       return React.createElement("tr", {
         key: curRecordNo
-      }, curRow.map(function (col, colIdx) {
-        return React.createElement("td", {
-          key: colIdx,
-          style: {
-            // test whether the column is number, and align right
-            textAlign:
-            // eslint-disable-next-line no-self-compare
-            +col === +col ? 'right' : 'left'
-          }
-        }, col);
-      }));
+      }, curRow.map((col, colIdx) => React.createElement("td", {
+        key: colIdx,
+        style: {
+          // test whether the column is number, and align right
+          textAlign:
+          // eslint-disable-next-line no-self-compare
+          +col === +col ? 'right' : 'left'
+        }
+      }, col)));
     }));
   };
   /**
    *
    */
-  var renderViewerTable = function renderViewerTable() {
+  const renderViewerTable = () => {
     return React.createElement(StyledViewerTableWrap, {
       ref: tableWrapElRef
     }, React.createElement(StyledViewerTable, null, renderViewerTableThead(), renderViewerTableTbody()));
@@ -192,7 +152,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
   /**
    *
    */
-  var renderViewerFooterPagination = function renderViewerFooterPagination() {
+  const renderViewerFooterPagination = () => {
     return React.createElement(Flex, {
       align: "center"
     }, React.createElement(Text, {
@@ -208,9 +168,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
       role: "navy3",
       size: "nano",
       disabled: page <= 1,
-      onClick: function onClick() {
-        return setPage(1);
-      }
+      onClick: () => setPage(1)
     }), React.createElement(Hspace, {
       width: 0.25
     }), React.createElement(IconButton, {
@@ -218,11 +176,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
       role: "navy3",
       size: "nano",
       disabled: page <= 1,
-      onClick: function onClick() {
-        return setPage(function (prevPage) {
-          return prevPage - 1;
-        });
-      }
+      onClick: () => setPage(prevPage => prevPage - 1)
     }), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(Text, {
@@ -235,11 +189,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
       role: "navy3",
       size: "nano",
       disabled: page >= maxPage,
-      onClick: function onClick() {
-        return setPage(function (prevPage) {
-          return prevPage + 1;
-        });
-      }
+      onClick: () => setPage(prevPage => prevPage + 1)
     }), React.createElement(Hspace, {
       width: 0.25
     }), React.createElement(IconButton, {
@@ -247,15 +197,13 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
       role: "navy3",
       size: "nano",
       disabled: page >= maxPage,
-      onClick: function onClick() {
-        return setPage(maxPage);
-      }
+      onClick: () => setPage(maxPage)
     })));
   };
   /**
    *
    */
-  var renderViewerFooterSettings = function renderViewerFooterSettings() {
+  const renderViewerFooterSettings = () => {
     return React.createElement(Flex, {
       align: "center"
     }, React.createElement(Flex, {
@@ -286,16 +234,13 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
     }), React.createElement(StyledViewerFooterSelect, {
       width: 7.5,
       value: delimiter,
-      onChange: function onChange(e) {
-        return setDelimiter(e.target.value);
-      }
-    }, OPTIONS_DELIMITER.map(function (_ref2) {
-      var char = _ref2.char,
-        label = _ref2.label;
-      return React.createElement("option", {
-        value: char
-      }, label);
-    }))), React.createElement(StyledViewerFooterHr, {
+      onChange: e => setDelimiter(e.target.value)
+    }, OPTIONS_DELIMITER.map(({
+      char,
+      label
+    }) => React.createElement("option", {
+      value: char
+    }, label)))), React.createElement(StyledViewerFooterHr, {
       vertical: true,
       color: base.color.navy5
     }), React.createElement(Flex, {
@@ -310,19 +255,15 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
     }), React.createElement(StyledViewerFooterSelect, {
       width: 3,
       value: perPage,
-      onChange: function onChange(e) {
-        return setPerPage(Number(e.target.value));
-      }
-    }, OPTIONS_PER_PAGE.map(function (perPage) {
-      return React.createElement("option", {
-        value: perPage
-      }, perPage);
-    }))));
+      onChange: e => setPerPage(Number(e.target.value))
+    }, OPTIONS_PER_PAGE.map(perPage => React.createElement("option", {
+      value: perPage
+    }, perPage)))));
   };
   /**
    *
    */
-  var renderViewerFooter = function renderViewerFooter() {
+  const renderViewerFooter = () => {
     return React.createElement(StyledViewerFooter, null, renderViewerFooterPagination(), renderViewerFooterSettings());
   };
   //

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

@@ -7,11 +7,12 @@ import '../exercise-shimmer/ExerciseFileTabShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
-var StyledImage = styled.img.withConfig({
+const StyledImage = styled.img.withConfig({
   componentId: "sc-1bnx7lz-0"
 })(["max-width:100%;max-height:100%;height:auto;width:auto;"]);
-var FileViewerImage = function FileViewerImage(_ref) {
-  var fileurl = _ref.fileurl;
+const FileViewerImage = ({
+  fileurl
+}) => {
   if (!fileurl) {
     return React.createElement(ExerciseFileShimmer, null);
   }

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

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import NotebookPreview from '@nteract/notebook-preview';
 import styled from 'styled-components';
@@ -8,24 +7,18 @@ import '../exercise-shimmer/ExerciseFileTabShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
-var StyledNotebookWrapper = styled.div.withConfig({
+const StyledNotebookWrapper = styled.div.withConfig({
   componentId: "sc-1fmae1h-0"
 })(["width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}"]);
-var FileViewerIpynb = function FileViewerIpynb(_ref) {
-  var fileurl = _ref.fileurl;
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    content = _React$useState2[0],
-    setContent = _React$useState2[1];
-  React.useEffect(function () {
+const FileViewerIpynb = ({
+  fileurl
+}) => {
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.text();
-    }).then(JSON.parse).then(setContent).catch(function (err) {
-      return console.error(err);
-    });
+    fetch(fileurl).then(res => res.text()).then(JSON.parse).then(setContent).catch(err => console.error(err));
   }, [fileurl]);
   //
   //

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

@@ -9,35 +9,32 @@ import FileIcon from '../file-icon/FileIcon.js';
 import phrasesEn from './locales/nonViewable.en.json.js';
 import phrasesKo from './locales/nonViewable.ko.json.js';
 
-var StyledContainer = styled.div.withConfig({
+const StyledContainer = styled.div.withConfig({
   componentId: "sc-l8149y-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
-var StyledContainerContent = styled.div.withConfig({
+const StyledContainerContent = styled.div.withConfig({
   componentId: "sc-l8149y-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center;"]);
-var StyledButton = styled(Button).withConfig({
+const StyledButton = styled(Button).withConfig({
   componentId: "sc-l8149y-2"
 })(["display:block;margin:0 auto;"]);
-var StyledButtonsWrap = styled.div.withConfig({
+const StyledButtonsWrap = styled.div.withConfig({
   componentId: "sc-l8149y-3"
 })(["text-align:center;> *{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"]);
-var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    onTextViewerClick = _ref.onTextViewerClick;
+const FileViewerNonViewable = ({
+  filename,
+  fileurl,
+  onTextViewerClick
+}) => {
   /**
    * Handle download button click.
    */
-  var handleDownloadClick = function handleDownloadClick() {
+  const handleDownloadClick = () => {
     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();
       }
@@ -46,7 +43,7 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
   /**
    * Download button.
    */
-  var renderFileViewerDownloadButton = function renderFileViewerDownloadButton() {
+  const renderFileViewerDownloadButton = () => {
     if (!fileurl) {
       return null;
     }
@@ -63,7 +60,7 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
   /**
    * Link for enable text editor.
    */
-  var renderFileViewerTextEditorLink = function renderFileViewerTextEditorLink() {
+  const renderFileViewerTextEditorLink = () => {
     if (!fileurl || typeof onTextViewerClick !== 'function') {
       return null;
     }
@@ -103,7 +100,7 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
 //
 //
 //
-var FileViewerNonViewable$1 = (function (props) {
+var FileViewerNonViewable$1 = (props => {
   return React.createElement(MaterialIntlProvider, {
     locale: props.locale,
     phrases: {

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

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
@@ -14,26 +13,19 @@ import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import MonacoEditorLazy from '../monaco-editor/MonacoEditorLazy.js';
 import '../monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
-import '../monaco-editor/constants/monaco/preferences.js';
 
-var FileViewerText = function FileViewerText(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    locale = _ref.locale;
-  var preference = useRecoilValue(exerciseEditorPreferenceState);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    content = _React$useState2[0],
-    setContent = _React$useState2[1];
-  React.useEffect(function () {
+const FileViewerText = ({
+  filename,
+  fileurl,
+  locale
+}) => {
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.text();
-    }).then(setContent).catch(function (err) {
-      return console.error(err);
-    });
+    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
   }, [fileurl]);
   //
   //

package/es/components/shared/material-modal/MaterialModal.js

@@ -4,17 +4,18 @@ import { BorderlessDialog } from '@elice/blocks';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { StyledModalWrapper, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledCloseButton } from './MaterialModal.styled.js';
 
-var MaterialModal = function MaterialModal(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    footer = _ref.footer,
-    onHide = _ref.onHide;
-  useKeyPressEvent('Escape', function () {
+const MaterialModal = ({
+  children,
+  title,
+  footer,
+  onHide
+}) => {
+  useKeyPressEvent('Escape', () => {
     if (typeof onHide === 'function') {
       onHide();
     }
   });
-  var renderCloseButton = function renderCloseButton() {
+  const renderCloseButton = () => {
     if (!onHide) {
       return null;
     }

package/es/components/shared/material-modal/MaterialModal.styled.js

@@ -2,19 +2,19 @@ import { Text, Flex, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledModalWrapper = styled.div.withConfig({
+const StyledModalWrapper = styled.div.withConfig({
   componentId: "sc-1ej7kso-0"
 })(["position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", ";border-radius:0.375rem;"], base.color.gray8);
-var StyledModalHeader = styled(Text).withConfig({
+const StyledModalHeader = styled(Text).withConfig({
   componentId: "sc-1ej7kso-1"
 })(["flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", ";text-align:center;color:", ";"], base.color.navy9, base.color.white);
-var StyledModalBody = styled.div.withConfig({
+const StyledModalBody = styled.div.withConfig({
   componentId: "sc-1ej7kso-2"
 })(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
-var StyledModalFooter = styled(Flex).withConfig({
+const StyledModalFooter = styled(Flex).withConfig({
   componentId: "sc-1ej7kso-3"
 })(["flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;"], base.color.navy9);
-var StyledCloseButton = styled(IconButton).withConfig({
+const StyledCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1ej7kso-4"
 })(["position:absolute;top:0;right:0;color:", " !important;"], base.color.gray4);