@flozy/editor 1.8.2 → 1.8.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. package/dist/Editor/CommonEditor.js +13 -9
  2. package/dist/Editor/Editor.css +15 -12
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
  4. package/dist/Editor/Elements/Attachments/Attachments.js +3 -0
  5. package/dist/Editor/Elements/Button/EditorButton.js +4 -10
  6. package/dist/Editor/Elements/Carousel/Arrows.js +13 -6
  7. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  8. package/dist/Editor/Elements/Carousel/slick-theme.min.css +5 -22
  9. package/dist/Editor/Elements/ChipText/ChipText.js +8 -12
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -3
  11. package/dist/Editor/Elements/Color Picker/Styles.js +3 -17
  12. package/dist/Editor/Elements/Color Picker/colorWheel.png +0 -0
  13. package/dist/Editor/Elements/Embed/Embed.css +48 -45
  14. package/dist/Editor/Elements/Embed/Image.js +8 -14
  15. package/dist/Editor/Elements/Embed/Video.js +1 -7
  16. package/dist/Editor/Elements/Form/Form.js +17 -23
  17. package/dist/Editor/Elements/Form/FormElements/FormText.js +8 -12
  18. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +8 -12
  19. package/dist/Editor/Elements/Grid/Grid.js +8 -20
  20. package/dist/Editor/Elements/Grid/GridItem.js +13 -23
  21. package/dist/Editor/Elements/Grid/templates/carousel_item.js +9 -4
  22. package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
  23. package/dist/Editor/Elements/List/CheckList.js +10 -4
  24. package/dist/Editor/Elements/List/CheckListStyles.js +12 -0
  25. package/dist/Editor/Elements/SimpleText.js +0 -1
  26. package/dist/Editor/Elements/Table/Table.js +3 -1
  27. package/dist/Editor/Elements/TopBanner/TopBanner.js +3 -1
  28. package/dist/Editor/Elements/Variables/Style.js +12 -0
  29. package/dist/Editor/Elements/Variables/Variable.js +27 -0
  30. package/dist/Editor/Elements/Variables/VariableButton.js +40 -0
  31. package/dist/Editor/IframeEditor.js +36 -0
  32. package/dist/Editor/MiniEditor.js +7 -10
  33. package/dist/Editor/Styles/EditorStyles.js +15 -7
  34. package/dist/Editor/Toolbar/Basic/index.js +18 -5
  35. package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
  36. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
  37. package/dist/Editor/common/Icon.js +10 -2
  38. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  39. package/dist/Editor/common/Section/index.js +13 -16
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -4
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +10 -3
  42. package/dist/Editor/common/StyleBuilder/formStyle.js +3 -0
  43. package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
  44. package/dist/Editor/common/iconslist.js +93 -1
  45. package/dist/Editor/helper/theme.js +83 -0
  46. package/dist/Editor/hooks/useWindowMessage.js +35 -0
  47. package/dist/Editor/hooks/useWindowResize.js +5 -2
  48. package/dist/Editor/plugins/withLayout.js +42 -27
  49. package/dist/Editor/plugins/withLinks.js +1 -1
  50. package/dist/Editor/utils/SlateUtilityFunctions.js +28 -5
  51. package/dist/Editor/utils/attachments.js +2 -1
  52. package/dist/Editor/utils/variables.js +45 -0
  53. package/dist/index.js +3 -1
  54. package/package.json +1 -1
  55. package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -7,14 +7,20 @@ import LinkButton from "../../Elements/Link/LinkButton";
7
7
  import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
8
8
  import ColorPickerButton from "../../common/ColorPickerButton";
9
9
  import { colors } from "../../Elements/Color Picker/defaultColors";
10
+ import VariableButton from "../../Elements/Variables/VariableButton";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const allTools = toolbarGroups.flat();
13
- const BasicToolbar = ({
14
- toolbars
15
- }) => {
14
+ const BasicToolbar = props => {
16
15
  const editor = useSlateStatic();
17
16
 
17
+ // props
18
+ const {
19
+ otherProps: {
20
+ variableOptions
21
+ }
22
+ } = props;
23
+
18
24
  // state
19
25
  const [activeColor, setActiveColor] = useState("#000000");
20
26
  const fontStyle = allTools.filter(f => f.basic);
@@ -38,8 +44,7 @@ const BasicToolbar = ({
38
44
  active: isBlockActive(editor, link.format),
39
45
  editor: editor
40
46
  }, link.id), /*#__PURE__*/_jsx(Tooltip, {
41
- arrow: true,
42
- title: "Current Color",
47
+ title: "Font Color",
43
48
  children: /*#__PURE__*/_jsx(ColorPickerButton, {
44
49
  value: activeColor || "#0000",
45
50
  onSave: color => {
@@ -47,7 +52,15 @@ const BasicToolbar = ({
47
52
  },
48
53
  defaultColors: colors
49
54
  })
55
+ }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
56
+ placeholder: "Variables",
57
+ options: variableOptions
50
58
  })]
51
59
  });
