@elice/material-survey 1.220803.0

package/es/components/material-survey-edit/MaterialSurveyEdit.js

@@ -0,0 +1,86 @@
+import React, { forwardRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { IntlProvider } from 'react-intl';
+import { useDeepCompareEffect } from 'react-use';
+import { manipulateValue, restoreValue } from './utils/editValue.js';
+import MaterialSurveyEditContext from './context.js';
+import * as locales from './locales.js';
+import { en } from './locales.js';
+import MaterialSurveyEditContent from './MaterialSurveyEditContent.js';
+
+const MaterialSurveyEdit = forwardRef(({
+  value,
+  disabled = false,
+  locale = 'en',
+  onChange,
+  onFormStateChange,
+  onFileUploadRequest
+}, ref) => {
+  const formElRef = React.useRef(null);
+  const useFormMethods = useForm({
+    defaultValues: 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`.
+  //
+
+  useDeepCompareEffect(() => {
+    useFormMethods.reset(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`.
+  //
+
+  useDeepCompareEffect(() => onChange(restoreValue(watchedMaterialSurveyEditValue)), [watchedMaterialSurveyEditValue]); //
+  // Emit `onFormStateChange` handler when form state change.
+  //
+
+  React.useEffect(() => {
+    if (typeof onFormStateChange === 'function') {
+      onFormStateChange({
+        isDirty,
+        isValid
+      });
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isDirty, isValid]); //
+  // Set ref.
+  //
+
+  React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
+    reset: () => {
+      useFormMethods.reset(manipulateValue(value));
+      void useFormMethods.trigger();
+    }
+  }), [useFormMethods, value]); //
+  //
+  //
+
+  return React.createElement("form", {
+    ref: formElRef
+  }, React.createElement(MaterialSurveyEditContext.Provider, {
+    value: {
+      disabled,
+      onFileUploadRequest
+    }
+  }, React.createElement(IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : en
+  }, React.createElement(FormProvider, Object.assign({}, useFormMethods), React.createElement(MaterialSurveyEditContent, null)))));
+});
+
+export { MaterialSurveyEdit as default };

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

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

