@flozy/editor 5.3.4 → 5.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/dist/Editor/CommonEditor.js +8 -14
  2. package/dist/Editor/Editor.css +22 -50
  3. package/dist/Editor/Elements/Accordion/Accordion.js +1 -8
  4. package/dist/Editor/Elements/AppHeader/AppHeader.js +6 -6
  5. package/dist/Editor/Elements/Button/EditorButton.js +2 -9
  6. package/dist/Editor/Elements/Color Picker/ColorButtons.js +2 -4
  7. package/dist/Editor/Elements/Divider/Divider.js +9 -24
  8. package/dist/Editor/Elements/Embed/Image.js +12 -31
  9. package/dist/Editor/Elements/Embed/Video.js +2 -13
  10. package/dist/Editor/Elements/Form/Form.js +0 -1
  11. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +4 -4
  12. package/dist/Editor/Elements/FreeGrid/styles.js +1 -2
  13. package/dist/Editor/Elements/Grid/GridItem.js +0 -2
  14. package/dist/Editor/Elements/Grid/Styles.js +0 -44
  15. package/dist/Editor/Elements/List/CheckList.js +1 -2
  16. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -1
  17. package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
  18. package/dist/Editor/Elements/Signature/SignaturePopup.js +4 -4
  19. package/dist/Editor/Elements/SimpleText/index.js +1 -8
  20. package/dist/Editor/Elements/SimpleText/style.js +1 -10
  21. package/dist/Editor/Elements/TopBanner/TopBanner.js +1 -2
  22. package/dist/Editor/Styles/EditorStyles.js +3 -5
  23. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +1 -17
  24. package/dist/Editor/Toolbar/FormatTools/TextSize.js +3 -5
  25. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -210
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -55
  27. package/dist/Editor/Toolbar/Toolbar.js +0 -6
  28. package/dist/Editor/Toolbar/toolbarGroups.js +0 -4
  29. package/dist/Editor/assets/svg/SettingsIcon.js +4 -4
  30. package/dist/Editor/common/ColorPickerButton.js +3 -5
  31. package/dist/Editor/common/DnD/Draggable.js +1 -2
  32. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  33. package/dist/Editor/common/Icon.js +0 -6
  34. package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -2
  35. package/dist/Editor/common/ImageSelector/Styles.js +6 -47
  36. package/dist/Editor/common/ImageSelector/UploadStyles.js +6 -18
  37. package/dist/Editor/common/MentionsPopup/Styles.js +122 -109
  38. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
  39. package/dist/Editor/common/RnD/GuideLines/styles.js +3 -3
  40. package/dist/Editor/common/RnD/ShadowElement.js +1 -1
  41. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
  42. package/dist/Editor/common/RnD/Utils/gridDropItem.js +6 -9
  43. package/dist/Editor/common/RnD/index.js +1 -2
  44. package/dist/Editor/common/Section/index.js +3 -3
  45. package/dist/Editor/common/Section/styles.js +1 -5
  46. package/dist/Editor/common/Shorthands/elements.js +1 -13
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +3 -9
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -27
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +2 -15
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -2
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -1
  53. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +0 -2
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  55. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +4 -4
  56. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +6 -22
  57. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +2 -21
  58. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +0 -7
  59. package/dist/Editor/common/StyleBuilder/index.js +3 -4
  60. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
  61. package/dist/Editor/common/ToolbarIcon.js +1 -2
  62. package/dist/Editor/common/Uploader.js +36 -46
  63. package/dist/Editor/common/iconListV2.js +130 -348
  64. package/dist/Editor/common/iconslist.js +3 -6
  65. package/dist/Editor/commonStyle.js +4 -290
  66. package/dist/Editor/helper/index.js +3 -16
  67. package/dist/Editor/helper/theme.js +1 -24
  68. package/dist/Editor/hooks/useMouseMove.js +2 -5
  69. package/dist/Editor/plugins/withCustomDeleteBackward.js +2 -33
  70. package/dist/Editor/plugins/withEmbeds.js +26 -30
  71. package/dist/Editor/utils/SlateUtilityFunctions.js +4 -27
  72. package/dist/Editor/utils/button.js +4 -4
  73. package/dist/Editor/utils/helper.js +13 -40
  74. package/dist/Editor/utils/pageSettings.js +2 -14
  75. package/package.json +2 -2
  76. package/dist/Editor/Elements/DataView/DataView.js +0 -124
  77. package/dist/Editor/Elements/DataView/DataViewButton.js +0 -23
  78. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +0 -67
  79. package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +0 -33
  80. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +0 -162
  81. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +0 -40
  82. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +0 -67
  83. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +0 -35
  84. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +0 -39
  85. package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +0 -30
  86. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +0 -30
  87. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +0 -35
  88. package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +0 -36
  89. package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +0 -17
  90. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +0 -29
  91. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +0 -38
  92. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +0 -74
  93. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +0 -64
  94. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +0 -106
  95. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +0 -174
  96. package/dist/Editor/Elements/DataView/Layouts/Formula.js +0 -29
  97. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -113
  98. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +0 -37
  99. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +0 -111
  100. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +0 -60
  101. package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +0 -36
  102. package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +0 -101
  103. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +0 -160
  104. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +0 -190
  105. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +0 -42
  106. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +0 -30
  107. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -110
  108. package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +0 -179
  109. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +0 -112
  110. package/dist/Editor/Elements/DataView/Layouts/TableView.js +0 -227
  111. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +0 -80
  112. package/dist/Editor/Elements/DataView/Layouts/colStyles.js +0 -10
  113. package/dist/Editor/Elements/DataView/Layouts/index.js +0 -25
  114. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +0 -281
  115. package/dist/Editor/Elements/DataView/Utils/globalSearch.js +0 -15
  116. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +0 -74
  117. package/dist/Editor/Elements/DataView/styles.js +0 -154
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
  119. package/dist/Editor/helper/enforceDateFormat.js +0 -41
  120. package/dist/Editor/utils/dataView.js +0 -43