52
60
  };
61
+ BasicToolbar.defaultProps = {
62
+ otherProps: {
63
+ variableOptions: []
64
+ }
65
+ };
53
66
  export default BasicToolbar;
@@ -3,6 +3,9 @@ import { TextField, IconButton } from "@mui/material";
3
3
  import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { sizeMap } from "../../utils/font.js";
5
5
  import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
6
+ import { getBreakPointsValue } from "../../helper/theme.js";
7
+ import useWindowResize from "../../hooks/useWindowResize.js";
8
+ import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
6
9
  import { jsx as _jsx } from "react/jsx-runtime";
7
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,15 +14,35 @@ const TextSize = ({
11
14
  format,
12
15
  fullWidth
13
16
  }) => {
14
- const value = activeMark(editor, format);
15
- const onChangeSize = e => {
16
- let inc = parseInt(e.target.value) || 8;
17
- inc = inc > 200 ? 200 : inc;
17
+ const [size] = useWindowResize();
18
+ const val = activeMark(editor, format);
19
+ const value = getBreakPointsValue(val, size?.device);
20
+ const updateMarkData = newVal => {
21
+ let upData = {
22
+ ...getBreakPointsValue(val),
23
+ [size?.device]: `${newVal}px`
24
+ };
25
+
26
+ // if desktop update to all other devices
27
+ // to avoid default normal size
28
+ if (size?.device === "lg") {
29
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
30
+ a[b] = `${newVal}px`;
31
+ return a;
32
+ }, {});
33
+ }
18
34
  addMarkData(editor, {
19
35
  format,
20
- value: `${inc || 8}px`
36
+ value: {
37
+ ...upData
38
+ }
21
39
  });
22
40
  };
