@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.
Files changed (69) hide show
  1. package/dist/Editor/CommonEditor.js +6 -4
  2. package/dist/Editor/Editor.css +19 -1
  3. package/dist/Editor/Elements/Button/EditorButton.js +71 -53
  4. package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
  5. package/dist/Editor/Elements/DataView/DataView.js +101 -0
  6. package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
  7. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +59 -0
  8. package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +30 -0
  9. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +128 -0
  10. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +25 -0
  11. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +26 -0
  12. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +38 -0
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
  18. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +28 -0
  19. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +37 -0
  20. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
  21. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +59 -0
  22. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +66 -0
  23. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
  24. package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
  25. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
  26. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
  27. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
  28. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +62 -0
  29. package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
  30. package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
  31. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +158 -0
  32. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
  33. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
  34. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
  35. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
  36. package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +176 -0
  37. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +94 -0
  38. package/dist/Editor/Elements/DataView/Layouts/TableView.js +214 -0
  39. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +83 -0
  40. package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
  41. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +288 -0
  42. package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
  43. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +72 -0
  44. package/dist/Editor/Elements/DataView/styles.js +133 -0
  45. package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
  46. package/dist/Editor/Elements/Signature/Signature.css +1 -1
  47. package/dist/Editor/Elements/Table/AddRowCol.js +1 -1
  48. package/dist/Editor/Elements/Table/DragButton.js +71 -68
  49. package/dist/Editor/Elements/Table/Styles.js +2 -2
  50. package/dist/Editor/Elements/Table/Table.js +10 -7
  51. package/dist/Editor/Elements/Table/TableCell.js +21 -21
  52. package/dist/Editor/Elements/Table/tableHelper.js +4 -16
  53. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  54. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  55. package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
  56. package/dist/Editor/assets/svg/OpenLinkIcon.js +3 -3
  57. package/dist/Editor/common/Icon.js +7 -1
  58. package/dist/Editor/common/MentionsPopup/index.js +1 -1
  59. package/dist/Editor/common/Shorthands/elements.js +13 -1
  60. package/dist/Editor/common/StyleBuilder/tableStyle.js +1 -1
  61. package/dist/Editor/common/iconslist.js +6 -3
  62. package/dist/Editor/hooks/useTable.js +4 -5
  63. package/dist/Editor/plugins/withHTML.js +18 -2
  64. package/dist/Editor/utils/SlateUtilityFunctions.js +16 -0
  65. package/dist/Editor/utils/dataView.js +43 -0
  66. package/dist/Editor/utils/embed.js +2 -1
  67. package/dist/Editor/utils/helper.js +19 -1
  68. package/dist/Editor/utils/insertNewLine.js +19 -1
  69. package/package.json +1 -1
