@flozy/editor 3.7.1 → 3.7.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,211 @@
1
+ import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
2
+ import { Editable, Slate, ReactEditor } from 'slate-react';
3
+ import { createEditor } from 'slate';
4
+ import { useDebounce } from "use-debounce";
5
+ import withCommon from "./hooks/withCommon";
6
+ import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
7
+ import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
8
+ import { commands, mentionsEvent } from "./utils/events";
9
+ import { insertEmoji } from "./utils/emoji";
10
+ import { draftToSlate } from "./utils/draftToSlate";
11
+ import MentionsPopup from "./common/MentionsPopup";
12
+ import { serializeToText } from "./utils/serializeToText";
13
+ import useMentions from "./hooks/useMentions";
14
+ import Shorthands from "./common/Shorthands";
15
+ import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
16
+ import { EditorProvider } from "./hooks/useMouseMove";
17
+ import { jsx as _jsx } from "react/jsx-runtime";
18
+ import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
20
+ const {
21
+ id,
22
+ theme,
23
+ content,
24
+ readOnly,
25
+ otherProps,
26
+ needLayout = false,
27
+ toolBar = true,
28
+ onSave,
29
+ onsubmit
30
+ } = props;
31
+ const classes = usePopupStyle(theme);
32
+ const convertedContent = draftToSlate({
33
+ data: content
34
+ });
35
+ const [isInteracted, setIsInteracted] = useState(false);
36
+ const [value, setValue] = useState(convertedContent);
37
+ const [loadedValue] = useState(value);
38
+ const [deboundedValue] = useDebounce(value, 500);
39
+ const editor = useMemo(() => {
40
+ return withCommon(createEditor(), {
41
+ needLayout
42
+ });
43
+ }, []);
44
+ const isReadOnly = readOnly === "readonly";
45
+ useImperativeHandle(ref, () => ({
46
+ emojiClick: emoji => {
47
+ if (editor) {
48
+ insertEmoji(editor, emoji?.native, editor.selection);
49
+ ReactEditor.focus(editor);
50
+ }
51
+ },
52
+ // Focus enable
53
+ enableFocus: () => {
54
+ if (editor) {
55
+ ReactEditor.focus(editor);
56
+ }
57
+ }
58
+ }));
59
+ useEffect(() => {
60
+ setValue(draftToSlate({
61
+ data: content
62
+ }));
63
+ }, [id, content]);
64
+ useEffect(() => {
65
+ if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
66
+ const {
67
+ value: strVal,
68
+ ...restVal
69
+ } = getOnSaveData(deboundedValue);
70
+ onSave(strVal, restVal);
71
+ }
72
+ }, [deboundedValue]);
73
+ const getOnSaveData = val => {
74
+ const text = serializeToText(val);
75
+ const title = val?.find(f => f.type === "title");
76
+ return {
77
+ value: JSON.stringify(val),
78
+ text: text,
79
+ title: serializeToText(title?.children) || "Untitled"
80
+ };
81
+ };
82
+ const {
83
+ CHARACTERS = [],
84
+ hideTools
85
+ // needLayout = true,
86
+ } = otherProps || {};
87
+ const mentionsRef = useRef();
88
+ const customProps = {
89
+ ...(otherProps || {}),
90
+ readOnly: isReadOnly,
91
+ editorPlaceholder: "Write Something",
92
+ page_id: 1
93
+ };
94
+ const [mentions, setMentions] = useMentions({
95
+ editor,
96
+ selection: editor?.selection
97
+ });
98
+ const {
99
+ search,
100
+ target,
101
+ index
102
+ } = mentions;
103
+ let {
104
+ type
105
+ } = mentions;
106
+ if (type && type === "elements" && hideTools.indexOf("slash") > -1) {
107
+ type = null;
108
+ }
109
+ const chars = type ? Shorthands[type]({
110
+ ...mentions,
111
+ CHARACTERS,
112
+ hideTools: hideTools
113
+ }) : [];
114
+ const Leaf = ({
115
+ attributes,
116
+ children,
117
+ leaf
118
+ }) => {
119
+ children = getMarked(leaf, children);
120
+ return /*#__PURE__*/_jsx("span", {
121
+ ...attributes,
122
+ children: children
123
+ });
124
+ };
125
+ const handleEditorChange = newValue => {
126
+ setValue(newValue);
127
+ if (!isInteracted) {
128
+ setIsInteracted(true);
129
+ }
130
+ };
131
+ const Element = props => {
132
+ return getBlock(props);
133
+ };
134
+ const renderElement = useCallback(props => {
135
+ return /*#__PURE__*/_jsx(Element, {
136
+ ...props,
137
+ customProps: customProps
138
+ });
139
+ }, []);
140
+ const renderLeaf = useCallback(props => {
141
+ return /*#__PURE__*/_jsx(Leaf, {
142
+ ...props,
143
+ customProps: customProps
144
+ });
145
+ }, []);
146
+ const onKeyDown = useCallback(event => {
147
+ const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
148
+ const isCtrlKey = event.ctrlKey || isMetaKey;
149
+ if (target && chars.length > 0 && !isCtrlKey) {
150
+ mentionsEvent({
151
+ event,
152
+ mentions,
153
+ setMentions,
154
+ chars,
155
+ target,
156
+ editor,
157
+ type,
158
+ mentionsRef
159
+ });
160
+ } else if (isCtrlKey) {
161
+ commands({
162
+ event,
163
+ editor
164
+ });
165
+ } else if (event.key === "Enter" && !event.shiftKey) {
166
+ const {
167
+ value: strVal,
168
+ ...restVal
169
+ } = getOnSaveData(value);
170
+ onsubmit(false, {
171
+ strVal,
172
+ restVal
173
+ });
174
+ }
175
+ }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
176
+ const handleClose = () => {};
177
+ return /*#__PURE__*/_jsx(EditorProvider, {
178
+ theme: theme,
179
+ editor: editor,
180
+ children: /*#__PURE__*/_jsxs(Slate, {
181
+ editor: editor,
182
+ initialValue: value,
183
+ onChange: handleEditorChange,
184
+ children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
185
+ classes: classes,
186
+ editor: editor,
187
+ closeMainPopup: handleClose
188
+ }), /*#__PURE__*/_jsx(Editable, {
189
+ className: "chatEditorRoot",
190
+ renderElement: renderElement,
191
+ renderLeaf: renderLeaf,
192
+ placeholder: "Start typing ...",
193
+ spellCheck: true,
194
+ autoFocus: true,
195
+ onKeyDown: onKeyDown
196
+ }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
197
+ ref: mentionsRef,
198
+ mentions: mentions,
199
+ setMentions: setMentions,
200
+ editor: editor,
201
+ target: target,
202
+ index: index,
203
+ chars: chars,
204
+ type: type,
205
+ theme: theme
206
+ }) : null]
207
+ }, id)
208
+ });
209
+ });
210
+ ChatEditor.displayName = "ChatEditor";
211
+ export default ChatEditor;
@@ -2,7 +2,8 @@ import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
4
  import { IconButton, Tooltip, Box } from "@mui/material";