41
+ const onChangeSize = e => {
42
+ let inc = parseInt(e.target.value) || 8;
43
+ inc = inc > 200 ? 200 : inc;
44
+ updateMarkData(inc || 8);
45
+ };
23
46
  const getSizeVal = () => {
24
47
  try {
25
48
  const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
@@ -32,17 +55,11 @@ const TextSize = ({
32
55
  const onIncreaseSize = () => {
33
56
  let inc = (combinedOldVal || 0) + 1;
34
57
  inc = inc > 200 ? 200 : inc;
35
- addMarkData(editor, {
36
- format,
37
- value: `${inc}px`
38
- });
58
+ updateMarkData(inc);
39
59
  };
40
60
  const onDecreaseSize = () => {
41
61
  const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
42
- addMarkData(editor, {
43
- format,
44
- value: `${newVal}px`
45
- });
62
+ updateMarkData(newVal);
46
63
  };
47
64
  return /*#__PURE__*/_jsx(_Fragment, {
48
65
  children: /*#__PURE__*/_jsx(TextField, {
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { useSlate } from "slate-react";
3
3
  import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
4
4
  import MENU_OPTIONS from "./Options/Options";
@@ -37,6 +37,11 @@ const MiniToolbar = props => {
37
37
  const PopupComponent = POPUP_TYPES[popper] || null;
38
38
  const open = Boolean(PopupComponent);
39
39
  const DialogComp = !fullScreen ? Popper : Dialog;
40
+ useEffect(() => {
41
+ if (popper) {
42
+ setPopper(null);
43
+ }
44
+ }, [editor.selection]);
40
45
  const handleClick = type => e => {
41
46
  setPopper(type);
42
47
  setAnchorEl(e.currentTarget);
@@ -51,6 +56,7 @@ const MiniToolbar = props => {
51
56
  return /*#__PURE__*/_jsxs(_Fragment, {
52
57
  children: [/*#__PURE__*/_jsx(Box, {
53
58
  component: "div",
59
+ className: "mini-tool-wrpr-ei",
54
60
  sx: classes.root,
55
61
  children: MENU_OPTIONS.map(({
56
62
  type,
@@ -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, 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, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon } from "./iconslist";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
13
  const iconList = {
@@ -185,8 +185,16 @@ const iconList = {
185
185
  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
186
186
  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
187
187
  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
188
+ style: {
189
+ fill: "#64748B"
190
+ },
188
191
  size: 20
189
- })
192
+ }),
193
+ leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
194
+ rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
195
+ checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
196
+ checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
197
+ excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {})
190
198
  };
191
199
  const Icon = props => {
192
200
  const {
@@ -74,7 +74,7 @@ const ImageSelector = props => {
74
74
  }),
75
75
  iconPosition: "start",
76
76
  value: "upload",
77
- label: "Upload Media"
77
+ label: `Upload ${title}`
78
78
  }), /*#__PURE__*/_jsx(Tab, {
79
79
  className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
80
80
  sx: classes.tab,
@@ -83,7 +83,7 @@ const ImageSelector = props => {
83
83
  }),
84
84
  iconPosition: "start",
85
85
  value: "choose",
86
- label: "Choose Media"
86
+ label: `Choose ${title}`
87
87
  }), /*#__PURE__*/_jsx(Tab, {
88
88
  className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
89
89
  sx: classes.tab,
@@ -4,6 +4,7 @@ import { ReactEditor, useSlateStatic } from "slate-react";
4
4
  import { Box, IconButton, Tooltip } from "@mui/material";
5
5
  import TuneIcon from "@mui/icons-material/Tune";
6
6
  import SectionPopup from "../../Elements/Grid/SectionPopup";
7
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const Section = props => {
@@ -25,12 +26,6 @@ const Section = props => {
25
26
  sectionGridSize,
26
27
  sectionAlignment
27
28
  } = element;
28
- const {
29
- left: ssleft,
30
- top: sstop,
31
- right: ssright,
32
- bottom: ssbottom
33
- } = sectionBannerSpacing || {};
34
29
  const {
35
30
  topLeft: ssTopLeft,
36
31
  topRight: ssTopRight,
@@ -49,9 +44,9 @@ const Section = props => {
49
44
  const Toolbar = () => {
50
45
  return !readOnly ? /*#__PURE__*/_jsx(Box, {
51
46
  component: "div",
52
- className: "element-toolbar ss hr section-tw",
47
+ className: "element-toolbar no-border-button ss hr section-tw",
53
48
  style: {
54
- left: "20px",
49
+ left: "-28px",
55
50
  top: "0px"
56
51
  },
57
52
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -83,20 +78,19 @@ const Section = props => {
83
78
  at: path
84
79
  });
85
80
  };
81
+ const needHover = element?.children?.find(f => f.type === "grid") ? "needHover" : "";
86
82
  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
87
83
  backgroundImage: `url(${sectionBackgroundImage})`
88
84
  } : {};
89
85
  return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
90
86
  component: "section",
91
- className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
92
- style: {
93
- position: "relative",
87
+ className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
88
+ sx: {
94
89
  background: sectionBgColor,
95
90
  ...sectionBgImage,
96
- paddingLeft: `${ssleft}px`,
97
- paddingRight: `${ssright}px`,
98
- paddingTop: `${sstop || 2}px`,
99
- paddingBottom: `${ssbottom || 2}px`,
91
+ padding: {
92
+ ...getTRBLBreakPoints(sectionBannerSpacing)
93
+ },
100
94
  borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
101
95
  flexDirection: flexDirection || "column",
102
96
  alignItems: horizantal,
@@ -105,7 +99,10 @@ const Section = props => {
105
99
  children: [/*#__PURE__*/_jsxs(Box, {
106
100
  className: "ed-section-inner",
107
101
  sx: {
108
- width: `${(sectionGridSize || 8) / 12 * 100}%`
102
+ position: "relative",
103
+ width: {
104
+ ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
105
+ }
109
106
  },
110
107
  children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
111
108
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
@@ -1,12 +1,14 @@
1
1
  import React from "react";
2
2
  import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
3
3
  import { squreStyle } from "./radiusStyle";
4
+ import { getBreakPointsValue } from "../../../helper/theme";
5
+ import useWindowResize from "../../../hooks/useWindowResize";
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
5
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
8
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
7
9
  const BannerSpacing = props => {
8
10
  const {
9
- value,
11
+ value: val,
10
12
  data,
11
13
  onChange,
12
14
  elementProps
@@ -19,6 +21,8 @@ const BannerSpacing = props => {
19
21
  if (lockSpacing === undefined) {
20
22
  lockSpacing = true;
21
23
  }
24
+ const [size] = useWindowResize();
25
+ const value = getBreakPointsValue(val, size?.device);
22
26
  const handleChange = e => {
23
27
  let changeAll = {};
24
28
  if (lockSpacing) {
@@ -28,9 +32,12 @@ const BannerSpacing = props => {
28
32
  }
29
33
  onChange({
30
34
  [key]: {
31
- ...value,
32
- [e.target.name]: e.target.value,
33
- ...changeAll
35
+ ...getBreakPointsValue(val),
36
+ [size?.device]: {
37
+ ...value,
38
+ ...changeAll,
39
+ [e.target.name]: e.target.value
40
+ }
34
41
  }
35
42
  });
36
43
  };
@@ -64,8 +71,10 @@ const BannerSpacing = props => {
64
71
  "aria-label": "Default",
65
72
  valueLabelDisplay: "auto",
66
73
  max: 100,
74
+ name: "top",
67
75
  onChange: handleChange
68
76
  }), /*#__PURE__*/_jsx("input", {
77
+ name: "top",
69
78
  value: !lockSpacing ? "" : value?.top || 0,
70
79
  className: "sliderInput",
71
80
  disabled: !lockSpacing,
@@ -1,19 +1,26 @@
1
1
  import React from "react";
2
2
  import { Grid, Slider, Typography } from "@mui/material";
3
+ import useWindowResize from "../../../hooks/useWindowResize";
4
+ import { getBreakPointsValue } from "../../../helper/theme";
3
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
5
7
  const GridSize = props => {
6
8
  const {
7
- value,
9
+ value: val,
8
10
  data,
9
11
  onChange
10
12
  } = props;
11
13
  const {
12
14
  key
13
15
  } = data;
16
+ const [size] = useWindowResize();
17
+ const value = getBreakPointsValue(val, size?.device);
14
18
  const handleChange = e => {
15
19
  onChange({
16
- [key]: e.target.value
20
+ [key]: {
21
+ ...getBreakPointsValue(val),
22
+ [size?.device]: e.target.value
23
+ }
17
24
  });
18
25
  };
19
26
  return /*#__PURE__*/_jsxs(Grid, {
@@ -27,7 +34,7 @@ const GridSize = props => {
27
34
  fontWeight: 500,
28
35
  marginBottom: "5px"
29
36
  },
30
- children: ["Grid Size: ", value || 12]
37
+ children: [data?.label || "Grid Size", ": ", value || 12]
31
38
  }), /*#__PURE__*/_jsx("div", {
32
39
  className: "sld-wrpr",
33
40
  children: /*#__PURE__*/_jsx(Slider, {
@@ -33,6 +33,9 @@ const formStyle = [{
33
33
  width: 7,
34
34
  renderOption: option => {
35
35
  return /*#__PURE__*/_jsx("span", {
36
+ style: {
37
+ fontFamily: option.value
38
+ },
36
39
  children: option.text
37
40
  });
38
41
  }
@@ -46,7 +46,7 @@ const gridStyle = [{
46
46
  tab: "Size",
47
47
  value: "gridSize",
48
48
  fields: [{
49
- label: "Grid Size",
49
+ label: "Width Size",
50
50
  key: "sectionGridSize",
51
51
  type: "gridSize"
52
52
  }]
@@ -1545,4 +1545,96 @@ export const WorkflowIcon = () => {
1545
1545
  fill: "#f3b814"
1546
1546
  })]
1547
1547
  });
1548
- };
1548
+ };
1549
+ export const LeftArrow = () => /*#__PURE__*/_jsx("svg", {
1550
+ width: "9",
1551
+ height: "12",
1552
+ viewBox: "0 0 9 14",
1553
+ fill: "none",
1554
+ xmlns: "http://www.w3.org/2000/svg",
1555
+ children: /*#__PURE__*/_jsx("path", {
1556
+ d: "M7.10104 12.8839L1.23438 7.00052L7.10104 1.11719",
1557
+ stroke: "#2563EB",
1558
+ strokeWidth: "2",
1559
+ strokeLinecap: "round",
1560
+ strokeLinejoin: "round"
1561
+ })
1562
+ });
1563
+ export const RightArrow = () => /*#__PURE__*/_jsx("svg", {
1564
+ width: "9",
1565
+ height: "12",
1566
+ viewBox: "0 0 9 14",
1567
+ fill: "none",
1568
+ xmlns: "http://www.w3.org/2000/svg",
1569
+ children: /*#__PURE__*/_jsx("path", {
1570
+ d: "M1.89896 12.8839L7.76562 7.00052L1.89896 1.11719",
1571
+ stroke: "#2563EB",
1572
+ strokeWidth: "2",
1573
+ strokeLinecap: "round",
1574
+ strokeLinejoin: "round"
1575
+ })
1576
+ });
1577
+ export const CheckListButton = () => /*#__PURE__*/_jsx("svg", {
1578
+ width: "24",
1579
+ height: "24",
1580
+ viewBox: "0 0 24 24",
1581
+ fill: "none",
1582
+ xmlns: "http://www.w3.org/2000/svg",
1583
+ children: /*#__PURE__*/_jsx("rect", {
1584
+ x: "0.5",
1585
+ y: "0.5",
1586
+ width: "23",
1587
+ height: "23",
1588
+ rx: "11.5",
1589
+ fill: "#F4F6F9",
1590
+ stroke: "#E0E0E0"
1591
+ })
1592
+ });
1593
+ export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
1594
+ width: "24",
1595
+ height: "24",
1596
+ viewBox: "0 0 24 24",
1597
+ fill: "none",
1598
+ xmlns: "http://www.w3.org/2000/svg",
1599
+ children: [/*#__PURE__*/_jsx("rect", {
1600
+ x: "0.5",
1601
+ y: "0.5",
1602
+ width: "23",
1603
+ height: "23",
1604
+ rx: "11.5",
1605
+ fill: "#2563EB"
1606
+ }), /*#__PURE__*/_jsx("path", {
1607
+ d: "M7.0625 12.0896L10.6849 15.7105L17.9267 8.46875",
1608
+ stroke: "white",
1609
+ strokeWidth: "2",
1610
+ strokeLinecap: "round",
1611
+ strokeLinejoin: "round"
1612
+ })]
1613
+ });
1614
+ export const ExcelIcon = () => /*#__PURE__*/_jsx("svg", {
1615
+ xmlns: "http://www.w3.org/2000/svg",
1616
+ viewBox: "0,0,256,256",
1617
+ width: "30px",
1618
+ height: "30px",
1619
+ children: /*#__PURE__*/_jsx("g", {
1620
+ fill: "#22622c",
1621
+ fillRule: "nonzero",
1622
+ stroke: "none",
1623
+ strokeWidth: "1",
1624
+ strokeLinecap: "butt",
1625
+ strokeLinejoin: "miter",
1626
+ strokeMiterlimit: "10",
1627
+ strokeDasharray: "",
1628
+ strokeDashoffset: "0",
1629
+ fontFamily: "none",
1630
+ fontWeight: "none",
1631
+ fontSize: "none",
1632
+ textAnchor: "none",
1633
+ children: /*#__PURE__*/_jsx("g", {
1634
+ transform: "scale(8.53333,8.53333)",
1635
+ children: /*#__PURE__*/_jsx("path", {
1636
+ d: "M15,3c-0.13457,0.00082 -0.26871,0.01521 -0.40039,0.04297l-0.00195,-0.00195l-9.96875,1.99414l-0.00195,0.00195c-0.94311,0.17905 -1.62599,1.00293 -1.62695,1.96289v16c0.00021,0.9613 0.68429,1.78648 1.62891,1.96484l9.96875,1.99414c0.13238,0.02723 0.26719,0.04097 0.40234,0.04102c1.10457,0 2,-0.89543 2,-2v-20c0,-1.10457 -0.89543,-2 -2,-2zM19,5v3h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v3h6c1.105,0 2,-0.895 2,-2v-16c0,-1.105 -0.895,-2 -2,-2zM23,8h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM6.18555,10h2.40234l1.24414,2.99023c0.101,0.244 0.18177,0.52666 0.25977,0.84766h0.0332c0.045,-0.193 0.13353,-0.48609 0.26953,-0.87109l1.39063,-2.9668h2.1875l-2.61328,4.95508l2.69141,5.04297h-2.33398l-1.50391,-3.25781c-0.057,-0.115 -0.12369,-0.34697 -0.17969,-0.66797h-0.02148c-0.034,0.154 -0.10113,0.38631 -0.20313,0.69531l-1.51367,3.23242h-2.3457l2.7832,-5.00586zM23,12h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,16h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,20h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1z"
1637
+ })
1638
+ })
1639
+ })
1640
+ });
@@ -0,0 +1,83 @@
1
+ import { sizeMap } from "../utils/font";
2
+ export const breakpoints = {
3
+ small: 0,
4
+ mobile: 600,
5
+ tablet: 900
6
+ };
7
+ export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
8
+ export const getDevice = width => {
9
+ if (width > 0 && width < breakpoints.mobile) {
10
+ return "xs";
11
+ } else {
12
+ return "lg";
13
+ }
14
+ };
15
+ const copyAllLg = (value, ot) => {
16
+ return BREAKPOINTS_DEVICES.reduce((a, b) => {
17
+ return {
18
+ ...a,
19
+ [b]: overrides[ot] ? overrides[ot](value) : value
20
+ };
21
+ }, {});
22
+ };
23
+ const overrideValues = (value, ot) => {
24
+ return Object.keys(value).reduce((a, b) => {
25
+ return {
26
+ ...a,
27
+ [b]: overrides[ot] ? overrides[ot](value[b]) : value
28
+ };
29
+ }, {});
30
+ };
31
+ const overrides = {
32
+ overrideText: val => {
33
+ return sizeMap[val] || val;
34
+ },
35
+ overrideGridSize: val => {
36
+ return `${(val || 8) / 12 * 100}%`;
37
+ }
38
+ };
39
+ export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
40
+ try {
41
+ if (breakpoint) {
42
+ if (typeof value !== "object") {
43
+ return value;
44
+ }
45
+ return value ? value[breakpoint] || value["lg"] : value;
46
+ } else if (typeof value === "object") {
47
+ return !breakpoint && value["lg"] ? !ov ? value : overrideValues(value, ot) : value[breakpoint] || copyAllLg(value, ot);
48
+ } else {
49
+ // consider without breakpoints
50
+ return copyAllLg(value, ot);
51
+ }
52
+ } catch (err) {
53
+ console.log(err);
54
+ }
55
+ };
56
+ export const getTRBLBreakPoints = (value, breakpoint) => {
57
+ try {
58
+ const values = getBreakPointsValue(value, breakpoint);
59
+ const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
60
+ if (values[b] || values["lg"]) {
61
+ const {
62
+ top,
63
+ right,
64
+ bottom,
65
+ left
66
+ } = values[b] || values["lg"];
67
+ return {
68
+ ...a,
69
+ [b]: `${top || 0}px ${right || 0}px ${bottom || 0}px ${left || 0}px`
70
+ };
71
+ } else {
72
+ return a;
73
+ }
74
+ }, {});
75
+ if (breakpoint) {
76
+ return value[breakpoint] || value["lg"] || value;
77
+ } else {
78
+ return cssVal;
79
+ }
80
+ } catch (err) {
81
+ console.log(err);
82
+ }
83
+ };
@@ -0,0 +1,35 @@
1
+ import { useEffect, useState } from "react";
2
+ const useWindowMessage = props => {
3
+ const {
4
+ type
5
+ } = props;
6
+ const [message, setMessage] = useState(null);
7
+ useEffect(() => {
8
+ if (window.addEventListener) {
9
+ window.addEventListener("message", onMessage, false);
10
+ } else {
11
+ window.attachEvent("onmessage", onMessage);
12
+ }
13
+ return () => {
14
+ if (window.addEventListener) {
15
+ window.removeEventListener("message", onMessage, false);
16
+ } else {
17
+ window.detachEvent("onmessage", onMessage);
18
+ }
19
+ };
20
+ }, []);
21
+ const onMessage = e => {
22
+ if (e?.data && e?.data[type]) {
23
+ setMessage(e?.data[type]);
24
+ }
25
+ };
26
+ const sendMessage = action => {
27
+ if (window.parent) {
28
+ window.parent.postMessage({
29
+ ...action
30
+ }, "http://localhost:3000");
31
+ }
32
+ };
33
+ return [message, sendMessage];
34
+ };
35
+ export default useWindowMessage;
@@ -1,13 +1,16 @@
1
1
  import { useEffect, useState } from "react";
2
+ import { getDevice } from "../helper/theme";
2
3
  const useWindowResize = () => {
3
4
  const [size, setSize] = useState({
4
5
  width: window.innerWidth,
5
- height: window.innerHeight
6
+ height: window.innerHeight,
7
+ device: getDevice(window.innerWidth)
6
8
  });
7
9
  const onResize = () => {
8
10
  setSize({
9
11
  width: window.innerWidth,
10
- height: window.innerHeight
12
+ height: window.innerHeight,
13
+ device: getDevice(window.innerWidth)
11
14
  });
12
15
  };
13
16
  useEffect(() => {