@elice/material-survey 1.220803.0

package/cjs/components/material-survey/MaterialSurveyShimmer.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var MaterialSurveyContext = require('./context/MaterialSurveyContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledShimmer = styled__default["default"].div.withConfig({
+  componentId: "sc-1gtcofd-0"
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
+  vertical
+}) => vertical ? '0' : '8px');
+const StyledShimmerHeader = styled__default["default"].div.withConfig({
+  componentId: "sc-1gtcofd-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;height:3.5rem;"], designTokens.base.color.navy6);
+const StyledShimmerBody = styled__default["default"].div.withConfig({
+  componentId: "sc-1gtcofd-2"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], designTokens.base.color.navy7);
+
+const MaterialSurveyShimmer = () => {
+  const {
+    vertical
+  } = MaterialSurveyContext.useMaterialSurveyState();
+  return React__default["default"].createElement(StyledShimmer, {
+    vertical: vertical
+  }, React__default["default"].createElement(StyledShimmerHeader, null), React__default["default"].createElement(StyledShimmerBody, null, React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })));
+};
+
+module.exports = MaterialSurveyShimmer;

package/cjs/components/material-survey/MaterialSurveyText.d.ts

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

package/cjs/components/material-survey/MaterialSurveyText.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var index = require('../../helpers/index.js');
+var SurveyContentBox = require('../shared/SurveyContentBox.js');
+var MaterialSurveyContext = require('./context/MaterialSurveyContext.js');
+var SurveyResultBadge = require('./SurveyResultBadge.js');
+var SurveySubmitStatusText = require('./SurveySubmitStatusText.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledTextarea = styled__default["default"].textarea.withConfig({
+  componentId: "sc-16tkulg-0"
+})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy5, designTokens.base.color.navy2, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'text');
+
+const MaterialSurveyText = () => {
+  // context
+  const {
+    lecture,
+    materialSurvey,
+    userId
+  } = MaterialSurveyContext.useMaterialSurveyState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialSurvey
+  } = MaterialSurveyContext.useMaterialSurveyDispatch(); // state
+
+  const intl = reactIntl.useIntl();
+  const [materialSurveyResponse, setMaterialSurveyResponse] = React__default["default"].useState();
+  const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle');
+  const [answer, setAnswer] = React__default["default"].useState(''); // survey response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (!userId && (materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.lastSurveyResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialSurveyResponseGet({
+        surveyResponseId: materialSurvey.lastSurveyResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialSurveyResponse(response.surveyResponse);
+        setAnswer(response.surveyResponse.answers[0]);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // survey response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (userId && materialSurvey) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialSurveyResponseList({
+        materialSurveyId: materialSurvey.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        const surveyResponse = response.surveyResponses[0];
+        setMaterialSurveyResponse(surveyResponse);
+        setAnswer(typeof (surveyResponse === null || surveyResponse === void 0 ? void 0 : surveyResponse.answers[0]) === 'string' ? surveyResponse.answers[0] : '');
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialSurvey) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        surveyResponseId
+      } = await apiClient.postOrgMaterialSurveyResponseAdd({
+        materialSurveyId: materialSurvey.id,
+        answers: [answer]
+      });
+      const {
+        surveyResponse
+      } = await apiClient.getOrgMaterialSurveyResponseGet({
+        surveyResponseId
+      });
+      setMaterialSurveyResponse(surveyResponse);
+      void refreshOrgMaterialSurvey();
+      onSubmit(true);
+      setSubmitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  const commonProps = {
+    type: 'text',
+    autoFocus: answer.length === 0,
+    disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId,
+    placeholder: intl.formatMessage({
+      id: 'materialSurvey.text.placeholder'
+    }),
+    value: answer,
+    onChange: e => {
+      setAnswer(e.target.value);
+    }
+  };
+  return React__default["default"].createElement(SurveyContentBox["default"], {
+    title: intl.formatMessage({
+      id: 'materialSurvey.myAnswer'
+    }),
+    onNext: onNext,
+    submitResult: React__default["default"].createElement(SurveyResultBadge, {
+      materialSurveyResponse: materialSurveyResponse
+    }),
+    submitStatus: React__default["default"].createElement(SurveySubmitStatusText, {
+      status: submitStatus
+    }),
+    footerActions: [{
+      border: true,
+      children: intl.formatMessage({
+        id: 'materialSurvey.submit'
+      }),
+      disabled: answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit
+    }]
+  }, React__default["default"].createElement(StyledTextarea, Object.assign({
+    id: "survey-text-answer"
+  }, commonProps)));
+};
+
+module.exports = MaterialSurveyText;

