@bigbinary/neeto-form-frontend 4.1.10 → 4.2.1

package/dist/BuildForm.js

@@ -4,13 +4,13 @@ import { isPresent, truncate, findBy, isNotPresent, slugify, existsBy, hyphenate
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { equals, path, curry, assoc, prop, dissoc, when, includes, isEmpty, reject, keys, pick, omit, evolve, map, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, pluck, test, paths, difference, split, last, either, T, F } from 'ramda';
 import { k as useDeleteQuestion, Q as QUESTION_TYPES, a as useForm, l as useCreateQuestion, m as useUpdateQuestion, C as CAPTCHA_TYPES, n as useReorderQuestions, i as QUERY_KEYS } from './constants-51SEJjzI.js';
-import { f as buildDisplayLabel, h as INDEPENDENT_LABELS_MAP, i as QUESTION_ACTIONS, j as isElementOverflowing, D as Drag, k as SELECTABLE_KINDS, l as isAutoGeneratedQuestion, m as isRichTextQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, n as RESERVED_FIELD_CODES, d as LABEL_FIELDS, o as isDefaultLanguage, p as buildAddQuestionButtonProps, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, q as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, r as NON_HIDEABLE_FIELDS, s as NON_READ_ONLY_FIELDS, t as RICH_TEXT_QUESTIONS, u as FILE_TYPES_MAP, w as FILE_GROUPS, M as MINIMUM_OPTIONS, x as RATING_OPTIONS, y as STAR_RATING_MIN_VALUE_OPTIONS, z as STAR_RATING_MAX_VALUE_OPTIONS, A as STAR_RATING_ICONS_MAP, B as buildDisabledAddButtonHelpPopoverProps, G as buildReorderPayload, H as isMandatoryField, J as QUESTION_KINDS, a as QUESTION_KIND, K as getActiveQuestionKindDetails, O as DEFAULT_AVAILABLE_LANGUAGES, T as DEFAULT_ADVANCED_FEATURES, U as QUESTIONS_INITIAL_VALUE } from './constants-Da_Y-J4N.js';
+import { f as buildDisplayLabel, h as INDEPENDENT_LABELS_MAP, i as QUESTION_ACTIONS, j as isElementOverflowing, k as Drag, l as SELECTABLE_KINDS, m as isAutoGeneratedQuestion, n as isRichTextQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, o as RESERVED_FIELD_CODES, d as LABEL_FIELDS, p as isDefaultLanguage, q as buildAddQuestionButtonProps, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, r as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, s as NON_HIDEABLE_FIELDS, t as NON_READ_ONLY_FIELDS, u as RICH_TEXT_QUESTIONS, w as FILE_TYPES_MAP, x as FILE_GROUPS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, M as MINIMUM_OPTIONS, y as IMAGE_HEIGHT_SLIDER_DEFAULTS, z as RATING_OPTIONS, A as STAR_RATING_MIN_VALUE_OPTIONS, B as STAR_RATING_MAX_VALUE_OPTIONS, G as STAR_RATING_ICONS_MAP, H as buildDisabledAddButtonHelpPopoverProps, J as buildReorderPayload, K as isMandatoryField, O as QUESTION_KINDS, a as QUESTION_KIND, T as getActiveQuestionKindDetails, U as DEFAULT_AVAILABLE_LANGUAGES, V as DEFAULT_ADVANCED_FEATURES, W as QUESTIONS_INITIAL_VALUE } from './constants-QPLZ_r-D.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef, useEffect, createElement } from 'react';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { withT, isMetaKeyPressed, useStateWithDependency, useFuncDebounce, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { showThumbsUpToastr, withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
-import { a as useBuildFormStore } from './buildForm-CsVQHcC7.js';
+import { a as useBuildFormStore } from './buildForm-DcE5kFvR.js';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation, Trans } from 'react-i18next';
@@ -53,6 +53,7 @@ import _regeneratorRuntime from '@babel/runtime/regenerator';
 import Checkbox$1 from '@bigbinary/neetoui/formik/Checkbox';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import OptionFields from '@bigbinary/neeto-molecules/OptionFields';
+import Slider from '@bigbinary/neetoui/Slider';
 import '@bigbinary/neeto-commons-frontend/constants';
 import 'axios';
 import 'dompurify';
