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

package/es/components/material-exercise/context/subjects.js

@@ -3,18 +3,18 @@ import { Subject } from 'rxjs';
 /**
  * Content change request to code editor.
  */
-var exerciseFileEditorContentChange$ = new Subject();
+const exerciseFileEditorContentChange$ = new Subject();
 /**
  * Save action emitted by file editor.
  */
-var exerciseFileEditorSaveAction$ = new Subject();
+const exerciseFileEditorSaveAction$ = new Subject();
 /**
  * Send text request to runner stdio.
  */
-var exerciseRunnerTextSend$ = new Subject();
+const exerciseRunnerTextSend$ = new Subject();
 /**
  * Open runner rooms.
  */
-var exerciseRunnerRoomsOpen$ = new Subject();
+const exerciseRunnerRoomsOpen$ = new Subject();
 
 export { exerciseFileEditorContentChange$, exerciseFileEditorSaveAction$, exerciseRunnerRoomsOpen$, exerciseRunnerTextSend$ };

package/es/components/material-exercise/context/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { MaterialCommponentCommonProps } from '@elice/material-shared-utils';
 import type { GetOrgMaterialExerciseExerciseRunningListResponses, PostOrgMaterialExerciseExerciseRunningSubmitResponses } from '@elice/types';
 import type { MonacoEditorApis } from "../../shared/monaco-editor";
 import type { CodeHelperError } from "../../../utils";
@@ -36,7 +37,7 @@ export type MaterialExerciseCommonAPiOpenRunnerRooms = () => void;
  * [External]
  * Common exposed props for `MaterialExercise*` components.
  */
