@elice/material-exercise 1.230621.0 → 1.230629.0

package/cjs/components/material-exercise/MaterialExercise.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { MaterialExerciseCommonApis, MaterialExerciseCommonProps } from './context';
-export declare type MaterialExerciseProps = MaterialExerciseCommonProps;
+export interface MaterialExerciseProps extends MaterialExerciseCommonProps {
+    locale?: string;
+}
 export declare type MaterialExerciseApis = MaterialExerciseCommonApis;
-declare const _default: React.ForwardRefExoticComponent<Pick<MaterialExerciseCommonProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "key" | keyof MaterialExerciseCommonProps> & React.RefAttributes<MaterialExerciseCommonApis>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<MaterialExerciseProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "key" | keyof MaterialExerciseProps> & React.RefAttributes<MaterialExerciseCommonApis>>;
 export default _default;

package/cjs/components/material-exercise/MaterialExercise.i18n.d.ts

@@ -0,0 +1,4 @@
+export declare const en: {
+    'materialExercise.button.referenceDocs': string;
+};
+export declare const ko: typeof en;

package/cjs/components/material-exercise/MaterialExercise.i18n.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var en = {
+  'materialExercise.button.referenceDocs': 'Reference Docs'
+};
+var ko = {
+  'materialExercise.button.referenceDocs': '언어 레퍼런스'
+};
+
+exports.en = en;
+exports.ko = ko;

package/cjs/components/material-exercise/MaterialExercise.js

@@ -2,15 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
+var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
 var stylesheets = require('../../constants/stylesheets.js');
 var ExerciseFileTabsFileTreeButton = require('./exercise-file-tabs/ExerciseFileTabsFileTreeButton.js');
 var recoil$1 = require('./context/recoil.js');
-require('./context/context.js');
+var context = require('./context/context.js');
 var recoilTypes = require('./context/recoilTypes.js');
 var subjects = require('./context/subjects.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
@@ -25,6 +28,7 @@ var ExercisePreview = require('./exercise-preview/ExercisePreview.js');
 var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
 var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
 var MaterialExercise_styled = require('./MaterialExercise.styled.js');
+var MaterialExercise_i18n = require('./MaterialExercise.i18n.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +41,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Material exercise.
  */
 var MaterialExercise = React.forwardRef(function (props, ref) {
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    onReferenceDocsToggle = _React$useContext.onReferenceDocsToggle;
   var _useRecoilValue = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState),
     width = _useRecoilValue.width,
     height = _useRecoilValue.height;
@@ -69,11 +76,35 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
   var renderExerciseFileTabs = function renderExerciseFileTabs() {
     return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabsWrap, null, React__default["default"].createElement(ExerciseFileTabsLazy["default"], null));
   };
+  /**
+   * reference docs toggle button
+   */
+  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
+    if (typeof onReferenceDocsToggle !== 'function') {
+      return null;
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Button, {
+      size: "micro",
+      role: "navy3",
+      style: {
+        width: '100%'
+      },
+      onClick: onReferenceDocsToggle
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilClassroom
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), intl.formatMessage({
+      id: 'materialExercise.button.referenceDocs'
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }));
+  };
   /**
    * Menu
    */
   var renderExerciseMenu = function renderExerciseMenu() {
-    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, React__default["default"].createElement(ExerciseMultilangDropdownLazy["default"], null), React__default["default"].createElement(ExerciseMenu["default"], null));
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React__default["default"].createElement(ExerciseMultilangDropdownLazy["default"], null), React__default["default"].createElement(ExerciseMenu["default"], null));
   };
   /**
    * Code editor and file viewer
@@ -144,10 +175,17 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
 //
 //
 //
-var MaterialExercise$1 = materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(ExerciseProvider["default"], Object.assign({}, props), React__default["default"].createElement(MaterialExercise, Object.assign({}, props, {
+var MaterialExercise$1 = materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (_a, ref) {
+  var _a$locale = _a.locale,
+    locale = _a$locale === void 0 ? 'en' : _a$locale,
+    props = tslib.__rest(_a, ["locale"]);
+  return React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in MaterialExercise_i18n ? MaterialExercise_i18n[locale] : MaterialExercise_i18n.en
+  }, React__default["default"].createElement(ExerciseProvider["default"], Object.assign({}, props), React__default["default"].createElement(MaterialExercise, Object.assign({}, props, {
     ref: ref
-  })));
+  }))));
 }), apiClient.config.init, {
   overrideRecoilScope: true
 });

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

@@ -56,6 +56,8 @@ export interface MaterialExerciseCommonProps extends MaterialCommponentCommonPro
      */
     readOnlyEditor?: boolean;
     exerciseImageEmptyOptions?: MaterialExerciseCommonPropExerciseImageEmptyOptions;
