@flozy/editor 1.6.6 → 1.6.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. package/dist/Editor/CommonEditor.js +2 -1
  2. package/dist/Editor/Editor.css +12 -16
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -3
  4. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +12 -9
  5. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  6. package/dist/Editor/Elements/Color Picker/Styles.js +2 -2
  7. package/dist/Editor/Elements/Embed/Image.js +15 -18
  8. package/dist/Editor/Elements/Embed/Video.js +11 -11
  9. package/dist/Editor/Elements/Form/Form.js +23 -1
  10. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +178 -0
  11. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +139 -0
  12. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +64 -0
  13. package/dist/Editor/Elements/Form/Workflow/Styles.js +207 -0
  14. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +207 -0
  15. package/dist/Editor/Elements/Form/Workflow/constant.js +3 -0
  16. package/dist/Editor/Elements/Form/Workflow/index.js +179 -0
  17. package/dist/Editor/Elements/Grid/Grid.js +0 -78
  18. package/dist/Editor/Elements/Grid/GridItem.js +8 -6
  19. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +1 -2
  20. package/dist/Editor/Elements/Signature/Signed.js +11 -1
  21. package/dist/Editor/Elements/SimpleText.js +1 -3
  22. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -2
  23. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +0 -1
  24. package/dist/Editor/Styles/EditorStyles.js +2 -2
  25. package/dist/Editor/Toolbar/Mini/Styles.js +4 -2
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
  27. package/dist/Editor/Toolbar/Toolbar.js +2 -1
  28. package/dist/Editor/Toolbar/toolbarGroups.js +2 -1
  29. package/dist/Editor/common/Icon.js +6 -6
  30. package/dist/Editor/common/ImageList.js +4 -8
  31. package/dist/Editor/common/ImageSelector/ImageSelector.js +18 -31
  32. package/dist/Editor/common/ImageSelector/Options/AddLink.js +4 -1
  33. package/dist/Editor/common/ImageSelector/Options/Upload.js +5 -0
  34. package/dist/Editor/common/ImageSelector/Styles.js +67 -8
  35. package/dist/Editor/common/ImageSelector/UploadStyles.js +27 -0
  36. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  37. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +23 -13
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +36 -35
  39. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +29 -0
  40. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  41. package/dist/Editor/common/Uploader.js +14 -23
  42. package/dist/Editor/common/iconslist.js +79 -1
  43. package/dist/Editor/hooks/useMentions.js +0 -26
  44. package/dist/Editor/utils/customHooks/useResize.js +12 -3
  45. package/dist/Editor/utils/embed.js +16 -12
  46. package/dist/Editor/utils/emoji.js +0 -1
  47. package/dist/Editor/utils/form.js +1 -0
  48. package/dist/Editor/utils/insertAppHeader.js +66 -12
  49. package/package.json +2 -1
@@ -6,8 +6,6 @@ import { gridItem } from "../../utils/gridItem";
6
6
  import GridPopup from "./GridPopup";
7
7
  import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
8
8
  import { insertGrid } from "../../utils/grid";
9
- // import useDragAndDrop from "../../common/useDragAndDrop";
10
- import useResize from "../../utils/customHooks/useResize";
11
9
  import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