package/es/components/material-survey-edit/MaterialSurveyEditContent.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { FormInputVerticalLayout, Label, Input, Tooltip, Select, Vspace } from '@elice/blocks';
+import { MarkdownEditor } from '@elice/markdown';
+import { enums } from '@elice/types';
+import styled from 'styled-components';
+import { createRandomId } from './utils/randomId.js';
+import { useMaterialSurveyEditContext } from './context.js';
+import OptionSelectOne from './MaterialSurveyEditOptionSelect.js';
+
+const MIN_TEXT_LENGTH = 1;
+const MAX_TEXT_LENGTH = 128;
+const StyledSurveyOptionTypeSelectWrap = styled.div.withConfig({
+  componentId: "sc-r4ms68-0"
+})(["display:flex;max-width:12rem;"]);
+
+const MaterialSurveyEditContent = () => {
+  const intl = useIntl();
+  const {
+    disabled,
+    onFileUploadRequest
+  } = useMaterialSurveyEditContext();
+  const {
+    control,
+    watch,
+    setValue
+  } = useFormContext();
+  const [watchedOptionType, watchedOptionInfo] = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']); //
+  // Change `optionInfo` according to `optionType`.
+  //
+
+  React.useEffect(() => {
+    const get = () => {
+      switch (watchedOptionType) {
+        case enums.SurveyOptionType.SelectOne:
+        case enums.SurveyOptionType.SelectMultiple:
+          return watchedOptionInfo.length > 0 ? watchedOptionInfo : // add default option info
+          [{
+            id: createRandomId(),
+            value: intl.formatMessage({
+              id: 'common.option'
+            }, {
+              number: 1
+            })
+          }, {
+            id: createRandomId(),
+            value: intl.formatMessage({
+              id: 'common.option'
+            }, {
+              number: 2
+            })
+          }];
+
+        case enums.SurveyOptionType.Text:
+          return [];
+
+        default:
+          return [];
+      }
+    };
+
+    setValue('questionInfoList.0.optionInfo', get());
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [watchedOptionType, setValue, intl]);
+  /**
+   * Input of option info and answer info,
+   * according to option type.
+   */
+
+  const Option = React.useMemo(() => {
+    switch (watchedOptionType) {
+      case enums.SurveyOptionType.SelectOne:
+      case enums.SurveyOptionType.SelectMultiple:
+        return OptionSelectOne;
+
+      case enums.SurveyOptionType.Text:
+      default:
+        return React.Fragment;
+    }
+  }, [watchedOptionType]);
+  /**
+   * Render input for survey title.
+   */
+
+  const renderQuestionTitleInput = () => {
+    return React.createElement(FormInputVerticalLayout, {
+      label: React.createElement(Label, {
+        size: "small",
+        required: true
+      }, React.createElement(FormattedMessage, {
+        id: "content.title"
+      })),
+      input: React.createElement(Controller, {
+        control: control,
+        name: "questionInfoList.0.questionTitle",
+        rules: {
+          required: {
+            value: true,
+            message: intl.formatMessage({
+              id: 'content.title.errorMessage.required'
+            })
+          },
+          minLength: {
+            value: MIN_TEXT_LENGTH,
+            message: intl.formatMessage({
+              id: 'common.errorMessage.range'
+            }, {
+              min: MIN_TEXT_LENGTH,
+              max: MAX_TEXT_LENGTH
+            })
+          },
+          maxLength: {
+            value: MAX_TEXT_LENGTH,
+            message: intl.formatMessage({
+              id: 'common.errorMessage.range'
+            }, {
+              min: MIN_TEXT_LENGTH,
+              max: MAX_TEXT_LENGTH
+            })
+          }
+        },
+        render: ({
+          field,
+          fieldState
+        }) => {
+          var _a;
+
+          return React.createElement(Input, Object.assign({
+            size: "small",
+            width: "full",
+            minLength: MIN_TEXT_LENGTH,
+            maxLength: MAX_TEXT_LENGTH,
+            placeholder: intl.formatMessage({
+              id: 'content.title.placeholder'
+            }),
+            invalid: fieldState.invalid,
+            invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
+          }, field));
+        }
+      })
+    });
+  };
+  /**
+   * Render input for survey description.
+   */
+
+
+  const renderQuestionDescriptionInput = () => {
+    return React.createElement(FormInputVerticalLayout, {
+      label: React.createElement(Label, {
+        size: "small"
+      }, React.createElement(FormattedMessage, {
+        id: "content.description.title"
+      })),
+      input: React.createElement(Controller, {
+        control: control,
+        name: "questionInfoList.0.questionDescription",
+        render: ({
+          field
+        }) => React.createElement(MarkdownEditor, Object.assign({
+          enableFooter: true,
+          placeholder: intl.formatMessage({
+            id: 'content.description.placeholder'
+          }),
+          onFileUploadRequest: onFileUploadRequest
+        }, field))
+      })
+    });
+  };
+  /**
+   * Render input of option type, option info and answer info.
+   */
+
+
+  const renderOptionInput = () => {
+    return React.createElement(FormInputVerticalLayout, {
+      label: React.createElement(Label, {
+        size: "small",
+        required: true
+      }, React.createElement(FormattedMessage, {
+        id: "content.option.title"
+      })),
+      input: React.createElement(React.Fragment, null, React.createElement(Controller, {
+        control: control,
+        name: "questionInfoList.0.optionType",
+        render: ({
+          field
+        }) => React.createElement(Tooltip, {
+          title: disabled ? intl.formatMessage({
+            id: 'content.option.tooltip.disabled'
+          }) : undefined,
+          placement: "top-end"
+        }, React.createElement(StyledSurveyOptionTypeSelectWrap, null, React.createElement(Select, Object.assign({
+          size: "small",
+          width: "small",
+          readOnly: disabled
+        }, field, {
+          onChange: v => field.onChange(Number(v))
+        }), React.createElement("option", {
+          value: enums.SurveyOptionType.SelectOne,
+          children: intl.formatMessage({
+            id: 'content.option.select.items.selectOne'
+          })
+        }), React.createElement("option", {
+          value: enums.SurveyOptionType.SelectMultiple,
+          children: intl.formatMessage({
+            id: 'content.option.select.items.selectMultiple'
+          })
+        }), React.createElement("option", {
+          value: enums.SurveyOptionType.Text,
+          children: intl.formatMessage({
+            id: 'content.option.select.items.text'
+          })
+        }))))
+      }), React.createElement(Vspace, {
+        height: 0.5
+      }), React.createElement(Option, null))
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput());
+};
+
+export { MaterialSurveyEditContent as default };

package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.d.ts

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

package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Input, Tooltip, IconButton, Vspace, Button, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
+import styled from 'styled-components';
+import { createRandomId } from './utils/randomId.js';
+import { useMaterialSurveyEditContext } from './context.js';
+
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
+  componentId: "sc-1eiyk6z-0"
+})([""]);
+const StyledInputGroup = styled.div.withConfig({
+  componentId: "sc-1eiyk6z-1"
+})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+
+const OptionSelectOne = () => {
+  const intl = useIntl();
+  const {
+    disabled
+  } = useMaterialSurveyEditContext();
+  const {
+    control
+  } = useFormContext();
+  const {
+    fields: optionInfoFields,
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem
+  } = useFieldArray({
+    name: 'questionInfoList.0.optionInfo',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  /**
+   * Append option info.
+   */
+
+  const appendOptionInfo = () => {
+    appendOptionInfoFieldItem({
+      id: createRandomId(),
+      value: ''
+    });
+  };
+  /**
+   * Remove item from option info at index.
+   */
+
+
+  const removeOptionInfo = index => {
+    removeOptionInfoFieldItem(index);
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledWrap, null, React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+    id
+  }, index) => React.createElement(Controller, {
+    key: id,
+    control: control,
+    name: `questionInfoList.0.optionInfo.${index}.value`,
+    rules: {
+      required: {
+        value: true,
+        message: intl.formatMessage({
+          id: 'option.common.select.errorMessage.required'
+        })
+      }
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Input, Object.assign({
+        size: "small",
+        width: "full",
+        placeholder: intl.formatMessage({
+          id: 'option.common.select.placeholder'
+        }),
+        suffix: React.createElement(Tooltip, {
+          title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
+            id: 'option.common.select.tooltip.minOptionInfoItem'
+          }) : undefined,
+          placement: "top-start"
+        }, React.createElement("span", null, React.createElement(IconButton, {
+          icon: eilMathsignMultiplyBasic,
+          role: "grey9",
+          size: "tiny",
+          border: false,
+          transparent: true,
+          disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
+          onClick: () => removeOptionInfo(index)
+        }))),
+        readOnly: disabled,
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
+      }, field));
+    }
+  }))), React.createElement(Vspace, {
+    height: 0.5
+  }), React.createElement(Tooltip, {
+    title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
+      id: 'option.common.select.tooltip.maxOptionInfoItem'
+    }) : undefined,
+    placement: "bottom"
+  }, React.createElement("span", null, React.createElement(Button, {
+    block: true,
+    size: "micro",
+    borderDashed: true,
+    transparent: true,
+    icon: React.createElement(Icon, {
+      icon: eilMathsignAddCircle
+    }),
+    disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
+    onClick: appendOptionInfo
+  }, React.createElement(FormattedMessage, {
+    id: "option.common.select.addButton"
+  })))));
+};
+
+export { OptionSelectOne as default };