-export interface MaterialExerciseCommonProps {
+export interface MaterialExerciseCommonProps extends MaterialCommponentCommonProps {
     /**
      * Material Exercise ID.
      */
@@ -59,7 +60,6 @@ export interface MaterialExerciseCommonProps {
      * Is editor in readonly mode?
      */
     readOnlyEditor?: boolean;
-    locale?: string;
     exerciseImageEmptyOptions?: MaterialExerciseCommonPropExerciseImageEmptyOptions;
     onMultiLangLanguageChange?: MaterialExerciseCommonPropOnMultiLangLanguageChange;
     onReferenceDocsToggle?: () => void;

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -1,4 +1,3 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Button, Text } from '@elice/blocks';
 import { IntlComponentBuilder } from '@elice/intl';
@@ -31,131 +30,115 @@ import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
 
-var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
-  var onHide = _ref.onHide,
-    onLoadVersionButtonClick = _ref.onLoadVersionButtonClick,
-    __intl = _ref.__intl;
-  var _React$useContext = React.useContext(ExerciseContext),
-    exerciseRoomId = _React$useContext.exerciseRoomId;
-  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  var preference = useRecoilValue(exerciseEditorPreferenceState);
-  var _useUsercodeHistory = useUsercodeHistory(exerciseRoomId, activeFilename),
-    doc = _useUsercodeHistory.doc,
-    ops = _useUsercodeHistory.ops,
-    version = _useUsercodeHistory.version,
-    latestVersion = _useUsercodeHistory.latestVersion,
-    hasMoreVersion = _useUsercodeHistory.hasMoreVersion,
-    changeVersion = _useUsercodeHistory.changeVersion,
-    loadMoreVersions = _useUsercodeHistory.loadMoreVersions;
+const ExerciseCodeHistory = ({
+  onHide,
+  onLoadVersionButtonClick,
+  __intl
+}) => {
+  const {
+    exerciseRoomId
+  } = React.useContext(ExerciseContext);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const {
+    doc,
+    ops,
+    version,
+    latestVersion,
+    hasMoreVersion,
+    changeVersion,
+    loadMoreVersions
+  } = useUsercodeHistory(exerciseRoomId, activeFilename);
   /**
    *
    */
-  var renderVersionList = function renderVersionList() {
-    return jsxs(ExerciseVersionList, {
-      children: [ops.map(function (op) {
-        return jsx(ExerciseVersionListItem, {
-          selected: version === op.version,
-          onClick: function onClick() {
-            changeVersion(op.version);
-          },
-          children: jsx(Text, {
-            role: "gray3",
-            size: "small",
-            children: __intl.formatMessage({
-              id: 'exerciseCodeHistory.op.version'
-            }, {
-              version: op.version,
-              datetime: dayjs(op.createdDatetime).format('YYYY.M.DD hh:mm a')
-            })
-          })
-        }, op.version);
-      }), hasMoreVersion ? jsx(ExerciseVersionListItem, {
-        onClick: loadMoreVersions,
-        style: {
-          justifyContent: 'center'
-        },
-        children: jsx(Text, {
-          role: "white",
-          size: "small",
-          children: __intl.formatMessage({
-            id: 'exerciseCodeHistory.button.load.more'
-          })
-        })
-      }) : null]
-    });
-  };
+  const renderVersionList = () => React.createElement(ExerciseVersionList, null, ops.map(op => React.createElement(ExerciseVersionListItem, {
+    key: op.version,
+    selected: version === op.version,
+    onClick: () => {
+      changeVersion(op.version);
+    }
+  }, React.createElement(Text, {
+    role: "gray3",
+    size: "small"
+  }, __intl.formatMessage({
+    id: 'exerciseCodeHistory.op.version'
+  }, {
+    version: op.version,
+    datetime: dayjs(op.createdDatetime).format('YYYY.M.DD hh:mm a')
+  })))), hasMoreVersion ? React.createElement(ExerciseVersionListItem, {
+    onClick: loadMoreVersions,
+    style: {
+      justifyContent: 'center'
+    }
+  }, React.createElement(Text, {
+    role: "white",
+    size: "small"
+  }, __intl.formatMessage({
+    id: 'exerciseCodeHistory.button.load.more'
+  }))) : null);
   /**
    *
    */
-  var rednerVersionControlColumn = function rednerVersionControlColumn() {
-    return jsxs(StyledVersionsWrapper, {
-      children: [jsx(StyledVersionRangeInputWrapper, {
-        children: jsx(StyledVersionRangeInput, {
-          type: "range",
-          min: latestVersion ? latestVersion - ops.length + 1 : 0,
-          max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
-          value: version !== null && version !== void 0 ? version : 0,
-          onChange: function onChange(e) {
-            changeVersion(parseInt(e.target.value, 10));
-          }
-        })
-      }), renderVersionList()]
-    });
+  const rednerVersionControlColumn = () => {
+    return React.createElement(StyledVersionsWrapper, null, React.createElement(StyledVersionRangeInputWrapper, null, React.createElement(StyledVersionRangeInput, {
+      type: "range",
+      min: latestVersion ? latestVersion - ops.length + 1 : 0,
+      max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
+      value: version !== null && version !== void 0 ? version : 0,
+      onChange: e => {
+        changeVersion(parseInt(e.target.value, 10));
+      }
+    })), renderVersionList());
   };
   /**
    *
    */
-  var renderEditorColumn = function renderEditorColumn() {
+  const renderEditorColumn = () => {
     if (!activeFilename) {
       return null;
     }
-    var uniqueFilePath = "code-history/".concat(exerciseRoomId, "/v").concat(version !== null && version !== void 0 ? version : 0);
-    var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
-    return jsxs(StyledEditorWrapper, {
-      children: [jsx(StyledFileNameBox, {
-        role: "white",
-        children: activeFilename
-      }), jsx(MonacoEditorLazy, {
-        defaultValue: doc,
-        filename: editorFilename,
-        preference: Object.assign(Object.assign({}, preference), {
-          readOnly: true,
-          scrollBeyondLastLine: false
-        })
-      }, editorFilename)]
-    });
+    const uniqueFilePath = `code-history/${exerciseRoomId}/v${version !== null && version !== void 0 ? version : 0}`;
+    const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+    return React.createElement(StyledEditorWrapper, null, React.createElement(StyledFileNameBox, {
+      role: "white"
+    }, activeFilename), React.createElement(MonacoEditorLazy, {
+      key: editorFilename,
+      defaultValue: doc,
+      filename: editorFilename,
+      preference: Object.assign(Object.assign({}, preference), {
+        readOnly: true,
+        scrollBeyondLastLine: false
+      })
+    }));
   };
   /**
    *
    */
-  var renderFooterButton = function renderFooterButton() {
+  const renderFooterButton = () => {
     if (typeof onLoadVersionButtonClick !== 'function') {
       return;
     }
-    return jsx(Button, {
+    return React.createElement(Button, {
       size: "small",
       role: "primary",
-      onClick: function onClick() {
+      onClick: () => {
         onLoadVersionButtonClick(doc);
-      },
-      children: __intl.formatMessage({
-        id: 'exerciseCodeHistory.button.load.selectedVersions'
-      })
-    });
+      }
+    }, __intl.formatMessage({
+      id: 'exerciseCodeHistory.button.load.selectedVersions'
+    }));
   };
   //
   //
   //
-  return jsx(MaterialModal, {
+  return React.createElement(MaterialModal, {
     title: __intl.formatMessage({
       id: 'exerciseCodeHistory.title'
     }),
     onHide: onHide,
-    footer: renderFooterButton(),
-    children: jsxs(StyledModalContent, {
-      children: [rednerVersionControlColumn(), renderEditorColumn()]
-    })
-  });
+    footer: renderFooterButton()
+  }, React.createElement(StyledModalContent, null, rednerVersionControlColumn(), renderEditorColumn()));
 };
 //
 //

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.js

@@ -2,24 +2,24 @@ import { Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled, { css } from 'styled-components';
 
-var cssInputRangeTrack = css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
-var cssInputRangeThumb = css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], base.color.primary6);
-var StyledModalContent = styled(Flex).withConfig({
+const cssInputRangeTrack = css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
+const cssInputRangeThumb = css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], base.color.primary6);
+const StyledModalContent = styled(Flex).withConfig({
   componentId: "sc-1auppml-0"
 })(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
-var StyledVersionRangeInput = styled.input.withConfig({
+const StyledVersionRangeInput = styled.input.withConfig({
   componentId: "sc-1auppml-1"
 })(["-webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", ";", ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", ";}&:focus::-webkit-slider-runnable-track{background:rgba(", ",0.05);}&::-moz-range-track{background:", ";", ";}&::-moz-range-thumb{", ";}"], base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, base.color.navy9, base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
-var StyledVersionsWrapper = styled(Flex).withConfig({
+const StyledVersionsWrapper = styled(Flex).withConfig({
   componentId: "sc-1auppml-2"
 })(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], base.color.navy9);
-var StyledVersionRangeInputWrapper = styled(Flex).withConfig({
+const StyledVersionRangeInputWrapper = styled(Flex).withConfig({
   componentId: "sc-1auppml-3"
 })(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], base.color.navy9);
-var StyledEditorWrapper = styled(Flex).withConfig({
+const StyledEditorWrapper = styled(Flex).withConfig({
   componentId: "sc-1auppml-4"
 })(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
-var StyledFileNameBox = styled(Text).withConfig({
+const StyledFileNameBox = styled(Text).withConfig({
   componentId: "sc-1auppml-5"
 })(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], base.color.navy9);
 

package/es/components/material-exercise/exercise-file/ExerciseFile.js

@@ -1,4 +1,3 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Icon, Vspace, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -25,7 +24,7 @@ import 'unicount';
 import ExerciseFileEditor from '../exercise-file-editor/ExerciseFileEditor.js';
 import ExerciseFileViewer from '../exercise-file-viewer/ExerciseFileViewer.js';
 
-var StyledExerciseFile = styled.div.withConfig({
+const StyledExerciseFile = styled.div.withConfig({
   componentId: "sc-16zd16z-0"
 })(["width:100%;height:100%;background-color:", ";"], base.color.navy9);
 /**
@@ -33,48 +32,51 @@ var StyledExerciseFile = styled.div.withConfig({
  * - `exercise-file-editor` : code editor for editable files
  * - `exercise-file-viewer` : file viewer for non-editable files
  */
-var ExerciseFile = function ExerciseFile() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    exerciseRoomId = _React$useContext.exerciseRoomId;
-  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  var isFileEditable = useExerciseFileEditable(activeFilename);
+const ExerciseFile = () => {
+  const {
+    exerciseRoomId
+  } = React.useContext(ExerciseContext);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const isFileEditable = useExerciseFileEditable(activeFilename);
   //
   //
   //
-  return jsx(StyledExerciseFile, {
-    children: function () {
+  return React.createElement(StyledExerciseFile, {
+    children: (() => {
       if (!exerciseRoomId) {
         return null;
       }
       // empty
       if (!activeFilename) {
-        return jsxs(Flex, {
+        return React.createElement(Flex, {
           column: true,
           width: "100%",
           height: "100%",
           align: "center",
-          justify: "center",
-          children: [jsx(Icon, {
-            icon: eilMaterialTypeExercise,
-            color: base.color.primary4,
-            size: "jumbo"
-          }), jsx(Vspace, {
-            height: 1
-          }), jsx(Text, {
-            role: "white",
-            children: "\uC5F4\uB9B0 \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
-          })]
-        });
+          justify: "center"
+        }, React.createElement(Icon, {
+          icon: eilMaterialTypeExercise,
+          color: base.color.primary4,
+          size: "jumbo"
+        }), React.createElement(Vspace, {
+          height: 1
+        }), React.createElement(Text, {
+          role: "white"
+        }, "\uC5F4\uB9B0 \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."));
       }
       // static (non-editable / e.g. image, jupyter notebook, csv, ...) file
       if (!isFileEditable) {
-        return jsx(ExerciseFileViewer, {}, activeFilename);
+        return React.createElement(ExerciseFileViewer, {
+          key: activeFilename
+        });
       }
       // code (editable) file
       else {
-        return jsx(ExerciseFileEditor, {}, activeFilename);
+        return React.createElement(ExerciseFileEditor, {
+          key: activeFilename
+        });
       }
-    }()
+    })()
   });
 };