labellife-design-tool 2.2.6 → 2.2.8

package/dist/esm/canvas/workspace.js

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect, Fragment, useCallback } from 'react';
 import { Image, Group, Rect, Text, Arrow, Path, RegularPolygon, Star, Circle, Line, Shape, Transformer, Stage, Layer } from 'react-konva';
 import { observer } from 'mobx-react-lite';
-import { Box, Typography, IconButton, Button, TextField } from '@mui/material';
+import { Box, Typography, IconButton, Button, TextField, FormGroup, FormControlLabel, Checkbox, RadioGroup, Radio } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Konva from 'konva';
@@ -1684,12 +1684,20 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
     imagePreview = _useState4[0],
     setImagePreview = _useState4[1];
   var fileInputRef = useRef(null);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedItems = _useState6[0],
+    setSelectedItems = _useState6[1];
   var config = getInputFieldsConfig();
   var custom = field.custom || {};
   var inputType = custom.inputType || 'text';
   var promptText = custom.promptText || custom.placeholder || 'Please provide input';
   var dateFormat = custom.dateFormat || 'MM-DD-YYYY';
   var isRequired = custom.required === true;
+  var options = custom.options || [];
+  var minSelections = custom.minSelections || 0;
+  var maxSelections = custom.maxSelections || options.length;
+  var isSubmitDisabled = inputType === 'list' ? selectedItems.length < minSelections : isRequired && !value;
   var logoUrl = config.logoUrl || null;
   var headerText = config.headerText || null;
   var accentColor = config.accentColor || '#0d83cd';
@@ -1697,6 +1705,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   useEffect(function () {
     setValue('');
     setImagePreview(null);
+    setSelectedItems([]);
   }, [field.id]);
   var handleImageSelect = function handleImageSelect(e) {
     var _e$target$files;
@@ -1716,12 +1725,14 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
       var dateObj = parseDateFromFormat(value);
       var formatted = formatDate(dateObj, dateFormat);
       onSubmit(field.id, formatted);
+    } else if (inputType === 'list') {
+      onSubmit(field.id, selectedItems.join(', '));
     } else {
       onSubmit(field.id, value);
     }
   };
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' && inputType !== 'image') handleSubmit();
+    if (e.key === 'Enter' && inputType !== 'image' && inputType !== 'list' && inputType !== 'radio') handleSubmit();
   };
   var renderInput = function renderInput() {
     var sharedSx = _objectSpread2({
@@ -1861,6 +1872,119 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
             })]
           })]
         });