+    onMultiLangLanguageChange?: MaterialExerciseCommonPropOnMultiLangLanguageChange;
+    onReferenceDocsToggle?: () => void;
     onCodeHelpRequest?: MaterialExerciseCommonPropOnCodeHelpRequest;
     onDefaultExerciseRoomIdSet?: MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet;
     onExerciseRoomIdChange?: MaterialExerciseCommonPropOnExerciseRoomIdChange;
@@ -78,6 +80,10 @@ export declare type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
     instruction?: string;
     openFileContent?: string;
 }) => void;
+/**
+ * On multi language change.
+ */
+export declare type MaterialExerciseCommonPropOnMultiLangLanguageChange = (language: string) => void;
 /**
  * On default exercise room ID set.
  */

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -19,7 +19,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
   var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId;
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    onMultiLangLanguageChange = _React$useContext.onMultiLangLanguageChange;
   var multilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(materialExerciseId));
   var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseMultilangEnvironmentState({
       materialExerciseId: materialExerciseId,
@@ -41,9 +42,12 @@ var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
     placement: "bottom-end",
     value: multilangEnvironment.language,
     onChange: function onChange(language) {
-      return setMultilangEnvironment({
+      setMultilangEnvironment({
         language: language
       });
+      if (typeof onMultiLangLanguageChange === 'function') {
+        onMultiLangLanguageChange(language);
+      }
     }
   }, Object.keys(multilangLanguages).map(function (lang) {
     return React__default["default"].createElement("option", {

package/es/components/material-exercise/MaterialExercise.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { MaterialExerciseCommonApis, MaterialExerciseCommonProps } from './context';
-export declare type MaterialExerciseProps = MaterialExerciseCommonProps;
+export interface MaterialExerciseProps extends MaterialExerciseCommonProps {
+    locale?: string;
+}
 export declare type MaterialExerciseApis = MaterialExerciseCommonApis;
-declare const _default: React.ForwardRefExoticComponent<Pick<MaterialExerciseCommonProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "key" | keyof MaterialExerciseCommonProps> & React.RefAttributes<MaterialExerciseCommonApis>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<MaterialExerciseProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "key" | keyof MaterialExerciseProps> & React.RefAttributes<MaterialExerciseCommonApis>>;
 export default _default;

package/es/components/material-exercise/MaterialExercise.i18n.d.ts

@@ -0,0 +1,4 @@
+export declare const en: {
+    'materialExercise.button.referenceDocs': string;
+};
+export declare const ko: typeof en;

package/es/components/material-exercise/MaterialExercise.i18n.js

@@ -0,0 +1,8 @@
+var en = {
+  'materialExercise.button.referenceDocs': 'Reference Docs'
+};
+var ko = {
+  'materialExercise.button.referenceDocs': '언어 레퍼런스'
+};
+
+export { en, ko };

package/es/components/material-exercise/MaterialExercise.js

@@ -1,12 +1,15 @@
+import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
+import { useIntl, IntlProvider } from 'react-intl';
 import { config } from '@elice/api-client';
-import { ResizableNext } from '@elice/blocks';
+import { ResizableNext, Button, Icon, Hspace } from '@elice/blocks';
+import { eilClassroom } from '@elice/icons';
 import { withForwardRefMaterial } from '@elice/material-shared-utils';
 import { useRecoilValue } from 'recoil';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../constants/stylesheets.js';
 import ExerciseFileTabsFileTreeButton from './exercise-file-tabs/ExerciseFileTabsFileTreeButton.js';
 import { exerciseContainerSizeState, exerciseState, exerciseFileTreeOpenedState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState } from './context/recoil.js';
-import './context/context.js';
+import { ExerciseContext } from './context/context.js';
 import { ExercisePreviewType, ExercisePreviewDisplayMode } from './context/recoilTypes.js';
 import { exerciseRunnerTextSend$ } from './context/subjects.js';
 import ExerciseProvider from './context/ExerciseProvider.js';
@@ -21,6 +24,8 @@ import ExercisePreview from './exercise-preview/ExercisePreview.js';
 import ExerciseRightpane from './exercise-rightpane/ExerciseRightpane.js';
 import ExerciseRunner from './exercise-runner/ExerciseRunner.js';
 import { StyledExerciseContainer, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, StyledExerciseMain, StyledxerciseFileTreeContaner, EXERCISE_FILE_TREE_MIN_WIDTH, StyledExerciseFileTreeWrap, StyledExerciseFileAndTabWrap, StyledExerciseTabBar, StyledExerciseTabsWrap, StyledExerciseTabMenuWrap, StyledExerciseFileWrap, StyledExerciseRunnerWrap, EXERCISE_RUNNER_MIN_HEIGHT } from './MaterialExercise.styled.js';
+import * as MaterialExercise_i18n from './MaterialExercise.i18n.js';
+import { en } from './MaterialExercise.i18n.js';
 
 //
 //
@@ -29,6 +34,9 @@ import { StyledExerciseContainer, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTA
  * Material exercise.
  */
 var MaterialExercise = forwardRef(function (props, ref) {
+  var intl = useIntl();
+  var _React$useContext = React.useContext(ExerciseContext),
+    onReferenceDocsToggle = _React$useContext.onReferenceDocsToggle;
   var _useRecoilValue = useRecoilValue(exerciseContainerSizeState),
     width = _useRecoilValue.width,
     height = _useRecoilValue.height;
@@ -61,11 +69,35 @@ var MaterialExercise = forwardRef(function (props, ref) {
   var renderExerciseFileTabs = function renderExerciseFileTabs() {
     return React.createElement(StyledExerciseTabsWrap, null, React.createElement(ExerciseFileTabsLazy, null));
   };
+  /**
+   * reference docs toggle button
+   */
+  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
+    if (typeof onReferenceDocsToggle !== 'function') {
+      return null;
+    }
+    return React.createElement(React.Fragment, null, React.createElement(Button, {
+      size: "micro",
+      role: "navy3",
+      style: {
+        width: '100%'
+      },
+      onClick: onReferenceDocsToggle
+    }, React.createElement(Icon, {
+      icon: eilClassroom
+    }), React.createElement(Hspace, {
+      width: 0.25
+    }), intl.formatMessage({
+      id: 'materialExercise.button.referenceDocs'
+    })), React.createElement(Hspace, {
+      width: 0.5
+    }));
+  };
   /**
    * Menu
    */
   var renderExerciseMenu = function renderExerciseMenu() {
-    return React.createElement(StyledExerciseTabMenuWrap, null, React.createElement(ExerciseMultilangDropdownLazy, null), React.createElement(ExerciseMenu, null));
+    return React.createElement(StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React.createElement(ExerciseMultilangDropdownLazy, null), React.createElement(ExerciseMenu, null));
   };
   /**
    * Code editor and file viewer
@@ -136,10 +168,17 @@ var MaterialExercise = forwardRef(function (props, ref) {
 //
 //
 //
-var MaterialExercise$1 = withForwardRefMaterial(forwardRef(function (props, ref) {
-  return React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
+var MaterialExercise$1 = withForwardRefMaterial(forwardRef(function (_a, ref) {
+  var _a$locale = _a.locale,
+    locale = _a$locale === void 0 ? 'en' : _a$locale,
+    props = __rest(_a, ["locale"]);
+  return React.createElement(IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in MaterialExercise_i18n ? MaterialExercise_i18n[locale] : en
+  }, React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
     ref: ref
-  })));
+  }))));
 }), config.init, {
   overrideRecoilScope: true
 });

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

@@ -56,6 +56,8 @@ export interface MaterialExerciseCommonProps extends MaterialCommponentCommonPro
      */
     readOnlyEditor?: boolean;
     exerciseImageEmptyOptions?: MaterialExerciseCommonPropExerciseImageEmptyOptions;
+    onMultiLangLanguageChange?: MaterialExerciseCommonPropOnMultiLangLanguageChange;
+    onReferenceDocsToggle?: () => void;
     onCodeHelpRequest?: MaterialExerciseCommonPropOnCodeHelpRequest;
     onDefaultExerciseRoomIdSet?: MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet;
     onExerciseRoomIdChange?: MaterialExerciseCommonPropOnExerciseRoomIdChange;
@@ -78,6 +80,10 @@ export declare type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
     instruction?: string;
     openFileContent?: string;
 }) => void;
+/**
+ * On multi language change.
+ */
+export declare type MaterialExerciseCommonPropOnMultiLangLanguageChange = (language: string) => void;
 /**
  * On default exercise room ID set.
  */

package/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -11,7 +11,8 @@ import '../context/ExerciseProvider.js';
 var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
   var _React$useContext = React.useContext(ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId;
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    onMultiLangLanguageChange = _React$useContext.onMultiLangLanguageChange;
   var multilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(materialExerciseId));
   var _useRecoilState = useRecoilState(exerciseMultilangEnvironmentState({
       materialExerciseId: materialExerciseId,
@@ -33,9 +34,12 @@ var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
     placement: "bottom-end",
     value: multilangEnvironment.language,
     onChange: function onChange(language) {
-      return setMultilangEnvironment({
+      setMultilangEnvironment({
         language: language
       });
+      if (typeof onMultiLangLanguageChange === 'function') {
+        onMultiLangLanguageChange(language);
+      }
     }
   }, Object.keys(multilangLanguages).map(function (lang) {
     return React.createElement("option", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.230621.0",
+  "version": "1.230629.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -79,9 +79,9 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230621.0",
-    "@elice/material-shared-utils": "1.230621.0",
-    "@elice/types": "1.230522.0",
+    "@elice/material-shared-types": "1.230629.0",
+    "@elice/material-shared-utils": "1.230629.0",
+    "@elice/types": "^1.230629.0",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
@@ -102,5 +102,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "a7459def6aacf5783671a83c0a19a52596fce6f3"
+  "gitHead": "2c97cc9d41247bb8fa777b6084bc19c04b50215c"
 }