@flozy/editor 1.6.0 → 1.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +131 -104
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +27 -36
- package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
- package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
- package/dist/Editor/Elements/Button/EditorButton.js +4 -20
- package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
- package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +33 -126
- package/dist/Editor/Elements/Embed/Image.js +15 -7
- package/dist/Editor/Elements/Embed/Video.js +12 -5
- package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
- package/dist/Editor/Elements/Form/Form.js +24 -12
- package/dist/Editor/Elements/Form/FormButton.js +11 -9
- package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +7 -1
- package/dist/Editor/Elements/Grid/Grid.js +15 -4
- package/dist/Editor/Elements/Grid/GridButton.js +52 -29
- package/dist/Editor/Elements/Grid/GridItem.js +30 -19
- package/dist/Editor/Elements/Grid/Styles.js +11 -0
- package/dist/Editor/Elements/List/CheckList.js +57 -0
- package/dist/Editor/Elements/List/CheckListButton.js +24 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
- package/dist/Editor/Elements/Signature/Signature.js +9 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
- package/dist/Editor/Elements/Signature/SignaturePopup.js +50 -7
- package/dist/Editor/Elements/SimpleText.js +62 -0
- package/dist/Editor/Elements/Table/Styles.js +66 -0
- package/dist/Editor/Elements/Table/Table.js +33 -16
- package/dist/Editor/Elements/Table/TableCell.js +54 -24
- package/dist/Editor/Elements/Table/TableSelector.js +13 -15
- package/dist/Editor/Elements/Table/table.css +0 -10
- package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
- package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
- package/dist/Editor/Styles/EditorStyles.js +50 -0
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
- package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
- package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
- package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
- package/dist/Editor/Toolbar/Toolbar.js +178 -134
- package/dist/Editor/Toolbar/styles.css +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
- package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
- package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
- package/dist/Editor/assets/svg/TextIcon.js +29 -0
- package/dist/Editor/common/Icon.js +48 -5
- package/dist/Editor/common/ImageList.js +10 -4
- package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
- package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
- package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
- package/dist/Editor/common/ImageSelector/Styles.js +41 -0
- package/dist/Editor/common/ImageUploader.js +19 -8
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
- package/dist/Editor/common/MentionsPopup/index.js +129 -0
- package/dist/Editor/common/Shorthands/elements.js +191 -0
- package/dist/Editor/common/Shorthands/index.js +7 -0
- package/dist/Editor/common/Shorthands/mentions.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
- package/dist/Editor/common/StyleBuilder/index.js +0 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
- package/dist/Editor/common/ToolbarIcon.js +43 -0
- package/dist/Editor/common/Uploader.js +10 -7
- package/dist/Editor/common/iconslist.js +46 -1
- package/dist/Editor/hooks/useMentions.js +104 -17
- package/dist/Editor/hooks/useMouseMove.js +53 -0
- package/dist/Editor/hooks/useScroll.js +26 -0
- package/dist/Editor/plugins/withEmbeds.js +12 -0
- package/dist/Editor/service/fileupload.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
- package/dist/Editor/utils/carousel.js +5 -2
- package/dist/Editor/utils/carouselItem.js +2 -2
- package/dist/Editor/utils/customHooks/useResize.js +2 -3
- package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
- package/dist/Editor/utils/embed.js +19 -5
- package/dist/Editor/utils/emoji.js +8 -0
- package/dist/Editor/utils/events.js +49 -12
- package/dist/Editor/utils/form.js +3 -9
- package/dist/Editor/utils/formfield.js +2 -1
- package/dist/Editor/utils/grid.js +44 -8
- package/dist/Editor/utils/gridItem.js +4 -3
- package/dist/Editor/utils/insertNewLine.js +12 -0
- package/dist/Editor/utils/mentions.js +14 -10
- package/dist/Editor/utils/pageSettings.js +67 -0
- package/dist/Editor/utils/signature.js +6 -8
- package/dist/Editor/utils/table.js +79 -18
- package/dist/Editor/utils/topBanner.js +58 -0
- package/package.json +4 -1
- package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import React, { useState } from "react";
|
2
2
|
import { ImageList, ImageListItem, ImageListItemBar, IconButton } from "@mui/material";
|
3
3
|
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -12,15 +12,18 @@ function srcset(image, size, rows = 1, cols = 1) {
|
|
12
12
|
const QuiltedImageList = props => {
|
13
13
|
const {
|
14
14
|
itemData,
|
15
|
-
selected,
|
16
15
|
onSelectChange,
|
17
16
|
readOnly,
|
18
17
|
cols,
|
19
18
|
rowHeight,
|
20
19
|
uploaderComp: UploaderComp
|
21
20
|
} = props;
|
22
|
-
const
|
23
|
-
|
21
|
+
const [selected, setSelected] = useState([]);
|
22
|
+
const onImageSelect = item => () => {
|
23
|
+
setSelected([{
|
24
|
+
img: item.img
|
25
|
+
}]);
|
26
|
+
onSelectChange(item.img);
|
24
27
|
};
|
25
28
|
return /*#__PURE__*/_jsxs(ImageList, {
|
26
29
|
sx: {
|
@@ -30,6 +33,9 @@ const QuiltedImageList = props => {
|
|
30
33
|
variant: "quilted",
|
31
34
|
cols: cols || 4,
|
32
35
|
rowHeight: rowHeight || 121,
|
36
|
+
style: {
|
37
|
+
marginTop: "0px"
|
38
|
+
},
|
33
39
|
children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
|
34
40
|
className: "img_upload_btn_list",
|
35
41
|
cols: 2,
|
@@ -0,0 +1,117 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle } from "@mui/material";
|
3
|
+
import Upload from "./Options/Upload";
|
4
|
+
import ChooseAssets from "./Options/ChooseAssets";
|
5
|
+
import AddLink from "./Options/AddLink";
|
6
|
+
import Icon from "../Icon";
|
7
|
+
import ImageSelectorStyles from "./Styles";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
+
const IMAGE_SLECTOR_OPTIONS = {
|
12
|
+
upload: Upload,
|
13
|
+
choose: ChooseAssets,
|
14
|
+
addLink: AddLink
|
15
|
+
};
|
16
|
+
const ImageSelector = props => {
|
17
|
+
const classes = ImageSelectorStyles();
|
18
|
+
const {
|
19
|
+
value,
|
20
|
+
onClose,
|
21
|
+
open,
|
22
|
+
onSelectImage,
|
23
|
+
title
|
24
|
+
} = props;
|
25
|
+
const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
|
26
|
+
const [image, setImage] = useState(value || "");
|
27
|
+
const handleTabChange = (e, newValue) => {
|
28
|
+
setTabValue(newValue);
|
29
|
+
};
|
30
|
+
const onUploaded = url => {
|
31
|
+
setImage(url);
|
32
|
+
};
|
33
|
+
const onSave = () => {
|
34
|
+
onSelectImage(image);
|
35
|
+
};
|
36
|
+
const isActive = val => tabValue === val ? "active" : "";
|
37
|
+
const Comp = IMAGE_SLECTOR_OPTIONS[tabValue] || /*#__PURE__*/_jsx(_Fragment, {});
|
38
|
+
return open ? /*#__PURE__*/_jsxs(Dialog, {
|
39
|
+
open: open,
|
40
|
+
onClose: onClose,
|
41
|
+
fullWidth: true,
|
42
|
+
children: [/*#__PURE__*/_jsxs(DialogTitle, {
|
43
|
+
children: ["Add ", title]
|
44
|
+
}), /*#__PURE__*/_jsx(DialogContent, {
|
45
|
+
style: {
|
46
|
+
background: "#F0F5FA",
|
47
|
+
padding: "0px"
|
48
|
+
},
|
49
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
50
|
+
container: true,
|
51
|
+
spacing: 0,
|
52
|
+
style: {
|
53
|
+
width: "100%",
|
54
|
+
padding: "8px"
|
55
|
+
},
|
56
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
57
|
+
item: true,
|
58
|
+
xs: 4,
|
59
|
+
children: /*#__PURE__*/_jsxs(Tabs, {
|
60
|
+
sx: classes.tabs,
|
61
|
+
onChange: handleTabChange,
|
62
|
+
orientation: "vertical",
|
63
|
+
value: tabValue,
|
64
|
+
children: [/*#__PURE__*/_jsx(Tab, {
|
65
|
+
className: `${isActive("addLink")}`,
|
66
|
+
sx: classes.tab,
|
67
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
68
|
+
icon: "link"
|
69
|
+
}),
|
70
|
+
iconPosition: "start",
|
71
|
+
value: "addLink",
|
72
|
+
label: `Add ${title} Link`
|
73
|
+
}), /*#__PURE__*/_jsx(Tab, {
|
74
|
+
className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
|
75
|
+
sx: classes.tab,
|
76
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
77
|
+
icon: "fileUpload"
|
78
|
+
}),
|
79
|
+
iconPosition: "start",
|
80
|
+
value: "upload",
|
81
|
+
label: "Upload Media"
|
82
|
+
}), /*#__PURE__*/_jsx(Tab, {
|
83
|
+
className: `${isActive("choose")} ${title !== "Image" ? "hidden" : ""}`,
|
84
|
+
sx: classes.tab,
|
85
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
86
|
+
icon: "media"
|
87
|
+
}),
|
88
|
+
iconPosition: "start",
|
89
|
+
value: "choose",
|
90
|
+
label: "Choose Media"
|
91
|
+
})]
|
92
|
+
})
|
93
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
94
|
+
item: true,
|
95
|
+
xs: 8,
|
96
|
+
sx: classes.imsRightWrpr,
|
97
|
+
children: /*#__PURE__*/_jsx(Comp, {
|
98
|
+
...props,
|
99
|
+
onUploaded: onUploaded
|
100
|
+
})
|
101
|
+
})]
|
102
|
+
})
|
103
|
+
}), /*#__PURE__*/_jsxs(DialogActions, {
|
104
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
105
|
+
onClick: onClose,
|
106
|
+
children: "Cancel"
|
107
|
+
}), /*#__PURE__*/_jsx(Button, {
|
108
|
+
onClick: onSave,
|
109
|
+
children: "Save"
|
110
|
+
})]
|
111
|
+
})]
|
112
|
+
}) : null;
|
113
|
+
};
|
114
|
+
ImageSelector.defaultProps = {
|
115
|
+
title: "Image"
|
116
|
+
};
|
117
|
+
export default ImageSelector;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
|
3
|
+
import CheckIcon from "@mui/icons-material/Check";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const AddLink = props => {
|
6
|
+
const {
|
7
|
+
onUploaded,
|
8
|
+
title
|
9
|
+
} = props;
|
10
|
+
const [url, setUrl] = useState("");
|
11
|
+
const handleChange = e => {
|
12
|
+
setUrl(e.target.value);
|
13
|
+
};
|
14
|
+
const handleSave = () => {
|
15
|
+
onUploaded(url);
|
16
|
+
};
|
17
|
+
return /*#__PURE__*/_jsx(Grid, {
|
18
|
+
item: true,
|
19
|
+
xs: 12,
|
20
|
+
className: "ims-right",
|
21
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
22
|
+
placeholder: `Add ${title} URL`,
|
23
|
+
fullWidth: true,
|
24
|
+
size: "small",
|
25
|
+
value: url,
|
26
|
+
onChange: handleChange,
|
27
|
+
helperText: "Click Check Icon and Save...",
|
28
|
+
InputProps: {
|
29
|
+
endAdornment: /*#__PURE__*/_jsx(Tooltip, {
|
30
|
+
title: `Add ${Image} URL`,
|
31
|
+
arrow: true,
|
32
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
33
|
+
onClick: handleSave,
|
34
|
+
children: /*#__PURE__*/_jsx(CheckIcon, {})
|
35
|
+
})
|
36
|
+
})
|
37
|
+
}
|
38
|
+
})
|
39
|
+
});
|
40
|
+
};
|
41
|
+
AddLink.defaultProps = {
|
42
|
+
title: "Image"
|
43
|
+
};
|
44
|
+
export default AddLink;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import StandardImageList from "../../ImageList";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const ChooseAssets = props => {
|
6
|
+
const {
|
7
|
+
onUploaded,
|
8
|
+
customProps
|
9
|
+
} = props;
|
10
|
+
const {
|
11
|
+
readOnly,
|
12
|
+
services
|
13
|
+
} = customProps;
|
14
|
+
const [items, setItems] = useState([]);
|
15
|
+
useEffect(() => {
|
16
|
+
getItems();
|
17
|
+
}, []);
|
18
|
+
const getItems = async () => {
|
19
|
+
if (services) {
|
20
|
+
const result = await services("getAssets", {});
|
21
|
+
setItems(result);
|
22
|
+
}
|
23
|
+
};
|
24
|
+
const onSelectChange = img => {
|
25
|
+
onUploaded(img);
|
26
|
+
};
|
27
|
+
return /*#__PURE__*/_jsx(Grid, {
|
28
|
+
item: true,
|
29
|
+
xs: 12,
|
30
|
+
className: "ims-right",
|
31
|
+
children: /*#__PURE__*/_jsx(StandardImageList, {
|
32
|
+
itemData: [...items],
|
33
|
+
selected: [],
|
34
|
+
onSelectChange: onSelectChange,
|
35
|
+
readOnly: readOnly
|
36
|
+
})
|
37
|
+
});
|
38
|
+
};
|
39
|
+
export default ChooseAssets;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import Uploader from "../../Uploader";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const Upload = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
onUploaded,
|
9
|
+
customProps,
|
10
|
+
disableUpload = false
|
11
|
+
} = props;
|
12
|
+
const onDone = img => {
|
13
|
+
onUploaded(img);
|
14
|
+
};
|
15
|
+
return /*#__PURE__*/_jsx(Grid, {
|
16
|
+
item: true,
|
17
|
+
xs: 12,
|
18
|
+
className: "ims-right",
|
19
|
+
children: /*#__PURE__*/_jsx(Uploader, {
|
20
|
+
value: value,
|
21
|
+
data: {
|
22
|
+
key: "url"
|
23
|
+
},
|
24
|
+
customProps: customProps,
|
25
|
+
onUploaded: onDone,
|
26
|
+
disableUpload: disableUpload
|
27
|
+
})
|
28
|
+
});
|
29
|
+
};
|
30
|
+
export default Upload;
|
@@ -0,0 +1,41 @@
|
|
1
|
+
const ImageSelectorStyles = () => ({
|
2
|
+
root: {},
|
3
|
+
tabs: {
|
4
|
+
"& button": {
|
5
|
+
fontSize: "14px",
|
6
|
+
textTransform: "capitalize",
|
7
|
+
padding: "12px",
|
8
|
+
alignItems: "start",
|
9
|
+
justifyContent: "start",
|
10
|
+
minHeight: "auto",
|
11
|
+
"&.hidden": {
|
12
|
+
display: "none"
|
13
|
+
},
|
14
|
+
"&.active": {
|
15
|
+
backgroundColor: "#FFF"
|
16
|
+
},
|
17
|
+
"&:hover": {
|
18
|
+
backgroundColor: "#ECECEC"
|
19
|
+
},
|
20
|
+
"& svg": {
|
21
|
+
marginRight: "8px",
|
22
|
+
width: "16px",
|
23
|
+
height: "16px"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .MuiTabs-indicator": {
|
27
|
+
left: 0
|
28
|
+
}
|
29
|
+
},
|
30
|
+
tab: {},
|
31
|
+
imsRightWrpr: {
|
32
|
+
height: "300px",
|
33
|
+
overflow: "auto",
|
34
|
+
backgroundColor: "#fff",
|
35
|
+
padding: "8px",
|
36
|
+
"& .MuiFormHelperText-root": {
|
37
|
+
marginLeft: "0px"
|
38
|
+
}
|
39
|
+
}
|
40
|
+
});
|
41
|
+
export default ImageSelectorStyles;
|
@@ -3,6 +3,7 @@ import { Grid } from "@mui/material";
|
|
3
3
|
import Uploader from "./Uploader";
|
4
4
|
import StandardImageList from "./ImageList";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
7
|
const ImageUploader = props => {
|
7
8
|
const {
|
8
9
|
value,
|
@@ -27,9 +28,14 @@ const ImageUploader = props => {
|
|
27
28
|
}
|
28
29
|
};
|
29
30
|
const onDone = img => {
|
30
|
-
|
31
|
+
const imgs = Array.isArray(img) ? img.map(m => {
|
32
|
+
return {
|
33
|
+
img: m
|
34
|
+
};
|
35
|
+
}) : [{
|
31
36
|
img: img.url
|
32
|
-
}
|
37
|
+
}];
|
38
|
+
setNewData([...imgs, ...newData]);
|
33
39
|
};
|
34
40
|
const onSelectChange = (img, status) => {
|
35
41
|
const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
|
@@ -53,15 +59,19 @@ const ImageUploader = props => {
|
|
53
59
|
disableUpload: disableUpload
|
54
60
|
});
|
55
61
|
};
|
56
|
-
return /*#__PURE__*/
|
62
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
57
63
|
container: true,
|
58
64
|
sx: {
|
59
65
|
pt: 1
|
60
66
|
},
|
61
67
|
spacing: 1,
|
62
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
68
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
69
|
+
item: true,
|
70
|
+
xs: 3,
|
71
|
+
children: /*#__PURE__*/_jsx(UploaderComp, {})
|
72
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
63
73
|
item: true,
|
64
|
-
xs:
|
74
|
+
xs: 9,
|
65
75
|
children: /*#__PURE__*/_jsx("div", {
|
66
76
|
style: {
|
67
77
|
height: "400px",
|
@@ -69,15 +79,16 @@ const ImageUploader = props => {
|
|
69
79
|
display: "flex",
|
70
80
|
justifyContent: "center"
|
71
81
|
},
|
72
|
-
children: /*#__PURE__*/_jsx(StandardImageList
|
73
|
-
|
82
|
+
children: /*#__PURE__*/_jsx(StandardImageList
|
83
|
+
// uploaderComp={UploaderComp}
|
84
|
+
, {
|
74
85
|
itemData: [...newData, ...items],
|
75
86
|
selected: selected,
|
76
87
|
onSelectChange: onSelectChange,
|
77
88
|
readOnly: readOnly
|
78
89
|
})
|
79
90
|
})
|
80
|
-
})
|
91
|
+
})]
|
81
92
|
});
|
82
93
|
};
|
83
94
|
export default ImageUploader;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardContent from "@mui/material/CardContent";
|
5
|
+
import CardMedia from "@mui/material/CardMedia";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
|
+
const ElementListCard = props => {
|
11
|
+
const {
|
12
|
+
classes,
|
13
|
+
data
|
14
|
+
} = props;
|
15
|
+
const {
|
16
|
+
name,
|
17
|
+
desc,
|
18
|
+
icon
|
19
|
+
} = data;
|
20
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
21
|
+
children: /*#__PURE__*/_jsxs(Card, {
|
22
|
+
sx: {
|
23
|
+
display: "flex",
|
24
|
+
width: "324px",
|
25
|
+
justifyContent: "start",
|
26
|
+
alignItems: "center",
|
27
|
+
background: "transparent",
|
28
|
+
boxShadow: "none"
|
29
|
+
},
|
30
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
31
|
+
component: "div",
|
32
|
+
sx: classes.cardMedia,
|
33
|
+
alt: name,
|
34
|
+
children: icon
|
35
|
+
}), /*#__PURE__*/_jsx(Box, {
|
36
|
+
sx: {
|
37
|
+
display: "flex",
|
38
|
+
flexDirection: "column"
|
39
|
+
},
|
40
|
+
children: /*#__PURE__*/_jsxs(CardContent, {
|
41
|
+
sx: {
|
42
|
+
flex: "1 0 auto",
|
43
|
+
padding: "8px !important"
|
44
|
+
},
|
45
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
46
|
+
component: "div",
|
47
|
+
variant: "h6",
|
48
|
+
style: {
|
49
|
+
fontSize: "14px"
|
50
|
+
},
|
51
|
+
children: name
|
52
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
53
|
+
variant: "subtitle1",
|
54
|
+
color: "text.secondary",
|
55
|
+
component: "div",
|
56
|
+
style: {
|
57
|
+
fontSize: "12px"
|
58
|
+
},
|
59
|
+
children: desc
|
60
|
+
})]
|
61
|
+
})
|
62
|
+
})]
|
63
|
+
})
|
64
|
+
});
|
65
|
+
};
|
66
|
+
export default ElementListCard;
|
@@ -0,0 +1,70 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardContent from "@mui/material/CardContent";
|
5
|
+
import CardMedia from "@mui/material/CardMedia";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import { Avatar } from "@mui/material";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
+
const MentionsListCard = props => {
|
11
|
+
const {
|
12
|
+
data
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
name,
|
16
|
+
email
|
17
|
+
} = data;
|
18
|
+
return /*#__PURE__*/_jsxs(Card, {
|
19
|
+
sx: {
|
20
|
+
display: "flex",
|
21
|
+
width: "324px",
|
22
|
+
justifyContent: "start",
|
23
|
+
alignItems: "center",
|
24
|
+
background: "transparent",
|
25
|
+
boxShadow: "none"
|
26
|
+
},
|
27
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
28
|
+
component: "div",
|
29
|
+
sx: {
|
30
|
+
width: 46,
|
31
|
+
height: 46,
|
32
|
+
margin: "8px",
|
33
|
+
borderRadius: "4px",
|
34
|
+
display: "flex",
|
35
|
+
justifyContent: "center",
|
36
|
+
alignItems: "center"
|
37
|
+
},
|
38
|
+
alt: name,
|
39
|
+
children: /*#__PURE__*/_jsx(Avatar, {})
|
40
|
+
}), /*#__PURE__*/_jsx(Box, {
|
41
|
+
sx: {
|
42
|
+
display: "flex",
|
43
|
+
flexDirection: "column"
|
44
|
+
},
|
45
|
+
children: /*#__PURE__*/_jsxs(CardContent, {
|
46
|
+
sx: {
|
47
|
+
flex: "1 0 auto",
|
48
|
+
padding: "8px !important"
|
49
|
+
},
|
50
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
51
|
+
component: "div",
|
52
|
+
variant: "h6",
|
53
|
+
style: {
|
54
|
+
fontSize: "14px"
|
55
|
+
},
|
56
|
+
children: name
|
57
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
58
|
+
variant: "subtitle1",
|
59
|
+
color: "text.secondary",
|
60
|
+
component: "div",
|
61
|
+
style: {
|
62
|
+
fontSize: "12px"
|
63
|
+
},
|
64
|
+
children: email
|
65
|
+
})]
|
66
|
+
})
|
67
|
+
})]
|
68
|
+
});
|
69
|
+
};
|
70
|
+
export default MentionsListCard;
|
@@ -0,0 +1,68 @@
|
|
1
|
+
const usePopupStyles = () => ({
|
2
|
+
root: {
|
3
|
+
position: "absolute",
|
4
|
+
zIndex: 1000,
|
5
|
+
background: "white",
|
6
|
+
borderRadius: "0px",
|
7
|
+
padding: "0px",
|
8
|
+
boxShadow: "0 4px 10px rgba(0,0,0,.2)"
|
9
|
+
},
|
10
|
+
papper: {
|
11
|
+
boxShadow: "none",
|
12
|
+
width: "300px",
|
13
|
+
height: "300px",
|
14
|
+
overflow: "auto",
|
15
|
+
padding: "8px",
|
16
|
+
margin: "0px"
|
17
|
+
},
|
18
|
+
groupHeader: {
|
19
|
+
padding: "10px 8px",
|
20
|
+
marginBottom: "10px",
|
21
|
+
fontSize: "14px",
|
22
|
+
fontWeight: "bold",
|
23
|
+
borderBottom: "1px solid #DCE4EC"
|
24
|
+
},
|
25
|
+
listItem: {
|
26
|
+
padding: "4px",
|
27
|
+
cursor: "pointer",
|
28
|
+
background: "transparent",
|
29
|
+
"&.active": {
|
30
|
+
background: "rgba(55, 53, 47, 0.08)"
|
31
|
+
},
|
32
|
+
"&:hover": {
|
33
|
+
background: "rgba(55, 53, 47, 0.08)"
|
34
|
+
},
|
35
|
+
"&.renderComp": {
|
36
|
+
padding: "0px",
|
37
|
+
"& button.cmd": {
|
38
|
+
// to invalidate click event of toolbar icon
|
39
|
+
// will trigger by forard ref
|
40
|
+
pointerEvents: "none",
|
41
|
+
width: "100%",
|
42
|
+
padding: "4px",
|
43
|
+
borderRadius: "0px",
|
44
|
+
justifyContent: "start",
|
45
|
+
"& svg": {
|
46
|
+
margin: "8px",
|
47
|
+
width: "24px",
|
48
|
+
height: "24px"
|
49
|
+
},
|
50
|
+
span: {
|
51
|
+
padding: "8px",
|
52
|
+
fontSize: "14px",
|
53
|
+
fontWeight: "500",
|
54
|
+
color: "rgba(0, 0, 0, 0.87)"
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
},
|
59
|
+
cardMedia: {
|
60
|
+
width: 24,
|
61
|
+
height: 24,
|
62
|
+
margin: "8px",
|
63
|
+
display: "flex",
|
64
|
+
justifyContent: "center",
|
65
|
+
alignItems: "center"
|
66
|
+
}
|
67
|
+
});
|
68
|
+
export default usePopupStyles;
|