@elice/material-quiz 1.221222.0 → 1.221228.0

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

@@ -22,11 +22,8 @@ const MAX_OPTION_INFO_COUNT = 20;
 const StyledSortableList = styled__default["default"].div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled__default["default"].div.withConfig({
-  componentId: "sc-14yoda7-1"
-})(["display:flex;flex-direction:column;width:100%;&:not(:last-child){margin-bottom:0.5rem;}"]);
 const StyledOptionTitle = styled__default["default"].div.withConfig({
-  componentId: "sc-14yoda7-2"
+  componentId: "sc-14yoda7-1"
 })(["display:flex;width:calc(100% - 2rem - 1.5rem);"]); //
 //
 //
@@ -125,12 +122,11 @@ const OptionGroupAnswerInfo = () => {
     return React__default["default"].createElement(blocks.SortableListGroup, {
       onSortEnd: onSortEnd,
       useDragHandle: true
-    }, React__default["default"].createElement(StyledSortableList, null, watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map((option, index) => React__default["default"].createElement(StyledSortableListItemWrapper, {
-      key: option.id
-    }, React__default["default"].createElement(OptionGroupAnswerListItem, {
+    }, React__default["default"].createElement(StyledSortableList, null, watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map((option, index) => React__default["default"].createElement(OptionGroupAnswerListItem, {
+      key: option.id,
       optionId: index,
       onRemoveItem: () => handleRemoveItem(index)
-    })))));
+    }))));
   };
   /**
    *

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

@@ -9,6 +9,7 @@ var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var cloneDeep = require('lodash-es/cloneDeep');
+var trim = require('lodash-es/trim');
 var styled = require('styled-components');
 var checkTwoDimensionArray = require('../../utils/checkTwoDimensionArray.js');
 
@@ -16,6 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
+var trim__default = /*#__PURE__*/_interopDefaultLegacy(trim);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const SHEET_Z_INDEX = 982;
@@ -26,7 +28,7 @@ const FILE_ACCEPT = '.mp3, .mp4, .mov, .png, .jpg, .svg, .gif';
 const MAX_FILE_SIZE = 3 * 1024 * 1024;
 const StyledSortableListItem = styled__default["default"](blocks.SortableListItem).withConfig({
   componentId: "sc-18q96lt-0"
-})(["display:flex;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;"], SHEET_Z_INDEX + 1);
+})(["display:flex;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], SHEET_Z_INDEX + 1);
 const StyledSortableListItemOptionWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-18q96lt-1"
 })(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border:1px solid ", ";border-radius:4px;background:", ";"], designTokens.base.color.gray3, designTokens.base.color.white);
@@ -120,15 +122,19 @@ const OptionGroupAnswerListItem = ({
           message: intl.formatMessage({
             id: 'answer.option.errorMessage'
           })
+        },
+        validate: e => {
+          if (!trim__default["default"](e).length) {
+            return intl.formatMessage({
+              id: 'answer.option.errorMessage'
+            });
+          }
         }
       },
       render: ({
         field
       }) => React__default["default"].createElement(StyledQuizOptionTextInput, Object.assign({}, field, {
-        width: "full",
-        onChange: e => {
-          field.onChange(e.target.value.replace(' ', ''));
-        }
+        width: "full"
       }))
     }));
   };

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

@@ -20,10 +20,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const MAX_GROUP_INFO_COUNT = 6;
 const StyledSortableList = styled__default["default"].div.withConfig({
   componentId: "sc-9aq3yn-0"
-})(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled__default["default"].div.withConfig({
-  componentId: "sc-9aq3yn-1"
-})(["display:flex;flex-direction:column;&:not(:last-child){margin-bottom:0.5rem;}"]); //
+})(["margin:1rem 0;padding:0;"]); //
 //
 //
 
@@ -92,15 +89,12 @@ const OptionGroupGroupInfo = () => {
     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)
