@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Checkbox, Popper, useTheme } from "@mui/material";
+import DataTypes from "./DataTypes";
+import useColumnStyles from "./colStyles";
+import Icon from "../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnView = props => {
+  const theme = useTheme();
+  const {
+    needAnchor,
+    rowIndex,
+    row,
+    property,
+    onSelect,
+    selected,
+    readOnly
+  } = props;
+  const DataType = DataTypes[property?.type] || DataTypes["text"];
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [popperRefresh, setPopperRefresh] = useState(new Date().getTime());
+  const open = Boolean(anchorEl);
+  const classes = useColumnStyles(theme);
+  const parentRef = useRef(null);
+  useEffect(() => {
+    if (!anchorRef?.current) return;
+    setAnchorEl(anchorRef?.current);
+    parentRef.current = anchorRef?.current.closest(".tv-d-wrapper");
+    const resizeObserver = new ResizeObserver(() => {
+      if (parentRef?.current) {
+        setPopperRefresh(new Date().getTime());
+      }
+    });
+    resizeObserver.observe(parentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [anchorRef?.current]);
+  const handleSelect = id => e => {
+    onSelect(id, e.target.checked);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "td",
+    children: [needAnchor ? /*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      style: {
+        position: "absolute",
+        width: "1px"
+      }
+    }) : null, /*#__PURE__*/_jsx(DataType, {
+      options: property?.options,
+      property: property?.key,
+      value: row[property?.key] || "",
+      rowIndex: rowIndex,
+      label: property?.label,
+      readOnly: readOnly
+    }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
+      sx: classes.root,
+      open: open,
+      anchorEl: anchorEl,
+      placement: "left",
+      className: `tv-tr-pop ${selected ? "active" : ""}`,
+      disablePortal: true,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        onClick: handleSelect(row?.id),
+        size: "small",
+        className: "tv-ck-box",
+        sx: {
+          mr: 0
+        },
+        checked: selected,
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "uncheckedIcon"
+        }),
+        checkedIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: "checkedIcon"
+        })
+      })
+    }, popperRefresh) : null]
+  });
+};
+export default ColumnView;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Checkbox from "@mui/material/Checkbox";
+import Icon from "../../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.checked
+    });
+  };
+  return /*#__PURE__*/_jsx(Checkbox, {
+    checked: value || false,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButton"
+    }),
+    checkedIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButtonActive"
+    }),
+    onChange: handleChange,
+    disabled: readOnly
+  }, rowIndex);
+};
+export default CheckType;

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