package/es/components/material-survey-edit/context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MaterialSurveyEditProps } from './MaterialSurveyEdit';
+declare type MaterialSurveyEditContextValue = Pick<MaterialSurveyEditProps, 'disabled' | 'onFileUploadRequest'>;
+declare const MaterialSurveyEditContext: React.Context<MaterialSurveyEditContextValue>;
+export declare const useMaterialSurveyEditContext: () => MaterialSurveyEditContextValue;
+export default MaterialSurveyEditContext;

package/es/components/material-survey-edit/context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const MaterialSurveyEditContext = React.createContext(null);
+const useMaterialSurveyEditContext = () => React.useContext(MaterialSurveyEditContext);
+
+export { MaterialSurveyEditContext as default, useMaterialSurveyEditContext };

package/es/components/material-survey-edit/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialSurveyEdit } from './MaterialSurveyEdit';
+export type { MaterialSurveyEditProps, MaterialSurveyEditFormState, MaterialSurveyEditValue, } from './MaterialSurveyEdit';

package/es/components/material-survey-edit/locales.d.ts

@@ -0,0 +1,20 @@
+export declare const en: {
+    'common.option': string;
+    'common.errorMessage.range': string;
+    'content.title': string;
+    'content.title.errorMessage.required': string;
+    'content.title.placeholder': string;
+    'content.description.title': string;
+    'content.description.placeholder': string;
+    'content.option.title': string;
+    'content.option.tooltip.disabled': string;
+    'content.option.select.items.selectOne': string;
+    'content.option.select.items.selectMultiple': string;
+    'content.option.select.items.text': string;
+    'option.common.select.errorMessage.required': string;
+    'option.common.select.placeholder': string;
+    'option.common.select.tooltip.minOptionInfoItem': string;
+    'option.common.select.tooltip.maxOptionInfoItem': string;
+    'option.common.select.addButton': string;
+};
+export declare const ko: typeof en;

