@elice/material-exercise 1.230328.0 → 1.230418.0

package/cjs/components/material-exercise/context/recoilTypes.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 //
 // =============== preview ===============
 //
-
 /**
  *
  */
 exports.ExercisePreviewType = void 0;
-
 (function (ExercisePreviewType) {
   ExercisePreviewType[ExercisePreviewType["None"] = 0] = "None";
   ExercisePreviewType[ExercisePreviewType["NoVnc"] = 1] = "NoVnc";
@@ -19,10 +17,7 @@ exports.ExercisePreviewType = void 0;
 /**
  *
  */
-
-
 exports.ExercisePreviewDisplayMode = void 0;
-
 (function (ExercisePreviewDisplayMode) {
   ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["Mini"] = 0] = "Mini";
   ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["SideBySide"] = 1] = "SideBySide";

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

@@ -7,18 +7,15 @@ var rxjs = require('rxjs');
 /**
  * Content change request to code editor.
  */
-
-const exerciseFileEditorContentChange$ = new rxjs.Subject();
+var exerciseFileEditorContentChange$ = new rxjs.Subject();
 /**
  * Save action emitted by file editor.
  */
-
-const exerciseFileEditorSaveAction$ = new rxjs.Subject();
+var exerciseFileEditorSaveAction$ = new rxjs.Subject();
 /**
  * Send text request to runner stdio.
  */
-
-const exerciseRunnerTextSend$ = new rxjs.Subject();
+var exerciseRunnerTextSend$ = new rxjs.Subject();
 
 exports.exerciseFileEditorContentChange$ = exerciseFileEditorContentChange$;
 exports.exerciseFileEditorSaveAction$ = exerciseFileEditorSaveAction$;

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.d.ts

@@ -3,5 +3,5 @@ export interface ExerciseCodeHistoryProps {
     onHide?: () => void;
     onLoadVersionButtonClick?: (doc: string) => void;
 }
-declare const ExerciseCodeHistory: React.VFC<ExerciseCodeHistoryProps>;
-export default ExerciseCodeHistory;
+declare const _default: React.VFC<ExerciseCodeHistoryProps>;
+export default _default;

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

@@ -1,6 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
+var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var dayjs = require('dayjs');
 var recoil = require('recoil');
@@ -28,6 +31,9 @@ require('lodash/debounce');
 require('ot-text-unicode');
 require('random-words');
 require('unicount');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
 var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -35,61 +41,64 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 
-const ExerciseCodeHistory = ({
-  onHide,
-  onLoadVersionButtonClick
-}) => {
-  const {
-    exerciseRoomId
-  } = React__default["default"].useContext(context.ExerciseContext);
-  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  const preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
-  const {
-    doc,
-    ops,
-    version,
-    latestVersion,
-    hasMoreVersion,
-    changeVersion,
-    loadMoreVersions
-  } = useUsercodeHistory.useUsercodeHistory(exerciseRoomId, activeFilename);
+var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
+  var onHide = _ref.onHide,
+    onLoadVersionButtonClick = _ref.onLoadVersionButtonClick;
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    exerciseRoomId = _React$useContext.exerciseRoomId;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
+  var _useUsercodeHistory = 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 renderVersionList = () => React__default["default"].createElement(ExerciseVersionList, null, ops.map(op => React__default["default"].createElement(ExerciseVersionListItem, {
-    key: op.version,
-    selected: version === op.version,
-    onClick: () => {
-      changeVersion(op.version);
-    }
-  }, React__default["default"].createElement(blocks.Text, {
-    role: "gray3",
-    size: "small"
-  }, "\uBC84\uC804 ", op.version), "\u00A0", React__default["default"].createElement(blocks.Text, {
-    role: "gray3",
-    size: "small"
-  }, dayjs__default["default"](op.createdDatetime).format('YYYY.M.DD HH:mm')))), hasMoreVersion ? React__default["default"].createElement(ExerciseVersionListItem, {
-    onClick: loadMoreVersions,
-    style: {
-      justifyContent: 'center'
-    }
-  }, React__default["default"].createElement(blocks.Text, {
-    role: "white",
-    size: "small"
-  }, "\uB354 \uBD88\uB7EC\uC624\uAE30")) : null);
+  var renderVersionList = function renderVersionList() {
+    return React__default["default"].createElement(ExerciseVersionList["default"], null, ops.map(function (op) {
+      return React__default["default"].createElement(ExerciseVersionListItem["default"], {
+        key: op.version,
+        selected: version === op.version,
+        onClick: function onClick() {
+          changeVersion(op.version);
+        }
+      }, React__default["default"].createElement(blocks.Text, {
+        role: "gray3",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'exerciseCodeHistory.op.version'
+      }, {
+        version: op.version,
+        datetime: dayjs__default["default"](op.createdDatetime).format('YYYY.M.DD HH:mm')
+      })));
+    }), hasMoreVersion ? React__default["default"].createElement(ExerciseVersionListItem["default"], {
+      onClick: loadMoreVersions,
+      style: {
+        justifyContent: 'center'
+      }
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'exerciseCodeHistory.button.load.more'
+    }))) : null);
+  };
   /**
    *
    */
