@elice/material-quiz 1.221217.0 → 1.221222.0

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+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 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);
+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:", ";"], ({
+  isGroupChildAnswer
+}) => isGroupChildAnswer ? base.color.red8 : base.color.gray3, base.color.white);
+const StyledInputGroup = styled(Input).withConfig({
+  componentId: "sc-hj5nic-2"
+})(["& > div{border:0;}"]);
+
+const OptionGroupGroupListItem = ({
+  groupId,
+  groupsCount,
+  onRemoveOption
+}) => {
+  var _a, _b, _c, _d, _e;
+
+  const intl = useIntl();
+  const {
+    control,
+    formState,
+    watch
+  } = 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.createElement(StyledSortableListItemOptionWrapper, {
+      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
+      }) => React.createElement(StyledInputGroup, Object.assign({}, field, {
+        invalid: fieldState.invalid || !isGroupChildAnswer,
+        width: "full",
+        onChange: e => {
+          field.onChange(e.target.value.replace(' ', ''));
+        }
+      }))
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderOptionRemoveButton = () => {
+    return React.createElement(React.Fragment, null, 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: onRemoveOption
+    }))));
+  };
+  /**
+   *
+   */
+
+
+  const renderErrorMessage = () => {
+    if (!errorMessage) {
+      return null;
+    }
+
+    return React.createElement(Flex, {
+      paddingleft: "0.25rem"
+    }, React.createElement(Text, {
+      size: "small",
+      role: "danger"
+    }, errorMessage));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledSortableListItem, {
+    index: groupId
+  }, React.createElement(Flex, {
+    justify: "center",
+    width: "100%",
+    column: true
+  }, React.createElement(Flex, {
+    align: "center"
+  }, renderOptionGroupInput(), renderOptionRemoveButton()), renderErrorMessage()));
+};
+
+export { OptionGroupGroupListItem as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.221217.0",
+  "version": "1.221222.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.221217.0",
-    "@elice/material-shared-utils": "1.221217.0",
+    "@elice/material-shared-types": "1.221222.0",
+    "@elice/material-shared-utils": "1.221222.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": "0c56eb2b44bd1620a528da0b9d4e33fd76d91d46"
+  "gitHead": "417f2c0d5c6c4ffc7c5c2ab95ec7a2ca36dca843"
 }