package/es/components/material-survey-edit/locales.js

@@ -0,0 +1,40 @@
+const en = {
+  'common.option': '옵션 {number}',
+  'common.errorMessage.range': '{min} ~ {max}자 이내로 입력해주세요.',
+  'content.title': '질문',
+  'content.title.errorMessage.required': 'Please fill the question.',
+  'content.title.placeholder': '질문을 입력해주세요.',
+  'content.description.title': '세부 내용',
+  'content.description.placeholder': '자세한 질문 설명이나 이미지 등을 입력해주세요.',
+  'content.option.title': '답변',
+  'content.option.tooltip.disabled': '설문 조사가 공개된 상태이거나 제출한 학생이 존재하면\n수정이 불가능합니다.',
+  'content.option.select.items.selectOne': '객관식 (단일 답변)',
+  'content.option.select.items.selectMultiple': '객관식 (복수 답변)',
+  'content.option.select.items.text': '주관식 답변',
+  'option.common.select.errorMessage.required': '선택지를 입력해주세요.',
+  'option.common.select.placeholder': '선택지 입력',
+  'option.common.select.tooltip.minOptionInfoItem': '선택지는 2개 이상 입력해야 합니다.',
+  'option.common.select.tooltip.maxOptionInfoItem': '선택지는 20개 초과하여 입력할 수 없습니다.',
+  'option.common.select.addButton': '보기 추가'
+};
+const ko = {
+  'common.option': '옵션 {number}',
+  'common.errorMessage.range': '{min} ~ {max}자 이내로 입력해주세요.',
+  'content.title': '질문',
+  'content.title.errorMessage.required': '질문을 입력해주세요.',
+  'content.title.placeholder': '질문을 입력해주세요.',
+  'content.description.title': '세부 내용',
+  'content.description.placeholder': '자세한 질문 설명이나 이미지 등을 입력해주세요.',
+  'content.option.title': '답변',
+  'content.option.tooltip.disabled': '설문 조사가 공개된 상태이거나 제출한 학생이 존재하면\n수정이 불가능합니다.',
+  'content.option.select.items.selectOne': '객관식 (단일 답변)',
+  'content.option.select.items.selectMultiple': '객관식 (복수 답변)',
+  'content.option.select.items.text': '주관식 답변',
+  'option.common.select.errorMessage.required': '선택지를 입력해주세요.',
+  'option.common.select.placeholder': '선택지 입력',
+  'option.common.select.tooltip.minOptionInfoItem': '선택지는 2개 이상 입력해야 합니다.',
+  'option.common.select.tooltip.maxOptionInfoItem': '선택지는 20개 초과하여 입력할 수 없습니다.',
+  'option.common.select.addButton': '보기 추가'
+};
+
+export { en, ko };