-
-
-  const rednerVersionControlColumn = () => {
+  var rednerVersionControlColumn = function rednerVersionControlColumn() {
     return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionsWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionRangeInputWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.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 => {
+      onChange: function onChange(e) {
         changeVersion(parseInt(e.target.value, 10));
       }
     })), renderVersionList());
@@ -97,18 +106,15 @@ const ExerciseCodeHistory = ({
   /**
    *
    */
-
-
-  const renderEditorColumn = () => {
+  var renderEditorColumn = function renderEditorColumn() {
     if (!activeFilename) {
       return null;
     }
-
-    const uniqueFilePath = `code-history/${exerciseRoomId}/v${version !== null && version !== void 0 ? version : 0}`;
-    const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+    var uniqueFilePath = "code-history/".concat(exerciseRoomId, "/v").concat(version !== null && version !== void 0 ? version : 0);
+    var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
     return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledEditorWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledFileNameBox, {
       role: "white"
-    }, activeFilename), React__default["default"].createElement(MonacoEditorLazy, {
+    }, activeFilename), React__default["default"].createElement(MonacoEditorLazy["default"], {
       key: editorFilename,
       defaultValue: doc,
       filename: editorFilename,
@@ -121,30 +127,37 @@ const ExerciseCodeHistory = ({
   /**
    *
    */
-
-
-  const renderFooterButton = () => {
+  var renderFooterButton = function renderFooterButton() {
     if (typeof onLoadVersionButtonClick !== 'function') {
       return;
     }
-
     return React__default["default"].createElement(blocks.Button, {
       size: "small",
       role: "primary",
-      onClick: () => {
+      onClick: function onClick() {
         onLoadVersionButtonClick(doc);
       }
-    }, "\uC120\uD0DD \uBC84\uC804 \uBD88\uB7EC\uC624\uAE30");
-  }; //
+    }, intl.formatMessage({
+      id: 'exerciseCodeHistory.button.load.selectedVersions'
+    }));
+  };
   //
   //
-
-
-  return React__default["default"].createElement(MaterialModal, {
-    title: "\uCF54\uB4DC \uC218\uC815 \uC774\uB825",
+  //
+  return React__default["default"].createElement(MaterialModal["default"], {
+    title: intl.formatMessage({
+      id: 'exerciseCodeHistory.title'
+    }),
     onHide: onHide,
     footer: renderFooterButton()
   }, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledModalContent, null, rednerVersionControlColumn(), renderEditorColumn()));
-}; //
-
-module.exports = ExerciseCodeHistory;
+};
+//
+//
+//
+var ExerciseCodeHistory$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseCodeHistory, {
+  en: en["default"],
+  ko: ko["default"]
+});
+
+exports["default"] = ExerciseCodeHistory$1;

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

@@ -10,24 +10,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const cssInputRangeTrack = styled.css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
-const cssInputRangeThumb = styled.css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], designTokens.base.color.primary6);
-const StyledModalContent = styled__default["default"](blocks.Flex).withConfig({
+var cssInputRangeTrack = styled.css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
+var cssInputRangeThumb = styled.css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], designTokens.base.color.primary6);
+var StyledModalContent = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-1auppml-0"
 })(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
-const StyledVersionRangeInput = styled__default["default"].input.withConfig({
+var StyledVersionRangeInput = styled__default["default"].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{", ";}"], designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, designTokens.base.color.navy9, designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
-const StyledVersionsWrapper = styled__default["default"](blocks.Flex).withConfig({
+var StyledVersionsWrapper = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-1auppml-2"
 })(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], designTokens.base.color.navy9);
-const StyledVersionRangeInputWrapper = styled__default["default"](blocks.Flex).withConfig({
+var StyledVersionRangeInputWrapper = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-1auppml-3"
 })(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
-const StyledEditorWrapper = styled__default["default"](blocks.Flex).withConfig({
+var StyledEditorWrapper = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-1auppml-4"
 })(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
-const StyledFileNameBox = styled__default["default"](blocks.Text).withConfig({
+var StyledFileNameBox = styled__default["default"](blocks.Text).withConfig({
   componentId: "sc-1auppml-5"
 })(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
 

package/cjs/components/material-exercise/exercise-code-history/locales/en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesEn = {"exerciseCodeHistory.button.load.more":"Load more","exerciseCodeHistory.button.load.selectedVersions":"Load selected versions","exerciseCodeHistory.op.version":"Version {version} {datetime}","exerciseCodeHistory.title":"Code revision history"};
+
+exports["default"] = phrasesEn;

package/cjs/components/material-exercise/exercise-code-history/locales/ko.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesKo = {"exerciseCodeHistory.button.load.more":"더 불러오기","exerciseCodeHistory.button.load.selectedVersions":"선택 버전 불러오기","exerciseCodeHistory.op.version":"버전 {version} {datetime}","exerciseCodeHistory.title":"코드 수정 이력"};
+
+exports["default"] = phrasesKo;

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -31,7 +33,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledExerciseFile = styled__default["default"].div.withConfig({
+var StyledExerciseFile = styled__default["default"].div.withConfig({
   componentId: "sc-16zd16z-0"
 })(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
 /**
@@ -39,23 +41,20 @@ const StyledExerciseFile = styled__default["default"].div.withConfig({
  * - `exercise-file-editor` : code editor for editable files
  * - `exercise-file-viewer` : file viewer for non-editable files
  */
-
-const ExerciseFile = () => {
-  const {
-    exerciseRoomId
-  } = React__default["default"].useContext(context.ExerciseContext);
-  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  const isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename); //
+var ExerciseFile = function ExerciseFile() {
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    exerciseRoomId = _React$useContext.exerciseRoomId;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  //
   //
   //
-
   return React__default["default"].createElement(StyledExerciseFile, {
-    children: (() => {
+    children: function () {
       if (!exerciseRoomId) {
         return null;
-      } // empty
-
-
+      }
+      // empty
       if (!activeFilename) {
         return React__default["default"].createElement(blocks.Flex, {
           column: true,
@@ -72,21 +71,21 @@ const ExerciseFile = () => {
         }), React__default["default"].createElement(blocks.Text, {
           role: "white"
         }, "\uC5F4\uB9B0 \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."));
-      } // static (non-editable / e.g. image, jupyter notebook, csv, ...) file
-
-
+      }
+      // static (non-editable / e.g. image, jupyter notebook, csv, ...) file
       if (!isFileEditable) {
-        return React__default["default"].createElement(ExerciseFileViewer, {
+        return React__default["default"].createElement(ExerciseFileViewer["default"], {
           key: activeFilename
         });
-      } // code (editable) file
+      }
+      // code (editable) file
       else {
-        return React__default["default"].createElement(ExerciseFileEditor, {
+        return React__default["default"].createElement(ExerciseFileEditor["default"], {
           key: activeFilename
         });
       }
-    })()
+    }()
   });
 };
 
-module.exports = ExerciseFile;
+exports["default"] = ExerciseFile;