@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.
- package/dist/Editor/CommonEditor.js +8 -14
- package/dist/Editor/Editor.css +22 -58
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -8
- package/dist/Editor/Elements/AppHeader/AppHeader.js +6 -6
- package/dist/Editor/Elements/Button/EditorButton.js +2 -9
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +2 -4
- package/dist/Editor/Elements/Divider/Divider.js +9 -24
- package/dist/Editor/Elements/Embed/Image.js +12 -31
- package/dist/Editor/Elements/Embed/Video.js +2 -13
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +4 -4
- package/dist/Editor/Elements/FreeGrid/styles.js +1 -2
- package/dist/Editor/Elements/Grid/GridItem.js +0 -2
- package/dist/Editor/Elements/Grid/Styles.js +0 -44
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +4 -4
- package/dist/Editor/Elements/SimpleText/index.js +1 -8
- package/dist/Editor/Elements/SimpleText/style.js +1 -10
- package/dist/Editor/Elements/TopBanner/TopBanner.js +1 -2
- package/dist/Editor/MiniEditor.js +1 -15
- package/dist/Editor/Styles/EditorStyles.js +3 -5
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +1 -17
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +3 -5
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -210
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -55
- package/dist/Editor/Toolbar/Toolbar.js +0 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +0 -4
- package/dist/Editor/assets/svg/SettingsIcon.js +4 -4
- package/dist/Editor/common/ColorPickerButton.js +3 -5
- package/dist/Editor/common/DnD/Draggable.js +1 -2
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
- package/dist/Editor/common/Icon.js +0 -6
- package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -2
- package/dist/Editor/common/ImageSelector/Styles.js +6 -47
- package/dist/Editor/common/ImageSelector/UploadStyles.js +6 -18
- package/dist/Editor/common/MentionsPopup/Styles.js +122 -109
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
- package/dist/Editor/common/RnD/GuideLines/styles.js +3 -3
- package/dist/Editor/common/RnD/ShadowElement.js +1 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +6 -9
- package/dist/Editor/common/RnD/index.js +1 -2
- package/dist/Editor/common/Section/index.js +3 -3
- package/dist/Editor/common/Section/styles.js +1 -5
- package/dist/Editor/common/Shorthands/elements.js +1 -13
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +1 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +3 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -27
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +2 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +0 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +4 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +6 -22
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +2 -21
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +0 -7
- package/dist/Editor/common/StyleBuilder/index.js +9 -17
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
- package/dist/Editor/common/ToolbarIcon.js +1 -2
- package/dist/Editor/common/Uploader.js +36 -46
- package/dist/Editor/common/iconListV2.js +130 -348
- package/dist/Editor/common/iconslist.js +3 -6
- package/dist/Editor/commonStyle.js +4 -290
- package/dist/Editor/helper/index.js +3 -16
- package/dist/Editor/helper/theme.js +1 -24
- package/dist/Editor/hooks/useMouseMove.js +2 -5
- package/dist/Editor/plugins/withCustomDeleteBackward.js +2 -33
- package/dist/Editor/plugins/withEmbeds.js +26 -30
- package/dist/Editor/utils/SlateUtilityFunctions.js +4 -27
- package/dist/Editor/utils/button.js +4 -4
- package/dist/Editor/utils/helper.js +13 -40
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/package.json +2 -2
- package/dist/Editor/Elements/DataView/DataView.js +0 -124
- package/dist/Editor/Elements/DataView/DataViewButton.js +0 -23
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +0 -67
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +0 -33
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +0 -162
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +0 -40
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +0 -67
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +0 -35
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +0 -39
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +0 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +0 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +0 -35
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +0 -36
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +0 -17
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +0 -29
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +0 -38
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +0 -74
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +0 -64
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +0 -106
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +0 -174
- package/dist/Editor/Elements/DataView/Layouts/Formula.js +0 -29
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -113
- package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +0 -37
- package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +0 -111
- package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +0 -60
- package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +0 -36
- package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +0 -101
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +0 -160
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +0 -190
- package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +0 -42
- package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +0 -30
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -110
- package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +0 -179
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +0 -112
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +0 -227
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +0 -80
- package/dist/Editor/Elements/DataView/Layouts/colStyles.js +0 -10
- package/dist/Editor/Elements/DataView/Layouts/index.js +0 -25
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +0 -281
- package/dist/Editor/Elements/DataView/Utils/globalSearch.js +0 -15
- package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +0 -74
- package/dist/Editor/Elements/DataView/styles.js +0 -154
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
- package/dist/Editor/helper/enforceDateFormat.js +0 -41
- 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;
|