package/cjs/components/material-survey/SurveyResultBadge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GetOrgMaterialSurveyResponseGetResponses } from '@elice/types';
+interface SurveyResultStatusProps {
+    materialSurveyResponse?: GetOrgMaterialSurveyResponseGetResponses['surveyResponse'];
+}
+declare const SurveyResultBadge: React.FC<SurveyResultStatusProps>;
+export default SurveyResultBadge;

package/cjs/components/material-survey/SurveyResultBadge.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var index = require('../../helpers/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SurveyResultBadge = ({
+  materialSurveyResponse
+}) => {
+  const intl = reactIntl.useIntl();
+  const status = React__default["default"].useMemo(() => index.getSurveyResultStatus(materialSurveyResponse), [materialSurveyResponse]);
+
+  switch (status) {
+    case index.SurveyResultStatus.Submitted:
+      return React__default["default"].createElement(blocks.BadgeNext, {
+        type: "quiet",
+        role: "primary"
+      }, intl.formatMessage({
+        id: 'materialSurvey.resultStatus.submitted'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+module.exports = SurveyResultBadge;

package/cjs/components/material-survey/SurveySubmitStatusText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+interface SurveySubmitStatusTextProps {
+    status: APIStatus;
+}
+declare const SurveySubmitStatusText: React.FC<SurveySubmitStatusTextProps>;
+export default SurveySubmitStatusText;

package/cjs/components/material-survey/SurveySubmitStatusText.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SurveySubmitStatusText = ({
+  status
+}) => {
+  const intl = reactIntl.useIntl();
+
+  switch (status) {
+    case 'resolved':
+      return React__default["default"].createElement(blocks.StatusText, {
+        role: "success",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialSurvey.submitStatus.success'
+      }));
+
+    case 'rejected':
+      return React__default["default"].createElement(blocks.StatusText, {
+        role: "danger",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialSurvey.submitStatus.failure'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+module.exports = SurveySubmitStatusText;

package/cjs/components/material-survey/context/MaterialSurveyContext.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { GetOrgCourseGetResponses, GetOrgLectureGetResponses, GetOrgMaterialSurveyGetResponses } from '@elice/types';
+export interface State {
+    vertical: boolean;
+    initStatus: APIStatus;
+    course?: GetOrgCourseGetResponses['course'];
+    lecture?: GetOrgLectureGetResponses['lecture'];
+    materialSurvey?: GetOrgMaterialSurveyGetResponses['materialSurvey'];
+    userId?: number;
+}
+export declare type MaterialSurveyProps = {
+    materialSurveyId: number;
+    userId?: number;
+    locale?: string;
+    onSubmit?: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    onNext?: () => void;
+};
+interface MaterialSurveyProviderProps extends Omit<MaterialSurveyProps, 'locale'> {
+    children: React.ReactNode;
+}
+interface DispatchContextType {
+    onSubmit: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    refreshOrgMaterialSurvey: (signal?: AbortSignal | undefined) => Promise<void>;
+    setVertical: React.Dispatch<React.SetStateAction<boolean>>;
+    onNext?: () => void;
+}
+declare function MaterialSurveyProvider({ materialSurveyId, userId, onSubmit, onNext, children, }: MaterialSurveyProviderProps): JSX.Element;
+declare function useMaterialSurveyState(): State;
+declare function useMaterialSurveyDispatch(): DispatchContextType;
+export { MaterialSurveyProvider, useMaterialSurveyState, useMaterialSurveyDispatch, };

package/cjs/components/material-survey/context/MaterialSurveyContext.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 = 'MaterialSurveyStateContext';
+DispatchContext.displayName = 'MaterialSurveyDispatchContext';
+
+function MaterialSurveyProvider({
+  materialSurveyId,
+  userId,
+  onSubmit = () => void 0,
+  onNext,
+  children
+}) {
+  const [course, setCourse] = React__default["default"].useState();
+  const [lecture, setLecture] = React__default["default"].useState();
+  const [materialSurvey, setMaterialSurvey] = 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 doInitilize = React__default["default"].useCallback(async () => {
+    const controller = new AbortController();
+    const {
+      signal
+    } = controller;
+
+    try {
+      setInitStatus('pending'); // fetch materialSurvey
+
+      const {
+        materialSurvey
+      } = await apiClient.getOrgMaterialSurveyGet({
+        materialSurveyId
+      }, {
+        signal
+      }); // fetch course
+
+      const {
+        course
+      } = await apiClient.getOrgCourseGet({
+        courseId: materialSurvey.courseId
+      }, {
+        signal
+      }); // fetch lecture
+
+      const {
+        lecture
+      } = await apiClient.getOrgLectureGet({
+        lectureId: materialSurvey.lectureId
+      }, {
+        signal
+      });
+      setMaterialSurvey(materialSurvey);
+      setCourse(course);
+      setLecture(lecture);
+      setInitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      setInitStatus('rejected');
+    }
+
+    return () => controller.abort();
+  }, [materialSurveyId]);
+  React__default["default"].useEffect(() => {
+    if (canInit) {
+      void doInitilize();
+    }
+  }, [canInit, doInitilize]); //
+  //
+  // materialSurvey refresher
+
+  const refreshOrgMaterialSurvey = React__default["default"].useCallback(signal => {
+    return apiClient.getOrgMaterialSurveyGet({
+      materialSurveyId
+    }, {
+      signal
+    }).then(response => {
+      setMaterialSurvey(response.materialSurvey);
+    }).catch(error => {
+      console.error(error);
+    });
+  }, [materialSurveyId]);
+  return React__default["default"].createElement(StateContext.Provider, {
+    value: {
+      course,
+      lecture,
+      materialSurvey,
+      userId,
+      vertical,
+      initStatus
+    }
+  }, React__default["default"].createElement(DispatchContext.Provider, {
+    value: {
+      onSubmit,
+      onNext,
+      refreshOrgMaterialSurvey,
+      setVertical
+    }
+  }, children));
+}
+
+function useMaterialSurveyState() {
+  const context = React__default["default"].useContext(StateContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialSurveyState must be used within a MaterialSurveyProvider');
+  }
+
+  return context;
+}
+
+function useMaterialSurveyDispatch() {
+  const context = React__default["default"].useContext(DispatchContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialSurveyDispatch must be used within a MaterialSurveyProvider');
+  }
+
+  return context;
+}
+
+exports.MaterialSurveyProvider = MaterialSurveyProvider;
+exports.useMaterialSurveyDispatch = useMaterialSurveyDispatch;
+exports.useMaterialSurveyState = useMaterialSurveyState;

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

@@ -0,0 +1,3 @@
+export { default as MaterialSurvey } from './MaterialSurvey';
+export { default as MaterialSurveyInfo } from './MaterialSurveyInfo';
+export type { MaterialSurveyProps } from './context/MaterialSurveyContext';

package/cjs/components/material-survey-edit/MaterialSurveyEdit.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { MarkdownEditorFileUploadReqFn } from '@elice/markdown';
+import type { GetOrgMaterialSurveyGetResponses } from '@elice/types';
+import type { FormState } from 'react-hook-form';
+export declare type MaterialSurveyEditValue = Pick<GetOrgMaterialSurveyGetResponses['materialSurvey'], 'id' | 'questionInfoList'>;
+export declare type MaterialSurveyEditFormState = Pick<FormState<Record<string, any>>, 'isDirty' | 'isValid'>;
+export interface MaterialSurveyEditProps {
+    /** Value of material survey edit form. */
+    value: MaterialSurveyEditValue;
+    /**
+     * 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: MaterialSurveyEditValue) => void;
+    /** Handle form state changes. (`FormState` from react-hook-form) */
+    onFormStateChange?: (state: MaterialSurveyEditFormState) => void;
+    /** Handle file upload. */
+    onFileUploadRequest: MarkdownEditorFileUploadReqFn;
+}
+declare const MaterialSurveyEdit: React.ForwardRefExoticComponent<MaterialSurveyEditProps & React.RefAttributes<HTMLFormElement>>;
+export default MaterialSurveyEdit;

package/cjs/components/material-survey-edit/MaterialSurveyEdit.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 MaterialSurveyEditContent = require('./MaterialSurveyEditContent.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialSurveyEdit = 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 watchedMaterialSurveyEditValue = 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(watchedMaterialSurveyEditValue)), [watchedMaterialSurveyEditValue]); //
+  // 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(MaterialSurveyEditContent, null)))));
+});
+
+module.exports = MaterialSurveyEdit;

package/cjs/components/material-survey-edit/MaterialSurveyEditContent.d.ts

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