@elice/material-quiz 1.240718.0-trasncript.2 → 1.240718.2

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

@@ -1,5 +1,4 @@
 import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { SortableListItem, Textarea, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -10,92 +9,75 @@ import styled, { css } from 'styled-components';
 //
 //
 //
-var SHEET_Z_INDEX = 982; // prevent override blocks components.
-var PREFIX = 'em-option-editor';
+const SHEET_Z_INDEX = 982; // prevent override blocks components.
+const PREFIX = 'em-option-editor';
 //
 //
 //
-var StyledSortedListItem = styled(SortableListItem).withConfig({
+const StyledSortedListItem = styled(SortableListItem).withConfig({
   componentId: "sc-50ghuz-0"
 })(["display:flex;padding:0;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;margin:0;"], SHEET_Z_INDEX + 1);
-var StyledTextarea = styled(Textarea).withConfig({
+const StyledTextarea = styled(Textarea).withConfig({
   componentId: "sc-50ghuz-1"
-})(["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:", ";"], base.color.gray1) : null;
-});
-var StyledTextareaWrap = styled.div.withConfig({
+})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], base.color.primary6, props => props.invalid ? css(["border:1px solid ", " !important;"], base.color.red8) : null, props => props.disabled ? css(["background-color:", ";cursor:not-allowed;"], base.color.gray2) : null, props => props.readOnly ? css(["background-color:", ";"], base.color.gray1) : null);
+const StyledTextareaWrap = styled.div.withConfig({
   componentId: "sc-50ghuz-2"
 })(["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,
-    index = _a.index,
+const OptionEditor = React.forwardRef((_a, ref) => {
+  var {
+      suffix,
+      prefix,
+      invalid,
+      invalidText,
+      readOnly,
+      index
+    } = _a,
     props = __rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly", "index"]);
   /**
    * Extract textarea element from legacy TextArea ref prop.
    */
-  var handleTextAreaApi = React.useCallback(function (textAreaApi) {
+  const handleTextAreaApi = React.useCallback(textAreaApi => {
     var _a;
     if (!ref) {
       return;
     }
-    var textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
+    const textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
     typeof ref === 'function' ? ref(textAreaInput) : ref.current = textAreaInput;
   }, [ref]);
-  return jsx(StyledSortedListItem, {
+  return React.createElement(StyledSortedListItem, {
     index: index,
+    disabled: readOnly
+  }, React.createElement(Box, {
+    className: classNames(PREFIX, props.className),
+    flex: 1
+  }, React.createElement(StyledTextareaWrap, {
+    className: `${PREFIX}-textarea-wrapper`
+  }, prefix ? React.createElement("div", {
+    className: `${PREFIX}-adornment prefix`
+  }, prefix) : null, React.createElement(StyledTextarea, Object.assign({}, props, {
+    ref: handleTextAreaApi,
+    invalid: invalid,
+    readOnly: readOnly,
+    resetFocus: props.onBlur,
     disabled: readOnly,
-    children: jsxs(Box, {
-      className: classNames(PREFIX, props.className),
-      flex: 1,
-      children: [jsxs(StyledTextareaWrap, {
-        className: "".concat(PREFIX, "-textarea-wrapper"),
-        children: [prefix ? jsx("div", {
-          className: "".concat(PREFIX, "-adornment prefix"),
-          children: prefix
-        }) : null, jsx(StyledTextarea, Object.assign({}, props, {
-          ref: handleTextAreaApi,
-          invalid: invalid,
-          readOnly: readOnly,
-          resetFocus: props.onBlur,
-          disabled: readOnly,
-          "aria-disabled": props.disabled
-        })), suffix ? jsx("div", {
-          className: "".concat(PREFIX, "-adornment suffix"),
-          onDragStart: function onDragStart(e) {
-            return e.stopPropagation();
-          },
-          onDragCapture: function onDragCapture(e) {
-            return e.stopPropagation();
-          },
-          onTouchStart: function onTouchStart(e) {
-            return e.stopPropagation();
-          },
-          children: suffix
-        }) : null]
-      }), invalid ? jsx(Box, {
-        padding: "0 0.75rem",
-        marginTop: "0.25rem",
-        className: "".concat(PREFIX, "-helperText-wrap"),
-        children: jsx(Text, {
-          role: "red",
-          size: "tiny",
-          className: "".concat(PREFIX, "-helperText"),
-          children: invalidText !== null && invalidText !== void 0 ? invalidText : ''
-        })
-      }) : null]
-    })
-  });
+    "aria-disabled": props.disabled
+  })), suffix ? React.createElement("div", {
+    className: `${PREFIX}-adornment suffix`,
+    onDragStart: e => e.stopPropagation(),
+    onDragCapture: e => e.stopPropagation(),
+    onTouchStart: e => e.stopPropagation()
+  }, suffix) : null), invalid ? React.createElement(Box, {
+    padding: "0 0.75rem",
+    marginTop: "0.25rem",
+    className: `${PREFIX}-helperText-wrap`
+  }, React.createElement(Text, {
+    role: "red",
+    size: "tiny",
+    className: `${PREFIX}-helperText`
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null));
 });
 
 export { OptionEditor as default };

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

@@ -1,5 +1,4 @@
-import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { useFormContext, useFieldArray, useWatch, Controller } from 'react-hook-form';
 import { arrayMove } from 'react-sortable-hoc';
 import { Transition } from 'react-transition-group';
@@ -12,57 +11,56 @@ 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;
-var StyledWrap = styled.div.withConfig({
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
   componentId: "sc-1nbx9b8-0"
 })(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
-var StyledInputGroup = styled(SortableListGroup).withConfig({
+const StyledInputGroup = styled(SortableListGroup).withConfig({
   componentId: "sc-1nbx9b8-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-var OptionSelectMultiple = function OptionSelectMultiple() {
-  var intl = useRawEliceIntl();
-  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
-    disabled = _useMaterialQuizEditC.disabled;
-  var _useFormContext = useFormContext(),
-    control = _useFormContext.control,
-    getValues = _useFormContext.getValues,
-    setValue = _useFormContext.setValue;
-  var _useFieldArray = useFieldArray({
-      control: control,
-      name: 'optionsDefault',
-      keyName: 'id',
-      shouldUnregister: true
-    }),
-    optionInfoFields = _useFieldArray.fields,
-    appendOptionInfoFieldItem = _useFieldArray.append,
-    removeOptionInfoFieldItem = _useFieldArray.remove,
-    moveOptionInfoFieldItem = _useFieldArray.move;
-  var watchedAnswerInfo = useWatch({
-    control: control,
+const OptionSelectMultiple = () => {
+  const intl = useRawEliceIntl();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    control,
+    getValues,
+    setValue
+  } = useFormContext();
+  const {
+    fields: optionInfoFields,
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem,
+    move: moveOptionInfoFieldItem
+  } = useFieldArray({
+    control,
+    name: 'optionsDefault',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  const watchedAnswerInfo = useWatch({
+    control,
     name: 'answerInfoDefault'
   });
-  var watchedOptions = useWatch({
-    control: control,
+  const watchedOptions = useWatch({
+    control,
     name: 'optionsDefault'
   });
   /**
    * Update answer info.
    */
-  var updateAnswerInfo = function updateAnswerInfo(option) {
-    var prevAnswerInfo = getValues('answerInfoDefault');
+  const updateAnswerInfo = option => {
+    const prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
-    setValue('answerInfoDefault', !option.checked ? prevAnswerInfo.filter(function (answerIndex) {
-      return answerIndex !== option.index;
-    }).map(function (answerIndex) {
-      return option.removed ?
-      // if answer removed, re-calculate answer index
-      answerIndex < option.index ? answerIndex : answerIndex - 1 :
-      // or maintain current answer index
-      answerIndex;
-    }) : [].concat(_toConsumableArray(prevAnswerInfo), [option.index]), {
+    setValue('answerInfoDefault', !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
     });
@@ -70,7 +68,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
   /**
    * Append option info.
    */
-  var appendOptionInfo = function appendOptionInfo() {
+  const appendOptionInfo = () => {
     appendOptionInfoFieldItem({
       id: createRandomId(),
       title: '',
@@ -80,9 +78,9 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
   /**
    * Remove item from option info at index.
    */
-  var removeOptionInfo = function removeOptionInfo(index) {
+  const removeOptionInfo = index => {
     updateAnswerInfo({
-      index: index,
+      index,
       checked: false,
       removed: true
     });
@@ -91,21 +89,16 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
   /**
    * Sort options based on the old and new index.
    */
-  var handleSortEnd = function handleSortEnd(_ref) {
-    var oldIndex = _ref.oldIndex,
-      newIndex = _ref.newIndex;
-    var prevAnswerInfo = cloneDeep(watchedAnswerInfo);
-    var prevOptions = cloneDeep(watchedOptions).map(function (option, index) {
-      return Object.assign(Object.assign({}, option), {
-        isAnswer: prevAnswerInfo.includes(index)
-      });
-    });
-    var updatedOptions = arrayMove(prevOptions, oldIndex, newIndex);
-    var updatedAnswerInfo = updatedOptions.map(function (option, index) {
-      return option.isAnswer ? index : null;
-    }).filter(function (option) {
-      return option !== null;
-    });
+  const handleSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    const prevAnswerInfo = cloneDeep(watchedAnswerInfo);
+    const prevOptions = cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
+      isAnswer: prevAnswerInfo.includes(index)
+    }));
+    const updatedOptions = arrayMove(prevOptions, oldIndex, newIndex);
+    const updatedAnswerInfo = updatedOptions.map((option, index) => option.isAnswer ? index : null).filter(option => option !== null);
     setValue('answerInfoDefault', updatedAnswerInfo);
     moveOptionInfoFieldItem(oldIndex, newIndex);
   };
@@ -115,122 +108,107 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
   if (!Array.isArray(watchedAnswerInfo)) {
     return null;
   }
-  return jsxs(StyledWrap, {
-    children: [jsx(Controller, {
-      name: "answerInfoDefault",
-      control: control,
-      rules: {
-        validate: function validate(v) {
-          if (Array.isArray(v) && v.length < 1) {
-            return intl.formatMessage({
-              id: 'content.option.errorMessage.required'
-            });
-          }
-          return true;
+  return React.createElement(StyledWrap, null, React.createElement(Controller, {
+    name: "answerInfoDefault",
+    control: control,
+    rules: {
+      validate: v => {
+        if (Array.isArray(v) && v.length < 1) {
+          return intl.formatMessage({
+            id: 'content.option.errorMessage.required'
+          });
         }
-      },
-      render: function render(_ref2) {
-        var fieldState = _ref2.fieldState;
-        var _a;
-        return jsx(Transition, {
-          in: fieldState.invalid,
-          timeout: 0,
-          mountOnEnter: true,
-          unmountOnExit: true,
-          children: jsxs(Fragment, {
-            children: [jsx(StatusText, {
-              children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-              role: "danger"
-            }), jsx(Vspace, {
-              height: 0.5
-            })]
-          })
-        });
+        return true;
       }
-    }), jsx(StyledInputGroup, {
-      pressDelay: 100,
-      useDragHandle: true,
-      onSortEnd: handleSortEnd,
-      children: optionInfoFields.map(function (_ref3, index) {
-        var id = _ref3.id;
-        return jsx(Controller, {
-          control: control,
-          name: "optionsDefault.".concat(index, ".content"),
-          rules: {
-            required: {
-              value: true,
-              message: intl.formatMessage({
-                id: 'option.common.select.errorMessage.required'
-              })
-            }
-          },
-          render: function render(_ref4) {
-            var field = _ref4.field,
-              fieldState = _ref4.fieldState;
-            var _a;
-            return jsx(OptionEditor, Object.assign({
-              index: index,
-              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: jsx(Checkbox, {
-                checked: watchedAnswerInfo.includes(index),
-                disabled: disabled,
-                onChange: function onChange(checked) {
-                  return updateAnswerInfo({
-                    index: index,
-                    checked: checked
-                  });
-                }
-              }),
-              suffix: jsx(Tooltip, {
-                title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
-                  id: 'option.common.select.tooltip.minOptionInfoItem'
-                }) : undefined,
-                placement: "top-start",
-                children: jsx("span", {
-                  children: jsx(IconButton, {
-                    icon: eilMathsignMultiplyBasic,
-                    size: "tiny",
-                    role: "grey9",
-                    border: false,
-                    transparent: true,
-                    disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
-                    onClick: function onClick() {
-                      return removeOptionInfo(index);
-                    }
-                  })
-                })
-              })
-            }, field));
-          }
-        }, id);
-      })
-    }), jsx(Vspace, {
-      height: 0.5
-    }), jsx(Tooltip, {
-      title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
-        id: 'option.common.select.tooltip.maxOptionInfoItem'
-      }) : undefined,
-      placement: "bottom",
-      children: jsx("span", {
-        children: jsx(Button, {
-          block: true,
-          size: "micro",
-          borderDashed: true,
-          transparent: true,
-          icon: jsx(Icon, {
-            icon: eilMathsignAddCircle
-          }),
-          disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
-          onClick: appendOptionInfo,
-          children: intl.formatMessage({
-            id: 'option.common.select.addButton'
-          })
+    },
+    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, {
+    pressDelay: 100,
+    useDragHandle: true,
+    onSortEnd: handleSortEnd
+  }, optionInfoFields.map(({
+    id
+  }, index) => React.createElement(Controller, {
+    key: id,
+    control: control,
+    name: `optionsDefault.${index}.content`,
+    rules: {
+      required: {
+        value: true,
+        message: intl.formatMessage({
+          id: 'option.common.select.errorMessage.required'
         })
-      })
-    })]
-  });
+      }
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+      return React.createElement(OptionEditor, Object.assign({
+        index: index,
+        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,
+          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)
+        })))
+      }, 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
+  }, intl.formatMessage({
+    id: 'option.common.select.addButton'
+  })))));
 };
 
 export { OptionSelectMultiple as default };