5
- import * as fIcons from "@mui/icons-material";
5
+ // import * as fIcons from "@mui/icons-material";
6
+ import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
6
7
  import SettingsIcon from "@mui/icons-material/Settings";
7
8
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
8
9
  import LinkIcon from "@mui/icons-material/Link";
@@ -63,7 +64,7 @@ const EditorButton = props => {
63
64
  };
64
65
  const isTrigger = linkType === "actionTrigger";
65
66
  const refURl = isTrigger ? buttonLink?.url : url;
66
- const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
67
+ const BtnIcon = buttonIcon ? buttonIcon : null;
67
68
  windowVar.lastButtonProps = element;
68
69
  const handleTrigger = async () => {
69
70
  if (metadata?.buttonLink?.handler) {
@@ -80,6 +81,7 @@ const EditorButton = props => {
80
81
  }
81
82
  };
82
83
  const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
84
+ console.log(openInNewTab);
83
85
  const onMenuClick = val => () => {
84
86
  switch (val) {
85
87
  case "edit":
@@ -131,6 +133,7 @@ const EditorButton = props => {
131
133
  color: "rgba(0, 0, 0, 0.54)"
132
134
  },
133
135
  ...btnProps,
136
+ target: openInNewTab ? "_blank" : "_self",
134
137
  children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
135
138
  })
136
139
  })]
@@ -212,12 +215,14 @@ const EditorButton = props => {
212
215
  }
213
216
  },
214
217
  ...buttonProps,
215
- children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
218
+ children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
219
+ iconName: buttonIcon,
216
220
  style: {
217
221
  paddingLeft: "4px",
218
222
  paddingRight: "4px"
219
223
  }
