@flozy/editor 5.3.5 → 5.3.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. package/dist/Editor/CommonEditor.js +8 -14
  2. package/dist/Editor/Editor.css +22 -58
  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/MiniEditor.js +1 -15
  23. package/dist/Editor/Styles/EditorStyles.js +3 -5
  24. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +1 -17
  25. package/dist/Editor/Toolbar/FormatTools/TextSize.js +3 -5
  26. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -210
  27. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -55
  28. package/dist/Editor/Toolbar/Toolbar.js +0 -6
  29. package/dist/Editor/Toolbar/toolbarGroups.js +0 -4
  30. package/dist/Editor/assets/svg/SettingsIcon.js +4 -4
  31. package/dist/Editor/common/ColorPickerButton.js +3 -5
  32. package/dist/Editor/common/DnD/Draggable.js +1 -2
  33. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  34. package/dist/Editor/common/Icon.js +0 -6
  35. package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -2
  36. package/dist/Editor/common/ImageSelector/Styles.js +6 -47
  37. package/dist/Editor/common/ImageSelector/UploadStyles.js +6 -18
  38. package/dist/Editor/common/MentionsPopup/Styles.js +122 -109
  39. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
  40. package/dist/Editor/common/RnD/GuideLines/styles.js +3 -3
  41. package/dist/Editor/common/RnD/ShadowElement.js +1 -1
  42. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
  43. package/dist/Editor/common/RnD/Utils/gridDropItem.js +6 -9
  44. package/dist/Editor/common/RnD/index.js +1 -2
  45. package/dist/Editor/common/Section/index.js +3 -3
  46. package/dist/Editor/common/Section/styles.js +1 -5
  47. package/dist/Editor/common/Shorthands/elements.js +1 -13
  48. package/dist/Editor/common/StyleBuilder/fieldStyle.js +1 -2
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +3 -9
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -27
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +2 -15
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  53. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -2
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -1
  55. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +0 -2
  56. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  57. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +4 -4
  58. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +6 -22
  59. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +2 -21
  60. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -15
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +0 -7
  62. package/dist/Editor/common/StyleBuilder/index.js +9 -17
  63. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
  64. package/dist/Editor/common/ToolbarIcon.js +1 -2
  65. package/dist/Editor/common/Uploader.js +36 -46
  66. package/dist/Editor/common/iconListV2.js +130 -348
  67. package/dist/Editor/common/iconslist.js +3 -6
  68. package/dist/Editor/commonStyle.js +4 -290
  69. package/dist/Editor/helper/index.js +3 -16
  70. package/dist/Editor/helper/theme.js +1 -24
  71. package/dist/Editor/hooks/useMouseMove.js +2 -5
  72. package/dist/Editor/plugins/withCustomDeleteBackward.js +2 -33
  73. package/dist/Editor/plugins/withEmbeds.js +26 -30
  74. package/dist/Editor/utils/SlateUtilityFunctions.js +4 -27
  75. package/dist/Editor/utils/button.js +4 -4
  76. package/dist/Editor/utils/helper.js +13 -40
  77. package/dist/Editor/utils/pageSettings.js +2 -14
  78. package/package.json +2 -2
  79. package/dist/Editor/Elements/DataView/DataView.js +0 -124
  80. package/dist/Editor/Elements/DataView/DataViewButton.js +0 -23
  81. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +0 -67
  82. package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +0 -33
  83. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +0 -162
  84. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +0 -40
  85. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +0 -67
  86. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +0 -35
  87. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +0 -39
  88. package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +0 -30
  89. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +0 -30
  90. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +0 -35
  91. package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +0 -36
  92. package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +0 -17
  93. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +0 -29
  94. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +0 -38
  95. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +0 -74
  96. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +0 -64
  97. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +0 -106
  98. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +0 -174
  99. package/dist/Editor/Elements/DataView/Layouts/Formula.js +0 -29
  100. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -113
  101. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +0 -37
  102. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +0 -111
  103. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +0 -60
  104. package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +0 -36
  105. package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +0 -101
  106. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +0 -160
  107. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +0 -190
  108. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +0 -42
  109. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +0 -30
  110. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -110
  111. package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +0 -179
  112. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +0 -112
  113. package/dist/Editor/Elements/DataView/Layouts/TableView.js +0 -227
  114. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +0 -80
  115. package/dist/Editor/Elements/DataView/Layouts/colStyles.js +0 -10
  116. package/dist/Editor/Elements/DataView/Layouts/index.js +0 -25
  117. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +0 -281
  118. package/dist/Editor/Elements/DataView/Utils/globalSearch.js +0 -15
  119. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +0 -74
  120. package/dist/Editor/Elements/DataView/styles.js +0 -154
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
  122. package/dist/Editor/helper/enforceDateFormat.js +0 -41
  123. 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;