@elice/material-quiz 1.221217.0 → 1.221222.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface OptionGroupAnswerListItemProps {
     optionId: number;
+    onRemoveItem: () => void;
 }
 declare const OptionGroupAnswerListItem: React.FC<OptionGroupAnswerListItemProps>;
 export default OptionGroupAnswerListItem;

package/es/components/material-quiz-edit/options/options-group/OptionGroupAnswerListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import { config, postGlobalRemoteFileAttachmentUpload } from '@elice/api-client';
-import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Notification } from '@elice/blocks';
+import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Notification, Tooltip } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
@@ -11,54 +11,59 @@ import styled from 'styled-components';
 import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 
 const SHEET_Z_INDEX = 982;
-const OPTION_CONTENT_WIDTH = 205;
-const OPTION_GROUP_WIDTH = 180;
 const DEFAULT_OPTION_VALUE = -1;
+const MIN_OPTION_INFO_COUNT = 2;
 const FILE_LABEL = 'file-label';
 const FILE_ACCEPT = '.mp3, .mp4, .mov, .png, .jpg, .svg, .gif';
 const MAX_FILE_SIZE = 3 * 1024 * 1024;
 const StyledSortableListItem = styled(SortableListItem).withConfig({
   componentId: "sc-18q96lt-0"
-})(["display:flex;overflow:hidden;flex:1;z-index:", ";height:3.5rem;padding:0 0 0 1rem;border-radius:4px;border:1px solid ", ";background:", ";box-shadow:none;"], SHEET_Z_INDEX + 1, base.color.gray3, base.color.white);
-const StyledSortableListItemOption = styled.div.withConfig({
+})(["display:flex;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;"], SHEET_Z_INDEX + 1);
+const StyledSortableListItemOptionWrapper = styled.div.withConfig({
   componentId: "sc-18q96lt-1"
-})(["height:100%;&:not(:last-child){border-right:1px solid ", ";}"], base.color.gray3);
-const StyledQuizOptionContent = styled.div.withConfig({
+})(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border:1px solid ", ";border-radius:4px;background:", ";"], base.color.gray3, base.color.white);
+const StyledSortableListItemOption = styled.div.withConfig({
   componentId: "sc-18q96lt-2"
-})(["display:flex;align-items:center;width:", "px;height:100%;padding:0 1rem;"], OPTION_CONTENT_WIDTH);
-const StyledQuizOptionContentLabel = styled.label.withConfig({
+})(["height:3.5rem;&:not(:last-child){border-right:1px solid ", ";}"], base.color.gray3);
+const StyledQuizOptionContent = styled.div.withConfig({
   componentId: "sc-18q96lt-3"
-})(["display:flex;align-items:center;width:", "px;height:100%;padding:0 1rem;cursor:pointer;"], OPTION_CONTENT_WIDTH);
-const StyledQuizOptionTextInput = styled(Input).withConfig({
+})(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;"]);
+const StyledQuizOptionContentLabel = styled.label.withConfig({
   componentId: "sc-18q96lt-4"
+})(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;cursor:pointer;"]);
+const StyledQuizOptionTextInput = styled(Input).withConfig({
+  componentId: "sc-18q96lt-5"
 })(["& > div{border:0;}"]);
 const StyledQuizOptionContentInput = styled.input.withConfig({
-  componentId: "sc-18q96lt-5"
+  componentId: "sc-18q96lt-6"
 })(["display:none;"]);
 const StyledDropdown = styled(Dropdown).withConfig({
-  componentId: "sc-18q96lt-6"
-})(["border:0;&.eb-dropdown__inner{width:", "px;height:3.5rem;}"], OPTION_GROUP_WIDTH); //
+  componentId: "sc-18q96lt-7"
+})(["border:0;&.eb-dropdown__inner{width:100%;height:3.5rem;}"]); //
 //
 //
 
 const OptionGroupAnswerListItem = ({
-  optionId
+  optionId,
+  onRemoveItem
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
 
   const intl = useIntl();
   const {
     control,
+    formState,
     watch,
     setValue
   } = useFormContext();
   const watchedOptions = watch('options');
   const watchedAnswerInfo = watch('answerInfo');
   const watchedGroupList = watch('groups');
-  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const errorMessage = (_d = (_c = (_b = (_a = formState.errors) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b[optionId]) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.message;
   const groupIndex = watchedAnswerInfo.findIndex(answer => answer === null || answer === void 0 ? void 0 : answer.includes(optionId));
-  const isOptionTitle = (_b = (_a = watchedOptions[optionId]) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.length;
-  const isOptionContent = (_d = (_c = watchedOptions[optionId]) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.length;
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const isOptionTitle = (_f = (_e = watchedOptions[optionId]) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.length;
+  const isOptionContent = (_h = (_g = watchedOptions[optionId]) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.length;
   /**
    * File upload function.
    */
@@ -87,122 +92,204 @@ const OptionGroupAnswerListItem = ({
     }
 
     return contentUrl;
-  }; //
-  //
-  //
+  };
+  /**
+   *
+   */
 
 
-  if (!checkTwoDimensionArray(watchedAnswerInfo)) {
-    return null;
-  }
+  const renderOptionTitleInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
+      style: {
+        width: '33.3%'
+      }
+    }, React.createElement(Controller, {
+      control: control,
+      name: `options.${optionId}.title`,
+      rules: {
+        required: {
+          value: !isOptionTitle && !isOptionContent,
+          message: intl.formatMessage({
+            id: 'answer.option.errorMessage'
+          })
+        }
+      },
+      render: ({
+        field
+      }) => React.createElement(StyledQuizOptionTextInput, Object.assign({}, field, {
+        width: "full",
+        onChange: e => {
+          field.onChange(e.target.value.replace(' ', ''));
+        }
+      }))
+    }));
+  };
+  /**
+   *
+   */
 
-  return React.createElement(StyledSortableListItem, {
-    index: optionId
-  }, React.createElement(StyledSortableListItemOption, {
-    style: {
-      flex: 1
-    }
-  }, React.createElement(Controller, {
-    control: control,
-    name: `options.${optionId}.title`,
-    rules: {
-      required: {
-        value: !isOptionTitle && !isOptionContent,
-        message: intl.formatMessage({
-          id: 'answer.option.errorMessage'
-        })
+
+  const renderOptionContentInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
+      style: {
+        width: '33.3%'
+      }
+    }, React.createElement(Controller, {
+      control: control,
+      name: `options.${optionId}.content`,
+      render: ({
+        field
+      }) => React.createElement(React.Fragment, null, field.value ? React.createElement(StyledQuizOptionContent, null, React.createElement(Flex, {
+        justify: "space-between",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React.createElement(Text, {
+        ellipsis: true
+      }, React.createElement("a", {
+        href: getContentUrl(field.value),
+        target: "_blank",
+        rel: "noreferrer"
+      }, getContentUrl(field.value))), React.createElement(Flex, {
+        align: "center"
+      }, React.createElement(Hspace, {
+        width: 0.5
+      }), React.createElement(IconButton, {
+        icon: eilMathsignMultiplyBasic,
+        role: "gray6",
+        size: "micro",
+        border: false,
+        transparent: true,
+        onClick: () => field.onChange('')
+      })))) : React.createElement(React.Fragment, null, React.createElement(StyledQuizOptionContentLabel, {
+        htmlFor: `${FILE_LABEL}_${optionId}`
+      }, React.createElement(Text, {
+        role: "primary",
+        underline: true
+      }, intl.formatMessage({
+        id: 'answer.option.file.label'
+      }))), React.createElement(StyledQuizOptionContentInput, Object.assign({}, field, {
+        id: `${FILE_LABEL}_${optionId}`,
+        type: "file",
+        accept: FILE_ACCEPT,
+        onChange: async e => {
+          var _a, _b;
+
+          const file = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+
+          if (!file) {
+            return;
+          }
+
+          if (file.size > MAX_FILE_SIZE) {
+            return Notification.error(intl.formatMessage({
+              id: 'answer.option.file.errorMessage.maxSize'
+            }, {
+              size: 3
+            }));
+          }
+
+          const contentFileUrl = await uploadContentFile(file);
+          field.onChange(`![](${String(contentFileUrl)})`);
+        }
+      }))))
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderOptionGroupDropdown = () => {
+    return React.createElement(StyledSortableListItemOption, {
+      style: {
+        width: '33.3%'
       }
-    },
-    render: ({
-      field
-    }) => React.createElement(StyledQuizOptionTextInput, Object.assign({}, field, {
-      width: "full",
+    }, React.createElement(StyledDropdown, {
+      value: groupIndex,
       onChange: e => {
-        field.onChange(e.target.value.replace(' ', ''));
+        const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+        const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer !== optionId));
+
+        if (e === DEFAULT_OPTION_VALUE) {
+          return setValue('answerInfo', answerList);
+        }
+
+        if (answerList[e]) {
+          answerList[e] = [...answerList[e], optionId];
+        } else {
+          answerList[e] = [optionId];
+        }
+
+        setValue('answerInfo', answerList);
       }
-    }))
-  })), React.createElement(StyledSortableListItemOption, null, React.createElement(Controller, {
-    control: control,
-    name: `options.${optionId}.content`,
-    render: ({
-      field
-    }) => React.createElement(React.Fragment, null, field.value ? React.createElement(StyledQuizOptionContent, null, React.createElement(Flex, {
-      align: "center",
-      width: "100%",
-      height: "100%"
-    }, React.createElement(Text, {
-      ellipsis: true
-    }, React.createElement("a", {
-      href: getContentUrl(field.value),
-      target: "_blank",
-      rel: "noreferrer"
-    }, getContentUrl(field.value))), React.createElement(Hspace, {
+    }, React.createElement("option", {
+      value: DEFAULT_OPTION_VALUE
+    }, intl.formatMessage({
+      id: 'answer.option.default.group'
+    })), watchedGroupList.map((group, index) => React.createElement("option", {
+      key: index,
+      value: index
+    }, group.group))));
+  };
+  /**
+   *
+   */
+
+
+  const renderOptionRemoveButton = () => {
+    const isMinimumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) <= MIN_OPTION_INFO_COUNT;
+    return React.createElement(React.Fragment, null, React.createElement(Hspace, {
       width: 0.5
-    }), React.createElement("div", null, React.createElement(IconButton, {
+    }), React.createElement(Tooltip, {
+      title: isMinimumOptions ? intl.formatMessage({
+        id: 'answer.option.tooltip.minDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(IconButton, {
+      transparent: true,
       icon: eilMathsignMultiplyBasic,
       role: "gray6",
       size: "micro",
       border: false,
-      transparent: true,
-      onClick: () => field.onChange('')
-    })))) : React.createElement(React.Fragment, null, React.createElement(StyledQuizOptionContentLabel, {
-      htmlFor: `${FILE_LABEL}_${optionId}`
-    }, React.createElement(Text, {
-      role: "primary",
-      underline: true
-    }, intl.formatMessage({
-      id: 'answer.option.file.label'
-    }))), React.createElement(StyledQuizOptionContentInput, Object.assign({}, field, {
-      id: `${FILE_LABEL}_${optionId}`,
-      type: "file",
-      accept: FILE_ACCEPT,
-      onChange: async e => {
-        var _a, _b;
-
-        const file = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-
-        if (!file) {
-          return;
-        }
+      disabled: isMinimumOptions,
+      onClick: onRemoveItem
+    }))));
+  };
+  /**
+   *
+   */
 
-        if (file.size > MAX_FILE_SIZE) {
-          return Notification.error(intl.formatMessage({
-            id: 'answer.option.file.errorMessage.maxSize'
-          }, {
-            size: 3
-          }));
-        }
 
-        const contentFileUrl = await uploadContentFile(file);
-        field.onChange(`![](${String(contentFileUrl)})`);
-      }
-    }))))
-  })), React.createElement(StyledSortableListItemOption, null, React.createElement(StyledDropdown, {
-    value: groupIndex,
-    onChange: e => {
-      const cloneAnswerList = cloneDeep(watchedAnswerInfo);
-      const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer !== optionId));
-
-      if (e === DEFAULT_OPTION_VALUE) {
-        return setValue('answerInfo', answerList);
-      }
+  const renderErrorMessage = () => {
+    if (!errorMessage) {
+      return null;
+    }
 
-      if (answerList[e]) {
-        answerList[e] = [...answerList[e], optionId];
-      } else {
-        answerList[e] = [optionId];
-      }
+    return React.createElement(Flex, {
+      paddingleft: "0.25rem"
+    }, React.createElement(Text, {
+      size: "small",
+      role: "danger"
+    }, errorMessage));
+  }; //
+  //
+  //
 
-      setValue('answerInfo', answerList);
-    }
-  }, React.createElement("option", {
-    value: DEFAULT_OPTION_VALUE
-  }, intl.formatMessage({
-    id: 'answer.option.default.group'
-  })), watchedGroupList.map((group, index) => React.createElement("option", {
-    key: index,
-    value: index
-  }, group.group)))));
+
+  if (!checkTwoDimensionArray(watchedAnswerInfo)) {
+    return null;
+  }
+
+  return React.createElement(StyledSortableListItem, {
+    index: optionId
+  }, React.createElement(Flex, {
+    justify: "center",
+    width: "calc(100% - 1.5rem)",
+    column: true
+  }, React.createElement(Flex, {
+    align: "center"
+  }, React.createElement(StyledSortableListItemOptionWrapper, null, renderOptionTitleInput(), renderOptionContentInput(), renderOptionGroupDropdown()), renderOptionRemoveButton()), renderErrorMessage()));
 };
 
 export { OptionGroupAnswerListItem as default };

package/es/components/material-quiz-edit/options/options-group/OptionGroupGroupInfo.js

@@ -1,98 +1,30 @@
 import React from 'react';
-import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { useFormContext, useFieldArray } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import { arrayMove } from 'react-sortable-hoc';
-import { SortableListItem, Input, Flex, Text, SortableListGroup, Hspace, Tooltip, IconButton, Button, Icon } from '@elice/blocks';
-import { base } from '@elice/design-tokens';
-import { eilMathsignMultiplyBasic, eilMathsignAddBasic } from '@elice/icons';
+import { Flex, Text, SortableListGroup, Tooltip, Button, Icon } from '@elice/blocks';
+import { eilMathsignAddBasic } from '@elice/icons';
 import cloneDeep from 'lodash-es/cloneDeep';
 import styled from 'styled-components';
 import { createRandomId } from '../../utils/randomId.js';
+import OptionGroupGroupListItem from './OptionGroupGroupListItem.js';
 
-const SHEET_Z_INDEX = 982;
-const MIN_GROUP_INFO_COUNT = 2;
 const MAX_GROUP_INFO_COUNT = 6;
-const StyledSortableList = styled.ul.withConfig({
+const StyledSortableList = styled.div.withConfig({
   componentId: "sc-9aq3yn-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled.li.withConfig({
+const StyledSortableListItemWrapper = styled.div.withConfig({
   componentId: "sc-9aq3yn-1"
-})(["display:flex;align-items:center;&:not(:last-child){margin-bottom:0.5rem;}"]);
-const StyledSortableListItem = styled(SortableListItem).withConfig({
-  componentId: "sc-9aq3yn-2"
-})(["display:flex;overflow:hidden;z-index:", ";width:100%;padding:0 0 0 1rem;border-radius:4px;border:1px solid ", ";background:", ";box-shadow:none;"], SHEET_Z_INDEX + 1, ({
-  isGroupChildAnswer
-}) => isGroupChildAnswer ? base.color.red8 : base.color.gray3, base.color.white);
-const StyledInputGroup = styled(Input).withConfig({
-  componentId: "sc-9aq3yn-3"
-})(["& > div{border:0;}"]); //
+})(["display:flex;flex-direction:column;&:not(:last-child){margin-bottom:0.5rem;}"]); //
 //
 //
 
-const OptionGroupGroupListItem = ({
-  groupId
-}) => {
-  var _a;
-
+const OptionGroupGroupInfo = () => {
   const intl = useIntl();
   const {
-    control,
+    setValue,
     watch
   } = useFormContext();
-  const watchedAnswerInfo = watch('answerInfo');
-  const isGroupChildAnswer = Boolean((_a = watchedAnswerInfo[groupId]) === null || _a === void 0 ? void 0 : _a.length); //
-  //
-  //
-
-  return React.createElement(StyledSortableListItem, {
-    index: groupId,
-    isGroupChildAnswer: !isGroupChildAnswer
-  }, React.createElement(Controller, {
-    control: control,
-    name: `groups.${groupId}.group`,
-    rules: {
-      required: {
-        value: true,
-        message: intl.formatMessage({
-          id: 'group.option.errorMessage.required'
-        })
-      },
-      validate: () => {
-        if (!isGroupChildAnswer) {
-          return intl.formatMessage({
-            id: 'group.option.errorMessage.notChild'
-          });
-        }
-      }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-
-      return React.createElement(StyledInputGroup, Object.assign({}, field, {
-        invalid: fieldState.invalid || !isGroupChildAnswer,
-        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-        width: "full",
-        onChange: e => {
-          field.onChange(e.target.value.replace(' ', ''));
-        }
-      }));
-    }
-  }));
-}; //
-//
-//
-
-
-const OptionGroupGroupList = () => {
-  const intl = useIntl();
-  const {
-    watch,
-    setValue
-  } = useFormContext();
-  const watchedAnswerInfo = watch('answerInfo');
   const {
     fields: groupInfoFields,
     append: appendGroupInfoFieldItem,
@@ -102,7 +34,8 @@ const OptionGroupGroupList = () => {
     keyName: 'id',
     shouldUnregister: true
   });
-  const isMinimumGroups = groupInfoFields.length <= MIN_GROUP_INFO_COUNT;
+  const watchedGroups = watch('groups');
+  const watchedAnswerInfo = watch('answerInfo');
   const isMaximumGroups = groupInfoFields.length >= MAX_GROUP_INFO_COUNT;
   /**
    *
@@ -123,72 +56,12 @@ const OptionGroupGroupList = () => {
     cloneAnswerList.splice(index, 1);
     setValue('answerInfo', cloneAnswerList.filter(Boolean));
     removeGroupInfoFieldItem(Number(index));
-  }; //
-  //
-  //
-
-
-  return React.createElement(React.Fragment, null, React.createElement(StyledSortableList, null, groupInfoFields.map((group, index) => {
-    return React.createElement(StyledSortableListItemWrapper, {
-      key: group.id
-    }, React.createElement(OptionGroupGroupListItem, {
-      groupId: index
-    }), React.createElement(Hspace, {
-      width: 0.5
-    }), React.createElement(Tooltip, {
-      title: isMinimumGroups ? intl.formatMessage({
-        id: 'group.option.tooltip.minDisabled'
-      }) : undefined,
-      placement: "top"
-    }, React.createElement("span", null, React.createElement(IconButton, {
-      transparent: true,
-      icon: eilMathsignMultiplyBasic,
-      role: "gray6",
-      size: "micro",
-      border: false,
-      disabled: isMinimumGroups,
-      onClick: () => removeGroupAnswerInfo(Number(index))
-    }))));
-  })), React.createElement(Tooltip, {
-    title: isMaximumGroups ? intl.formatMessage({
-      id: 'group.option.tooltip.maxDisabled'
-    }) : undefined,
-    placement: "top"
-  }, React.createElement("span", null, React.createElement(Button, {
-    borderDashed: true,
-    block: true,
-    transparent: true,
-    icon: React.createElement(Icon, {
-      icon: eilMathsignAddBasic
-    }),
-    disabled: isMaximumGroups,
-    onClick: () => {
-      appendGroupInfoFieldItem({
-        id: createRandomId(),
-        group: ''
-      });
-      addGroupAnswerInfo();
-    }
-  }, intl.formatMessage({
-    id: 'group.option.addButton'
-  })))));
-}; //
-//
-//
-
-
-const OptionGroupGroupInfo = () => {
-  const intl = useIntl();
-  const {
-    setValue,
-    watch
-  } = useFormContext();
-  const watchedGroups = watch('groups');
-  const watchedAnswerInfo = watch('answerInfo');
+  };
   /**
    *
    */
 
+
   const onSortEnd = ({
     oldIndex,
     newIndex
@@ -201,6 +74,55 @@ const OptionGroupGroupInfo = () => {
       shouldDirty: true
     });
     setValue('answerInfo', cloneAnswerList);
+  };
+  /**
+   *
+   */
+
+
+  const renderGroupOptionList = () => {
+    return React.createElement(SortableListGroup, {
+      onSortEnd: onSortEnd,
+      useDragHandle: true
+    }, React.createElement(StyledSortableList, null, groupInfoFields.map((group, index) => {
+      return React.createElement(StyledSortableListItemWrapper, {
+        key: group.id
+      }, React.createElement(OptionGroupGroupListItem, {
+        groupId: index,
+        groupsCount: groupInfoFields.length,
+        onRemoveOption: () => removeGroupAnswerInfo(index)
+      }));
+    })));
+  };
+  /**
+   *
+   */
+
+
+  const renderGroupOptionAddButton = () => {
+    return React.createElement(Tooltip, {
+      title: isMaximumGroups ? intl.formatMessage({
+        id: 'group.option.tooltip.maxDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(Button, {
+      borderDashed: true,
+      block: true,
+      transparent: true,
+      icon: React.createElement(Icon, {
+        icon: eilMathsignAddBasic
+      }),
+      disabled: isMaximumGroups,
+      onClick: () => {
+        appendGroupInfoFieldItem({
+          id: createRandomId(),
+          group: ''
+        });
+        addGroupAnswerInfo();
+      }
+    }, intl.formatMessage({
+      id: 'group.option.addButton'
+    }))));
   }; //
   //
   //
@@ -213,10 +135,7 @@ const OptionGroupGroupInfo = () => {
     bold: true
   }, intl.formatMessage({
     id: 'group.option.title'
-  })), React.createElement(SortableListGroup, {
-    onSortEnd: onSortEnd,
-    useDragHandle: true
-  }, React.createElement(OptionGroupGroupList, null)));
+  })), renderGroupOptionList(), renderGroupOptionAddButton());
 };
 
 export { OptionGroupGroupInfo as default };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface OptionGroupGroupListItemProps {
+    groupId: number;
+    groupsCount: number;
+    onRemoveOption: () => void;
+}
+declare const OptionGroupGroupListItem: React.FC<OptionGroupGroupListItemProps>;
+export default OptionGroupGroupListItem;