@flozy/editor 5.0.5 → 5.0.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.
- package/dist/Editor/CommonEditor.js +6 -4
- package/dist/Editor/Editor.css +19 -1
- package/dist/Editor/Elements/Button/EditorButton.js +71 -53
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
- package/dist/Editor/Elements/DataView/DataView.js +101 -0
- package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +59 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +128 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +25 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +26 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +38 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +28 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +37 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +59 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +66 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
- package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +62 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +158 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +176 -0
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +94 -0
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +214 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +83 -0
- package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +288 -0
- package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
- package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +72 -0
- package/dist/Editor/Elements/DataView/styles.js +133 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -1
- package/dist/Editor/Elements/Table/AddRowCol.js +1 -1
- package/dist/Editor/Elements/Table/DragButton.js +71 -68
- package/dist/Editor/Elements/Table/Styles.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +10 -7
- package/dist/Editor/Elements/Table/TableCell.js +21 -21
- package/dist/Editor/Elements/Table/tableHelper.js +4 -16
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/Toolbar.js +6 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
- package/dist/Editor/assets/svg/OpenLinkIcon.js +3 -3
- package/dist/Editor/common/Icon.js +7 -1
- package/dist/Editor/common/MentionsPopup/index.js +1 -1
- package/dist/Editor/common/Shorthands/elements.js +13 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +1 -1
- package/dist/Editor/common/iconslist.js +6 -3
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withHTML.js +18 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +16 -0
- package/dist/Editor/utils/dataView.js +43 -0
- package/dist/Editor/utils/embed.js +2 -1
- package/dist/Editor/utils/helper.js +19 -1
- package/dist/Editor/utils/insertNewLine.js +19 -1
- package/package.json +1 -1
@@ -0,0 +1,30 @@
|
|
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;
|
@@ -0,0 +1,30 @@
|
|
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
|
+
console.log(users);
|
17
|
+
const handleChange = data => {
|
18
|
+
onChange(rowIndex, {
|
19
|
+
[property]: data?.filter(f => f?.value)
|
20
|
+
});
|
21
|
+
};
|
22
|
+
return /*#__PURE__*/_jsx(Select, {
|
23
|
+
value: value || [],
|
24
|
+
onChange: handleChange,
|
25
|
+
options: users,
|
26
|
+
multiple: false,
|
27
|
+
disabled: readOnly
|
28
|
+
});
|
29
|
+
};
|
30
|
+
export default PersonType;
|
@@ -0,0 +1,35 @@
|
|
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;
|
@@ -0,0 +1,36 @@
|
|
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;
|
@@ -0,0 +1,17 @@
|
|
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;
|
@@ -0,0 +1,28 @@
|
|
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
|
+
children: /*#__PURE__*/_jsx(SimpleSelect, {
|
22
|
+
value: sort?.key,
|
23
|
+
options: properties,
|
24
|
+
handleChange: handleChange
|
25
|
+
})
|
26
|
+
});
|
27
|
+
};
|
28
|
+
export default ChooseField;
|
@@ -0,0 +1,37 @@
|
|
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
|
+
children: /*#__PURE__*/_jsx(SimpleSelect, {
|
31
|
+
value: sort?.operator,
|
32
|
+
options: SORT_OPTIONS,
|
33
|
+
handleChange: handleChange
|
34
|
+
})
|
35
|
+
});
|
36
|
+
};
|
37
|
+
export default ChooseSort;
|
@@ -0,0 +1,74 @@
|
|
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;
|
@@ -0,0 +1,59 @@
|
|
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 { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const FilterSort = props => {
|
9
|
+
const theme = useTheme();
|
10
|
+
const {
|
11
|
+
open,
|
12
|
+
mode,
|
13
|
+
anchorEl,
|
14
|
+
onClose
|
15
|
+
} = props;
|
16
|
+
const classes = useFilterSortStyles(theme);
|
17
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
18
|
+
const PoperComponent = isMobile ? SwipeableDrawer : Popover;
|
19
|
+
const renderMode = () => {
|
20
|
+
if (mode?.type === "filter") {
|
21
|
+
return "Filter Mode will be availbele soon";
|
22
|
+
} else if (mode?.type === "sort") {
|
23
|
+
return /*#__PURE__*/_jsx(SortOptions, {
|
24
|
+
onClose: onClose
|
25
|
+
});
|
26
|
+
} else {
|
27
|
+
return "Unknown Filter / Sort Mode";
|
28
|
+
}
|
29
|
+
};
|
30
|
+
return /*#__PURE__*/_jsx(PoperComponent, {
|
31
|
+
open: open,
|
32
|
+
sx: classes.root,
|
33
|
+
anchorEl: anchorEl,
|
34
|
+
anchorOrigin: {
|
35
|
+
vertical: "bottom",
|
36
|
+
horizontal: "right"
|
37
|
+
},
|
38
|
+
transformOrigin: {
|
39
|
+
vertical: "top",
|
40
|
+
horizontal: "right"
|
41
|
+
},
|
42
|
+
onClose: onClose,
|
43
|
+
anchor: "bottom",
|
44
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
45
|
+
sx: classes.contentWrapper,
|
46
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
47
|
+
className: "fe-dv-ap-title",
|
48
|
+
children: [/*#__PURE__*/_jsx("span", {
|
49
|
+
children: "Sort By"
|
50
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
51
|
+
size: "small",
|
52
|
+
onClick: onClose,
|
53
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
54
|
+
})]
|
55
|
+
}), renderMode()]
|
56
|
+
})
|
57
|
+
});
|
58
|
+
};
|
59
|
+
export default FilterSort;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
const useFilterSortStyles = theme => ({
|
2
|
+
root: {
|
3
|
+
"& .MuiPaper-root": {
|
4
|
+
boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
|
5
|
+
border: "1px solid rgba(228, 232, 235, 1)",
|
6
|
+
borderRadius: "12px",
|
7
|
+
[theme.breakpoints.between("xs", "md")]: {
|
8
|
+
borderRadius: "16px 16px 0px 0px",
|
9
|
+
maxHeight: "50%"
|
10
|
+
},
|
11
|
+
"& .MuiList-root": {
|
12
|
+
padding: "4px 2px",
|
13
|
+
"& .MuiListItem-root": {
|
14
|
+
padding: "8px"
|
15
|
+
},
|
16
|
+
"& .MuiListItemButton-root": {
|
17
|
+
color: "rgba(15, 23, 42, 1)",
|
18
|
+
padding: "2px 4px",
|
19
|
+
"& .MuiListItemIcon-root": {
|
20
|
+
minWidth: "38px"
|
21
|
+
},
|
22
|
+
"& .MuiTypography-root": {
|
23
|
+
fontSize: "14px"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .MuiButtonBase-root": {
|
27
|
+
padding: "4px",
|
28
|
+
"& svg": {
|
29
|
+
// width: "16px",
|
30
|
+
// height: "16px",
|
31
|
+
}
|
32
|
+
}
|
33
|
+
},
|
34
|
+
"& .MuiSelect-select": {
|
35
|
+
padding: "4px 8px"
|
36
|
+
},
|
37
|
+
"& .ml": {
|
38
|
+
marginLeft: "8px"
|
39
|
+
}
|
40
|
+
}
|
41
|
+
},
|
42
|
+
contentWrapper: {
|
43
|
+
padding: "0px",
|
44
|
+
"& .tv-opt-list": {
|
45
|
+
minWidth: "250px"
|
46
|
+
},
|
47
|
+
"& .opt-wrpr": {
|
48
|
+
padding: "8px 8px 8px 8px"
|
49
|
+
},
|
50
|
+
"& .fe-dv-ap-title": {
|
51
|
+
display: "flex",
|
52
|
+
fontWeight: "bold",
|
53
|
+
padding: "8px 8px 8px 8px",
|
54
|
+
justifyContent: "space-between",
|
55
|
+
fontSize: "14px",
|
56
|
+
alignItems: "center",
|
57
|
+
borderBottom: "1px solid rgba(220, 228, 236, 1)",
|
58
|
+
marginBottom: "0px",
|
59
|
+
"& span": {
|
60
|
+
display: "flex",
|
61
|
+
alignItems: "center"
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
});
|
66
|
+
export default useFilterSortStyles;
|
@@ -0,0 +1,174 @@
|
|
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
|
+
} = props;
|
20
|
+
const {
|
21
|
+
sort,
|
22
|
+
selectedRows,
|
23
|
+
onDeleteRows,
|
24
|
+
search,
|
25
|
+
onSearch,
|
26
|
+
title,
|
27
|
+
setTitle
|
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
|
+
setTitle(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 in Table",
|
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;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
const RenderFormulaCell = props => {
|
5
|
+
const {
|
6
|
+
property
|
7
|
+
} = props;
|
8
|
+
return /*#__PURE__*/_jsxs("td", {
|
9
|
+
style: {
|
10
|
+
minWidth: "200px",
|
11
|
+
textAlign: "center",
|
12
|
+
color: "#CCC"
|
13
|
+
},
|
14
|
+
children: ["Calculate ", property?.key]
|
15
|
+
});
|
16
|
+
};
|
17
|
+
const Formula = props => {
|
18
|
+
const {
|
19
|
+
properties
|
20
|
+
} = props;
|
21
|
+
return /*#__PURE__*/_jsx("tr", {
|
22
|
+
children: properties?.map((m, i) => {
|
23
|
+
return /*#__PURE__*/_jsx(RenderFormulaCell, {
|
24
|
+
property: m
|
25
|
+
}, i);
|
26
|
+
})
|
27
|
+
});
|
28
|
+
};
|
29
|
+
export default Formula;
|