@elice/material-quiz 1.221217.0 → 1.221222.0

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

@@ -5,11 +5,11 @@ var reactHookForm = require('react-hook-form');
 var reactIntl = require('react-intl');
 var reactSortableHoc = require('react-sortable-hoc');
 var blocks = require('@elice/blocks');
-var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var cloneDeep = require('lodash-es/cloneDeep');
 var styled = require('styled-components');
 var randomId = require('../../utils/randomId.js');
+var OptionGroupGroupListItem = require('./OptionGroupGroupListItem.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,90 +17,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const SHEET_Z_INDEX = 982;
-const MIN_GROUP_INFO_COUNT = 2;
 const MAX_GROUP_INFO_COUNT = 6;
-const StyledSortableList = styled__default["default"].ul.withConfig({
+const StyledSortableList = styled__default["default"].div.withConfig({
   componentId: "sc-9aq3yn-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled__default["default"].li.withConfig({
+const StyledSortableListItemWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-9aq3yn-1"
-})(["display:flex;align-items:center;&:not(:last-child){margin-bottom:0.5rem;}"]);
-const StyledSortableListItem = styled__default["default"](blocks.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 ? designTokens.base.color.red8 : designTokens.base.color.gray3, designTokens.base.color.white);
-const StyledInputGroup = styled__default["default"](blocks.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 = reactIntl.useIntl();
   const {
-    control,
+    setValue,
     watch
   } = reactHookForm.useFormContext();
-  const watchedAnswerInfo = watch('answerInfo');
-  const isGroupChildAnswer = Boolean((_a = watchedAnswerInfo[groupId]) === null || _a === void 0 ? void 0 : _a.length); //
-  //
-  //
-
-  return React__default["default"].createElement(StyledSortableListItem, {
-    index: groupId,
-    isGroupChildAnswer: !isGroupChildAnswer
-  }, React__default["default"].createElement(reactHookForm.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__default["default"].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 = reactIntl.useIntl();
-  const {
-    watch,
-    setValue
-  } = reactHookForm.useFormContext();
-  const watchedAnswerInfo = watch('answerInfo');
   const {
     fields: groupInfoFields,
     append: appendGroupInfoFieldItem,
@@ -110,7 +42,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;
   /**
    *
@@ -131,72 +64,12 @@ const OptionGroupGroupList = () => {
     cloneAnswerList.splice(index, 1);
     setValue('answerInfo', cloneAnswerList.filter(Boolean));
     removeGroupInfoFieldItem(Number(index));
-  }; //
-  //
-  //
-
-
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(StyledSortableList, null, groupInfoFields.map((group, index) => {
-    return React__default["default"].createElement(StyledSortableListItemWrapper, {
-      key: group.id
-    }, React__default["default"].createElement(OptionGroupGroupListItem, {
-      groupId: index
-    }), React__default["default"].createElement(blocks.Hspace, {
-      width: 0.5
-    }), React__default["default"].createElement(blocks.Tooltip, {
-      title: isMinimumGroups ? intl.formatMessage({
-        id: 'group.option.tooltip.minDisabled'
-      }) : undefined,
-      placement: "top"
-    }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.IconButton, {
-      transparent: true,
-      icon: icons.eilMathsignMultiplyBasic,
-      role: "gray6",
-      size: "micro",
-      border: false,
-      disabled: isMinimumGroups,
-      onClick: () => removeGroupAnswerInfo(Number(index))
-    }))));
-  })), React__default["default"].createElement(blocks.Tooltip, {
-    title: isMaximumGroups ? intl.formatMessage({
-      id: 'group.option.tooltip.maxDisabled'
-    }) : undefined,
-    placement: "top"
-  }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.Button, {
-    borderDashed: true,
-    block: true,
-    transparent: true,
-    icon: React__default["default"].createElement(blocks.Icon, {
-      icon: icons.eilMathsignAddBasic
-    }),
-    disabled: isMaximumGroups,
-    onClick: () => {
-      appendGroupInfoFieldItem({
-        id: randomId.createRandomId(),
-        group: ''
-      });
-      addGroupAnswerInfo();
-    }
-  }, intl.formatMessage({
-    id: 'group.option.addButton'
-  })))));
-}; //
-//
-//
-
-
-const OptionGroupGroupInfo = () => {
-  const intl = reactIntl.useIntl();
-  const {
-    setValue,
-    watch
-  } = reactHookForm.useFormContext();
-  const watchedGroups = watch('groups');
-  const watchedAnswerInfo = watch('answerInfo');
+  };
   /**
    *
    */
 
+
   const onSortEnd = ({
     oldIndex,
     newIndex
@@ -209,6 +82,55 @@ const OptionGroupGroupInfo = () => {
       shouldDirty: true
     });
     setValue('answerInfo', cloneAnswerList);
+  };
+  /**
+   *
+   */
+
+
+  const renderGroupOptionList = () => {
+    return React__default["default"].createElement(blocks.SortableListGroup, {
+      onSortEnd: onSortEnd,
+      useDragHandle: true
+    }, React__default["default"].createElement(StyledSortableList, null, groupInfoFields.map((group, index) => {
+      return React__default["default"].createElement(StyledSortableListItemWrapper, {
+        key: group.id
+      }, React__default["default"].createElement(OptionGroupGroupListItem, {
+        groupId: index,
+        groupsCount: groupInfoFields.length,
+        onRemoveOption: () => removeGroupAnswerInfo(index)
+      }));
+    })));
+  };
+  /**
+   *
+   */
+
+
+  const renderGroupOptionAddButton = () => {
+    return React__default["default"].createElement(blocks.Tooltip, {
+      title: isMaximumGroups ? intl.formatMessage({
+        id: 'group.option.tooltip.maxDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.Button, {
+      borderDashed: true,
+      block: true,
+      transparent: true,
+      icon: React__default["default"].createElement(blocks.Icon, {
+        icon: icons.eilMathsignAddBasic
+      }),
+      disabled: isMaximumGroups,
+      onClick: () => {
+        appendGroupInfoFieldItem({
+          id: randomId.createRandomId(),
+          group: ''
+        });
+        addGroupAnswerInfo();
+      }
+    }, intl.formatMessage({
+      id: 'group.option.addButton'
+    }))));
   }; //
   //
   //
@@ -221,10 +143,7 @@ const OptionGroupGroupInfo = () => {
     bold: true
   }, intl.formatMessage({
     id: 'group.option.title'
-  })), React__default["default"].createElement(blocks.SortableListGroup, {
-    onSortEnd: onSortEnd,
-    useDragHandle: true
-  }, React__default["default"].createElement(OptionGroupGroupList, null)));
+  })), renderGroupOptionList(), renderGroupOptionAddButton());
 };
 
 module.exports = OptionGroupGroupInfo;