+      case 'radio':
+        return /*#__PURE__*/jsx(RadioGroup, {
+          value: value,
+          onChange: function onChange(e) {
+            return setValue(e.target.value);
+          },
+          sx: {
+            mt: 1,
+            gap: 1
+          },
+          children: options.map(function (opt) {
+            return /*#__PURE__*/jsx(FormControlLabel, {
+              value: opt,
+              control: /*#__PURE__*/jsx(Radio, {
+                sx: {
+                  color: '#d0d5dd',
+                  '&.Mui-checked': {
+                    color: accentColor
+                  }
+                }
+              }),
+              label: /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: 18
+                },
+                children: opt
+              }),
+              sx: {
+                m: 0,
+                border: '1px solid',
+                borderColor: value === opt ? accentColor : '#d0d5dd',
+                borderRadius: '8px',
+                px: 2,
+                py: 0.75,
+                transition: 'all 0.15s ease',
+                backgroundColor: value === opt ? 'rgba(13,131,205,0.04)' : 'transparent',
+                '&:hover': {
+                  borderColor: accentColor,
+                  backgroundColor: 'rgba(13,131,205,0.03)'
+                }
+              }
+            }, opt);
+          })
+        });
+      case 'list':
+        {
+          var isAtMax = maxSelections > 0 && selectedItems.length >= maxSelections;
+          return /*#__PURE__*/jsxs(Box, {
+            sx: {
+              mt: 1
+            },
+            children: [/*#__PURE__*/jsx(FormGroup, {
+              sx: {
+                gap: 1
+              },
+              children: options.map(function (opt) {
+                var checked = selectedItems.includes(opt);
+                var disabled = !checked && isAtMax;
+                return /*#__PURE__*/jsx(FormControlLabel, {
+                  control: /*#__PURE__*/jsx(Checkbox, {
+                    checked: checked,
+                    disabled: disabled,
+                    onChange: function onChange(e) {
+                      if (e.target.checked) {
+                        setSelectedItems(function (prev) {
+                          return [].concat(_toConsumableArray(prev), [opt]);
+                        });
+                      } else {
+                        setSelectedItems(function (prev) {
+                          return prev.filter(function (i) {
+                            return i !== opt;
+                          });
+                        });
+                      }
+                    },
+                    sx: {
+                      color: '#d0d5dd',
+                      '&.Mui-checked': {
+                        color: accentColor
+                      }
+                    }
+                  }),
+                  label: /*#__PURE__*/jsx(Typography, {
+                    sx: {
+                      fontSize: 18,
+                      opacity: disabled ? 0.45 : 1
+                    },
+                    children: opt
+                  }),
+                  sx: {
+                    m: 0,
+                    border: '1px solid',
+                    borderColor: checked ? accentColor : '#d0d5dd',
+                    borderRadius: '8px',
+                    px: 2,
+                    py: 0.75,
+                    opacity: disabled ? 0.6 : 1,
+                    transition: 'all 0.15s ease',
+                    backgroundColor: checked ? 'rgba(13,131,205,0.04)' : 'transparent'
+                  }
+                }, opt);
+              })
+            }), /*#__PURE__*/jsxs(Typography, {
+              variant: "caption",
+              sx: {
+                color: '#999',
+                display: 'block',
+                mt: 1.5
+              },
+              children: [selectedItems.length, maxSelections > 0 ? "/".concat(maxSelections) : '', " selected", minSelections > 0 && " \xB7 min ".concat(minSelections, " required")]
+            })]
+          });
+        }
       case 'text':
       default:
         return /*#__PURE__*/jsx(TextField, {
@@ -2003,7 +2127,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           }), /*#__PURE__*/jsx(Button, {
             variant: "contained",
             onClick: handleSubmit,
-            disabled: isRequired && !value,
+            disabled: isSubmitDisabled,
             sx: _objectSpread2({
               textTransform: 'none',
               fontWeight: 600,
@@ -2019,7 +2143,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
               }
             }, config.submitButtonStyle),
             children: config.submitButtonText || t('inputFieldsDialog.submit', 'Continue')
-          }), !isRequired && /*#__PURE__*/jsx(Button, {
+          }), (inputType === 'list' ? minSelections === 0 : !isRequired) && /*#__PURE__*/jsx(Button, {
             variant: "outlined",
             onClick: function onClick() {
               return onSkip(field.id);
@@ -2056,10 +2180,10 @@ var InputFieldsDialog = observer(function (_ref2) {
     backTrigger = _ref2$backTrigger === void 0 ? 0 : _ref2$backTrigger;
   // displayIndex counts how many fields have been answered (for step indicator only).
   // Navigation always uses fields[0] — the first remaining pending field.
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    displayIndex = _useState6[0],
-    setDisplayIndex = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    displayIndex = _useState8[0],
+    setDisplayIndex = _useState8[1];
   var initialTotalRef = useRef(0);
   var completedHistoryRef = useRef([]);
   var isGoingBackRef = useRef(false);
@@ -2204,7 +2328,9 @@ var InputFieldsDialog = observer(function (_ref2) {
     text: config.CustomTextDialog,
     date: config.CustomDateDialog,
     integer: config.CustomIntegerDialog,
-    image: config.CustomImageDialog
+    image: config.CustomImageDialog,
+    radio: config.CustomRadioDialog,
+    list: config.CustomListDialog
   };
   var fieldType = currentField.custom && currentField.custom.inputType || 'text';
   var PerTypeDialog = TYPE_DIALOG_MAP[fieldType];