@elice/material-quiz 1.220803.0

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

@@ -0,0 +1,68 @@
+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.selectMultipleOrder': '드래그 앤 드롭',
+  'content.option.select.items.text': '주관식',
+  'content.option.statusText.dragNDrop': '보기를 입력한 후 정답 순서대로 클릭하세요.\n구성된 문제는 좌측 학습자료 탭에서 확인하실 수 있습니다.',
+  'content.option.errorMessage.required': '답안을 선택해주세요.',
+  'content.answerHint.title': '입력란 힌트 텍스트 지정',
+  'content.answerHint.description': '답안을 입력할 입력란의 힌트 텍스트를 지정할 수 있습니다.',
+  'content.answerHint.placeholder': '입력란 힌트 텍스트 입력',
+  'content.explanationInfo.title': '해설 작성',
+  'content.explanationInfo.description': '문제를 푼 후 해당 설명이 노출됩니다.',
+  'content.explanationInfo.checkbox.label': '사용',
+  'content.explanationInfo.textarea.placeholder': '해설을 입력해주세요.',
+  'content.explanationInfo.textarea.errorMessage.required': '문제의 해설을 작성하세요.',
+  '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': '보기 추가',
+  'option.text.answerInfo.errorMessage.required': '정답을 입력해주세요.',
+  'option.text.answerInfo.hintText': '정규표현식으로 채점됩니다. 정답에 메타 문자(^[]$()|*+?{}\\.)가 포함될 경우 해당 문자 앞에 \\를 붙여주세요.\n예) ^^ 가 정답인 경우 → \\^\\^',
+  'option.text.isAutoGrade.checkbox.label': '답안을 지정하지 않고 수동으로 채점'
+};
+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.selectMultipleOrder': '드래그 앤 드롭',
+  'content.option.select.items.text': '주관식',
+  'content.option.statusText.dragNDrop': '보기를 입력한 후 정답 순서대로 클릭하세요.\n구성된 문제는 좌측 학습자료 탭에서 확인하실 수 있습니다.',
+  'content.option.errorMessage.required': '답안을 선택해주세요.',
+  'content.answerHint.title': '입력란 힌트 텍스트 지정',
+  'content.answerHint.description': '답안을 입력할 입력란의 힌트 텍스트를 지정할 수 있습니다.',
+  'content.answerHint.placeholder': '입력란 힌트 텍스트 입력',
+  'content.explanationInfo.title': '해설 작성',
+  'content.explanationInfo.description': '문제를 푼 후 해당 설명이 노출됩니다.',
+  'content.explanationInfo.checkbox.label': '사용',
+  'content.explanationInfo.textarea.placeholder': '해설을 입력해주세요.',
+  'content.explanationInfo.textarea.errorMessage.required': '문제의 해설을 작성하세요.',
+  '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': '보기 추가',
+  'option.text.answerInfo.errorMessage.required': '정답을 입력해주세요.',
+  'option.text.answerInfo.hintText': '정규표현식으로 채점됩니다. 정답에 메타 문자(^[]$()|*+?{}\\.)가 포함될 경우 해당 문자 앞에 \\를 붙여주세요.\n예) ^^ 가 정답인 경우 → \\^\\^',
+  'option.text.isAutoGrade.checkbox.label': '답안을 지정하지 않고 수동으로 채점'
+};
+
+export { en, ko };

package/es/components/material-quiz-edit/options/OptionSelectMultiple.d.ts

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

package/es/components/material-quiz-edit/options/OptionSelectMultiple.js