@@ -0,0 +1,113 @@
1
+ import React, { useState } from "react";
2
+ import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
3
+ import AddIcon from "@mui/icons-material/Add";
4
+ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5
+ import { colors } from "../../../Color Picker/defaultColors";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
9
+ const AddOptions = props => {
10
+ const {
11
+ edit,
12
+ onUpdate,
13
+ onEvent
14
+ } = props;
15
+ const [addBox, setAddBox] = useState(false);
16
+ const [value, setValue] = useState("");
17
+ const [error, setError] = useState("");
18
+ const {
19
+ options
20
+ } = edit;
21
+ const onAddBox = () => {
22
+ setAddBox(!addBox);
23
+ };
24
+ const getRandomColor = () => {
25
+ const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS.length);
26
+ return DEFAULT_COLORS[randomIndex];
27
+ };
28
+ const handleEnter = e => {
29
+ const isExists = options?.find(f => f.value.toLowerCase() === value.toLowerCase());
30
+ if (e.keyCode === 13 && value?.trim()) {
31
+ if (isExists) {
32
+ setError("Option Already Exists!");
33
+ return;
34
+ }
35
+ onUpdate({
36
+ ...edit,
37
+ options: [{
38
+ value: value,
39
+ color: getRandomColor()
40
+ }, ...(options || [])]
41
+ });
42
+ setValue("");
43
+ }
44
+ };
45
+ const handleChange = e => {
46
+ setValue(e?.target?.value);
47
+ setError("");
48
+ };
49
+ const handleChangeOption = optIndex => () => {
50
+ onEvent("editOption", {
51
+ edit: {
52
+ ...edit,
53
+ optionIndex: optIndex
54
+ }
55
+ });
56
+ };
57
+ const onBlur = () => {
58
+ setValue("");
59
+ setAddBox(false);
60
+ setError("");
61
+ };
62
+ return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
63
+ className: "fe-tv-addopt st sb mb-0",
64
+ children: [/*#__PURE__*/_jsx(List, {
65
+ className: "fe-dv-opt-list pl-0",
66
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
67
+ onClick: onAddBox,
68
+ children: [/*#__PURE__*/_jsx(ListItemIcon, {
69
+ children: /*#__PURE__*/_jsx(AddIcon, {})
70
+ }), /*#__PURE__*/_jsx(ListItemText, {
71
+ primary: "Add Options"
72
+ })]
73
+ })
74
+ }), /*#__PURE__*/_jsx(Box, {
75
+ className: "fe-dv-ap-desc",
76
+ children: "Choose an option or create one"
77
+ }), addBox ? /*#__PURE__*/_jsx(Box, {
78
+ children: /*#__PURE__*/_jsx(TextField, {
79
+ className: "mt",
80
+ size: "small",
81
+ fullWidth: true,
82
+ value: value,
83
+ onKeyUp: handleEnter,
84
+ onChange: handleChange,
85
+ onBlur: onBlur,
86
+ helperText: error
87
+ })
88
+ }) : null, /*#__PURE__*/_jsx(List, {
89
+ children: options?.map((m, i) => {
90
+ return /*#__PURE__*/_jsxs(ListItemButton, {
91
+ onClick: handleChangeOption(i),
92
+ children: [/*#__PURE__*/_jsx(ListItemText, {
93
+ primary: /*#__PURE__*/_jsx(Chip, {
94
+ label: m.value,
95
+ sx: {
96
+ backgroundColor: m.color
97
+ }
98
+ })
99
+ }), /*#__PURE__*/_jsx(ListItemIcon, {
100
+ sx: {
101
+ justifyContent: "flex-end"
102
+ },
103
+ children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
104
+ })]
105
+ }, i);
106
+ })
107
+ })]
108
+ }) : null;
109
+ };
110
+ AddOptions.defaultProps = {
111
+ onEvent: () => {}
112
+ };
113
+ export default AddOptions;
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import { Box, IconButton } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import PropertyList from "./PropertyList";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const AddProperty = props => {
8
+ const {
9
+ classes,
10
+ onClose,
11
+ onEvent
12
+ } = props;
13
+ const onSelect = type => () => {
14
+ onEvent("addProperty", type);
15
+ };
16
+ return /*#__PURE__*/_jsxs(Box, {
17
+ sx: classes.addProperty,
18
+ children: [/*#__PURE__*/_jsxs(Box, {
19
+ className: "fe-dv-ap-title",
20
+ children: ["Add Property", /*#__PURE__*/_jsx(IconButton, {
21
+ className: "tv-act-ico bg br1",
22
+ size: "small",
23
+ onClick: onClose,
24
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
25
+ })]
26
+ }), /*#__PURE__*/_jsx(Box, {
27
+ className: "fe-dv-ap-opt-content mt",
28
+ children: /*#__PURE__*/_jsx(PropertyList, {
29
+ onSelect: onSelect
30
+ })
31
+ })]
32
+ });
33
+ };
34
+ AddProperty.defaultProps = {
35
+ onEvent: () => {}
36
+ };
37
+ export default AddProperty;
@@ -0,0 +1,111 @@
1
+ import React from "react";
2
+ import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5
+ import AddIcon from "@mui/icons-material/Add";
6
+ import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
7
+ import { useDataView } from "../../Providers/DataViewProvider";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ import { Fragment as _Fragment } from "react/jsx-runtime";
11
+ const AllProperties = props => {
12
+ const {
13
+ classes,
14
+ onClose,
15
+ onEvent
16
+ } = props;
17
+ const {
18
+ properties,
19
+ onAddProperty
20
+ } = useDataView();
21
+ const shownProperties = properties?.filter(f => f.visible === true);
22
+ const hiddenProperties = properties?.filter(f => f.visible === false);
23
+ const onEditProperty = data => () => {
24
+ onEvent("editProperty", {
25
+ edit: {
26
+ ...data
27
+ }
28
+ });
29
+ };
30
+ const onAdd = () => {
31
+ const np = onAddProperty({
32
+ type: "text"
33
+ });
34
+ onEvent("editProperty", {
35
+ edit: {
36
+ ...np
37
+ }
38
+ });
39
+ };
40
+ return /*#__PURE__*/_jsxs(Box, {
41
+ sx: classes.addProperty,
42
+ children: [/*#__PURE__*/_jsxs(Box, {
43
+ className: "fe-dv-ap-title",
44
+ children: ["Properties", /*#__PURE__*/_jsx(IconButton, {
45
+ className: "tv-act-ico bg br1",
46
+ size: "small",
47
+ onClick: onClose,
48
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
49
+ })]
50
+ }), /*#__PURE__*/_jsx(Box, {
51
+ className: "fe-dv-ap-desc",
52
+ children: "Displayed Properties"
53
+ }), /*#__PURE__*/_jsxs(Box, {
54
+ className: "fe-dv-ap-opt-content",
55
+ children: [/*#__PURE__*/_jsx(List, {
56
+ className: "fe-dv-opt-list",
57
+ children: shownProperties?.map((m, i) => {
58
+ const {
59
+ Icon
60
+ } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
61
+ return /*#__PURE__*/_jsxs(ListItemButton, {
62
+ onClick: onEditProperty(m),
63
+ children: [/*#__PURE__*/_jsx(ListItemIcon, {
64
+ className: "needBg",
65
+ children: /*#__PURE__*/_jsx(Icon, {})
66
+ }), /*#__PURE__*/_jsx(ListItemText, {
67
+ children: m?.label
68
+ }), /*#__PURE__*/_jsx(ListItemIcon, {
69
+ sx: {
70
+ justifyContent: "end"
71
+ },
72
+ children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
73
+ })]
74
+ }, i);
75
+ })
76
+ }), hiddenProperties?.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
77
+ children: [/*#__PURE__*/_jsx(Box, {
78
+ className: "fe-dv-ap-desc",
79
+ children: "Hidden Properties"
80
+ }), /*#__PURE__*/_jsx(List, {
81
+ className: "fe-dv-opt-list",
82
+ children: hiddenProperties?.map((m, i) => {
83
+ return /*#__PURE__*/_jsxs(ListItemButton, {
84
+ onClick: onEditProperty(m),
85
+ children: [/*#__PURE__*/_jsx(ListItemText, {
86
+ children: m?.label
87
+ }), /*#__PURE__*/_jsxs(ListItemIcon, {
88
+ sx: {
89
+ alignItems: "center"
90
+ },
91
+ children: [TYPE_LABELS[m?.type], /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
92
+ })]
93
+ }, i);
94
+ })
95
+ })]
96
+ }) : null, /*#__PURE__*/_jsx(List, {
97
+ className: "fe-dv-opt-list",
98
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
99
+ onClick: onAdd,
100
+ children: [/*#__PURE__*/_jsx(ListItemIcon, {
101
+ children: /*#__PURE__*/_jsx(AddIcon, {})
102
+ }), /*#__PURE__*/_jsx(ListItemText, {
103
+ children: "Add New Property"
104
+ })]
105
+ })
106
+ })]
107
+ })]
108
+ });
109
+ };
110
+ AllProperties.defaultProps = {};
111
+ export default AllProperties;
@@ -0,0 +1,62 @@
1
+ import React from "react";
2
+ import { Box, IconButton } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import PropertyList from "./PropertyList";
5
+ import { TYPE_LABELS } from "./Constants";
6
+ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ const ChangeProperty = props => {
10
+ const {
11
+ classes,
12
+ onClose,
13
+ onEvent,
14
+ mode
15
+ } = props;
16
+ const onSelect = property => () => {
17
+ onEvent("updateProperty", {
18
+ ...(mode?.edit || {}),
19
+ type: property?.type,
20
+ label: TYPE_LABELS[mode?.type] === mode?.label ? property?.label : mode?.label
21
+ });
22
+ };
23
+ const onBack = () => {
24
+ onEvent("editProperty", {
25
+ edit: {
26
+ ...(mode?.edit || {})
27
+ }
28
+ });
29
+ };
30
+ return /*#__PURE__*/_jsxs(Box, {
31
+ sx: classes.addProperty,
32
+ children: [/*#__PURE__*/_jsxs(Box, {
33
+ className: "fe-dv-ap-title",
34
+ children: [/*#__PURE__*/_jsxs("span", {
35
+ children: [/*#__PURE__*/_jsx(IconButton, {
36
+ className: "tv-act-ico",
37
+ size: "small",
38
+ onClick: onBack,
39
+ children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
40
+ }), "Change Property"]
41
+ }), /*#__PURE__*/_jsx(IconButton, {
42
+ className: "tv-act-ico bg br1",
43
+ size: "small",
44
+ onClick: onClose,
45
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
46
+ })]
47
+ }), /*#__PURE__*/_jsx(Box, {
48
+ className: "fe-dv-ap-desc",
49
+ children: "Select Property Type"
50
+ }), /*#__PURE__*/_jsx(Box, {
51
+ className: "fe-dv-ap-opt-content mt",
52
+ children: /*#__PURE__*/_jsx(PropertyList, {
53
+ onSelect: onSelect,
54
+ selected: mode?.edit
55
+ })
56
+ })]
57
+ });
58
+ };
59
+ ChangeProperty.defaultProps = {
60
+ onEvent: () => {}
61
+ };
62
+ export default ChangeProperty;
@@ -0,0 +1,36 @@
1
+ import React from "react";
2
+ import { List, ListItemButton, ListItemIcon, ListItemText, Box } from "@mui/material";
3
+ import { PROPERTY_TYPES } from "./Constants";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const ColumnsList = props => {
7
+ const {
8
+ properties
9
+ } = props;
10
+ const {
11
+ onSelect,
12
+ selected
13
+ } = props;
14
+ return /*#__PURE__*/_jsx(Box, {
15
+ className: "opt-wrpr",
16
+ children: /*#__PURE__*/_jsx(List, {
17
+ className: "tv-opt-list",
18
+ children: properties?.map((m, i) => {
19
+ const {
20
+ Icon
21
+ } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
22
+ return /*#__PURE__*/_jsxs(ListItemButton, {
23
+ className: selected?.type === m?.type ? "active" : "",
24
+ onClick: onSelect(m),
25
+ children: [/*#__PURE__*/_jsx(ListItemIcon, {
26
+ children: /*#__PURE__*/_jsx(Icon, {})
27
+ }), /*#__PURE__*/_jsx(ListItemText, {
28
+ primary: m?.label
29
+ })]
30
+ }, i);
31
+ })
32
+ })
33
+ });
34
+ };
35
+ ColumnsList.defaultProps = {};
36
+ export default ColumnsList;
@@ -0,0 +1,101 @@
1
+ import NotesIcon from "@mui/icons-material/Notes";
2
+ import TagIcon from "@mui/icons-material/Tag";
3
+ import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
4
+ import ChecklistIcon from "@mui/icons-material/Checklist";
5
+ import InsertInvitationIcon from "@mui/icons-material/InsertInvitation";
6
+ import PersonIcon from "@mui/icons-material/Person";
7
+ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
8
+ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
9
+ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
10
+ // import FilterListIcon from "@mui/icons-material/FilterList";
11
+
12
+ export const TYPE_LABELS = {
13
+ text: "Text",
14
+ number: "Number",
15
+ select: "Select",
16
+ "multi-select": "Multi Select",
17
+ date: "Date",
18
+ person: "Person",
19
+ check: "Checkbox"
20
+ };
21
+ export const PROPERTY_DEFAULTS = {
22
+ text: {
23
+ label: TYPE_LABELS?.text,
24
+ visible: true
25
+ },
26
+ number: {
27
+ label: TYPE_LABELS.number,
28
+ visible: true
29
+ },
30
+ select: {
31
+ label: TYPE_LABELS.select,
32
+ visible: true
33
+ },
34
+ "multi-select": {
35
+ label: TYPE_LABELS["multi-select"],
36
+ visible: true
37
+ },
38
+ date: {
39
+ label: TYPE_LABELS.date,
40
+ visible: true
41
+ },
42
+ check: {
43
+ label: TYPE_LABELS.check,
44
+ visible: true
45
+ },
46
+ person: {
47
+ label: TYPE_LABELS.person,
48
+ visible: true
49
+ }
50
+ };
51
+ export const PROPERTY_TYPES = [{
52
+ type: "text",
53
+ label: TYPE_LABELS.text,
54
+ Icon: NotesIcon
55
+ }, {
56
+ type: "number",
57
+ label: TYPE_LABELS.number,
58
+ Icon: TagIcon
59
+ }, {
60
+ type: "select",
61
+ label: TYPE_LABELS.select,
62
+ Icon: ArrowDropDownCircleIcon
63
+ }, {
64
+ type: "multi-select",
65
+ label: TYPE_LABELS["multi-select"],
66
+ Icon: ChecklistIcon
67
+ }, {
68
+ type: "date",
69
+ label: TYPE_LABELS.date,
70
+ Icon: InsertInvitationIcon
71
+ }, {
72
+ type: "check",
73
+ label: TYPE_LABELS.check,
74
+ Icon: CheckCircleOutlineIcon
75
+ }, {
76
+ type: "person",
77
+ label: TYPE_LABELS.person,
78
+ Icon: PersonIcon
79
+ }];
80
+ export const FILTER_TYPES = [{
81
+ type: "sort",
82
+ operator: "asc",
83
+ label: "Sort Ascending",
84
+ value: "",
85
+ Icon: ArrowUpwardIcon
86
+ }, {
87
+ type: "sort",
88
+ operator: "desc",
89
+ label: "Sort Descending",
90
+ Icon: ArrowDownwardIcon
91
+ }
92
+ // {
93
+ // type: "filter",
94
+ // operator: "contains",
95
+ // label: "Filter",
96
+ // value: "",
97
+ // Icon: FilterListIcon,
98
+ // },
99
+ ];
100
+
101
+ export const DEFAULT_OPTION_COLORS = ["rgba(131, 96, 253, 0.5)", "rgba(180, 180, 180, 1)", "rgba(72, 159, 248, 0.5)", "rgba(254, 122, 0, 0.5)", "rgba(214, 105, 190, 0.5)", "rgba(255, 229, 0, 0.5)"];
@@ -0,0 +1,158 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { Box, IconButton, TextField, List, ListItemButton, ListItemIcon, ListItemText, FormControlLabel } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
5
+ import DeleteIcon from "@mui/icons-material/Delete";
6
+ import ColorButtons from "../../../Color Picker/ColorButtons";
7
+ import ColorPickerStyles from "../../../Color Picker/Styles";
8
+ import { DEFAULT_OPTION_COLORS } from "./Constants";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const EditOption = props => {
12
+ const {
13
+ classes,
14
+ onClose,
15
+ mode,
16
+ onEvent
17
+ } = props;
18
+ const [edit, setEdit] = useState({
19
+ ...(mode?.edit || {})
20
+ });
21
+ const editData = useRef({
22
+ ...edit
23
+ });
24
+ const {
25
+ optionIndex
26
+ } = edit;
27
+ const selectedOption = edit?.options[optionIndex] || {};
28
+ const pickerStyles = ColorPickerStyles();
29
+ useEffect(() => {
30
+ return () => {
31
+ // on un-mount update the option change
32
+ if (editData?.current) {
33
+ delete editData?.current?.edited;
34
+ onEvent("updateProperty", {
35
+ ...editData?.current
36
+ });
37
+ }
38
+ };
39
+ }, []);
40
+ const onChange = e => {
41
+ const updatedOptions = edit?.options.map((m, i) => {
42
+ if (i === edit?.optionIndex) {
43
+ return {
44
+ ...m,
45
+ [e.target.name]: e?.target?.value
46
+ };
47
+ }
48
+ return m;
49
+ });
50
+
51
+ // for delete
52
+ if (edit?.optionIndex > -1 && e?.target?.delete) {
53
+ updatedOptions.splice(edit?.optionIndex, 1);
54
+ }
55
+ const latest = {
56
+ ...edit,
57
+ options: [...updatedOptions]
58
+ };
59
+ setEdit({
60
+ ...latest
61
+ });
62
+ editData.current = {
63
+ ...latest,
64
+ edited: true
65
+ };
66
+
67
+ // if delete go back
68
+ if (e?.target?.delete) {
69
+ onEvent("editProperty", {
70
+ edit: {
71
+ ...latest
72
+ }
73
+ });
74
+ }
75
+ };
76
+ const onBack = () => {
77
+ onEvent("editProperty", {
78
+ edit: {
79
+ ...edit
80
+ }
81
+ });
82
+ };
83
+ const onDeleteOption = () => {
84
+ onChange({
85
+ target: {
86
+ delete: true
87
+ }
88
+ });
89
+ };
90
+ const onColorChange = color => {
91
+ onChange({
92
+ target: {
93
+ name: "color",
94
+ value: color
95
+ }
96
+ });
97
+ };
98
+ return /*#__PURE__*/_jsxs(Box, {
99
+ sx: classes.addProperty,
100
+ children: [/*#__PURE__*/_jsxs(Box, {
101
+ className: "fe-dv-ap-title",
102
+ children: [/*#__PURE__*/_jsxs("span", {
103
+ children: [/*#__PURE__*/_jsx(IconButton, {
104
+ size: "small",
105
+ onClick: onBack,
106
+ children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
107
+ }), "Edit Option"]
108
+ }), /*#__PURE__*/_jsx(IconButton, {
109
+ size: "small",
110
+ onClick: onClose,
111
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
112
+ })]
113
+ }), /*#__PURE__*/_jsx(Box, {
114
+ className: "fe-dv-ap-opt-content mt-1 mb",
115
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
116
+ className: "ml-0",
117
+ label: "Option Name",
118
+ control: /*#__PURE__*/_jsx(TextField, {
119
+ size: "small",
120
+ name: "value",
121
+ value: selectedOption?.value,
122
+ onChange: onChange,
123
+ fullWidth: true,
124
+ placeholder: "Option Name"
125
+ }),
126
+ labelPlacement: "top"
127
+ })
128
+ }), /*#__PURE__*/_jsxs(Box, {
129
+ className: "label-desc mt-1",
130
+ children: [/*#__PURE__*/_jsx(Box, {
131
+ className: "label-tp mb",
132
+ children: "Choose Color"
133
+ }), /*#__PURE__*/_jsx(Box, {
134
+ className: "ml",
135
+ children: /*#__PURE__*/_jsx(ColorButtons, {
136
+ classes: pickerStyles,
137
+ onSelect: onColorChange,
138
+ activeColor: selectedOption?.color,
139
+ defaultColors: DEFAULT_OPTION_COLORS
140
+ })
141
+ })]
142
+ }), /*#__PURE__*/_jsx(List, {
143
+ className: "fe-dv-opt-list st sb",
144
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
145
+ onClick: onDeleteOption,
146
+ children: [/*#__PURE__*/_jsx(ListItemIcon, {
147
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
148
+ }), /*#__PURE__*/_jsx(ListItemText, {
149
+ children: "Delete Option"
150
+ })]
151
+ })
152
+ })]
153
+ });
154
+ };
155
+ EditOption.defaultProps = {
156
+ onEvent: () => {}
157
+ };
158
+ export default EditOption;