@bigbinary/neeto-form-frontend 4.1.10 → 4.2.0

package/dist/{utils-BUXD94aD.js → utils-GRfGBny0.js}

@@ -22,7 +22,7 @@ import * as yup from 'yup';
 import i18next from 'i18next';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _toArray from '@babel/runtime/helpers/toArray';
-import { a as QUESTION_KIND, P as PARENTHESES_REGEX, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, d as LABEL_FIELDS, e as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-Da_Y-J4N.js';
+import { a as QUESTION_KIND, P as PARENTHESES_REGEX, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, d as LABEL_FIELDS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, e as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-QPLZ_r-D.js';
 import classnames from 'classnames';
 import { useUpdateEffect, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
@@ -42,6 +42,7 @@ import { FileUpload } from '@bigbinary/neeto-molecules/FileUpload';
 import Label from '@bigbinary/neetoui/Label';
 import Select from '@bigbinary/neetoui/Select';
 import Radio from '@bigbinary/neetoui/Radio';
+import Image from '@bigbinary/neeto-icons/Image';
 import NeetoEditor from '@bigbinary/neeto-editor/Editor';
 import Textarea from '@bigbinary/neetoui/Textarea';
 
@@ -1725,6 +1726,56 @@ var NameField = function NameField(props) {
   }));
 };
 
+var ChoiceImage = function ChoiceImage(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    height = _ref.height,
+    shouldFitImages = _ref.shouldFitImages;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasError = _useState2[0],
+    setHasError = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var handleLoad = function handleLoad() {
+    return setIsLoading(false);
+  };
+  var handleError = function handleError() {
+    setHasError(true);
+    setIsLoading(false);
+  };
+  if (hasError || !src) {
+    return /*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-choice__image-placeholder neeto-ui-bg-gray-100",
+      style: {
+        height: height
+      },
+      children: /*#__PURE__*/jsx(Image, {
+        size: 32
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      height: height
+    },
+    className: classnames("neeto-form-engine-choice__image-wrapper", {
+      "neeto-form-engine-choice__image-wrapper--loading": isLoading
+    }),
+    children: /*#__PURE__*/jsx("img", {
+      alt: alt,
+      src: src,
+      className: classnames("neeto-form-engine-choice__image", {
+        "neeto-form-engine-choice__image--fit": shouldFitImages
+      }),
+      onError: handleError,
+      onLoad: handleLoad
+    })
+  });
+};
+
 var Choices = function Choices(_ref) {
   var label = _ref.label,
     options = _ref.options,
@@ -1733,7 +1784,13 @@ var Choices = function Choices(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     error = _ref.error,
-    disabled = _ref.isDisabled;
+    disabled = _ref.isDisabled,
+    _ref$isPictureChoice = _ref.isPictureChoice,
+    isPictureChoice = _ref$isPictureChoice === void 0 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice : _ref$isPictureChoice,
+    _ref$imageHeight = _ref.imageHeight,
+    imageHeight = _ref$imageHeight === void 0 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight : _ref$imageHeight,
+    _ref$shouldFitImages = _ref.shouldFitImages,
+    shouldFitImages = _ref$shouldFitImages === void 0 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.shouldFitImages : _ref$shouldFitImages;
   var isCheckBox = type === "checkbox";
   var ChoiceWrapper = isCheckBox ? "div" : Radio;
   var Component = isCheckBox ? Checkbox : Radio.Item;
@@ -1745,20 +1802,30 @@ var Choices = function Choices(_ref) {
       "data-testid": "".concat(hyphenate(label), "-input-label"),
       children: label
     }), /*#__PURE__*/jsx(ChoiceWrapper, {
-      className: "neeto-form-engine-choices",
       stacked: !isCheckBox,
+      className: classnames("neeto-form-engine-choices", {
+        "neeto-form-engine-choices--picture": isPictureChoice
+      }),
       children: options.map(function (option, index) {
-        var _value$index;
-        return /*#__PURE__*/jsx("label", {
+        var _value$index, _option$image;
+        var isChecked = isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id;
+        return /*#__PURE__*/jsxs("label", {
           htmlFor: option.id,
           className: classnames("neeto-form-engine-choice", {
-            active: false,
+            "neeto-form-engine-choice--picture": isPictureChoice,
+            "neeto-form-engine-choice--selected": isChecked,
             "cursor-not-allowed": disabled
           }),
-          children: /*#__PURE__*/jsx(Component, {
+          children: [isPictureChoice && /*#__PURE__*/jsx(ChoiceImage, {
+            shouldFitImages: shouldFitImages,
+            alt: option.label,
+            height: imageHeight,
+            src: (_option$image = option.image) === null || _option$image === void 0 ? void 0 : _option$image.url
+          }), /*#__PURE__*/jsx(Component, {
             disabled: disabled,
             onChange: onChange,
             type: type,
+            checked: isChecked,
             className: classnames({
               "cursor-not-allowed": disabled
             }),
@@ -1766,13 +1833,12 @@ var Choices = function Choices(_ref) {
             label: option.label,
             name: isCheckBox ? "".concat(name, ".").concat(index) : name,
             value: option.id,
-            checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id,
             labelProps: {
               className: classnames({
                 "cursor-not-allowed": disabled
               })
             }
-          })
+          })]
         }, option.id);
       })
     }), !!error && typeof error === "string" && /*#__PURE__*/jsx("p", {
@@ -1798,8 +1864,12 @@ var OptionsField = function OptionsField(_ref) {
     kind = question.kind,
     isRequired = question.isRequired,
     isReadOnly = question.isReadOnly,
+    isPictureChoiceFromQuestion = question.isPictureChoice,
+    imageHeight = question.imageHeight,
+    shouldFitImages = question.shouldFitImages,
     _question$optionsAttr = question.optionsAttributes,
     options = _question$optionsAttr === void 0 ? [] : _question$optionsAttr;
+  var isPictureChoice = isPictureChoiceFromQuestion;
   var isDropdown = kind === QUESTION_KIND.DROPDOWN.value;
   var label = fieldWithFallback(question, "label");
   var Component = isDropdown ? Select : Choices$1;
@@ -1839,17 +1909,22 @@ var OptionsField = function OptionsField(_ref) {
       var onChange = field.onChange,
         value = field.value;
       return /*#__PURE__*/jsx(Component, _objectSpread$8(_objectSpread$8({
-        isRequired: isRequired,
-        name: name,
         error: getError(meta),
         isDisabled: isReadOnly,
         label: getLabel(label, isRequired),
         options: transformedOptions,
         strategy: "fixed",
         type: kind
+      }, _objectSpread$8(_objectSpread$8({
+        isRequired: isRequired,
+        name: name
       }, isDropdown && {
         filterOption: customFilter
-      }), {}, {
+      }), !isDropdown && {
+        imageHeight: imageHeight,
+        isPictureChoice: isPictureChoice,
+        shouldFitImages: shouldFitImages
+      })), {}, {
         value: isDropdown ? findBy({
           value: value
         }, transformedOptions) || null : value,
@@ -2325,4 +2400,4 @@ var containsIgnoreCase = function containsIgnoreCase(string, substring) {
 };
 
 export { FormikWrap as F, getFieldComponent as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, clearEmailVerificationDetails as e, generateFormResponse as f, generateInitValues as g, clearLocalStorageValues as h, mergeRefs as m, renderButtonsInOrder as r };
-//# sourceMappingURL=utils-BUXD94aD.js.map
+//# sourceMappingURL=utils-GRfGBny0.js.map