package/cjs/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;

package/cjs/components/material-quiz-edit/options/options-group/OptionGroupGroupListItem.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var styled = require('styled-components');
+
+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 SHEET_Z_INDEX = 982;
+const MIN_GROUP_INFO_COUNT = 2;
+const StyledSortableListItem = styled__default["default"](blocks.SortableListItem).withConfig({
+  componentId: "sc-hj5nic-0"
+})(["display:flex;z-index:", ";width:100%;padding:0;background:transparent;box-shadow:none;"], SHEET_Z_INDEX + 1);
+const StyledSortableListItemOptionWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-hj5nic-1"
+})(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border-radius:4px;border:1px solid ", ";background:", ";"], ({
+  isGroupChildAnswer
+}) => isGroupChildAnswer ? designTokens.base.color.red8 : designTokens.base.color.gray3, designTokens.base.color.white);
+const StyledInputGroup = styled__default["default"](blocks.Input).withConfig({
+  componentId: "sc-hj5nic-2"
+})(["& > div{border:0;}"]);
+
+const OptionGroupGroupListItem = ({
+  groupId,
+  groupsCount,
+  onRemoveOption
+}) => {
+  var _a, _b, _c, _d, _e;
+
+  const intl = reactIntl.useIntl();
+  const {
+    control,
+    formState,
+    watch
+  } = reactHookForm.useFormContext();
+  const watchedAnswerInfo = watch('answerInfo');
+  const isGroupChildAnswer = Boolean((_a = watchedAnswerInfo[groupId]) === null || _a === void 0 ? void 0 : _a.length);
+  const isMinimumGroups = groupsCount <= MIN_GROUP_INFO_COUNT;
+  const errorMessage = (_e = (_d = (_c = (_b = formState.errors) === null || _b === void 0 ? void 0 : _b.groups) === null || _c === void 0 ? void 0 : _c[groupId]) === null || _d === void 0 ? void 0 : _d.group) === null || _e === void 0 ? void 0 : _e.message;
+  /**
+   *
+   */
+
+  const renderOptionGroupInput = () => {
+    return React__default["default"].createElement(StyledSortableListItemOptionWrapper, {
+      isGroupChildAnswer: !isGroupChildAnswer
+    }, React__default["default"].createElement(reactHookForm.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
+      }) => React__default["default"].createElement(StyledInputGroup, Object.assign({}, field, {
+        invalid: fieldState.invalid || !isGroupChildAnswer,
+        width: "full",
+        onChange: e => {
+          field.onChange(e.target.value.replace(' ', ''));
+        }
+      }))
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderOptionRemoveButton = () => {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.Tooltip, {
+      title: isMinimumGroups ? intl.formatMessage({
+        id: 'group.option.tooltip.minDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.IconButton, {
+      transparent: true,
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "gray6",
+      size: "micro",
+      border: false,
+      disabled: isMinimumGroups,
+      onClick: onRemoveOption
+    }))));
+  };
+  /**
+   *
+   */
+
+
+  const renderErrorMessage = () => {
+    if (!errorMessage) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.Flex, {
+      paddingleft: "0.25rem"
+    }, React__default["default"].createElement(blocks.Text, {
+      size: "small",
+      role: "danger"
+    }, errorMessage));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(StyledSortableListItem, {
+    index: groupId
+  }, React__default["default"].createElement(blocks.Flex, {
+    justify: "center",
+    width: "100%",
+    column: true
+  }, React__default["default"].createElement(blocks.Flex, {
+    align: "center"
+  }, renderOptionGroupInput(), renderOptionRemoveButton()), renderErrorMessage()));
+};
+
+module.exports = OptionGroupGroupListItem;

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

