@elice/material-quiz 1.230614.0 → 1.230619.0

package/cjs/components/material-quiz-edit/options/OptionEditor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    invalid?: boolean;
+    invalidText?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+declare const OptionEditor: React.ForwardRefExoticComponent<OptionTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default OptionEditor;

package/cjs/components/material-quiz-edit/options/OptionEditor.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var classNames = require('classnames');
+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 classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+//
+var PREFIX = 'em-option-editor';
+//
+//
+//
+var StyledTextarea = styled__default["default"](blocks.Textarea).withConfig({
+  componentId: "sc-50ghuz-0"
+})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], designTokens.base.color.primary6, function (props) {
+  return props.invalid ? styled.css(["border:1px solid ", " !important;"], designTokens.base.color.red8) : null;
+}, function (props) {
+  return props.disabled ? styled.css(["background-color:", ";cursor:not-allowed;"], designTokens.base.color.gray2) : null;
+}, function (props) {
+  return props.readOnly ? styled.css(["background-color:#f0f1f3;"]) : null;
+});
+var StyledTextareaWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-50ghuz-1"
+})(["display:flex;position:relative;.em-option-editor-adornment{position:absolute;top:50%;transform:translateY(-50%);z-index:1;&.prefix{left:1rem;}&.suffix{right:1rem;}}"]);
+//
+//
+//
+var OptionEditor = React__default["default"].forwardRef(function (_a, ref) {
+  var suffix = _a.suffix,
+    prefix = _a.prefix,
+    invalid = _a.invalid,
+    invalidText = _a.invalidText,
+    readOnly = _a.readOnly,
+    props = tslib.__rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly"]);
+  return React__default["default"].createElement("div", {
+    className: classNames__default["default"](PREFIX, props.className)
+  }, React__default["default"].createElement(StyledTextareaWrap, {
+    className: "".concat(PREFIX, "-textarea-wrapper")
+  }, prefix ? React__default["default"].createElement("div", {
+    className: "".concat(PREFIX, "-adornment prefix")
+  }, prefix) : null, React__default["default"].createElement(StyledTextarea, Object.assign({}, props, {
+    ref: ref,
+    invalid: invalid,
+    readOnly: readOnly,
+    "aria-disabled": props.disabled
+  })), suffix ? React__default["default"].createElement("div", {
+    className: "".concat(PREFIX, "-adornment suffix")
+  }, suffix) : null), invalid ? React__default["default"].createElement(blocks.Box, {
+    padding: "0 0.75rem",
+    margintop: "0.25rem",
+    className: "".concat(PREFIX, "-helperText-wrap")
+  }, React__default["default"].createElement(blocks.Text, {
+    role: "red",
+    size: "tiny",
+    className: "".concat(PREFIX, "-helperText")
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null);
+});
+
+exports["default"] = OptionEditor;

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

@@ -12,6 +12,7 @@ var icons = require('@elice/icons');
 var styled = require('styled-components');
 var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
+var OptionEditor = require('./OptionEditor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +26,7 @@ var StyledWrap = styled__default["default"].div.withConfig({
 })([""]);
 var StyledInputGroup = styled__default["default"].div.withConfig({
   componentId: "sc-1nbx9b8-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var OptionSelectMultiple = function OptionSelectMultiple() {
   var intl = reactIntl.useIntl();
   var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
@@ -138,12 +139,10 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React__default["default"].createElement(blocks.Input, Object.assign({
-          size: "small",
-          width: "full",
-          placeholder: intl.formatMessage({
-            id: 'option.common.select.placeholder'
-          }),
+        return React__default["default"].createElement(OptionEditor["default"], Object.assign({}, field, {
+          invalid: fieldState.invalid,
+          invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+          readOnly: disabled,
           prefix: React__default["default"].createElement(blocks.Checkbox, {
             checked: watchedAnswerInfo.includes(index),
             disabled: disabled,
@@ -169,11 +168,8 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
             onClick: function onClick() {
               return removeOptionInfo(index);
             }
-          }))),
-          readOnly: disabled,
-          invalid: fieldState.invalid,
-          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-        }, field));
+          })))
+        }));
       }
     });
   })), React__default["default"].createElement(blocks.Vspace, {

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

@@ -12,6 +12,7 @@ var icons = require('@elice/icons');
 var styled = require('styled-components');
 var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
+var OptionEditor = require('./OptionEditor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +26,7 @@ var StyledWrap = styled__default["default"].div.withConfig({
 })([""]);
 var StyledInputGroup = styled__default["default"].div.withConfig({
   componentId: "sc-1xufc1p-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var OptionSelectMultipleOrder = function OptionSelectMultipleOrder() {
   var intl = reactIntl.useIntl();
   var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
@@ -138,9 +139,7 @@ var OptionSelectMultipleOrder = function OptionSelectMultipleOrder() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React__default["default"].createElement(blocks.Input, Object.assign({
-          size: "small",
-          width: "full",
+        return React__default["default"].createElement(OptionEditor["default"], Object.assign({
           placeholder: intl.formatMessage({
             id: 'option.common.select.placeholder'
           }),

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

@@ -11,6 +11,7 @@ var icons = require('@elice/icons');
 var styled = require('styled-components');
 var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
+var OptionEditor = require('./OptionEditor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,7 +25,7 @@ var StyledWrap = styled__default["default"].div.withConfig({
 })([""]);
 var StyledInputGroup = styled__default["default"].div.withConfig({
   componentId: "sc-vizer2-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var StyledInputPrefixRadioOption = styled__default["default"](blocks.RadioOption).withConfig({
   componentId: "sc-vizer2-2"
 })([".eb-radio-option__label{display:none;}"]);
@@ -133,12 +134,13 @@ var OptionSelectOne = function OptionSelectOne() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React__default["default"].createElement(blocks.Input, Object.assign({
-          size: "small",
-          width: "full",
+        return React__default["default"].createElement(OptionEditor["default"], Object.assign({}, field, {
+          invalid: fieldState.invalid,
+          invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           placeholder: intl.formatMessage({
             id: 'option.common.select.placeholder'
           }),
+          readOnly: disabled,
           prefix: React__default["default"].createElement(blocks.Radio, {
             value: watchedAnswerInfo[0],
             disabled: disabled,
@@ -161,11 +163,8 @@ var OptionSelectOne = function OptionSelectOne() {
             onClick: function onClick() {
               return removeOptionInfo(index);
             }
-          }))),
-          readOnly: disabled,
-          invalid: fieldState.invalid,
-          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-        }, field));
+          })))
+        }));
       }
     });
   })), React__default["default"].createElement(blocks.Vspace, {

package/cjs/components/shared/StyledMarkdown.js

@@ -11,6 +11,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var StyledMarkdown = styled__default["default"](markdown.Markdown).withConfig({
   componentId: "sc-l6r531-0"
-})(["p{margin:0 !important;}"]);
+})(["p{margin:0 !important;}code{white-space:pre-wrap;word-break:break-all;}"]);
 
 exports["default"] = StyledMarkdown;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    invalid?: boolean;
