@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,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;
|