@@ -1874,12 +1875,17 @@ var Options = function Options(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useBuildFormStore = useBuildFormStore(function (store) {
-      var _store$formState;
+      var _store$formState, _store$formState2;
       return {
-        selectedLanguage: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["selectedLanguage"]
+        selectedLanguage: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["selectedLanguage"],
+        isPictureChoiceEnabled: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["isPictureChoiceEnabled"]
       };
     }, shallow),
-    selectedLanguage = _useBuildFormStore.selectedLanguage;
+    selectedLanguage = _useBuildFormStore.selectedLanguage,
+    isPictureChoiceEnabled = _useBuildFormStore.isPictureChoiceEnabled;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
   var name = "optionsAttributes";
   var _useField = useField(name),
     _useField2 = _slicedToArray(_useField, 3);
@@ -1898,24 +1904,56 @@ var Options = function Options(_ref) {
   var isManageOptionDisabled = isFunction(freezeOptions) ? freezeOptions(selectedLanguage) : freezeOptions;
   var isAddOptionDisabled = disableAddOption || isManageOptionDisabled;
   var isRemoveOptionDisabled = disableRemoveOption || isManageOptionDisabled;
+  var isDropdown = values.kind === QUESTION_TYPES.DROPDOWN;
+  var isPictureChoice = isPictureChoiceEnabled && !isDropdown && (values.isPictureChoice || DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice);
+  var imageHeight = values.imageHeight || DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight;
+  var handleImageHeightChange = function handleImageHeightChange(value) {
+    setFieldValue("imageHeight", value);
+  };
   return /*#__PURE__*/jsxs("div", {
-    className: "w-full",
-    children: [/*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({
-      className: "mb-2 block"
-    }, optionLabelProps), {}, {
-      children: t("neetoForm.questions.common.questionFields.field.options")
-    })), /*#__PURE__*/jsx(OptionFields, {
-      name: name,
-      shouldDestroy: true,
-      destroyFlagName: "_destroy",
-      disabled: isManageOptionDisabled,
-      draggable: !isManageOptionDisabled,
-      isAddOptionEnabled: !isAddOptionDisabled,
-      isDeleteOptionEnabled: !isRemoveOptionDisabled,
-      isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
-      minOptions: MINIMUM_OPTIONS,
-      shouldResetEmptyOptionOnBlur: false,
-      onChange: setOptionsAttributes
+    className: "w-full space-y-4",
+    children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({
+        className: "mb-2 block"
+      }, optionLabelProps), {}, {
+        children: t("neetoForm.questions.common.questionFields.field.options")
+      })), /*#__PURE__*/jsx(OptionFields, {
+        isPictureChoice: isPictureChoice,
+        name: name,
+        shouldDestroy: true,
+        destroyFlagName: "_destroy",
+        disabled: isManageOptionDisabled,
+        draggable: !isManageOptionDisabled,
+        isAddOptionEnabled: !isAddOptionDisabled,
+        isDeleteOptionEnabled: !isRemoveOptionDisabled,
+        isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
+        minOptions: MINIMUM_OPTIONS,
+        shouldResetEmptyOptionOnBlur: false,
+        onChange: setOptionsAttributes
+      })]
+    }), !isDropdown && isPictureChoiceEnabled && /*#__PURE__*/jsxs(Block, {
+      title: t("neetoForm.questions.common.questionFields.field.pictureChoiceSettings"),
+      children: [/*#__PURE__*/jsx(Switch, {
+        name: "isPictureChoice",
+        label: t("neetoForm.questions.common.questionFields.field.addPicturesToOptions")
+      }), isPictureChoice && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Switch, {
+          name: "shouldFitImages",
+          label: t("neetoForm.questions.common.questionFields.field.fitImages")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "mt-4",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: t("neetoForm.questions.common.questionFields.field.imageHeight")
+          }), /*#__PURE__*/jsx(Slider, {
+            max: IMAGE_HEIGHT_SLIDER_DEFAULTS.max,
+            min: IMAGE_HEIGHT_SLIDER_DEFAULTS.min,
+            value: imageHeight,
+            onChange: handleImageHeightChange
+          })]
+        })]
+      })]
     })]
   });
 };
@@ -2188,7 +2226,8 @@ var Form = function Form(_ref) {
     usesCustomSubmissionComponent = _ref.usesCustomSubmissionComponent,
     questionsFromCache = _ref.questionsFromCache,
     onMutateSuccess = _ref.onMutateSuccess,
-    advancedFeatures = _ref.advancedFeatures;
+    advancedFeatures = _ref.advancedFeatures,
+    isPictureChoiceEnabled = _ref.isPictureChoiceEnabled;
   var containerRef = useRef();
   var _useStateWithDependen = useStateWithDependency(questionsFromCache),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
@@ -2262,9 +2301,10 @@ var Form = function Form(_ref) {
       hostSpecificData: hostSpecificData,
       onMutateSuccess: onMutateSuccess,
       advancedFeatures: advancedFeatures,
-      onLanguageChange: onLanguageChange
+      onLanguageChange: onLanguageChange,
+      isPictureChoiceEnabled: isPictureChoiceEnabled
     });
-  }, [formId, isFormEnabled, savedTitle, setFormData, selectedLanguage, helpDocUrls, isUsingDefaultQuestionKinds, usesCustomSubmissionComponent, hostSpecificData, onMutateSuccess, advancedFeatures, onLanguageChange]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, selectedLanguage, helpDocUrls, isUsingDefaultQuestionKinds, usesCustomSubmissionComponent, hostSpecificData, onMutateSuccess, advancedFeatures, onLanguageChange, isPictureChoiceEnabled]);
   var handleSelect = function handleSelect(question) {
     setSelectedQuestion(question);
   };
@@ -2447,7 +2487,9 @@ var BuildForm = function BuildForm(_ref) {
     onMutateSuccess = _ref$onMutateSuccess === void 0 ? noop : _ref$onMutateSuccess,
     hostSpecificData = _ref.hostSpecificData,
     _ref$canManageQuestio = _ref.canManageQuestions,
-    canManageQuestions = _ref$canManageQuestio === void 0 ? false : _ref$canManageQuestio;
+    canManageQuestions = _ref$canManageQuestio === void 0 ? false : _ref$canManageQuestio,
+    _ref$isPictureChoiceE = _ref.isPictureChoiceEnabled,
+    isPictureChoiceEnabled = _ref$isPictureChoiceE === void 0 ? false : _ref$isPictureChoiceE;
   var queryClient = useQueryClient();
   var _useForm = useForm({
       formId: id,
@@ -2499,6 +2541,7 @@ var BuildForm = function BuildForm(_ref) {
       isDisabledFieldLabel: isDisabledFieldLabel,
       isFormEnabled: isFormEnabled,
       isKindAlreadyActive: isKindAlreadyActive,
+      isPictureChoiceEnabled: isPictureChoiceEnabled,
       isRequiredField: isRequiredField,
       isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
       kindUniqueOn: kindUniqueOn,