@@ -0,0 +1,197 @@
+import React from 'react';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Transition } from 'react-transition-group';
+import { StatusText, Vspace, Input, Checkbox, Tooltip, IconButton, Button, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
+import styled from 'styled-components';
+import { useMaterialQuizEditContext } from '../context.js';
+import { createRandomId } from '../utils/randomId.js';
+
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
+  componentId: "sc-1nbx9b8-0"
+})([""]);
+const StyledInputGroup = styled.div.withConfig({
+  componentId: "sc-1nbx9b8-1"
+})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+
+const OptionSelectMultiple = () => {
+  const intl = useIntl();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    fields: optionInfoFields,
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem
+  } = useFieldArray({
+    name: 'optionInfo',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  const watchedAnswerInfo = watch('answerInfo');
+  /**
+   * Update answer info.
+   */
+
+  const updateAnswerInfo = option => {
+    const prevAnswerInfo = getValues('answerInfo');
+
+    if (!Array.isArray(prevAnswerInfo)) {
+      return;
+    }
+
+    setValue('answerInfo', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ? // if answer removed, re-calculate answer index
+    answerIndex < option.index ? answerIndex : answerIndex - 1 : // or maintain current answer index
+    answerIndex) : [...prevAnswerInfo, option.index], {
+      shouldDirty: true,
+      shouldValidate: true
+    });
+  };
+  /**
+   * Append option info.
+   */
+
+
+  const appendOptionInfo = () => {
+    appendOptionInfoFieldItem({
+      id: createRandomId(),
+      value: ''
+    });
+  };
+  /**
+   * Remove item from option info at index.
+   */
+
+
+  const removeOptionInfo = index => {
+    updateAnswerInfo({
+      index,
+      checked: false,
+      removed: true
+    });
+    removeOptionInfoFieldItem(index);
+  }; //
+  //
+  //
+
+
+  if (!Array.isArray(watchedAnswerInfo)) {
+    return null;
+  }
+
+  return React.createElement(StyledWrap, null, React.createElement(Controller, {
+    name: "answerInfo",
+    control: control,
+    rules: {
+      validate: v => {
+        if (Array.isArray(v) && v.length < 1) {
+          return intl.formatMessage({
+            id: 'content.option.errorMessage.required'
+          });
+        }
+
+        return true;
+      }
+    },
+    render: ({
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Transition, {
+        in: fieldState.invalid,
+        timeout: 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, React.createElement(React.Fragment, null, React.createElement(StatusText, {
+        children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        role: "danger"
+      }), React.createElement(Vspace, {
+        height: 0.5
+      })));
+    }
+  }), React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+    id
+  }, index) => React.createElement(Controller, {
+    key: id,
+    control: control,
+    name: `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'
+        }),
+        prefix: React.createElement(Checkbox, {
+          checked: watchedAnswerInfo.includes(index),
+          disabled: disabled,
+          onChange: checked => updateAnswerInfo({
+            index,
+            checked
+          })
+        }),
+        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,
+          size: "tiny",
+          role: "grey9",
+          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 { OptionSelectMultiple as default };

package/es/components/material-quiz-edit/options/OptionSelectMultipleOrder.d.ts

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

package/es/components/material-quiz-edit/options/OptionSelectMultipleOrder.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Transition } from 'react-transition-group';
+import { StatusText, Vspace, Input, Checkbox, Tooltip, IconButton, Button, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
+import styled from 'styled-components';
+import { useMaterialQuizEditContext } from '../context.js';
+import { createRandomId } from '../utils/randomId.js';
+
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
+  componentId: "sc-1xufc1p-0"
+})([""]);
+const StyledInputGroup = styled.div.withConfig({
+  componentId: "sc-1xufc1p-1"
+})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+
+const OptionSelectMultipleOrder = () => {
+  const intl = useIntl();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    fields: optionInfoFields,
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem
+  } = useFieldArray({
+    name: 'optionInfo',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  const watchedAnswerInfo = watch('answerInfo');
+  /**
+   * Update answer info.
+   */
+
+  const updateAnswerInfo = option => {
+    const prevAnswerInfo = getValues('answerInfo');
+
+    if (!Array.isArray(prevAnswerInfo)) {
+      return;
+    }
+
+    setValue('answerInfo', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ? // if answer removed, re-calculate answer index
+    answerIndex < option.index ? answerIndex : answerIndex - 1 : // or maintain current answer index
+    answerIndex) : [...prevAnswerInfo, option.index], {
+      shouldDirty: true,
+      shouldValidate: true
+    });
+  };
+  /**
+   * Append option info.
+   */
+
+
+  const appendOptionInfo = () => {
+    appendOptionInfoFieldItem({
+      id: createRandomId(),
+      value: ''
+    });
+  };
+  /**
+   * Remove item from option info at index.
+   */
+
+
+  const removeOptionInfo = index => {
+    updateAnswerInfo({
+      index,
+      checked: false,
+      removed: true
+    });
+    removeOptionInfoFieldItem(index);
+  }; //
+  //
+  //
+
+
+  if (!Array.isArray(watchedAnswerInfo)) {
+    return null;
+  }
+
+  return React.createElement(StyledWrap, null, React.createElement(Controller, {
+    name: "answerInfo",
+    control: control,
+    rules: {
+      validate: v => {
+        if (Array.isArray(v) && v.length < 1) {
+          return intl.formatMessage({
+            id: 'content.option.errorMessage.required'
+          });
+        }
+
+        return true;
+      }
+    },
+    render: ({
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Transition, {
+        in: fieldState.invalid,
+        timeout: 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, React.createElement(React.Fragment, null, React.createElement(StatusText, {
+        children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        role: "danger"
+      }), React.createElement(Vspace, {
+        height: 0.5
+      })));
+    }
+  }), React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+    id
+  }, index) => React.createElement(Controller, {
+    key: id,
+    control: control,
+    name: `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'
+        }),
+        prefix: React.createElement(Checkbox, {
+          checked: watchedAnswerInfo.includes(index),
+          disabled: disabled,
+          altChar: watchedAnswerInfo.indexOf(index) + 1,
+          onChange: checked => updateAnswerInfo({
+            index,
+            checked
+          })
+        }),
+        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,
+          size: "tiny",
+          role: "grey9",
+          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 { OptionSelectMultipleOrder as default };

package/es/components/material-quiz-edit/options/OptionSelectOne.d.ts

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

package/es/components/material-quiz-edit/options/OptionSelectOne.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Transition } from 'react-transition-group';
+import { RadioOption, StatusText, Vspace, Input, Radio, Tooltip, IconButton, Button, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
+import styled from 'styled-components';
+import { useMaterialQuizEditContext } from '../context.js';
+import { createRandomId } from '../utils/randomId.js';
+
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
+  componentId: "sc-vizer2-0"
+})([""]);
+const StyledInputGroup = styled.div.withConfig({
+  componentId: "sc-vizer2-1"
+})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+const StyledInputPrefixRadioOption = styled(RadioOption).withConfig({
+  componentId: "sc-vizer2-2"
+})([".eb-radio-option__label{display:none;}"]);
+
+const OptionSelectOne = () => {
+  const intl = useIntl();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    fields: optionInfoFields,
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem
+  } = useFieldArray({
+    name: 'optionInfo',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  const watchedAnswerInfo = watch('answerInfo');
+  /**
+   * Update answer info.
+   */
+
+  const updateAnswerInfo = index => {
+    const prevAnswerInfo = getValues('answerInfo');
+
+    if (!Array.isArray(prevAnswerInfo)) {
+      return;
+    }
+
+    setValue('answerInfo', [index], {
+      shouldDirty: true,
+      shouldValidate: true
+    });
+  };
+  /**
+   * Append option info.
+   */
+
+
+  const appendOptionInfo = () => {
+    appendOptionInfoFieldItem({
+      id: createRandomId(),
+      value: ''
+    });
+  };
+  /**
+   * Remove item from option info at index.
+   */
+
+
+  const removeOptionInfo = index => {
+    // set answer info to 0 index,
+    // if this option is selected as answer.
+    const curAnswerInfo = getValues('answerInfo');
+
+    if (Array.isArray(curAnswerInfo) && curAnswerInfo.includes(index)) {
+      updateAnswerInfo(0);
+    }
+
+    removeOptionInfoFieldItem(index);
+  }; //
+  //
+  //
+
+
+  if (!Array.isArray(watchedAnswerInfo)) {
+    return null;
+  }
+
+  return React.createElement(StyledWrap, null, React.createElement(Controller, {
+    name: "answerInfo",
+    control: control,
+    rules: {
+      validate: v => {
+        if (Array.isArray(v) && v.length < 1) {
+          return intl.formatMessage({
+            id: 'content.option.errorMessage.required'
+          });
+        }
+
+        return true;
+      }
+    },
+    render: ({
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Transition, {
+        in: fieldState.invalid,
+        timeout: 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, React.createElement(React.Fragment, null, React.createElement(StatusText, {
+        children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        role: "danger"
+      }), React.createElement(Vspace, {
+        height: 0.5
+      })));
+    }
+  }), React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+    id
+  }, index) => React.createElement(Controller, {
+    key: id,
+    control: control,
+    name: `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'
+        }),
+        prefix: React.createElement(Radio, {
+          value: watchedAnswerInfo[0],
+          disabled: disabled,
+          onChange: updateAnswerInfo
+        }, React.createElement(StyledInputPrefixRadioOption, {
+          value: index
+        }), React.createElement(React.Fragment, null)),
+        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,
+          size: "tiny",
+          role: "grey9",
+          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-quiz-edit/options/OptionText.d.ts

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