@elice/material-quiz 1.220803.0

package/cjs/components/material-quiz/context/MaterialQuizContext.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var apiClient = require('@elice/api-client');
+var materialSharedUtils = require('@elice/material-shared-utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const StateContext = React__default["default"].createContext(undefined);
+const DispatchContext = React__default["default"].createContext(undefined);
+StateContext.displayName = 'MaterialQuizStateContext';
+DispatchContext.displayName = 'MaterialQuizDispatchContext';
+
+function MaterialQuizProvider({
+  materialQuizId,
+  userId,
+  onSubmit = () => void 0,
+  onNext,
+  children
+}) {
+  const [course, setCourse] = React__default["default"].useState();
+  const [lecture, setLecture] = React__default["default"].useState();
+  const [materialQuiz, setMaterialQuiz] = React__default["default"].useState();
+  const [initStatus, setInitStatus] = React__default["default"].useState('idle');
+  const [vertical, setVertical] = React__default["default"].useState(false);
+  const canInit = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+  const init = React__default["default"].useCallback(async () => {
+    const controller = new AbortController();
+    const {
+      signal
+    } = controller;
+
+    try {
+      setInitStatus('pending'); // fetch materialQuiz
+
+      const {
+        materialQuiz
+      } = await apiClient.getOrgMaterialQuizGet({
+        materialQuizId
+      }, {
+        signal
+      }); // fetch course
+
+      const {
+        course
+      } = await apiClient.getOrgCourseGet({
+        courseId: materialQuiz.courseId
+      }, {
+        signal
+      }); // fetch lecture
+
+      const {
+        lecture
+      } = await apiClient.getOrgLectureGet({
+        lectureId: materialQuiz.lectureId
+      }, {
+        signal
+      });
+      setMaterialQuiz(materialQuiz);
+      setCourse(course);
+      setLecture(lecture);
+      setInitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      setInitStatus('rejected');
+    }
+
+    return () => controller.abort();
+  }, [materialQuizId]);
+  React__default["default"].useEffect(() => {
+    if (canInit) {
+      void init();
+    }
+  }, [canInit, init]); //
+  //
+  // materialQuiz refresher
+
+  const refreshOrgMaterialQuiz = React__default["default"].useCallback(signal => {
+    return apiClient.getOrgMaterialQuizGet({
+      materialQuizId
+    }, {
+      signal
+    }).then(response => {
+      setMaterialQuiz(response.materialQuiz);
+    }).catch(error => {
+      console.error(error);
+    });
+  }, [materialQuizId]);
+  return React__default["default"].createElement(StateContext.Provider, {
+    value: {
+      course,
+      lecture,
+      materialQuiz,
+      userId,
+      vertical,
+      initStatus
+    }
+  }, React__default["default"].createElement(DispatchContext.Provider, {
+    value: {
+      onSubmit,
+      onNext,
+      refreshOrgMaterialQuiz,
+      setVertical
+    }
+  }, children));
+}
+
+function useMaterialQuizState() {
+  const context = React__default["default"].useContext(StateContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialQuizState must be used within a MaterialQuizProvider');
+  }
+
+  return context;
+}
+
+function useMaterialQuizDispatch() {
+  const context = React__default["default"].useContext(DispatchContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialQuizDispatch must be used within a MaterialQuizProvider');
+  }
+
+  return context;
+}
+
+exports.MaterialQuizProvider = MaterialQuizProvider;
+exports.useMaterialQuizDispatch = useMaterialQuizDispatch;
+exports.useMaterialQuizState = useMaterialQuizState;

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

@@ -0,0 +1,3 @@
+export { default as MaterialQuiz } from './MaterialQuiz';
+export { default as MaterialQuizInfo } from './MaterialQuizInfo';
+export type { MaterialQuizProps } from './context/MaterialQuizContext';

package/cjs/components/material-quiz-edit/MaterialQuizEdit.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { MarkdownEditorFileUploadReqFn } from '@elice/markdown';
+import type { GetOrgMaterialQuizGetResponses } from '@elice/types';
+import type { FormState } from 'react-hook-form';
+export declare type MaterialQuizEditValue = Pick<GetOrgMaterialQuizGetResponses['materialQuiz'], 'id' | 'questionTitle' | 'questionDescription' | 'optionType' | 'optionInfo' | 'answerInfo' | 'answerHint' | 'isAutoGrade' | 'explanationInfo'>;
+export declare type MaterialQuizEditFormState = Pick<FormState<Record<string, any>>, 'isDirty' | 'isValid'>;
+export interface MaterialQuizEditProps {
+    /** Value of material quiz edit form. */
+    value: MaterialQuizEditValue;
+    /**
+     * Is editing disabled?
+     * When true, cannot change `optionType`, `optionInfo` and `answerInfo`.
+     */
+    disabled?: boolean;
+    /** Locale of edit form. */
+    locale: string;
+    /** Handle form change event. */
+    onChange: (value: MaterialQuizEditValue) => void;
+    /** Handle form state changes. (`FormState` from react-hook-form) */
+    onFormStateChange?: (state: MaterialQuizEditFormState) => void;
+    /** Handle file upload. */
+    onFileUploadRequest: MarkdownEditorFileUploadReqFn;
+}
+declare const MaterialQuizEdit: React.ForwardRefExoticComponent<MaterialQuizEditProps & React.RefAttributes<HTMLFormElement>>;
+export default MaterialQuizEdit;

package/cjs/components/material-quiz-edit/MaterialQuizEdit.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var editValue = require('./utils/editValue.js');
+var context = require('./context.js');
+var locales = require('./locales.js');
+var MaterialQuizEditContent = require('./MaterialQuizEditContent.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialQuizEdit = React.forwardRef(({
+  value,
+  disabled = false,
+  locale = 'en',
+  onChange,
+  onFormStateChange,
+  onFileUploadRequest
+}, ref) => {
+  const formElRef = React__default["default"].useRef(null);
+  const useFormMethods = reactHookForm.useForm({
+    defaultValues: editValue.manipulateValue(value),
+    mode: 'onBlur'
+  });
+  const watchedMaterialQuizEditValue = useFormMethods.watch();
+  const {
+    isDirty,
+    isValid
+  } = useFormMethods.formState; //
+  // Reset from value, when `value` changes.
+  // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
+  //
+
+  reactUse.useDeepCompareEffect(() => {
+    useFormMethods.reset(editValue.manipulateValue(value), {
+      keepDirty: true,
+      keepErrors: true,
+      keepIsValid: true,
+      keepTouched: true,
+      keepValues: true
+    });
+    void useFormMethods.trigger();
+  }, [value]); //
+  // Emit `onChange` handler when form value changed.
+  // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
+  //
+
+  reactUse.useDeepCompareEffect(() => onChange(editValue.restoreValue(watchedMaterialQuizEditValue)), [watchedMaterialQuizEditValue]); //
+  // Emit `onFormStateChange` handler when form state change.
+  //
+
+  React__default["default"].useEffect(() => {
+    if (typeof onFormStateChange === 'function') {
+      onFormStateChange({
+        isDirty,
+        isValid
+      });
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isDirty, isValid]); //
+  // Set ref.
+  //
+
+  React__default["default"].useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
+    reset: () => {
+      useFormMethods.reset(editValue.manipulateValue(value));
+      void useFormMethods.trigger();
+    }
+  }), [useFormMethods, value]); //
+  //
+  //
+
+  return React__default["default"].createElement("form", {
+    ref: formElRef
+  }, React__default["default"].createElement(context["default"].Provider, {
+    value: {
+      disabled,
+      onFileUploadRequest
+    }
+  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : locales.en
+  }, React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, useFormMethods), React__default["default"].createElement(MaterialQuizEditContent, null)))));
+});
+
+module.exports = MaterialQuizEdit;

package/cjs/components/material-quiz-edit/MaterialQuizEditContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizEditContent: React.FC;
+export default MaterialQuizEditContent;