220
- }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
224
+ }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
225
+ iconName: buttonIcon,
221
226
  style: {
222
227
  paddingLeft: "4px",
223
228
  paddingRight: "4px"
@@ -1,10 +1,10 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
- import * as fIcons from "@mui/icons-material";
5
4
  import { Box } from "@mui/material";
6
5
  import ChipTextPopup from "./ChipTextPopup";
7
6
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
7
+ import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const ChipText = props => {
@@ -26,7 +26,6 @@ const ChipText = props => {
26
26
  buttonIcon,
27
27
  textSize
28
28
  } = element;
29
- const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
30
29
  const [openSetttings, setOpenSettings] = useState(false);
31
30
  const editor = useSlateStatic();
32
31
  const path = ReactEditor.findPath(editor, element);
@@ -82,7 +81,8 @@ const ChipText = props => {
82
81
  background: bgColor || "#CCC",
83
82
  color: textColor
84
83
  },
85
- children: [/*#__PURE__*/_jsx(BtnIcon, {
84
+ children: [/*#__PURE__*/_jsx(MUIIcon, {
85
+ iconName: buttonIcon || "Check",
86
86
  style: {
87
87
  fontSize: textSize || "16px",
88
88
  lineHeight: textSize || "16px",
@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Paper, Popover } from "@mui/material";
4
4
  import data from "@emoji-mart/data";
5
- import Picker from "@emoji-mart/react";
6
5
  import { insertEmoji } from "../../utils/emoji";
7
6
  import ToolbarIcon from "../../common/ToolbarIcon";
8
7
  import Icon from "../../common/Icon";
8
+ import EmojiPicker from "./EmojiPicker";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
11
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
61
61
  },
62
62
  onClose: handleClose,
63
63
  children: /*#__PURE__*/_jsx(Paper, {
64
- children: /*#__PURE__*/_jsx(Picker, {
64
+ children: /*#__PURE__*/_jsx(EmojiPicker, {
65
65
  data: data,
66
66
  onEmojiSelect: onEmojiSelect
67
67
  })
@@ -0,0 +1,16 @@
1
+ import data from "@emoji-mart/data";
2
+ import Picker from "@emoji-mart/react";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { Fragment as _Fragment } from "react/jsx-runtime";
5
+ const EmojiPicker = props => {
6
+ const {
7
+ onEmojiSelect
8
+ } = props;
9
+ return /*#__PURE__*/_jsx(_Fragment, {
10
+ children: /*#__PURE__*/_jsx(Picker, {
11
+ data: data,
12
+ onEmojiSelect: onEmojiSelect
13
+ })
14
+ });
15
+ };
16
+ export default EmojiPicker;
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
71
71
  children: [/*#__PURE__*/_jsx(Grid, {
72
72
  item: true,
73
73
  sx: classes.radioBtn,
74
- children: /*#__PURE__*/_jsx(RadioGroup, {
74
+ children: /*#__PURE__*/_jsxs(RadioGroup, {
75
75
  name: "set timing",
76
76
  value: schedule,
77
77
  defaultValue: 1,
78
- children: /*#__PURE__*/_jsx(FormControlLabel, {
78
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
79
79
  value: "immediately",
80
80
  label: "Immediately",
81
81
  onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
84
84
  control: /*#__PURE__*/_jsx(Radio, {
85
85
  size: "small"
86
86
  })
87
- })
87
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
88
+ value: "after",
89
+ label: "After",
90
+ onChange: () => {
91
+ setSchedule("after");
92
+ },
93
+ control: /*#__PURE__*/_jsx(Radio, {
94
+ size: "small"
95
+ })
96
+ })]
88
97
  })
89
98
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
90
99
  item: true,
@@ -277,7 +277,7 @@ const Grid = props => {
277
277
  } = getBreakPointsValue(borderRadius, size?.device) || {};
278
278
  return /*#__PURE__*/_jsxs(GridContainer, {
279
279
  container: true,
280
- className: `grid-container ${grid} has-hover element-root`,
280
+ className: `grid-container ${grid} has-hover element-root dpath`,
281
281
  ...attributes,
282
282
  ...sectionId,
283
283
  sx: {
@@ -105,7 +105,7 @@ const GridItem = props => {
105
105
  return /*#__PURE__*/_jsxs(Item, {
106
106
  item: true,
107
107
  component: "div",
108
- className: `grid-item element-root gi-top-wrpr`,
108
+ className: `grid-item element-root gi-top-wrpr dpath`,
109
109
  ...attributes,
110
110
  sx: {
111
111
  width: {
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import * as fIcons from "@mui/icons-material";
3
2
  import { Box } from "@mui/material";
3
+ import Check from "@mui/icons-material/Check";
4
4
  import { getBreakPointsValue } from "../../helper/theme";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +23,6 @@ const InlineIcon = props => {
23
23
  right,
24
24
  bottom
25
25
  } = bannerSpacing || {};
26
- const BtnIcon = fIcons["Check"];
27
26
  return /*#__PURE__*/_jsxs(Box, {
28
27
  ...attributes,
29
28
  className: "editor-icon-text",
@@ -42,7 +41,7 @@ const InlineIcon = props => {
42
41
  background: bgColor || "#CCC",
43
42
  color: textColor
44
43
  },
45
- children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
44
+ children: [/*#__PURE__*/_jsx(Check, {}), /*#__PURE__*/_jsx("div", {
46
45
  contentEditable: true,
47
46
  children: children
48
47
  })]
@@ -11,7 +11,9 @@ const CheckList = ({
11
11
  attributes,
12
12
  children,
13
13
  element,
14
- isEmpty
14
+ isEmpty,
15
+ className,
16
+ style
15
17
  }) => {
16
18
  const editor = useSlateStatic();
17
19
  const readOnly = useReadOnly();
@@ -30,12 +32,14 @@ const CheckList = ({
30
32
  const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
31
33
  return /*#__PURE__*/_jsx(_Fragment, {
32
34
  children: /*#__PURE__*/_jsxs("div", {
35
+ className: className || "",
33
36
  ...attributes,
34
37
  style: {
35
38
  textAlign: element.alignment || "left",
36
39
  display: "flex",
37
40
  justifyContent: "center",
38
- alignItems: "center"
41
+ alignItems: "center",
42
+ ...(style || {})
39
43
  },
40
44
  children: [/*#__PURE__*/_jsxs("div", {
41
45
  contentEditable: false,
@@ -188,6 +188,7 @@ const editorStyles = ({
188
188
  }
189
189
  },
190
190
  "& .checkbox-edit": {
191
+ alignSelf: "flex-start",
191
192
  "& .MuiFormControlLabel-root": {
192
193
  marginRight: "0px"
193
194
  },
@@ -212,7 +213,7 @@ const editorStyles = ({
212
213
  "& svg": {
213
214
  width: "17px",
214
215
  height: "18px",
215
- marginTop: '-1px'
216
+ marginTop: "-1px"
216
217
  }
217
218
  }
218
219
  },
@@ -273,7 +274,7 @@ const editorStyles = ({
273
274
  },
274
275
  cardsTypo: {
275
276
  color: theme?.palette?.editor?.textColor,
276
- fontSize: '14px !important'
277
+ fontSize: "14px !important"
277
278
  }
278
279
  });
279
280
  export default editorStyles;
@@ -32,6 +32,11 @@ const PopupTool = props => {
32
32
  const id = open ? "popup-edit-tool" : "";
33
33
  const table = new TableUtil(editor);
34
34
  const [size] = useWindowResize();
35
+ useEffect(() => {
36
+ if (!inFocus) {
37
+ setAnchorEl(null);
38
+ }
39
+ }, [inFocus]);
35
40
  useEffect(() => {
36
41
  if (event === "end" && anchorEl && !open) {
37
42
  // for table cell selection
@@ -0,0 +1,48 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Box } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const iconLoader = async iconName => {
5
+ try {
6
+ const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
7
+ const icon = await iconResponse.text();
8
+ return icon;
9
+ } catch (error) {
10
+ console.error(`Icon "${iconName}" could not be loaded.`, error);
11
+ return null; // Or return a default fallback icon
12
+ }
13
+ };
14
+
15
+ const DynamicIcon = ({
16
+ iconName,
17
+ ...props
18
+ }) => {
19
+ const [icon, setIcon] = useState("");
20
+ useEffect(() => {
21
+ let mounted = true;
22
+ iconLoader(iconName).then(iconHTML => {
23
+ if (mounted) {
24
+ setIcon(iconHTML);
25
+ }
26
+ });
27
+ return () => {
28
+ mounted = false;
29
+ };
30
+ }, [iconName]);
31
+ if (!icon) {
32
+ return null; // Or return a placeholder/spinner
33
+ }
34
+
35
+ return /*#__PURE__*/_jsx(Box, {
36
+ sx: {
37
+ display: "flex",
38
+ width: "auto",
39
+ height: "auto",
40
+ paddingLeft: "4px",
41
+ paddingRight: "4px"
42
+ },
43
+ dangerouslySetInnerHTML: {
44
+ __html: icon
45
+ }
46
+ });
47
+ };
48
+ export default DynamicIcon;
@@ -13,7 +13,8 @@ const MentionsListCard = props => {
13
13
  } = props;
14
14
  const {
15
15
  name,
16
- email
16
+ email,
17
+ avatar_filename = null
17
18
  } = data;
18
19
  return /*#__PURE__*/_jsxs(Card, {
19
20
  sx: {
@@ -37,7 +38,9 @@ const MentionsListCard = props => {
37
38
  alignItems: "center"
38
39
  },
39
40
  alt: name,
40
- children: /*#__PURE__*/_jsx(Avatar, {})
41
+ children: /*#__PURE__*/_jsx(Avatar, {
42
+ src: avatar_filename
43
+ })
41
44
  }), /*#__PURE__*/_jsx(Box, {
42
45
  sx: {
43
46
  display: "flex",
@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
10
10
  papper: {
11
11
  boxShadow: "none",
12
12
  width: "300px",
13
- height: "300px",
13
+ height: "auto",
14
14
  overflow: "auto",
15
15
  padding: "8px",
16
16
  margin: "0px",
@@ -1,29 +1,10 @@
1
1
  import React, { useState } from "react";
2
2
  import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
3
- import * as fIcons from "@mui/icons-material";
3
+ import MUIIcon from "./loadIcon";
4
+ import MUIFilledIcons from "./mui_filled_icons";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  import { Fragment as _Fragment } from "react/jsx-runtime";
7
- const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
8
- if (b.indexOf("Outlined") > -1) {
9
- a.outlined.push(b);
10
- } else if (b.indexOf("Rounded") > -1) {
11
- a.rounded.push(b);
12
- } else if (b.indexOf("Sharp") > -1) {
13
- a.sharp.push(b);
14
- } else if (b.indexOf("TwoTone") > -1) {
15
- a.tt.push(b);
16
- } else {
17
- a.filled.push(b);
18
- }
19
- return a;
20
- }, {
21
- filled: [],
22
- outlined: [],
23
- rounded: [],
24
- tt: [],
25
- sharp: []
26
- });
27
8
  const Icons = props => {
28
9
  const {
29
10
  value,
@@ -34,7 +15,7 @@ const Icons = props => {
34
15
  key
35
16
  } = data;
36
17
  const [val, setVal] = useState("");
37
- const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
18
+ const [list, setList] = useState(MUIFilledIcons.slice(0, 90));
38
19
  const onSelectIcon = ico => () => {
39
20
  onChange({
40
21
  [key]: ico
@@ -44,11 +25,11 @@ const Icons = props => {
44
25
  const keyVal = e.target.value?.toLowerCase();
45
26
  setVal(keyVal);
46
27
  if (keyVal) {
47
- setList(MUIIcons.filled.filter(f => {
28
+ setList(MUIFilledIcons.filter(f => {
48
29
  return f.toLowerCase().indexOf(keyVal) > -1;
49
30
  }).slice(0, 90));
50
31
  } else {
51
- setList(MUIIcons.filled.slice(0, 90));
32
+ setList(MUIFilledIcons.slice(0, 90));
52
33
  }
53
34
  };
54
35
  const onRemoveIcon = () => {
@@ -56,7 +37,7 @@ const Icons = props => {
56
37
  [key]: null
57
38
  });
58
39
  };
59
- const SelectedIcon = value ? fIcons[value] : null;
40
+ const SelectedIcon = value ? value : null;
60
41
  return /*#__PURE__*/_jsxs(_Fragment, {
61
42
  children: [/*#__PURE__*/_jsx(Grid, {
62
43
  item: true,
@@ -92,7 +73,9 @@ const Icons = props => {
92
73
  arrow: true,
93
74
  children: /*#__PURE__*/_jsx(IconButton, {
94
75
  onClick: onRemoveIcon,
95
- children: /*#__PURE__*/_jsx(SelectedIcon, {})
76
+ children: /*#__PURE__*/_jsx(MUIIcon, {
77
+ iconName: value
78
+ })
96
79
  })
97
80
  }) : ""
98
81
  })]
@@ -107,13 +90,14 @@ const Icons = props => {
107
90
  paddingTop: "5px"
108
91
  },
109
92
  children: list.map(m => {
110
- const Ico = fIcons[m];
111
93
  return /*#__PURE__*/_jsx(Tooltip, {
112
94
  title: m,
113
95
  arrow: true,
114
96
  children: /*#__PURE__*/_jsx(IconButton, {
115
97
  onClick: onSelectIcon(m),
116
- children: /*#__PURE__*/_jsx(Ico, {})
98
+ children: /*#__PURE__*/_jsx(MUIIcon, {
99
+ iconName: m
100
+ })
117
101
  })
118
102
  }, `mui_ico_${m}`);
119
103
  })
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import DynamicIcon from "../../MUIIcon";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const MUIIcon = ({
5
+ iconName,
6
+ ...rest
7
+ }) => {
8
+ return /*#__PURE__*/_jsx(DynamicIcon, {
9
+ iconName: iconName,
10
+ ...rest
11
+ });
12
+ };
13
+ export default MUIIcon;