12
10
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
13
11
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -34,7 +32,6 @@ const Grid = props => {
34
32
  bgColor,
35
33
  alignment,
36
34
  backgroundImage,
37
- // size: elSize,
38
35
  fgColor,
39
36
  borderWidth,
40
37
  borderColor,
@@ -58,47 +55,14 @@ const Grid = props => {
58
55
  bottomLeft,
59
56
  bottomRight
60
57
  } = borderRadius || {};
61
- // const { height: elHeight } = elSize || {};
62
58
  const editor = useSlateStatic();
63
- // const selected = useSelected();
64
- // const [selected, setSelected] = useState(false);
65
59
  const path = ReactEditor.findPath(editor, element);
66
- const [parentDOM, setParentDOM] = useState(null);
67
- // resize
68
- const [size,, resizing, onLoad] = useResize({
69
- parentDOM,
70
- size: element?.size,
71
- isGrid: true
72
- });
73
60
  const arr = Array.from(Node.elements(editor));
74
61
  const ele = arr.find(([elem]) => element === elem);
75
62
  const {
76
63
  hoverPath
77
64
  } = useEditorContext();
78
65
  const selected = hoverPath === path.join(",");
79
- useEffect(() => {
80
- if (editor && ele[1] !== undefined) {
81
- const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
82
- const {
83
- height
84
- } = dom?.getBoundingClientRect();
85
- setParentDOM(dom);
86
- onLoad(element?.size || {
87
- height: height
88
- });
89
- }
90
- }, []);
91
-
92
- // upadate resize data once resize done
93
- useEffect(() => {
94
- if (!resizing) {
95
- Transforms.setNodes(editor, {
96
- size: size
97
- }, {
98
- at: path
99
- });
100
- }
101
- }, [resizing]);
102
66
  const onAddGridItem = () => {
103
67
  const currentPath = editor.selection?.anchor?.path;
104
68
  const ancestorsPath = Path.ancestors(currentPath, {
@@ -209,41 +173,6 @@ const Grid = props => {
209
173
  console.log(err);
210
174
  }
211
175
  };
212
-
213
- // const onDrop = (dropElement) => {
214
- // try {
215
- // Transforms.insertNodes(editor, JSON.parse(dropElement), {
216
- // at: path,
217
- // select: true,
218
- // });
219
- // } catch (err) {
220
- // console.log(err);
221
- // }
222
- // };
223
-
224
- // const onDragEnd = () => {
225
- // try {
226
- // const currentDelpath = ReactEditor.findPath(editor, element);
227
- // if (currentDelpath) {
228
- // Transforms.removeNodes(editor, { at: currentDelpath });
229
- // }
230
- // } catch (err) {
231
- // console.log(err);
232
- // }
233
- // };
234
-
235
- // const grid_drag_id = `grid_drag_${path.join("_")}`;
236
-
237
- // const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
238
- // editor,
239
- // id: grid_drag_id,
240
- // selected,
241
- // path,
242
- // element,
243
- // onDragEnd,
244
- // onDrop,
245
- // });
246
-
247
176
  const NewLineButtons = () => {
248
177
  return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
249
178
  children: [/*#__PURE__*/_jsx("div", {
@@ -380,14 +309,7 @@ const Grid = props => {
380
309
  justifyContent: horizantal || "start",
381
310
  flexDirection: flexDirection || "row",
382
311
  width: "100%"
383
- // height cause overlap issues TBD
384
- // height: resizing
385
- // ? `${size?.height}px`
386
- // : elHeight
387
- // ? `${elHeight}px`
388
- // : "fit-content",
389
312
  },
390
-
391
313
  "data-path": path.join(","),
392
314
  children: children
393
315
  }), /*#__PURE__*/_jsx(NewLineButtons, {})]
@@ -32,7 +32,8 @@ const GridItem = props => {
32
32
  margin,
33
33
  bgColorHover,
34
34
  borderColorHover,
35
- textColor
35
+ textColor,
36
+ animation
36
37
  } = element;
37
38
  const {
38
39
  left,
@@ -126,6 +127,10 @@ const GridItem = props => {
126
127
  display: "flex",
127
128
  flexDirection: flexDirection || "column",
128
129
  background: bgColor || "transparent",
130
+ borderColor: borderColor || "transparent",
131
+ borderWidth: borderWidth || "1px",
132
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
133
+ borderStyle: borderStyle || "solid",
129
134
  alignItems: horizantal,
130
135
  justifyContent: vertical,
131
136
  width: `${itemWidth}%`,
@@ -159,7 +164,7 @@ const GridItem = props => {
159
164
  children: " "
160
165
  }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
161
166
  }), /*#__PURE__*/_jsx(Box, {
162
- className: "gi-inner-cw",
167
+ className: `gi-inner-cw ${animation || ""}`,
163
168
  component: "div",
164
169
  "data-path": path.join(","),
165
170
  sx: {
@@ -171,10 +176,7 @@ const GridItem = props => {
171
176
  paddingBottom: `${bottom}px`,
172
177
  justifyContent: vertical,
173
178
  height: gridHeight || "100%",
174
- borderColor: borderColor || "transparent",
175
- borderWidth: borderWidth || "1px",
176
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
177
- borderStyle: borderStyle || "solid",
179
+ width: "100%",
178
180
  color: textColor || "#000",
179
181
  "&:hover": {
180
182
  borderColor: borderColorHover || borderColor || "transparent"
@@ -13,8 +13,7 @@ const InlineIcon = props => {
13
13
  textColor,
14
14
  bannerSpacing,
15
15
  borderRadius,
16
- borderColor,
17
- icon
16
+ borderColor
18
17
  } = element;
19
18
  const {
20
19
  left,
@@ -27,7 +27,17 @@ const Signed = props => {
27
27
  };
28
28
  const onDelete = () => {
29
29
  const path = ReactEditor.findPath(editor, element);
30
- Transforms.removeNodes(editor, {
30
+ Transforms.setNodes(editor, {
31
+ type: "signature",
32
+ signature: null,
33
+ fontFamily: "",
34
+ signedBy: "",
35
+ signedOn: formatDate(new Date(), "MM/DD/YYYY"),
36
+ signedText: "",
37
+ children: [{
38
+ text: ""
39
+ }]
40
+ }, {
31
41
  at: path
32
42
  });
33
43
  };
@@ -37,13 +37,11 @@ const SimpleText = props => {
37
37
  } = props;
38
38
  const {
39
39
  readOnly
40
- } = props;
40
+ } = customProps;
41
41
  const classes = SimpleTextStyle();
42
42
  const editor = useSlateStatic();
43
43
  const selected = useSelected();
44
44
  const path = ReactEditor.findPath(editor, element);
45
- // const parentPath = Path.parent(path);
46
- // const parentNode = Node.get(editor, parentPath);
47
45
  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
48
46
  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
49
47
  return /*#__PURE__*/_jsxs(Box, {
@@ -82,10 +82,10 @@ const TopBanner = props => {
82
82
  src: url,
83
83
  alt: "Top Banner",
84
84
  style: {
85
- width: "90%",
85
+ width: "100%",
86
86
  height: "320px",
87
87
  objectFit: "cover",
88
- borderRadius: "12px",
88
+ borderRadius: "0px",
89
89
  margin: "0px 0px"
90
90
  }
91
91
  }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
@@ -14,7 +14,6 @@ const TopBannerButton = props => {
14
14
  } = props;
15
15
  const [open, setOpen] = useState(false);
16
16
  const onSelectImage = url => {
17
- console.log(url);
18
17
  if (url) {
19
18
  insertTopBanner(editor, {
20
19
  url
@@ -9,6 +9,7 @@ const editorStyles = ({
9
9
  justifyContent: "center"
10
10
  },
11
11
  slateWrapper: {
12
+ paddingTop: "0px",
12
13
  height: `${window.innerHeight - padHeight}px`,
13
14
  width: "100%",
14
15
  overflowY: "auto",
@@ -17,7 +18,6 @@ const editorStyles = ({
17
18
  flexDirection: "column",
18
19
  alignItems: "center",
19
20
  "& .max-content": {
20
- maxWidth: "1280px",
21
21
  width: "100%",
22
22
  display: "flex",
23
23
  flex: 1,
@@ -30,7 +30,7 @@ const editorStyles = ({
30
30
  flex: 1
31
31
  },
32
32
  "& .editor-wrapper": {
33
- maxWidth: "90%",
33
+ maxWidth: "1440px",
34
34
  height: "100%",
35
35
  backgroundColor: "#FFF",
36
36
  overflow: "visible"
@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
5
5
  justifyContent: "center",
6
6
  alignItems: "center",
7
7
  position: "absolute",
8
- bottom: "-25px",
8
+ bottom: "-15px",
9
9
  left: 0,
10
10
  right: 0,
11
11
  margin: "auto",
12
12
  border: "1px solid #D8DDE1",
13
13
  borderRadius: "22px",
14
- width: "200px",
14
+ width: "fit-content",
15
15
  height: "37px",
16
16
  zIndex: 1000,
17
17
  background: "#FFF",
18
+ boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
19
+ padding: "0px 8px",
18
20
  "& button": {
19
21
  "& svg": {
20
22
  stroke: "#64748B"
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
2
+ import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
3
  import WidthFullIcon from "@mui/icons-material/WidthFull";
4
4
  import WidthNormalIcon from "@mui/icons-material/WidthNormal";
5
5
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
167
167
  case "app-header":
168
168
  return /*#__PURE__*/_jsx(AppHeaderButton, {
169
169
  editor: editor,
170
- customProps: customProps
170
+ customProps: customProps,
171
+ icoBtnType: icoBtnType
171
172
  }, element.id);
172
173
  case "form":
173
174
  return /*#__PURE__*/_jsx(FormButton, {
@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
210
210
  }, {
211
211
  id: 37,
212
212
  format: "appHeader",
213
- type: "app-header"
213
+ type: "app-header",
214
+ group: "elements"
214
215
  }, {
215
216
  id: 38,
216
217
  format: "form",
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
7
7
  import { SiLatex } from "react-icons/si";
8
8
  import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
9
9
  import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
10
- import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  const iconList = {
13
13
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -77,7 +77,7 @@ const iconList = {
77
77
  fill: "#64748B"
78
78
  }),
79
79
  // link: <MdInsertLink size={20} />,
80
- link: /*#__PURE__*/_jsx(IoIosLink, {
80
+ link: /*#__PURE__*/_jsx(LinkIcon, {
81
81
  size: 20
82
82
  }),
83
83
  // image: <MdImage size={20} />,
@@ -170,9 +170,7 @@ const iconList = {
170
170
  size: 20,
171
171
  fill: "#64748B"
172
172
  }),
173
- fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
174
- size: 20
175
- }),
173
+ fileUpload: /*#__PURE__*/_jsx(UploadImage, {}),
176
174
  media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
177
175
  size: 20
178
176
  }),
@@ -181,7 +179,9 @@ const iconList = {
181
179
  }),
182
180
  accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
183
181
  size: 20
184
- })
182
+ }),
183
+ appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
184
+ moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
185
185
  };
186
186
  const Icon = props => {
187
187
  const {
@@ -30,12 +30,10 @@ const QuiltedImageList = props => {
30
30
  width: "100%",
31
31
  height: "100%"
32
32
  },
33
- variant: "quilted",
34
- cols: cols || 4,
35
- rowHeight: rowHeight || 121,
36
- style: {
37
- marginTop: "0px"
38
- },
33
+ cols: cols
34
+ // rowHeight={rowHeight || 121}
35
+ // style={{ marginTop: "0px" }}
36
+ ,
39
37
  children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
40
38
  className: "img_upload_btn_list",
41
39
  cols: 2,
@@ -47,8 +45,6 @@ const QuiltedImageList = props => {
47
45
  }, `img_upload_btn`) : null, (itemData || []).map(item => {
48
46
  const isSelected = (selected || []).find(f => f.img === item.img);
49
47
  return /*#__PURE__*/_jsxs(ImageListItem, {
50
- cols: item.cols || 1,
51
- rows: item.rows || 1,
52
48
  children: [/*#__PURE__*/_jsx("img", {
53
49
  ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
54
50
  alt: item.title,
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from "react";
2
- import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
1
+ import React, { useState } from "react";
2
+ import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
3
3
  import Upload from "./Options/Upload";
4
4
  import ChooseAssets from "./Options/ChooseAssets";
5
5
  import AddLink from "./Options/AddLink";
@@ -28,6 +28,7 @@ const ImageSelector = props => {
28
28
  setTabValue(newValue);
29
29
  };
30
30
  const onUploaded = url => {
31
+ console.log(url);
31
32
  setImage(url);
32
33
  };
33
34
  const onSave = () => {
@@ -42,25 +43,15 @@ const ImageSelector = props => {
42
43
  sx: classes.dialogWrapper,
43
44
  children: [/*#__PURE__*/_jsx(DialogTitle, {
44
45
  children: /*#__PURE__*/_jsxs(Typography, {
45
- variant: "body1",
46
46
  sx: {
47
47
  fontSize: "16px",
48
- fontWeight: 600
48
+ fontWeight: 500
49
49
  },
50
50
  children: ["Add ", title]
51
51
  })
52
- }), /*#__PURE__*/_jsx(DialogContent, {
53
- style: {
54
- background: "#F0F5FA",
55
- padding: "0px"
56
- },
52
+ }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
57
53
  children: /*#__PURE__*/_jsxs(Grid, {
58
54
  container: true,
59
- spacing: 0,
60
- style: {
61
- width: "100%",
62
- padding: "8px"
63
- },
64
55
  children: [/*#__PURE__*/_jsx(Grid, {
65
56
  item: true,
66
57
  xs: 4,
@@ -70,15 +61,6 @@ const ImageSelector = props => {
70
61
  orientation: "vertical",
71
62
  value: tabValue,
72
63
  children: [/*#__PURE__*/_jsx(Tab, {
73
- className: `${isActive("addLink")}`,
74
- sx: classes.tab,
75
- icon: /*#__PURE__*/_jsx(Icon, {
76
- icon: "link"
77
- }),
78
- iconPosition: "start",
79
- value: "addLink",
80
- label: `Add ${title} Link`
81
- }), /*#__PURE__*/_jsx(Tab, {
82
64
  className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
83
65
  sx: classes.tab,
84
66
  icon: /*#__PURE__*/_jsx(Icon, {
@@ -96,6 +78,15 @@ const ImageSelector = props => {
96
78
  iconPosition: "start",
97
79
  value: "choose",
98
80
  label: "Choose Media"
81
+ }), /*#__PURE__*/_jsx(Tab, {
82
+ className: `${isActive("addLink")}`,
83
+ sx: classes.tab,
84
+ icon: /*#__PURE__*/_jsx(Icon, {
85
+ icon: "link"
86
+ }),
87
+ iconPosition: "start",
88
+ value: "addLink",
89
+ label: `Add ${title} Link`
99
90
  })]
100
91
  })
101
92
  }), /*#__PURE__*/_jsx(Grid, {
@@ -104,28 +95,24 @@ const ImageSelector = props => {
104
95
  sx: classes.imsRightWrpr,
105
96
  children: /*#__PURE__*/_jsx(Comp, {
106
97
  ...props,
98
+ classes: classes,
107
99
  onUploaded: onUploaded
108
100
  })
109
101
  })]
110
102
  })
111
- }), /*#__PURE__*/_jsxs(DialogActions, {
103
+ }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
112
104
  sx: {
113
105
  p: 2
114
106
  },
115
107
  children: [/*#__PURE__*/_jsx(Button, {
116
108
  onClick: onClose,
117
109
  variant: "outlined",
118
- color: "secondary",
119
- className: "secondaryBtn",
110
+ sx: classes.closeBtn,
120
111
  children: "Cancel"
121
112
  }), /*#__PURE__*/_jsx(Button, {
122
113
  onClick: onSave,
123
114
  variant: "contained",
124
- color: "primary",
125
- className: " primaryBtn",
126
- sx: {
127
- ml: 0
128
- },
115
+ sx: classes.saveBtn,
129
116
  children: "Save"
130
117
  })]
131
118
  })]
@@ -4,6 +4,7 @@ import CheckIcon from "@mui/icons-material/Check";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  const AddLink = props => {
6
6
  const {
7
+ classes,
7
8
  onUploaded,
8
9
  title
9
10
  } = props;
@@ -25,11 +26,13 @@ const AddLink = props => {
25
26
  value: url,
26
27
  onChange: handleChange,
27
28
  helperText: "Click Check Icon and Save...",
29
+ sx: classes.addLinkField,
28
30
  InputProps: {
29
31
  endAdornment: /*#__PURE__*/_jsx(Tooltip, {
30
- title: `Add ${Image} URL`,
32
+ title: `Add ${title} URL`,
31
33
  arrow: true,
32
34
  children: /*#__PURE__*/_jsx(IconButton, {
35
+ sx: classes.addLinkBtn,
33
36
  onClick: handleSave,
34
37
  children: /*#__PURE__*/_jsx(CheckIcon, {})
35
38
  })
@@ -4,6 +4,7 @@ import Uploader from "../../Uploader";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  const Upload = props => {
6
6
  const {
7
+ classes,
7
8
  value,
8
9
  onUploaded,
9
10
  customProps,
@@ -15,8 +16,12 @@ const Upload = props => {
15
16
  return /*#__PURE__*/_jsx(Grid, {
16
17
  item: true,
17
18
  xs: 12,
19
+ sx: {
20
+ padding: 0
21
+ },
18
22
  className: "ims-right",
19
23
  children: /*#__PURE__*/_jsx(Uploader, {
24
+ classes: classes,
20
25
  value: value,
21
26
  data: {
22
27
  key: "url"
@@ -2,17 +2,24 @@ const ImageSelectorStyles = () => ({
2
2
  root: {},
3
3
  tabs: {
4
4
  "& button": {
5
- fontSize: "14px",
5
+ fontSize: "12px",
6
+ fontWeight: "500",
6
7
  textTransform: "capitalize",
7
- padding: "12px",
8
- alignItems: "start",
9
- justifyContent: "start",
10
- minHeight: "auto",
8
+ minHeight: '40px',
9
+ padding: '10px',
10
+ marginRight: '24px',
11
11
  "&.hidden": {
12
12
  display: "none"
13
13
  },
14
14
  "&.active": {
15
- backgroundColor: "#FFF"
15
+ backgroundColor: "#FFF",
16
+ border: '1px solid #2563EB',
17
+ borderRadius: '7px',
18
+ '& svg': {
19
+ '& path': {
20
+ stroke: '#2563EB'
21
+ }
22
+ }
16
23
  },
17
24
  "&:hover": {
18
25
  backgroundColor: "#ECECEC"
@@ -24,7 +31,7 @@ const ImageSelectorStyles = () => ({
24
31
  }
25
32
  },
26
33
  "& .MuiTabs-indicator": {
27
- left: 0
34
+ display: 'none'
28
35
  }
29
36
  },
30
37
  tab: {},
@@ -32,12 +39,15 @@ const ImageSelectorStyles = () => ({
32
39
  height: "300px",
33
40
  overflow: "auto",
34
41
  backgroundColor: "#fff",
35
- padding: "8px",
42
+ padding: "0 8px",
36
43
  "& .MuiFormHelperText-root": {
37
44
  marginLeft: "0px"
38
45
  }
39
46
  },
40
47
  dialogWrapper: {
48
+ '& .MuiDialog-paper': {
49
+ borderRadius: '12px'
50
+ },
41
51
  "& .primaryBtn": {
42
52
  background: "#2563eb !important",
43
53
  boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
@@ -62,6 +72,55 @@ const ImageSelectorStyles = () => ({
62
72
  width: "auto !important",
63
73
  marginRight: "8px !important"
64
74
  }
75
+ },
76
+ addLinkField: {
77
+ "& .MuiOutlinedInput-input": {
78
+ fontSize: '12px',
79
+ fontWeight: 500
80
+ },
81
+ '& .MuiOutlinedInput-root': {
82
+ boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)',
83
+ borderRadius: '7px',
84
+ '& fieldset': {
85
+ borderColor: '#D8DDE1'
86
+ },
87
+ '&:hover fieldset': {
88
+ borderColor: '#64748B'
89
+ },
90
+ '&.Mui-focused fieldset': {
91
+ borderColor: '#2563EB'
92
+ },
93
+ '& .MuiFormLabel-root': {}
94
+ }
95
+ },
96
+ addLinkBtn: {
97
+ borderRadius: '5px',
98
+ background: "#E7EDF7",
99
+ width: '20px',
100
+ height: '20px',
101
+ '& svg': {
102
+ width: '16px',
103
+ height: '16px'
104
+ }
105
+ },
106
+ closeBtn: {
107
+ background: '#F4F6F9',
108
+ color: '#64748B',
109
+ fontSize: '14px',
110
+ fontWeight: 500,
111
+ padding: '4px 22px',
112
+ textTransform: 'none',
113
+ border: '1px solid #D8DDE1',
114
+ '&:hover': {
115
+ border: '1px solid #64748B'
116
+ }
117
+ },
118
+ saveBtn: {
119
+ background: '#2563EB',
120
+ fontSize: '14px',
121
+ fontWeight: 500,
122
+ padding: '4px 24px',
123
+ textTransform: 'none'
65
124
  }
66
125
  });
67
126
  export default ImageSelectorStyles;
@@ -0,0 +1,27 @@
1
+ const UploadStyles = () => ({
2
+ uploadContainer: {
3
+ border: '1px solid #2563EB',
4
+ padding: '10px',
5
+ borderRadius: "7px",
6
+ boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
7
+ },
8
+ uploadField: {
9
+ width: "100%",
10
+ backgroundSize: "contain",
11
+ backgroundRepeat: "no-repeat",
12
+ backgroundPosition: "center",
13
+ height: "250px",
14
+ position: "relative",
15
+ backgroundColor: "#EFF4FF",
16
+ borderRadius: "9px",
17
+ border: '1px dashed #2563EB'
18
+ },
19
+ uploadIcon: {
20
+ '& svg': {
21
+ '& path': {
22
+ stroke: '#2563EB'
23
+ }
24
+ }
25
+ }
26
+ });
27
+ export default UploadStyles;