@flozy/editor 9.6.4 → 9.6.5

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js

@@ -1,425 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Autocomplete, Box, Chip, Divider, Popover, TextField, Typography, List, ListItem, ListItemButton, IconButton, SwipeableDrawer, Tooltip } from "@mui/material";
-import { CloseIcon } from "../../../../../common/iconslist";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import Icon from "../../../../../common/Icon";
-import { colors } from "../../../../Color Picker/defaultColors";
-import PropertySettings from "../../Options";
-import SnackbarAlert from "../../../../../common/SnackBar";
-import ClearAllRounded from "../../../../../assets/svg/ClearAllRounded";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
-const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
-const generateRandomColor = () => {
-  const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
-  return DEFAULT_COLORS[randomIndex];
-};
-const MultiSelectWithPopover = props => {
-  const {
-    options = [],
-    value,
-    onChange,
-    onUpdate,
-    property,
-    wrapColumn = false,
-    translation
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [anchorElOption, setAnchorElOption] = useState(null);
-  const [currentIndex, setCurrentIndex] = useState(null);
-  const [selectedOptions, setSelectedOptions] = useState(value);
-  const [availableOptions, setAvailableOptions] = useState(options);
-  const [showSnackBar, setShowSnackBar] = useState(false);
-  const [chipColor, setChipColor] = useState(generateRandomColor());
-  const [inputValue, setInputValue] = useState("");
-  const {
-    theme
-  } = useEditorContext();
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
-  const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
-  const mode = {
-    type: "editOptionMulti",
-    edit: {
-      label: "Multi Select",
-      visible: true,
-      key: property,
-      type: "multi-select",
-      options: options || [],
-      optionIndex: currentIndex,
-      hideBackButton: true
-    }
-  };
-  const customScrollStyles = {
-    scrollbarWidth: "thin",
-    scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
-    "&::-webkit-scrollbar": {
-      width: "6px"
-    },
-    "&::-webkit-scrollbar-thumb": {
-      backgroundColor: theme?.palette?.editor?.brainPopupScroll,
-      borderRadius: "3px"
-    },
-    "&::-webkit-scrollbar-track": {
-      display: "none"
-    }
-  };
-  useEffect(() => {
-    if (inputValue?.trim()) {
-      setChipColor(prevColor => prevColor || generateRandomColor());
-    } else {
-      setChipColor(generateRandomColor());
-    }
-  }, [inputValue]);
-  useEffect(() => {
-    setAvailableOptions(options);
-  }, [options]);
-  const handleOpenPopover = event => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClosePopover = () => {
-    setAnchorEl(null);
-  };
-  const handleAddOption = newValue => {
-    const trimmedValue = newValue?.trim();
-    if (!trimmedValue) return;
-    const newOption = {
-      value: trimmedValue,
-      color: chipColor
-    };
-    if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
-      setAvailableOptions(prev => [...prev, newOption]);
-      setSelectedOptions(prev => [...prev, newOption]);
-      onUpdate([newOption, ...availableOptions]);
-    }
-    setInputValue("");
-  };
-  const onClose = () => {
-    setAnchorEl(anchorElOption);
-    setAnchorElOption(null);
-  };
-  const onEditOption = (type, data) => {
-    const updateData = data?.edit ? data?.edit?.options : data?.options;
-    onUpdate(updateData);
-    if (data?.edit?.options) {
-      const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
-      setSelectedOptions(updatedSelectedOptions);
-      onClose();
-    }
-  };
-  const handleEditOption = (e, index) => {
-    e.stopPropagation();
-    setCurrentIndex(index);
-    setAnchorElOption(anchorEl);
-    setAnchorEl(null);
-  };
-  const handleSelectOption = option => {
-    if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
-      setSelectedOptions(prev => [...prev, option]);
-      onChange(selectedOptions);
-    } else {
-      setShowSnackBar(true);
-    }
-  };
-  const handleClearSelection = () => {
-    setSelectedOptions([]);
-  };
-  const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
-  const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
-  const open = Boolean(anchorEl);
-  const openEditOption = Boolean(anchorElOption);
-  const id = open ? "autocomplete-popover" : undefined;
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        flexWrap: wrapColumn ? "wrap" : "nowrap",
-        overflowX: wrapColumn ? "hidden" : "auto",
-        gap: 0.5,
-        padding: "8px",
-        cursor: "pointer"
-      },
-      onClick: handleOpenPopover,
-      children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
-        label: option?.value,
-        onDelete: event => {
-          event.stopPropagation();
-          setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
-        },
-        deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-        variant: "filled",
-        sx: {
-          backgroundColor: option?.color,
-          color: '#0F172A',
-          "& .MuiChip-deleteIcon": {
-            flexShrink: 0,
-            "& path": {
-              stroke: '#0F172A'
-            }
-          },
-          "&:hover": {
-            opacity: 0.8
-          }
-        }
-      }, index))
-    }), /*#__PURE__*/_jsx(PopoverComponent, {
-      id: id,
-      open: open,
-      anchorEl: anchorEl,
-      anchor: "bottom",
-      onClose: handleClosePopover,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      sx: {
-        "& .MuiPaper-root": {
-          borderRadius: "20px",
-          background: theme?.palette?.editor?.textFormatBgColor,
-          border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
-          boxShadow: "0px 4px 10px 0px #00000029"
-        }
-      },
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          width: isMobile ? "100%" : 300
-        },
-        children: [/*#__PURE__*/_jsx(Autocomplete, {
-          multiple: true,
-          freeSolo: true,
-          disablePortal: true,
-          PopperComponent: () => null,
-          sx: {
-            "& .MuiFormControl-root": {
-              maxHeight: "250px",
-              overflowY: "auto",
-              overflowX: "hidden",
-              pr: '12px',
-              pl: '12px',
-              maxWidth: isMobile ? "100%" : "275px",
-              marginTop: '12px',
-              ...customScrollStyles
-            }
-          },
-          disableClearable: true,
-          options: [],
-          getOptionLabel: option => options?.value || "",
-          value: selectedOptions,
-          onChange: (event, newValues) => {
-            const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
-              value,
-              color: chipColor
-            } : value);
-            const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
-            if (!isDuplicate) {
-              setSelectedOptions([...selectedOptions, ...addedOptions]);
-            }
-          },
-          inputValue: inputValue,
-          onInputChange: (event, newInputValue) => setInputValue(newInputValue),
-          onKeyDown: event => {
-            if (event.key === "Enter" && inputValue.trim()) {
-              event.preventDefault();
-              handleAddOption(inputValue);
-            }
-          },
-          filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
-          renderInput: params => /*#__PURE__*/_jsx(TextField, {
-            ...params,
-            variant: "standard",
-            InputProps: {
-              ...params.InputProps,
-              disableUnderline: true,
-              sx: {
-                display: "flex",
-                flexWrap: "wrap",
-                fontFamily: "Inter",
-                fontWeight: 400,
-                fontSize: "12px",
-                color: theme?.palette?.editor?.secondaryTextColor,
-                "&::placeholder": {
-                  color: theme?.palette?.editor?.secondaryTextColor
-                },
-                "& .MuiAutocomplete-input": {
-                  minWidth: "100px !important"
-                }
-              },
-              endAdornment: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Clear Selected",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  onClick: handleClearSelection,
-                  sx: {
-                    padding: 0,
-                    minWidth: "unset",
-                    "& .MuiSvgIcon-root": {
-                      fontSize: 20
-                    },
-                    '& rect': {
-                      fill: theme?.palette?.editor?.closeButtonSvgStroke
-                    },
-                    '&:hover': {
-                      backgroundColor: 'transparent'
-                    }
-                  },
-                  children: /*#__PURE__*/_jsx(ClearAllRounded, {})
-                })
-              })
-            },
-            sx: {
-              backgroundColor: "transparent",
-              fontFamily: 'Inter',
-              fontWeight: 400,
-              fontSize: '12px'
-            },
-            placeholder: "Create new one..."
-          }),
-          renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
-            variant: "filled",
-            label: option?.value,
-            ...getTagProps({
-              index
-            }),
-            onDelete: event => {
-              event.stopPropagation();
-              setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
-            },
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-            sx: {
-              backgroundColor: option?.color,
-              color: '#0F172A',
-              "& .MuiChip-deleteIcon": {
-                flexShrink: 0,
-                "& path": {
-                  stroke: '#0F172A'
-                }
-              },
-              "&:hover": {
-                opacity: 0.8
-              }
-            }
-          }, index))
-        }), /*#__PURE__*/_jsx(Divider, {
-          sx: {
-            mt: '12px',
-            borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
-            boxShadow: theme?.palette?.editor?.dividerDropShadow
-          }
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            pl: '4px'
-          },
-          children: /*#__PURE__*/_jsxs(List, {
-            sx: {
-              maxHeight: "250px",
-              overflowY: "auto",
-              ...customScrollStyles
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              sx: {
-                mb: 1,
-                pl: '8px',
-                color: theme?.palette?.editor?.secondaryTextColor,
-                fontFamily: 'Inter',
-                fontWeight: 400,
-                fontSize: '12px'
-              },
-              children: "Choose an option or create one"
-            }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
-              disablePadding: true,
-              children: /*#__PURE__*/_jsxs(ListItemButton, {
-                onClick: () => handleSelectOption(option),
-                sx: {
-                  justifyContent: 'space-between',
-                  '&:hover': {
-                    '& path': {
-                      stroke: theme?.palette?.editor?.activeColor
-                    },
-                    borderRadius: '12px'
-                  }
-                },
-                children: [/*#__PURE__*/_jsx(Chip, {
-                  label: option?.value,
-                  sx: {
-                    backgroundColor: option?.color,
-                    color: '#0F172A',
-                    fontWeight: 500,
-                    fontSize: "12px",
-                    fontFamily: "Inter",
-                    padding: "4px 12px",
-                    borderRadius: "16px",
-                    maxWidth: "180px",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }
-                }), /*#__PURE__*/_jsx(IconButton, {
-                  size: "small",
-                  sx: {
-                    '& path': {
-                      stroke: theme?.palette?.editor?.closeButtonSvgStroke
-                    },
-                    '&:hover': {
-                      backgroundColor: 'transparent'
-                    }
-                  },
-                  onClick: e => handleEditOption(e, index),
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "rightArrow"
-                  })
-                })]
-              })
-            }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
-              disablePadding: true,
-              children: /*#__PURE__*/_jsxs(ListItemButton, {
-                onClick: () => handleAddOption(inputValue),
-                sx: {
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: [/*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    color: theme?.palette?.editor?.secondaryTextColor,
-                    marginRight: "6px",
-                    fontSize: "14px",
-                    fontFamily: "Inter"
-                  },
-                  children: "Create"
-                }), /*#__PURE__*/_jsx(Chip, {
-                  label: `${inputValue}`,
-                  sx: {
-                    backgroundColor: chipColor,
-                    color: '#0F172A',
-                    fontWeight: 500,
-                    fontSize: "12px",
-                    fontFamily: "Inter",
-                    borderRadius: "16px",
-                    maxWidth: "180px",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }
-                })]
-              })
-            })]
-          })
-        })]
-      })
-    }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
-      open: openEditOption,
-      anchorEl: anchorElOption,
-      mode: mode,
-      onClose: onClose,
-      onEvent: onEditOption,
-      translation: translation
-    }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
-      message: "Option already selected!",
-      setShowSnackBar: setShowSnackBar
-    }) : null]
-  });
-};
-export default MultiSelectWithPopover;