package/es/components/material-survey-edit/utils/editValue.d.ts

@@ -0,0 +1,19 @@
+import type { MaterialSurveyEditValue } from '../MaterialSurveyEdit';
+declare type _SurveyEditQuestionInfo = Omit<MaterialSurveyEditValue['questionInfoList'][number], 'optionInfo'> & {
+    optionInfo: {
+        id: string;
+        value: string;
+    }[];
+};
+export declare type _SurveyEditValue = Omit<MaterialSurveyEditValue, 'questionInfoList'> & {
+    questionInfoList: _SurveyEditQuestionInfo[];
+};
+/**
+ *
+ */
+export declare function manipulateValue(v: MaterialSurveyEditValue): _SurveyEditValue;
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+export declare function restoreValue(v: _SurveyEditValue): MaterialSurveyEditValue;
+export {};

package/es/components/material-survey-edit/utils/editValue.js

@@ -0,0 +1,41 @@
+import { createRandomId } from './randomId.js';
+
+/**
+ *
+ */
+
+function manipulateValue(v) {
+  return Object.assign(Object.assign({}, v), {
+    questionInfoList: v.questionInfoList.map(questionInfo => Object.assign(Object.assign({}, questionInfo), {
+      // convert string array to object array
+      // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
+      optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(option => ({
+        id: createRandomId(),
+        value: option
+      })) : []
+    }))
+  });
+}
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+
+function restoreValue(v) {
+  return Object.assign(Object.assign({}, v), {
+    questionInfoList: v.questionInfoList.map(questionInfo => {
+      var _a;
+
+      const newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
+        optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(option => option.value) : null
+      });
+
+      if (!newQuestionInfo.optionInfo) {
+        delete newQuestionInfo.optionInfo;
+      }
+
+      return newQuestionInfo;
+    })
+  });
+}
+
+export { manipulateValue, restoreValue };

package/es/components/material-survey-edit/utils/randomId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create random ID.
+ */
+export declare function createRandomId(): string;

package/es/components/material-survey-edit/utils/randomId.js

@@ -0,0 +1,8 @@
+/**
+ * Create random ID.
+ */
+function createRandomId() {
+  return Math.random().toString(36).substring(2);
+}
+
+export { createRandomId };

package/es/components/shared/StyledMarkdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledMarkdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/markdown").MarkdownProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
+export default StyledMarkdown;

package/es/components/shared/StyledMarkdown.js

@@ -0,0 +1,8 @@
+import { Markdown } from '@elice/markdown';
+import styled from 'styled-components';
+
+const StyledMarkdown = styled(Markdown).withConfig({
+  componentId: "sc-h8kc9g-0"
+})(["p{margin:0 !important;}"]);
+
+export { StyledMarkdown as default };

package/es/components/shared/SurveyContentBox.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ButtonProps } from '@elice/blocks';
+interface QuestionBoxProps {
+    footerActions?: ButtonProps[];
+    title?: string;
+    submitResult?: React.ReactNode;
+    submitStatus?: React.ReactNode;
+    onNext?: () => void;
+}
+export declare const StyledQuestionBox: import("styled-components").StyledComponent<"div", any, {
+    vertical: boolean;
+    hasFooter: boolean;
+}, never>;
+declare const SurveyContentBox: React.FC<QuestionBoxProps>;
+export default SurveyContentBox;