@@ -2,36 +2,32 @@ import React from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import { arrayMove } from 'react-sortable-hoc';
-import { Flex, Text, SortableListGroup, Hspace, Tooltip, IconButton, Button, Icon, Vspace, StatusText } from '@elice/blocks';
-import { eilMathsignMultiplyBasic, eilMathsignAddBasic } from '@elice/icons';
+import { Flex, Text, SortableListGroup, Tooltip, Button, Icon, Vspace, StatusText } from '@elice/blocks';
+import { eilMathsignAddBasic } from '@elice/icons';
 import cloneDeep from 'lodash-es/cloneDeep';
 import styled from 'styled-components';
 import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 import { createRandomId } from '../../utils/randomId.js';
 import OptionGroupAnswerListItem from './OptionGroupAnswerListItem.js';
 
-const OPTION_CONTENT_WIDTH = 205;
-const OPTION_GROUP_WIDTH = 180;
-const MIN_OPTION_INFO_COUNT = 2;
 const MAX_OPTION_INFO_COUNT = 20;
-const StyledSortableList = styled.ul.withConfig({
+const StyledSortableList = styled.div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled.li.withConfig({
+const StyledSortableListItemWrapper = styled.div.withConfig({
   componentId: "sc-14yoda7-1"
 })(["display:flex;flex-direction:column;width:100%;&:not(:last-child){margin-bottom:0.5rem;}"]);
 const StyledOptionTitle = styled.div.withConfig({
   componentId: "sc-14yoda7-2"
-})(["display:flex;width:calc(100% - 2rem);"]); //
+})(["display:flex;width:calc(100% - 2rem - 1.5rem);"]); //
 //
 //
 
-const OptionGroupAnswerList = () => {
+const OptionGroupAnswerInfo = () => {
   const intl = useIntl();
   const {
-    formState,
-    watch,
-    setValue
+    setValue,
+    watch
   } = useFormContext();
   const {
     append: appendOptionInfoFieldItem,
@@ -41,10 +37,9 @@ const OptionGroupAnswerList = () => {
     keyName: 'id',
     shouldUnregister: true
   });
-  const optionInfoFields = watch('options');
+  const watchedOptions = watch('options');
   const watchedAnswerInfo = watch('answerInfo');
-  const isMinimumOptions = (optionInfoFields === null || optionInfoFields === void 0 ? void 0 : optionInfoFields.length) <= MIN_OPTION_INFO_COUNT;
-  const isMaximumOptions = (optionInfoFields === null || optionInfoFields === void 0 ? void 0 : optionInfoFields.length) >= MAX_OPTION_INFO_COUNT;
+  const isMaximumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) >= MAX_OPTION_INFO_COUNT;
   /**
    *
    */
@@ -61,97 +56,12 @@ const OptionGroupAnswerList = () => {
     const recalculationAnswerList = cloneAnswerList.map(answers => answers.map(answer => answer > index ? answer - 1 : answer));
     removeOptionInfoFieldItem(index);
     setValue('answerInfo', recalculationAnswerList);
-  }; //
-  //
-  //
-
-
-  if (!checkTwoDimensionArray(watchedAnswerInfo)) {
-    return null;
-  }
-
-  return React.createElement(React.Fragment, null, React.createElement(StyledSortableList, null, optionInfoFields === null || optionInfoFields === void 0 ? void 0 : optionInfoFields.map((option, index) => {
-    var _a, _b, _c, _d;
-
-    const errorMessage = (_d = (_c = (_b = (_a = formState.errors) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.message;
-    return React.createElement(StyledSortableListItemWrapper, {
-      key: option.id
-    }, React.createElement(Flex, {
-      align: "center",
-      width: "100%"
-    }, React.createElement(OptionGroupAnswerListItem, {
-      optionId: index
-    }), React.createElement(Hspace, {
-      width: 0.5
-    }), 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,
-      disabled: isMinimumOptions,
-      onClick: () => handleRemoveItem(index)
-    })))), errorMessage ? React.createElement(Text, {
-      size: "small",
-      role: "danger"
-    }, errorMessage) : null);
-  })), React.createElement(Tooltip, {
-    title: isMaximumOptions ? intl.formatMessage({
-      id: 'answer.option.tooltip.maxDisabled'
-    }) : undefined,
-    placement: "top"
-  }, React.createElement("span", null, React.createElement(Button, {
-    borderDashed: true,
-    block: true,
-    transparent: true,
-    disabled: isMaximumOptions,
-    icon: React.createElement(Icon, {
-      icon: eilMathsignAddBasic
-    }),
-    onClick: () => appendOptionInfoFieldItem({
-      id: createRandomId(),
-      title: '',
-      content: ''
-    })
-  }, intl.formatMessage({
-    id: 'answer.option.addButton'
-  })))), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(StatusText, {
-    role: "description"
-  }, intl.formatMessage({
-    id: 'answer.option.file.description.imageSize'
-  })), React.createElement(StatusText, {
-    role: "description"
-  }, intl.formatMessage({
-    id: 'answer.option.file.description.fileSize'
-  })), React.createElement(StatusText, {
-    role: "description"
-  }, intl.formatMessage({
-    id: 'answer.option.file.description.extension'
-  })));
-}; //
-//
-//
-
-
-const OptionGroupAnswerInfo = () => {
-  const intl = useIntl();
-  const {
-    setValue,
-    watch
-  } = useFormContext();
-  const watchedOptions = watch('options');
-  const watchedAnswerInfo = watch('answerInfo');
+  };
   /**
    *
    */
 
+
   const onSortEnd = ({
     oldIndex,
     newIndex
@@ -167,38 +77,108 @@ const OptionGroupAnswerInfo = () => {
     setValue('options', arrayMove(watchedOptions, oldIndex, newIndex), {
       shouldDirty: true
     });
+  };
+  /**
+   *
+   */
+
+
+  const renderAnswerTitle = () => {
+    return React.createElement(StyledOptionTitle, null, React.createElement(Flex, {
+      width: "33.3%",
+      auto: true
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.text'
+    }))), React.createElement(Flex, {
+      width: "33.3%"
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.file'
+    }))), React.createElement(Flex, {
+      width: "calc(33.3% - 1.5rem)"
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.group'
+    }))));
+  };
+  /**
+   *
+   */
+
+
+  const renderAnswerOptionList = () => {
+    return React.createElement(SortableListGroup, {
+      onSortEnd: onSortEnd,
+      useDragHandle: true
+    }, React.createElement(StyledSortableList, null, watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map((option, index) => React.createElement(StyledSortableListItemWrapper, {
+      key: option.id
+    }, React.createElement(OptionGroupAnswerListItem, {
+      optionId: index,
+      onRemoveItem: () => handleRemoveItem(index)
+    })))));
+  };
+  /**
+   *
+   */
+
+
+  const renderAnswerOptionAddButton = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+      title: isMaximumOptions ? intl.formatMessage({
+        id: 'answer.option.tooltip.maxDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(Button, {
+      borderDashed: true,
+      block: true,
+      transparent: true,
+      disabled: isMaximumOptions,
+      icon: React.createElement(Icon, {
+        icon: eilMathsignAddBasic
+      }),
+      onClick: () => appendOptionInfoFieldItem({
+        id: createRandomId(),
+        title: '',
+        content: ''
+      })
+    }, intl.formatMessage({
+      id: 'answer.option.addButton'
+    })))), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Flex, {
+      column: true
+    }, React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.imageSize'
+    })), React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.fileSize'
+    })), React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.extension'
+    }))));
   }; //
   //
   //
 
 
+  if (!checkTwoDimensionArray(watchedAnswerInfo)) {
+    return null;
+  }
+
   return React.createElement(Flex, {
     column: true
-  }, React.createElement(StyledOptionTitle, null, React.createElement(Flex, {
-    auto: true
-  }, React.createElement(Text, {
-    size: "small",
-    bold: true
-  }, intl.formatMessage({
-    id: 'answer.option.title.text'
-  }))), React.createElement(Flex, {
-    width: `${OPTION_CONTENT_WIDTH}px`
-  }, React.createElement(Text, {
-    size: "small",
-    bold: true
-  }, intl.formatMessage({
-    id: 'answer.option.title.file'
-  }))), React.createElement(Flex, {
-    width: `${OPTION_GROUP_WIDTH}px`
-  }, React.createElement(Text, {
-    size: "small",
-    bold: true
-  }, intl.formatMessage({
-    id: 'answer.option.title.group'
-  })))), React.createElement(SortableListGroup, {
-    onSortEnd: onSortEnd,
-    useDragHandle: true
-  }, React.createElement(OptionGroupAnswerList, null)));
+  }, renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton());
 };
 
 export { OptionGroupAnswerInfo as default };