-      }));
-    })));
+    }, React__default["default"].createElement(StyledSortableList, null, groupInfoFields.map((group, index) => React__default["default"].createElement(OptionGroupGroupListItem, {
+      key: group.id,
+      groupId: index,
+      groupsCount: groupInfoFields.length,
+      onRemoveOption: () => removeGroupAnswerInfo(index)
+    }))));
   };
   /**
    *

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

@@ -6,18 +6,20 @@ var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
+var trim = require('lodash-es/trim');
 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 trim__default = /*#__PURE__*/_interopDefaultLegacy(trim);
 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);
+})(["display:flex;z-index:", ";width:100%;padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], 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:", ";"], ({
@@ -61,7 +63,13 @@ const OptionGroupGroupListItem = ({
             id: 'group.option.errorMessage.required'
           })
         },
-        validate: () => {
+        validate: e => {
+          if (!trim__default["default"](e).length) {
+            return intl.formatMessage({
+              id: 'group.option.errorMessage.required'
+            });
+          }
+
           if (!isGroupChildAnswer) {
             return intl.formatMessage({
               id: 'group.option.errorMessage.notChild'
@@ -74,10 +82,7 @@ const OptionGroupGroupListItem = ({
         fieldState
       }) => React__default["default"].createElement(StyledInputGroup, Object.assign({}, field, {
         invalid: fieldState.invalid || !isGroupChildAnswer,
-        width: "full",
-        onChange: e => {
-          field.onChange(e.target.value.replace(' ', ''));
-        }
+        width: "full"
       }))
     }));
   };

package/cjs/components/material-quiz-edit/utils/editValue.js

@@ -2,8 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var trim = require('lodash-es/trim');
 var randomId = require('./randomId.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var trim__default = /*#__PURE__*/_interopDefaultLegacy(trim);
+
 /**
  *
  */
@@ -34,13 +39,13 @@ function manipulateValue(v) {
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
     options: v.options.length ? v.options.map(option => ({
-      title: option.title,
+      title: trim__default["default"](option.title),
       content: option.content
     })) : null,
     answerInfo: Array.isArray(v.answerInfo) || typeof v.answerInfo === 'string' ? v.answerInfo : undefined,
     groups: v.groups.length ? v.groups.map(({
       group
-    }) => group) : null
+    }) => trim__default["default"](group)) : null
   });
 }
 

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

@@ -14,11 +14,8 @@ const MAX_OPTION_INFO_COUNT = 20;
 const StyledSortableList = styled.div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-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"
+  componentId: "sc-14yoda7-1"
 })(["display:flex;width:calc(100% - 2rem - 1.5rem);"]); //
 //
 //