+    invalidText?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+declare const OptionEditor: React.ForwardRefExoticComponent<OptionTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default OptionEditor;

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

@@ -0,0 +1,61 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { Textarea, Box, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+
+//
+//
+//
+var PREFIX = 'em-option-editor';
+//
+//
+//
+var StyledTextarea = styled(Textarea).withConfig({
+  componentId: "sc-50ghuz-0"
+})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], base.color.primary6, function (props) {
+  return props.invalid ? css(["border:1px solid ", " !important;"], base.color.red8) : null;
+}, function (props) {
+  return props.disabled ? css(["background-color:", ";cursor:not-allowed;"], base.color.gray2) : null;
+}, function (props) {
+  return props.readOnly ? css(["background-color:#f0f1f3;"]) : null;
+});
+var StyledTextareaWrap = styled.div.withConfig({
+  componentId: "sc-50ghuz-1"
+})(["display:flex;position:relative;.em-option-editor-adornment{position:absolute;top:50%;transform:translateY(-50%);z-index:1;&.prefix{left:1rem;}&.suffix{right:1rem;}}"]);
+//
+//
+//
+var OptionEditor = React.forwardRef(function (_a, ref) {
+  var suffix = _a.suffix,
+    prefix = _a.prefix,
+    invalid = _a.invalid,
+    invalidText = _a.invalidText,
+    readOnly = _a.readOnly,
+    props = __rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly"]);
+  return React.createElement("div", {
+    className: classNames(PREFIX, props.className)
+  }, React.createElement(StyledTextareaWrap, {
+    className: "".concat(PREFIX, "-textarea-wrapper")
+  }, prefix ? React.createElement("div", {
+    className: "".concat(PREFIX, "-adornment prefix")
+  }, prefix) : null, React.createElement(StyledTextarea, Object.assign({}, props, {
+    ref: ref,
+    invalid: invalid,
+    readOnly: readOnly,
+    "aria-disabled": props.disabled
+  })), suffix ? React.createElement("div", {
+    className: "".concat(PREFIX, "-adornment suffix")
+  }, suffix) : null), invalid ? React.createElement(Box, {
+    padding: "0 0.75rem",
+    margintop: "0.25rem",
+    className: "".concat(PREFIX, "-helperText-wrap")
+  }, React.createElement(Text, {
+    role: "red",
+    size: "tiny",
+    className: "".concat(PREFIX, "-helperText")
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null);
+});
+
+export { OptionEditor as default };

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

@@ -3,11 +3,12 @@ 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 { StatusText, Vspace, 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';
+import OptionEditor from './OptionEditor.js';
 
 var MIN_OPTION_INFO_COUNT = 2;
 var MAX_OPTION_INFO_COUNT = 20;
@@ -16,7 +17,7 @@ var StyledWrap = styled.div.withConfig({
 })([""]);
 var StyledInputGroup = styled.div.withConfig({
   componentId: "sc-1nbx9b8-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var OptionSelectMultiple = function OptionSelectMultiple() {
   var intl = useIntl();
   var _useMaterialQuizEditC = useMaterialQuizEditContext(),
@@ -129,12 +130,10 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React.createElement(Input, Object.assign({
-          size: "small",
-          width: "full",
-          placeholder: intl.formatMessage({
-            id: 'option.common.select.placeholder'
-          }),
+        return React.createElement(OptionEditor, Object.assign({}, field, {
+          invalid: fieldState.invalid,
+          invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+          readOnly: disabled,
           prefix: React.createElement(Checkbox, {
             checked: watchedAnswerInfo.includes(index),
             disabled: disabled,
@@ -160,11 +159,8 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
             onClick: function onClick() {
               return removeOptionInfo(index);
             }
-          }))),
-          readOnly: disabled,
-          invalid: fieldState.invalid,
-          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-        }, field));
+          })))
+        }));
       }
     });
   })), React.createElement(Vspace, {

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

@@ -3,11 +3,12 @@ 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 { StatusText, Vspace, 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';
+import OptionEditor from './OptionEditor.js';
 
 var MIN_OPTION_INFO_COUNT = 2;
 var MAX_OPTION_INFO_COUNT = 20;
@@ -16,7 +17,7 @@ var StyledWrap = styled.div.withConfig({
 })([""]);
 var StyledInputGroup = styled.div.withConfig({
   componentId: "sc-1xufc1p-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var OptionSelectMultipleOrder = function OptionSelectMultipleOrder() {
   var intl = useIntl();
   var _useMaterialQuizEditC = useMaterialQuizEditContext(),
@@ -129,9 +130,7 @@ var OptionSelectMultipleOrder = function OptionSelectMultipleOrder() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React.createElement(Input, Object.assign({
-          size: "small",
-          width: "full",
+        return React.createElement(OptionEditor, Object.assign({
           placeholder: intl.formatMessage({
             id: 'option.common.select.placeholder'
           }),

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

@@ -2,11 +2,12 @@ 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 { RadioOption, StatusText, Vspace, 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';
+import OptionEditor from './OptionEditor.js';
 
 var MIN_OPTION_INFO_COUNT = 2;
 var MAX_OPTION_INFO_COUNT = 20;
@@ -15,7 +16,7 @@ var StyledWrap = styled.div.withConfig({
 })([""]);
 var StyledInputGroup = styled.div.withConfig({
   componentId: "sc-vizer2-1"
-})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
+})(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 var StyledInputPrefixRadioOption = styled(RadioOption).withConfig({
   componentId: "sc-vizer2-2"
 })([".eb-radio-option__label{display:none;}"]);
@@ -124,12 +125,13 @@ var OptionSelectOne = function OptionSelectOne() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React.createElement(Input, Object.assign({
-          size: "small",
-          width: "full",
+        return React.createElement(OptionEditor, Object.assign({}, field, {
+          invalid: fieldState.invalid,
+          invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           placeholder: intl.formatMessage({
             id: 'option.common.select.placeholder'
           }),
+          readOnly: disabled,
           prefix: React.createElement(Radio, {
             value: watchedAnswerInfo[0],
             disabled: disabled,
@@ -152,11 +154,8 @@ var OptionSelectOne = function OptionSelectOne() {
             onClick: function onClick() {
               return removeOptionInfo(index);
             }
-          }))),
-          readOnly: disabled,
-          invalid: fieldState.invalid,
-          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-        }, field));
+          })))
+        }));
       }
     });
   })), React.createElement(Vspace, {

package/es/components/shared/StyledMarkdown.js

@@ -3,6 +3,6 @@ import styled from 'styled-components';
 
 var StyledMarkdown = styled(Markdown).withConfig({
   componentId: "sc-l6r531-0"
-})(["p{margin:0 !important;}"]);
+})(["p{margin:0 !important;}code{white-space:pre-wrap;word-break:break-all;}"]);
 
 export { StyledMarkdown as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.230614.0",
+  "version": "1.230619.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.230614.0",
-    "@elice/material-shared-utils": "1.230614.0",
+    "@elice/material-shared-types": "1.230619.0",
+    "@elice/material-shared-utils": "1.230619.0",
     "@elice/types": "1.230522.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": "c2a437cb5966ef7ee657ca878b3fcae957948cb5"
+  "gitHead": "26306efb9ea6c3574539eb00edaf19781244efba"
 }