@@ -0,0 +1,180 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { Avatar, Box, Chip, useTheme } from "@mui/material";
+import { useEditorContext } from "../../../../../hooks/useMouseMove";
+import useCompStyles from "./styles";
+import { CloseIcon } from "../../../../../common/iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AvatarIcon = props => {
+  const {
+    option,
+    avatar
+  } = props;
+  const nameIndex = option.label || option.value;
+  return avatar && nameIndex ? /*#__PURE__*/_jsx(Avatar, {
+    alt: option.label || option.value,
+    src: option.avatar || null,
+    children: nameIndex[0] || ""
+  }) : null;
+};
+const filter = (opt, params, selectedOpt) => {
+  const selectedVals = selectedOpt?.map(m => m?.value);
+  const fv = opt?.filter(f => !selectedVals.includes(f.value));
+  if (params?.inputValue) {
+    return fv.filter(f => f?.value?.toLowerCase().indexOf(params?.inputValue?.toLowerCase()) >= 0);
+  }
+  return fv;
+};
+export default function Select(props) {
+  const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCompStyles(theme, appTheme);
+  const {
+    value: pValue,
+    onChange,
+    options: selectOptions,
+    multiple = false,
+    limitTags = 2,
+    placeholder = "",
+    disabled = false,
+    optionAvatar = false
+  } = props;
+  const value = Array.isArray(pValue) ? pValue : [];
+  const options = selectOptions?.length ? selectOptions.filter(s => s.value) : [];
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    disabled: disabled,
+    className: "tv-ac-field",
+    multiple: true,
+    limitTags: limitTags,
+    placeholder: placeholder,
+    value: value || "",
+    onChange: (event, newValue) => {
+      const fv = [];
+      newValue?.forEach(m => {
+        if (multiple) {
+          fv.push({
+            value: m.inputValue || m.value
+          });
+        } else {
+          fv[0] = {
+            value: m.inputValue || m.value
+          };
+        }
+      });
+      onChange(fv);
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params, value);
+
+      // const { inputValue } = params;
+      // Suggest the creation of a new value
+      // const isExisting = options.some(
+      //   (option) => inputValue?.toLowerCase() === option.value?.toLowerCase()
+      // );
+      // no need of new val now
+      // if (inputValue !== "" && !isExisting) {
+      //   filtered.push({
+      //     inputValue,
+      //     value: `Add "${inputValue}"`,
+      //   });
+      // }
+
+      return filtered;
+    },
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    options: options || [],
+    getOptionLabel: option => {
+      // Value selected with enter, right from the input
+      if (typeof option === "string") {
+        return option;
+      }
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue;
+      }
+      // Regular option
+      return option.value || "";
+    },
+    renderTags: (value, getTagProps) => {
+      return /*#__PURE__*/_jsx(Box, {
+        className: "tv-ms-tag-wrpr",
+        sx: {
+          '& svg': {
+            marginRight: '5px',
+            '& path': {
+              stroke: "#000"
+            }
+          }
+        },
+        children: value?.map((option, index) => {
+          const {
+            key,
+            ...tagProps
+          } = getTagProps({
+            index
+          }) || {};
+          return option?.value ? /*#__PURE__*/_jsx(Chip, {
+            variant: "outlined",
+            label: option?.label || option?.value,
+            ...tagProps,
+            sx: {
+              background: option?.color || appTheme?.palette?.editor?.tv_border1,
+              border: "none",
+              '& .MuiChip-label': {
+                paddingLeft: '12px !important'
+              }
+            },
+            avatar: /*#__PURE__*/_jsx(AvatarIcon, {
+              option: option,
+              avatar: optionAvatar
+            }),
+            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
+          }, key) : null;
+        })
+      });
+    },
+    renderOption: (props, option) => {
+      const {
+        key,
+        ...optionProps
+      } = props;
+      return /*#__PURE__*/_jsx("li", {
+        ...optionProps,
+        children: /*#__PURE__*/_jsx(Chip, {
+          label: option.label || option.value || "",
+          sx: {
+            background: option.color || appTheme?.palette?.editor?.tv_border1,
+            '& .MuiChip-label': {
+              paddingLeft: '12px !important'
+            }
+          },
+          avatar: /*#__PURE__*/_jsx(AvatarIcon, {
+            option: option,
+            avatar: optionAvatar
+          }),
+          deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
+        })
+      }, key);
+    },
+    freeSolo: true,
+    size: "small",
+    fullWidth: true,
+    renderInput: params => {
+      return /*#__PURE__*/_jsx(TextField, {
+        size: "small",
+        ...params,
+        placeholder: placeholder
+      });
+    },
+    slotProps: {
+      paper: {
+        sx: classes.autocomplete
+      }
+    }
+  });
+}

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { MenuItem, Select, useTheme } from "@mui/material";
+import { useEditorContext } from "../../../../../hooks/useMouseMove";
+import useCompStyles from "./styles";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SimpleSelect = props => {
+  const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCompStyles(theme, appTheme);
+  const {
+    value,
+    options,
+    handleChange,
+    disabled = false
+  } = props;
+  return /*#__PURE__*/_jsx(Select, {
+    disabled: disabled,
+    value: value,
+    onChange: handleChange,
+    IconComponent: KeyboardArrowDownRoundedIcon,
+    fullWidth: true,
+    size: "small",
+    sx: {
+      color: appTheme?.palette?.editor?.tv_text,
+      fontSize: '14px !important',
+      marginTop: '4px !important',
+      padding: '3px 0px !important',
+      background: 'transparent !important',
+      '& .MuiOutlinedInput-root': {
+        height: '34px !important',
+        background: 'transparent !important'
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
+      },
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
+      }
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: classes.simpleselect,
+        className: "tv-cf-opt-wrpr"
+      }
+    },
+    children: options?.map((m, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        value: m.key,
+        className: "tv-cf-opt-wrpr",
+        children: m.label
+      }, i);
+    })
+  });
+};
+export default SimpleSelect;

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