@@ -117,12 +114,11 @@ const OptionGroupAnswerInfo = () => {
     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, {
+    }, React.createElement(StyledSortableList, null, watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map((option, index) => React.createElement(OptionGroupAnswerListItem, {
+      key: option.id,
       optionId: index,
       onRemoveItem: () => handleRemoveItem(index)
-    })))));
+    }))));
   };
   /**
    *

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

@@ -7,6 +7,7 @@ import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
 import cloneDeep from 'lodash-es/cloneDeep';
+import trim from 'lodash-es/trim';
 import styled from 'styled-components';
 import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 
@@ -18,7 +19,7 @@ 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;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;"], SHEET_Z_INDEX + 1);
+})(["display:flex;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], SHEET_Z_INDEX + 1);
 const StyledSortableListItemOptionWrapper = styled.div.withConfig({
   componentId: "sc-18q96lt-1"
 })(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border:1px solid ", ";border-radius:4px;background:", ";"], base.color.gray3, base.color.white);
@@ -112,15 +113,19 @@ const OptionGroupAnswerListItem = ({
           message: intl.formatMessage({
             id: 'answer.option.errorMessage'
           })
+        },
+        validate: e => {
+          if (!trim(e).length) {
+            return intl.formatMessage({
+              id: 'answer.option.errorMessage'
+            });
+          }
         }
       },
       render: ({
         field
       }) => React.createElement(StyledQuizOptionTextInput, Object.assign({}, field, {
-        width: "full",
-        onChange: e => {
-          field.onChange(e.target.value.replace(' ', ''));
-        }
+        width: "full"
       }))
     }));
   };

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

@@ -12,10 +12,7 @@ import OptionGroupGroupListItem from './OptionGroupGroupListItem.js';
 const MAX_GROUP_INFO_COUNT = 6;
 const StyledSortableList = styled.div.withConfig({
   componentId: "sc-9aq3yn-0"
-})(["margin:1rem 0;padding:0;"]);
-const StyledSortableListItemWrapper = styled.div.withConfig({
-  componentId: "sc-9aq3yn-1"
-})(["display:flex;flex-direction:column;&:not(:last-child){margin-bottom:0.5rem;}"]); //
+})(["margin:1rem 0;padding:0;"]); //
 //
 //
 
@@ -84,15 +81,12 @@ const OptionGroupGroupInfo = () => {
     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)
-      }));
-    })));
+    }, React.createElement(StyledSortableList, null, groupInfoFields.map((group, index) => React.createElement(OptionGroupGroupListItem, {
+      key: group.id,
+      groupId: index,
+      groupsCount: groupInfoFields.length,
+      onRemoveOption: () => removeGroupAnswerInfo(index)
+    }))));
   };
   /**
    *

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

@@ -4,13 +4,14 @@ import { useIntl } from 'react-intl';
 import { SortableListItem, Input, Flex, Hspace, Tooltip, IconButton, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
+import trim from 'lodash-es/trim';
 import styled from 'styled-components';
 
 const SHEET_Z_INDEX = 982;
 const MIN_GROUP_INFO_COUNT = 2;
 const StyledSortableListItem = styled(SortableListItem).withConfig({
   componentId: "sc-hj5nic-0"
-})(["display:flex;z-index:", ";width:100%;padding:0;background:transparent;box-shadow:none;"], SHEET_Z_INDEX + 1);
+})(["display:flex;z-index:", ";width:100%;padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], SHEET_Z_INDEX + 1);
 const StyledSortableListItemOptionWrapper = styled.div.withConfig({
   componentId: "sc-hj5nic-1"
 })(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border-radius:4px;border:1px solid ", ";background:", ";"], ({
@@ -54,7 +55,13 @@ const OptionGroupGroupListItem = ({
             id: 'group.option.errorMessage.required'
           })
         },
-        validate: () => {
+        validate: e => {
+          if (!trim(e).length) {
+            return intl.formatMessage({
+              id: 'group.option.errorMessage.required'
+            });
+          }
+
           if (!isGroupChildAnswer) {
             return intl.formatMessage({
               id: 'group.option.errorMessage.notChild'
@@ -67,10 +74,7 @@ const OptionGroupGroupListItem = ({
         fieldState
       }) => React.createElement(StyledInputGroup, Object.assign({}, field, {
         invalid: fieldState.invalid || !isGroupChildAnswer,
-        width: "full",
-        onChange: e => {
-          field.onChange(e.target.value.replace(' ', ''));
-        }
+        width: "full"
       }))
     }));
   };

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

@@ -1,3 +1,4 @@
+import trim from 'lodash-es/trim';
 import { createRandomId } from './randomId.js';
 
 /**
@@ -30,13 +31,13 @@ function manipulateValue(v) {
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
     options: v.options.length ? v.options.map(option => ({
-      title: option.title,
+      title: trim(option.title),
       content: option.content
     })) : null,
     answerInfo: Array.isArray(v.answerInfo) || typeof v.answerInfo === 'string' ? v.answerInfo : undefined,
     groups: v.groups.length ? v.groups.map(({
       group
-    }) => group) : null
+    }) => trim(group)) : null
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.221222.0",
+  "version": "1.221228.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -58,8 +58,8 @@
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.221222.0",
-    "@elice/material-shared-utils": "1.221222.0",
+    "@elice/material-shared-types": "1.221228.0",
+    "@elice/material-shared-utils": "1.221228.0",
     "@elice/types": "1.221217.0",
     "@types/classnames": "^2.3.1",
     "@types/jquery": "^3.5.13",
@@ -73,5 +73,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "417f2c0d5c6c4ffc7c5c2ab95ec7a2ca36dca843"
+  "gitHead": "53eaff58a939c390104c7e96f0bc3eb8738a3ee7"
 }