@elice/material-runbox 1.260825.0-runboxusability.13 → 1.260825.0-runboxusability.14

package/cjs/components/material-runbox/MaterialRunbox.js

@@ -27,9 +27,10 @@ var MaterialRunbox = function MaterialRunbox(_a) {
     _a$locale = _a.locale,
     locale = _a$locale === void 0 ? 'ko' : _a$locale,
     showMessenger = _a.showMessenger,
+    getRunningRunboxLinkProps = _a.getRunningRunboxLinkProps,
     eliceMaterialRunboxApiConfiguration = _a.eliceMaterialRunboxApiConfiguration,
     __intl = _a.__intl,
-    contentProps = tslib.__rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "eliceMaterialRunboxApiConfiguration", "__intl"]);
+    contentProps = tslib.__rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "getRunningRunboxLinkProps", "eliceMaterialRunboxApiConfiguration", "__intl"]);
   return jsxRuntime.jsx(material.ThemeProvider, {
     theme: theme.runboxDarkTheme,
     children: jsxRuntime.jsx(intl.RawEliceIntlProvider, {
@@ -39,6 +40,7 @@ var MaterialRunbox = function MaterialRunbox(_a) {
         enableUrlShare: enableUrlShare,
         locale: locale,
         showMessenger: showMessenger,
+        getRunningRunboxLinkProps: getRunningRunboxLinkProps,
         children: jsxRuntime.jsx(MaterialRunboxApiContext.default, {
           eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
           children: jsxRuntime.jsx(MaterialRunboxContent.default, Object.assign({}, contentProps))

package/cjs/components/material-runbox/contexts/MaterialRunboxContext.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
+import type { RunningRunbox } from '@elice/openapi-client-material-runbox';
+import type { ButtonProps } from '@mui/material';
+type OverlayOwnedButtonProps = 'children' | 'variant' | 'color' | 'startIcon' | 'endIcon' | 'sx' | 'disableRipple' | 'role' | 'tabIndex' | 'ref';
+/**
+ * Props for the button reaching the runbox occupying the runtime. Defaults to an `a`;
+ * annotate the return type with a `component` of your own to pass its props.
+ */
+export type RunningRunboxLinkProps<RootComponent extends React.ElementType = 'a'> = Omit<ButtonProps<RootComponent>, OverlayOwnedButtonProps>;
 /**
  * Props to exposed form `<MaterialRunbox />`
  */
@@ -11,6 +19,8 @@ export interface MaterialRunboxContextValue {
     locale?: string;
     /** Show CS messange? */
     showMessenger?: () => void;
+    /** Build the props reaching the occupying runbox. `null` when the host cannot reach it. */
+    getRunningRunboxLinkProps?: (runningRunbox: RunningRunbox) => RunningRunboxLinkProps | null;
 }
 export interface MaterialRunboxContextProps extends MaterialRunboxContextValue {
     children?: React.ReactNode;

package/cjs/components/material-runbox/contexts/index.d.ts

@@ -4,5 +4,5 @@ export { default as MaterialRunboxControlContextProvider, MaterialRunboxControlC
 export { default as MaterialRunboxContextProvider, MaterialRunboxContext, useMaterialRunboxContext, } from './MaterialRunboxContext';
 export type { MaterialRunboxApiContextProps, MaterialRunboxApiContextValue, } from './MaterialRunboxApiContext';
 export type { MaterialRunboxCommandContextProps, MaterialRunboxCommandContextValue, } from './MaterialRunboxCommandContext';
-export type { MaterialRunboxContextProps, MaterialRunboxContextValue, } from './MaterialRunboxContext';
+export type { MaterialRunboxContextProps, MaterialRunboxContextValue, RunningRunboxLinkProps, } from './MaterialRunboxContext';
 export type { MaterialRunboxControlContextProps, MaterialRunboxControlContextValue, } from './MaterialRunboxControlContext';

package/cjs/components/material-runbox/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MaterialRunbox } from './MaterialRunbox';
 export type { MaterialRunboxProps } from './MaterialRunbox';
+export type { RunningRunboxLinkProps } from './contexts';

package/cjs/components/material-runbox/runtime/RuntimeOverlayConflicted.js

@@ -16,17 +16,12 @@ var RuntimeChangeMaterialDialog = require('./RuntimeChangeMaterialDialog.js');
 var terminated = require('../../../assets/terminated.png.js');
 var en = require('../locales/en.json.js');
 var ko = require('../locales/ko.json.js');
+var MaterialRunboxContext = require('../contexts/MaterialRunboxContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-//
-//
-//
-function createLecturePageUrl(args) {
-  return "/courses/".concat(args.courseId, "/lectures/").concat(args.lectureId, "/lecturepages/").concat(args.lecturePageId);
-}
 //
 //
 //
@@ -38,6 +33,8 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isChangeMaterialDialogOpen = _React$useState2[0],
     setChangeMaterialDialogOpen = _React$useState2[1];
+  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
+    getRunningRunboxLinkProps = _useMaterialRunboxCon.getRunningRunboxLinkProps;
   var _useQuery = reactQuery.useQuery({
       queryKey: ['getOrgCourseGet', runningRunbox.courseId],
       queryFn: function () {
@@ -68,34 +65,49 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
       refetchOnWindowFocus: false
     }),
     runningCourse = _useQuery.data;
+  var runningRunboxLinkProps = React__default.default.useMemo(function () {
+    var _a;
+    return (_a = getRunningRunboxLinkProps === null || getRunningRunboxLinkProps === void 0 ? void 0 : getRunningRunboxLinkProps(runningRunbox)) !== null && _a !== void 0 ? _a : null;
+  }, [getRunningRunboxLinkProps, runningRunbox]);
+  /**
+   *
+   */
   var renderNavButton = function renderNavButton() {
     if (!runningCourse) {
       return null;
     }
-    return jsxRuntime.jsx(material.Button, {
+    var linkProps = runningRunboxLinkProps ? Object.assign({
+      LinkComponent: 'a'
+    }, runningRunboxLinkProps) : {
+      component: 'div',
+      role: 'presentation',
+      tabIndex: -1,
+      disableRipple: true
+    };
+    var opensInNewTab = (runningRunboxLinkProps === null || runningRunboxLinkProps === void 0 ? void 0 : runningRunboxLinkProps.target) === '_blank';
+    return jsxRuntime.jsx(material.Button, Object.assign({
       variant: "contained",
       color: "inherit",
       startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
         icon: proSolidSvgIcons.faLinkSimple,
         color: "success"
       }),
-      endIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      endIcon: opensInNewTab ? jsxRuntime.jsx(muiElements.EliceIcon, {
         icon: proSolidSvgIcons.faArrowUpRightFromSquare,
         color: "inherit"
-      }),
+      }) : null,
       sx: {
         width: '32rem',
         maxWidth: '100%',
         padding: '1rem',
         color: 'text.primary',
         bgcolor: 'grey.100',
+        cursor: runningRunboxLinkProps ? 'pointer' : 'default',
         '&:hover': {
-          bgcolor: 'grey.200'
+          bgcolor: runningRunboxLinkProps ? 'grey.200' : 'grey.100'
         }
-      },
-      LinkComponent: "a",
-      href: createLecturePageUrl(runningRunbox),
-      target: "_blank",
+      }
+    }, linkProps, {
       children: jsxRuntime.jsxs(material.Stack, {
         flex: 1,
         direction: "column",
@@ -108,7 +120,7 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
           children: runningRunbox.title
         })]
       })
-    });
+    }));
   };
   /**
    *

package/es/components/material-runbox/MaterialRunbox.js

@@ -23,9 +23,10 @@ var MaterialRunbox = function MaterialRunbox(_a) {
     _a$locale = _a.locale,
     locale = _a$locale === void 0 ? 'ko' : _a$locale,
     showMessenger = _a.showMessenger,
+    getRunningRunboxLinkProps = _a.getRunningRunboxLinkProps,
     eliceMaterialRunboxApiConfiguration = _a.eliceMaterialRunboxApiConfiguration,
     __intl = _a.__intl,
-    contentProps = __rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "eliceMaterialRunboxApiConfiguration", "__intl"]);
+    contentProps = __rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "getRunningRunboxLinkProps", "eliceMaterialRunboxApiConfiguration", "__intl"]);
   return jsx(ThemeProvider, {
     theme: runboxDarkTheme,
     children: jsx(RawEliceIntlProvider, {
@@ -35,6 +36,7 @@ var MaterialRunbox = function MaterialRunbox(_a) {
         enableUrlShare: enableUrlShare,
         locale: locale,
         showMessenger: showMessenger,
+        getRunningRunboxLinkProps: getRunningRunboxLinkProps,
         children: jsx(MaterialRunboxApiContextProvider, {
           eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
           children: jsx(MaterialRunboxContent, Object.assign({}, contentProps))

package/es/components/material-runbox/contexts/MaterialRunboxContext.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
+import type { RunningRunbox } from '@elice/openapi-client-material-runbox';
+import type { ButtonProps } from '@mui/material';
+type OverlayOwnedButtonProps = 'children' | 'variant' | 'color' | 'startIcon' | 'endIcon' | 'sx' | 'disableRipple' | 'role' | 'tabIndex' | 'ref';
+/**
+ * Props for the button reaching the runbox occupying the runtime. Defaults to an `a`;
+ * annotate the return type with a `component` of your own to pass its props.
+ */
+export type RunningRunboxLinkProps<RootComponent extends React.ElementType = 'a'> = Omit<ButtonProps<RootComponent>, OverlayOwnedButtonProps>;
 /**
  * Props to exposed form `<MaterialRunbox />`
  */
@@ -11,6 +19,8 @@ export interface MaterialRunboxContextValue {
     locale?: string;
     /** Show CS messange? */
     showMessenger?: () => void;
+    /** Build the props reaching the occupying runbox. `null` when the host cannot reach it. */
+    getRunningRunboxLinkProps?: (runningRunbox: RunningRunbox) => RunningRunboxLinkProps | null;
 }
 export interface MaterialRunboxContextProps extends MaterialRunboxContextValue {
     children?: React.ReactNode;

package/es/components/material-runbox/contexts/index.d.ts

@@ -4,5 +4,5 @@ export { default as MaterialRunboxControlContextProvider, MaterialRunboxControlC
 export { default as MaterialRunboxContextProvider, MaterialRunboxContext, useMaterialRunboxContext, } from './MaterialRunboxContext';
 export type { MaterialRunboxApiContextProps, MaterialRunboxApiContextValue, } from './MaterialRunboxApiContext';
 export type { MaterialRunboxCommandContextProps, MaterialRunboxCommandContextValue, } from './MaterialRunboxCommandContext';
-export type { MaterialRunboxContextProps, MaterialRunboxContextValue, } from './MaterialRunboxContext';
+export type { MaterialRunboxContextProps, MaterialRunboxContextValue, RunningRunboxLinkProps, } from './MaterialRunboxContext';
 export type { MaterialRunboxControlContextProps, MaterialRunboxControlContextValue, } from './MaterialRunboxControlContext';

package/es/components/material-runbox/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MaterialRunbox } from './MaterialRunbox';
 export type { MaterialRunboxProps } from './MaterialRunbox';
+export type { RunningRunboxLinkProps } from './contexts';

package/es/components/material-runbox/runtime/RuntimeOverlayConflicted.js

@@ -12,13 +12,8 @@ import RuntimeChangeMaterialDialog from './RuntimeChangeMaterialDialog.js';
 import img from '../../../assets/terminated.png.js';
 import messageEn from '../locales/en.json.js';
 import messageKo from '../locales/ko.json.js';
+import { useMaterialRunboxContext } from '../contexts/MaterialRunboxContext.js';
 
-//
-//
-//
-function createLecturePageUrl(args) {
-  return "/courses/".concat(args.courseId, "/lectures/").concat(args.lectureId, "/lecturepages/").concat(args.lecturePageId);
-}
 //
 //
 //
@@ -30,6 +25,8 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isChangeMaterialDialogOpen = _React$useState2[0],
     setChangeMaterialDialogOpen = _React$useState2[1];
+  var _useMaterialRunboxCon = useMaterialRunboxContext(),
+    getRunningRunboxLinkProps = _useMaterialRunboxCon.getRunningRunboxLinkProps;
   var _useQuery = useQuery({
       queryKey: ['getOrgCourseGet', runningRunbox.courseId],
       queryFn: function () {
@@ -60,34 +57,49 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
       refetchOnWindowFocus: false
     }),
     runningCourse = _useQuery.data;
+  var runningRunboxLinkProps = React.useMemo(function () {
+    var _a;
+    return (_a = getRunningRunboxLinkProps === null || getRunningRunboxLinkProps === void 0 ? void 0 : getRunningRunboxLinkProps(runningRunbox)) !== null && _a !== void 0 ? _a : null;
+  }, [getRunningRunboxLinkProps, runningRunbox]);
+  /**
+   *
+   */
   var renderNavButton = function renderNavButton() {
     if (!runningCourse) {
       return null;
     }
-    return jsx(Button, {
+    var linkProps = runningRunboxLinkProps ? Object.assign({
+      LinkComponent: 'a'
+    }, runningRunboxLinkProps) : {
+      component: 'div',
+      role: 'presentation',
+      tabIndex: -1,
+      disableRipple: true
+    };
+    var opensInNewTab = (runningRunboxLinkProps === null || runningRunboxLinkProps === void 0 ? void 0 : runningRunboxLinkProps.target) === '_blank';
+    return jsx(Button, Object.assign({
       variant: "contained",
       color: "inherit",
       startIcon: jsx(EliceIcon, {
         icon: faLinkSimple,
         color: "success"
       }),
-      endIcon: jsx(EliceIcon, {
+      endIcon: opensInNewTab ? jsx(EliceIcon, {
         icon: faArrowUpRightFromSquare,
         color: "inherit"
-      }),
+      }) : null,
       sx: {
         width: '32rem',
         maxWidth: '100%',
         padding: '1rem',
         color: 'text.primary',
         bgcolor: 'grey.100',
+        cursor: runningRunboxLinkProps ? 'pointer' : 'default',
         '&:hover': {
-          bgcolor: 'grey.200'
+          bgcolor: runningRunboxLinkProps ? 'grey.200' : 'grey.100'
         }
-      },
-      LinkComponent: "a",
-      href: createLecturePageUrl(runningRunbox),
-      target: "_blank",
+      }
+    }, linkProps, {
       children: jsxs(Stack, {
         flex: 1,
         direction: "column",
@@ -100,7 +112,7 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
           children: runningRunbox.title
         })]
       })
-    });
+    }));
   };
   /**
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-runbox",
-  "version": "1.260825.0-runboxusability.13",
+  "version": "1.260825.0-runboxusability.14",
   "description": "User view and editing components of Elice material runbox",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-transition-group": "^4.4.0",
     "react-use": "^17.0.0",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.13",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.13"
+    "@elice/material-shared-types": "1.260825.0-runboxusability.14",
+    "@elice/material-shared-utils": "1.260825.0-runboxusability.14"
   },
   "dependencies": {
     "classnames": "^2.2.0",
@@ -77,8 +77,8 @@
     "react-use": "^17.2.4",
     "rollup": "^4.0.0",
     "typescript": "~5.9.3",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.13",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.13"
+    "@elice/material-shared-types": "1.260825.0-runboxusability.14",
+    "@elice/material-shared-utils": "1.260825.0-runboxusability.14"
   },
   "scripts": {
     "start": "run-s watch",