@@ -0,0 +1,68 @@
+const useCompStyles = (theme, appTheme) => ({
+  simpleselect: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    background: appTheme?.palette?.editor?.tv_pop_bg,
+    color: appTheme?.palette?.editor?.tv_text,
+    fontSize: '14px',
+    borderRadius: "8px",
+    [theme?.breakpoints?.between("xs", "md")]: {},
+    "& ul": {
+      padding: "4px",
+      "& li": {
+        padding: "4px 6px",
+        borderRadius: "8px",
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        marginTop: "4px",
+        "&.Mui-selected": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text,
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text
+          }
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  },
+  autocomplete: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    background: appTheme?.palette?.editor?.tv_pop_bg,
+    color: appTheme?.palette?.editor?.tv_text_primary,
+    borderRadius: "8px",
+    "& ul": {
+      padding: "4px",
+      "& .MuiAutocomplete-option": {
+        padding: "4px 6px",
+        borderRadius: "8px",
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        "& .MuiAvatar-root": {
+          width: "20px",
+          height: "20px",
+          marginLeft: "8px",
+          fontSize: "16px",
+          padding: "2px",
+          textTransform: "capitalize"
+        },
+        "&.Mui-selected": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text,
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text
+          }
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  }
+});
+export default useCompStyles;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -0,0 +1,35 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+function isValidDate(dateString) {
+  const date = new Date(dateString);
+  return !isNaN(date.getTime());
+}
+const DateType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = date => {
+    onChange(rowIndex, {
+      [property]: date
+    });
+  };
+  return /*#__PURE__*/_jsx(DatePicker, {
+    disabled: readOnly,
+    selected: isValidDate(value) ? new Date(value) : "",
+    onChange: handleChange,
+    onKeyDown: e => {
+      e.preventDefault();
+      console.log(e?.target.value);
+    },
+    placeholderText: "MM/DD/YYYY"
+  });
+};
+export default DateType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MultiSelectType = props => {
+  const {
+    rowIndex,
+    property,
+    value: pValue,
+    options,
+    label = "",
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const value = Array.isArray(pValue) ? pValue : [];
+  const coloredValues = [...(value || [])]?.map(m => {
+    return {
+      ...m,
+      color: options?.find(f => f.value === m.value)?.color || "#FFF"
+    };
+  });
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: coloredValues,
+    onChange: handleChange,
+    options: options,
+    multiple: true,
+    limitTags: 2,
+    placeholder: label,
+    disabled: readOnly
+  });
+};
+export default MultiSelectType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+const NumberType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    type: "number",
+    fullWidth: true,
+    className: "fe-tv-type_text",
+    value: value,
+    size: "small",
+    onChange: handleChange,
+    disabled: readOnly
+  });
+};
+export default NumberType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PersonType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange,
+    users
+  } = useDataView();
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: value || [],
+    onChange: handleChange,
+    options: users || [],
+    multiple: false,
+    disabled: readOnly,
+    optionAvatar: true
+  });
+};
+export default PersonType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    options,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const coloredValues = [...(value || [])]?.map(m => {
+    return {
+      ...m,
+      color: options?.find(f => f.value === m.value)?.color
+    };
+  });
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: coloredValues,
+    onChange: handleChange,
+    options: options,
+    multiple: false,
+    disabled: readOnly
+  });
+};
+export default SelectType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.value
+    });
+  };
+  const formatValue = () => {
+    if (typeof value === "string") {
+      return value;
+    } else if (value[0]) {
+      return value?.map(m => m.value).join(", ");
+    }
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    fullWidth: true,
+    className: "fe-tv-type_text",
+    value: formatValue(value),
+    size: "small",
+    onChange: handleChange,
+    disabled: readOnly
+  });
+};
+export default TextType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js

@@ -0,0 +1,17 @@
+import TextType from "./TextType";
+import DateType from "./DateType";
+import SelectType from "./SelectType";
+import MultiSelectType from "./MultiSelectType";
+import NumberType from "./NumberType";
+import CheckType from "./CheckType";
+import PersonType from "./PersonType";
+const DataTypes = {
+  text: TextType,
+  date: DateType,
+  select: SelectType,
+  "multi-select": MultiSelectType,
+  number: NumberType,
+  check: CheckType,
+  person: PersonType
+};
+export default DataTypes;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Box } from "@mui/material";
+import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChooseField = props => {
+  const {
+    sort,
+    properties,
+    onChange
+  } = props;
+  const handleChange = e => {
+    onChange(sort, {
+      newKey: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: "120px",
+      mr: 1
+    },
+    className: "tv-cf",
+    children: /*#__PURE__*/_jsx(SimpleSelect, {
+      value: sort?.key,
+      options: properties,
+      handleChange: handleChange
+    })
+  });
+};
+export default ChooseField;