@@ -1,39 +0,0 @@
1
- import React from "react";
2
- import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const MultiSelectType = props => {
6
- const {
7
- rowIndex,
8
- property,
9
- value: pValue,
10
- options,
11
- label = "",
12
- readOnly
13
- } = props;
14
- const {
15
- onChange
16
- } = useDataView();
17
- const value = Array.isArray(pValue) ? pValue : [];
18
- const coloredValues = [...(value || [])]?.map(m => {
19
- return {
20
- ...m,
21
- color: options?.find(f => f.value === m.value)?.color || "#FFF"
22
- };
23
- });
24
- const handleChange = data => {
25
- onChange(rowIndex, {
26
- [property]: data?.filter(f => f?.value)
27
- });
28
- };
29
- return /*#__PURE__*/_jsx(Select, {
30
- value: coloredValues,
31
- onChange: handleChange,
32
- options: options,
33
- multiple: true,
34
- limitTags: 2,
35
- placeholder: label,
36
- disabled: readOnly
37
- });
38
- };
39
- export default MultiSelectType;
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import { TextField } from "@mui/material";
3
- import { useDataView } from "../../Providers/DataViewProvider";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const NumberType = props => {
6
- const {
7
- rowIndex,
8
- property,
9
- value,
10
- readOnly
11
- } = props;
12
- const {
13
- onChange
14
- } = useDataView();
15
- const handleChange = e => {
16
- onChange(rowIndex, {
17
- [property]: e?.target?.value
18
- });
19
- };
20
- return /*#__PURE__*/_jsx(TextField, {
21
- type: "number",
22
- fullWidth: true,
23
- className: "fe-tv-type_text",
24
- value: value,
25
- size: "small",
26
- onChange: handleChange,
27
- disabled: readOnly
28
- });
29
- };
30
- export default NumberType;
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const PersonType = props => {
6
- const {
7
- rowIndex,
8
- property,
9
- value,
10
- readOnly
11
- } = props;
12
- const {
13
- onChange,
14
- users
15
- } = useDataView();
16
- const handleChange = data => {
17
- onChange(rowIndex, {
18
- [property]: data?.filter(f => f?.value)
19
- });
20
- };
21
- return /*#__PURE__*/_jsx(Select, {
22
- value: value || [],
23
- onChange: handleChange,
24
- options: users || [],
25
- multiple: false,
26
- disabled: readOnly,
27
- optionAvatar: true
28
- });
29
- };
30
- export default PersonType;
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const SelectType = props => {
6
- const {
7
- rowIndex,
8
- property,
9
- value,
10
- options,
11
- readOnly
12
- } = props;
13
- const {
14
- onChange
15
- } = useDataView();
16
- const coloredValues = [...(value || [])]?.map(m => {
17
- return {
18
- ...m,
19
- color: options?.find(f => f.value === m.value)?.color
20
- };
21
- });
22
- const handleChange = data => {
23
- onChange(rowIndex, {
24
- [property]: data?.filter(f => f?.value)
25
- });
26
- };
27
- return /*#__PURE__*/_jsx(Select, {
28
- value: coloredValues,
29
- onChange: handleChange,
30
- options: options,
31
- multiple: false,
32
- disabled: readOnly
33
- });
34
- };
35
- export default SelectType;
@@ -1,36 +0,0 @@
1
- import React from "react";
2
- import { TextField } from "@mui/material";
3
- import { useDataView } from "../../Providers/DataViewProvider";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const TextType = props => {
6
- const {
7
- rowIndex,
8
- property,
9
- value,
10
- readOnly
11
- } = props;
12
- const {
13
- onChange
14
- } = useDataView();
15
- const handleChange = e => {
16
- onChange(rowIndex, {
17
- [property]: e?.target?.value
18
- });
19
- };
20
- const formatValue = () => {
21
- if (typeof value === "string") {
22
- return value;
23
- } else if (value[0]) {
24
- return value?.map(m => m.value).join(", ");
25
- }
26
- };
27
- return /*#__PURE__*/_jsx(TextField, {
28
- fullWidth: true,
29
- className: "fe-tv-type_text",
30
- value: formatValue(value),
31
- size: "small",
32
- onChange: handleChange,
33
- disabled: readOnly
34
- });
35
- };
36
- export default TextType;
@@ -1,17 +0,0 @@
1
- import TextType from "./TextType";
2
- import DateType from "./DateType";
3
- import SelectType from "./SelectType";
4
- import MultiSelectType from "./MultiSelectType";
5
- import NumberType from "./NumberType";
6
- import CheckType from "./CheckType";
7
- import PersonType from "./PersonType";
8
- const DataTypes = {
9
- text: TextType,
10
- date: DateType,
11
- select: SelectType,
12
- "multi-select": MultiSelectType,
13
- number: NumberType,
14
- check: CheckType,
15
- person: PersonType
16
- };
17
- export default DataTypes;
@@ -1,29 +0,0 @@
1
- import React from "react";
2
- import { Box } from "@mui/material";
3
- import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const ChooseField = props => {
6
- const {
7
- sort,
8
- properties,
9
- onChange
10
- } = props;
11
- const handleChange = e => {
12
- onChange(sort, {
13
- newKey: e?.target?.value
14
- });
15
- };
16
- return /*#__PURE__*/_jsx(Box, {
17
- sx: {
18
- width: "120px",
19
- mr: 1
20
- },
21
- className: "tv-cf",
22
- children: /*#__PURE__*/_jsx(SimpleSelect, {
23
- value: sort?.key,
24
- options: properties,
25
- handleChange: handleChange
26
- })
27
- });
28
- };
29
- export default ChooseField;
@@ -1,38 +0,0 @@
1
- import React from "react";
2
- import { Box } from "@mui/material";
3
- import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const SORT_LABELS = {
6
- asc: "Ascending",
7
- desc: "Descending"
8
- };
9
- const SORT_OPTIONS = [{
10
- key: "asc",
11
- label: SORT_LABELS.asc
12
- }, {
13
- key: "desc",
14
- label: SORT_LABELS.desc
15
- }];
16
- const ChooseSort = props => {
17
- const {
18
- sort,
19
- onChange
20
- } = props;
21
- const handleChange = e => {
22
- onChange(sort, {
23
- operator: e?.target?.value
24
- });
25
- };
26
- return /*#__PURE__*/_jsx(Box, {
27
- sx: {
28
- width: "120px"
29
- },
30
- className: "tv-cf",
31
- children: /*#__PURE__*/_jsx(SimpleSelect, {
32
- value: sort?.operator,
33
- options: SORT_OPTIONS,
34
- handleChange: handleChange
35
- })
36
- });
37
- };
38
- export default ChooseSort;
@@ -1,74 +0,0 @@
1
- import React from "react";
2
- import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
3
- import { useDataView } from "../../../Providers/DataViewProvider";
4
- import DeleteIcon from "@mui/icons-material/Delete";
5
- import ChooseSort from "./ChooseSort";
6
- import ChooseField from "./ChooseField";
7
- import ColumnsList from "../../Options/ColumnsList";
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- const SortOptions = props => {
11
- const {
12
- onClose
13
- } = props;
14
- const {
15
- properties,
16
- sort,
17
- onUpdateSort
18
- } = useDataView();
19
- const handleSortChange = (currentSortData, data = {}) => {
20
- onUpdateSort({
21
- ...currentSortData,
22
- ...data
23
- });
24
- };
25
- const handleDelete = () => {
26
- onClose();
27
- onUpdateSort({}, false, true);
28
- };
29
- const onSelect = s => () => {
30
- onUpdateSort({
31
- ...s,
32
- newKey: s.key,
33
- operator: "asc"
34
- }, false, false);
35
- onClose();
36
- };
37
- return sort?.length > 0 ? /*#__PURE__*/_jsxs(List, {
38
- className: "tv-opt-list",
39
- sx: {
40
- p: 0
41
- },
42
- children: [sort?.map((m, i) => {
43
- return /*#__PURE__*/_jsx(ListItem, {
44
- sx: {
45
- justifyContent: "space-between"
46
- },
47
- children: /*#__PURE__*/_jsxs(Box, {
48
- sx: {
49
- display: "flex"
50
- },
51
- children: [/*#__PURE__*/_jsx(ChooseField, {
52
- sort: m,
53
- properties: properties,
54
- onChange: handleSortChange
55
- }), /*#__PURE__*/_jsx(ChooseSort, {
56
- sort: m,
57
- onChange: handleSortChange
58
- })]
59
- })
60
- }, i);
61
- }), /*#__PURE__*/_jsxs(ListItemButton, {
62
- onClick: handleDelete,
63
- children: [/*#__PURE__*/_jsx(ListItemIcon, {
64
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
65
- }), /*#__PURE__*/_jsx(ListItemText, {
66
- children: "Delete Sort"
67
- })]
68
- })]
69
- }) : /*#__PURE__*/_jsx(ColumnsList, {
70
- properties: properties,
71
- onSelect: onSelect
72
- });
73
- };
74
- export default SortOptions;
@@ -1,64 +0,0 @@
1
- import React from "react";
2
- import { Box, Popover, SwipeableDrawer, IconButton, useTheme } from "@mui/material";
3
- import CloseIcon from "@mui/icons-material/Close";
4
- import useFilterSortStyles from "./styles";
5
- import SortOptions from "./SortOptions";
6
- import { useEditorContext } from "../../../../hooks/useMouseMove";
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { jsxs as _jsxs } from "react/jsx-runtime";
9
- const FilterSort = props => {
10
- const {
11
- theme: appTheme
12
- } = useEditorContext();
13
- const theme = useTheme();
14
- const {
15
- open,
16
- mode,
17
- anchorEl,
18
- onClose
19
- } = props;
20
- const classes = useFilterSortStyles(theme, appTheme);
21
- const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
22
- const PoperComponent = isMobile ? SwipeableDrawer : Popover;
23
- const renderMode = () => {
24
- if (mode?.type === "filter") {
25
- return "Filter Mode will be availbele soon";
26
- } else if (mode?.type === "sort") {
27
- return /*#__PURE__*/_jsx(SortOptions, {
28
- onClose: onClose
29
- });
30
- } else {
31
- return "Unknown Filter / Sort Mode";
32
- }
33
- };
34
- return /*#__PURE__*/_jsx(PoperComponent, {
35
- open: open,
36
- sx: classes.root,
37
- anchorEl: anchorEl,
38
- anchorOrigin: {
39
- vertical: "bottom",
40
- horizontal: "right"
41
- },
42
- transformOrigin: {
43
- vertical: "top",
44
- horizontal: "right"
45
- },
46
- onClose: onClose,
47
- anchor: "bottom",
48
- children: /*#__PURE__*/_jsxs(Box, {
49
- sx: classes.contentWrapper,
50
- children: [/*#__PURE__*/_jsxs(Box, {
51
- className: "fe-dv-ap-title",
52
- children: [/*#__PURE__*/_jsx("span", {
53
- children: "Sort By"
54
- }), /*#__PURE__*/_jsx(IconButton, {
55
- className: "tv-act-ico bg br1",
56
- size: "small",
57
- onClick: onClose,
58
- children: /*#__PURE__*/_jsx(CloseIcon, {})
59
- })]
60
- }), renderMode()]
61
- })
62
- });
63
- };
64
- export default FilterSort;
@@ -1,106 +0,0 @@
1
- const useFilterSortStyles = (theme, appTheme) => ({
2
- root: {
3
- "& .MuiPaper-root": {
4
- boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
5
- border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
6
- background: appTheme?.palette?.editor?.tv_pop_bg,
7
- color: appTheme?.palette?.editor?.tv_text_primary,
8
- borderRadius: "12px",
9
- [theme?.breakpoints?.between("xs", "md")]: {
10
- borderRadius: "16px 16px 0px 0px",
11
- maxHeight: "50%"
12
- },
13
- "& .MuiSelect-select": {
14
- padding: "4px 8px"
15
- },
16
- "& .ml": {
17
- marginLeft: "8px"
18
- },
19
- "& .tv-act-ico": {
20
- color: appTheme?.palette?.editor?.tv_text,
21
- "&.br1": {
22
- borderRadius: "6px"
23
- },
24
- "&.bg": {
25
- background: appTheme?.palette?.editor?.tv_ico_bg,
26
- "&:hover": {
27
- background: "rgba(100, 116, 139, 0.12)"
28
- }
29
- },
30
- "& svg": {
31
- width: "16px",
32
- height: "16px"
33
- }
34
- },
35
- "& .MuiList-root": {
36
- padding: "4px 2px",
37
- "& .MuiListItemButton-root": {
38
- color: appTheme?.palette?.editor?.tv_text_primary,
39
- padding: "2px 4px",
40
- borderRadius: "8px",
41
- "& .MuiListItemIcon-root": {
42
- minWidth: "38px",
43
- "&.needBg": {
44
- minWidth: "20px",
45
- width: "20px",
46
- height: "20px",
47
- alignItems: "center",
48
- justifyContent: "center",
49
- borderRadius: "4px",
50
- marginRight: "12px",
51
- background: appTheme?.palette?.editor?.tv_ico_bg
52
- },
53
- color: `${appTheme?.palette?.editor?.tv_text} !important`,
54
- "& svg": {
55
- width: "16px"
56
- }
57
- },
58
- "& .MuiTypography-root": {
59
- fontSize: "14px"
60
- },
61
- "&:hover": {
62
- background: appTheme?.palette?.editor?.tv_hover_bg,
63
- color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
64
- "& .MuiListItemIcon-root": {
65
- color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
66
- }
67
- }
68
- }
69
- },
70
- "& .tv-cf": {
71
- "& .MuiInputBase-root": {
72
- color: appTheme?.palette?.editor?.tv_text_primary,
73
- background: appTheme?.palette?.editor?.tv_input_bg,
74
- borderRadius: "8px",
75
- "& svg": {
76
- color: appTheme?.palette?.editor?.tv_text_primary
77
- }
78
- }
79
- }
80
- }
81
- },
82
- contentWrapper: {
83
- padding: "0px",
84
- "& .tv-opt-list": {
85
- minWidth: "250px"
86
- },
87
- "& .opt-wrpr": {
88
- padding: "8px 8px 8px 8px"
89
- },
90
- "& .fe-dv-ap-title": {
91
- display: "flex",
92
- fontWeight: "bold",
93
- padding: "8px 8px 8px 8px",
94
- justifyContent: "space-between",
95
- fontSize: "14px",
96
- alignItems: "center",
97
- borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
98
- marginBottom: "0px",
99
- "& span": {
100
- display: "flex",
101
- alignItems: "center"
102
- }
103
- }
104
- }
105
- });
106
- export default useFilterSortStyles;
@@ -1,174 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
3
- import { useDataView } from "../Providers/DataViewProvider";
4
- import FilterSort from "./FilterSort";
5
- import DeleteIcon from "@mui/icons-material/Delete";
6
- import SearchIcon from "@mui/icons-material/Search";
7
- import SwapVertIcon from "@mui/icons-material/SwapVert";
8
- import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
9
- import ContentCopyIcon from "@mui/icons-material/ContentCopy";
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- import { jsxs as _jsxs } from "react/jsx-runtime";
12
- const FilterView = props => {
13
- const {
14
- classes,
15
- onDelete,
16
- onDuplicate,
17
- onEnter,
18
- readOnly,
19
- title,
20
- onTitleChange
21
- } = props;
22
- const {
23
- sort,
24
- selectedRows,
25
- onDeleteRows,
26
- search,
27
- onSearch
28
- } = useDataView();
29
- const [anchorEl, setAnchorEl] = useState(null);
30
- const [anchorMoreEl, setAnchorMoreEl] = useState(null);
31
- const [mode, setMode] = useState({});
32
- const [toggle, setToggle] = useState(false);
33
- const open = Boolean(anchorEl);
34
- const openMore = Boolean(anchorMoreEl);
35
- const handleSortClick = e => {
36
- setAnchorEl(e?.currentTarget);
37
- setMode({
38
- type: "sort"
39
- });
40
- };
41
- const handleMoreClick = e => {
42
- setAnchorMoreEl(e?.currentTarget);
43
- setMode({
44
- type: ""
45
- });
46
- };
47
- const handleDeleteRow = () => {
48
- onDeleteRows();
49
- };
50
- const onClose = () => {
51
- setAnchorEl(null);
52
- };
53
- const toggleSearch = () => {
54
- setToggle(!toggle);
55
- };
56
- const onMenuClick = menu => () => {
57
- switch (menu) {
58
- case "Duplicate":
59
- onDuplicate();
60
- break;
61
- case "Delete":
62
- onDelete();
63
- break;
64
- default:
65
- }
66
- };
67
- const handleMoreClose = () => {
68
- setAnchorMoreEl(null);
69
- };
70
- const handleTitleChange = e => {
71
- onTitleChange(e?.target?.value);
72
- };
73
- const handleEnter = e => {
74
- if (e?.key === "Enter") {
75
- onEnter();
76
- }
77
- };
78
- return /*#__PURE__*/_jsxs(Box, {
79
- className: "fe-tv-fv",
80
- contentEditable: false,
81
- sx: classes.filterView,
82
- children: [/*#__PURE__*/_jsx(Box, {
83
- className: "tv-title-wrpr",
84
- children: !readOnly ? /*#__PURE__*/_jsx(InputBase, {
85
- sx: {
86
- paddingBottom: "0px",
87
- fontWeight: "bold",
88
- fontSize: "16px"
89
- },
90
- size: "small",
91
- placeholder: "Untitled",
92
- inputProps: {
93
- "aria-label": "Table Name",
94
- maxLength: 100
95
- },
96
- value: title,
97
- onChange: handleTitleChange,
98
- onKeyUp: handleEnter
99
- }) : title || "Untitled"
100
- }), /*#__PURE__*/_jsxs(Box, {
101
- className: "tv-fi-wrpr",
102
- children: [/*#__PURE__*/_jsxs(Box, {
103
- className: `tv-sb mr ${toggle ? "open" : ""}`,
104
- children: [/*#__PURE__*/_jsx(IconButton, {
105
- type: "button",
106
- "aria-label": "search",
107
- onClick: toggleSearch,
108
- children: /*#__PURE__*/_jsx(SearchIcon, {})
109
- }), /*#__PURE__*/_jsx(InputBase, {
110
- sx: {
111
- paddingBottom: "0px"
112
- },
113
- size: "small",
114
- placeholder: "Search here",
115
- inputProps: {
116
- "aria-label": "search google maps"
117
- },
118
- value: search,
119
- onChange: onSearch
120
- })]
121
- }), /*#__PURE__*/_jsx(IconButton, {
122
- className: `mr ${sort?.length > 0 ? "active" : ""}`,
123
- onClick: handleSortClick,
124
- children: /*#__PURE__*/_jsx(SwapVertIcon, {})
125
- }), /*#__PURE__*/_jsx(FilterSort, {
126
- open: open,
127
- anchorEl: anchorEl,
128
- mode: mode,
129
- onClose: onClose
130
- }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
131
- className: "mr",
132
- onClick: handleMoreClick,
133
- children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
134
- }) : null, selectedRows?.length > 0 && !readOnly ? /*#__PURE__*/_jsx(IconButton, {
135
- className: "mr",
136
- onClick: handleDeleteRow,
137
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
138
- }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
139
- sx: classes.basicMenu,
140
- className: "tv-basic-menu",
141
- anchorEl: anchorMoreEl,
142
- open: openMore,
143
- onClose: handleMoreClose,
144
- MenuListProps: {
145
- "aria-labelledby": "basic-button"
146
- },
147
- anchorOrigin: {
148
- vertical: "bottom",
149
- horizontal: "right"
150
- },
151
- transformOrigin: {
152
- vertical: "top",
153
- horizontal: "right"
154
- },
155
- children: [/*#__PURE__*/_jsxs(MenuItem, {
156
- onClick: onMenuClick("Duplicate"),
157
- children: [" ", /*#__PURE__*/_jsx(ContentCopyIcon, {
158
- sx: {
159
- mr: 1
160
- }
161
- }), " Duplicate"]
162
- }), /*#__PURE__*/_jsxs(MenuItem, {
163
- onClick: onMenuClick("Delete"),
164
- children: [" ", /*#__PURE__*/_jsx(DeleteIcon, {
165
- sx: {
166
- mr: 1
167
- }
168
- }), " Delete"]
169
- })]
170
- }) : null]
171
- })]
172
- });
173
- };
174
- export default FilterView;