@flozy/editor 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/CollaborativeEditor.js +6 -4
- package/dist/Editor/CommonEditor.js +43 -31
- package/dist/Editor/Elements/CodeToText/CodeToText.js +44 -33
- package/dist/Editor/Elements/CodeToText/CodeToTextButton.js +13 -8
- package/dist/Editor/Elements/CodeToText/HtmlCode.js +13 -8
- package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +14 -8
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +61 -53
- package/dist/Editor/Elements/Embed/Embed.js +62 -49
- package/dist/Editor/Elements/Embed/Image.js +30 -24
- package/dist/Editor/Elements/Embed/Video.js +45 -38
- package/dist/Editor/Elements/Equation/Equation.js +17 -10
- package/dist/Editor/Elements/Equation/EquationButton.js +37 -28
- package/dist/Editor/Elements/Grid/Grid.js +14 -9
- package/dist/Editor/Elements/Grid/GridButton.js +5 -3
- package/dist/Editor/Elements/Grid/GridItem.js +18 -13
- package/dist/Editor/Elements/ID/Id.js +30 -24
- package/dist/Editor/Elements/Link/Link.js +26 -19
- package/dist/Editor/Elements/Link/LinkButton.js +45 -35
- package/dist/Editor/Elements/Mentions/Mentions.js +6 -4
- package/dist/Editor/Elements/NewLine/NewLineButton.js +5 -3
- package/dist/Editor/Elements/Table/Table.js +10 -3
- package/dist/Editor/Elements/Table/TableSelector.js +41 -33
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +18 -13
- package/dist/Editor/RemoteCursorOverlay/Overlay.js +35 -31
- package/dist/Editor/Toolbar/Toolbar.js +90 -94
- package/dist/Editor/common/Button.js +7 -6
- package/dist/Editor/common/Icon.js +34 -33
- package/dist/Editor/common/MentionsPopup.js +20 -18
- package/dist/Editor/utils/SlateUtilityFunctions.js +132 -52
- package/package.json +2 -2
@@ -1,6 +1,6 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React from "react";
|
3
2
|
import { useSelected, useFocused } from "slate-react";
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
4
|
const Mentions = ({
|
5
5
|
attributes,
|
6
6
|
children,
|
@@ -25,10 +25,12 @@ const Mentions = ({
|
|
25
25
|
if (element.children[0].italic) {
|
26
26
|
style.fontStyle = "italic";
|
27
27
|
}
|
28
|
-
return /*#__PURE__*/
|
28
|
+
return /*#__PURE__*/_jsxs("span", {
|
29
|
+
...attributes,
|
29
30
|
contentEditable: false,
|
30
31
|
"data-cy": `mention-${element.character.replace(" ", "-")}`,
|
31
|
-
style: style
|
32
|
-
|
32
|
+
style: style,
|
33
|
+
children: ["@", element.character, children]
|
34
|
+
});
|
33
35
|
};
|
34
36
|
export default Mentions;
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
2
2
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
3
3
|
import { Transforms } from "slate";
|
4
4
|
import { useSlateStatic } from "slate-react";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const NewLineButton = props => {
|
6
7
|
const editor = useSlateStatic();
|
7
8
|
const onAddNewLine = () => {
|
@@ -14,9 +15,10 @@ const NewLineButton = props => {
|
|
14
15
|
at: [editor.children.length]
|
15
16
|
});
|
16
17
|
};
|
17
|
-
return /*#__PURE__*/
|
18
|
+
return /*#__PURE__*/_jsx("button", {
|
18
19
|
title: "New Line",
|
19
|
-
onClick: onAddNewLine
|
20
|
-
|
20
|
+
onClick: onAddNewLine,
|
21
|
+
children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
|
22
|
+
});
|
21
23
|
};
|
22
24
|
export default NewLineButton;
|
@@ -1,15 +1,22 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
3
|
const Table = ({
|
3
4
|
attributes,
|
4
5
|
children,
|
5
6
|
element
|
6
7
|
}) => {
|
7
|
-
return /*#__PURE__*/
|
8
|
+
return /*#__PURE__*/_jsx("div", {
|
8
9
|
style: {
|
9
10
|
minWidth: "100%",
|
10
11
|
maxWidth: "100%",
|
11
12
|
overflow: "auto"
|
12
|
-
}
|
13
|
-
|
13
|
+
},
|
14
|
+
children: /*#__PURE__*/_jsx("table", {
|
15
|
+
children: /*#__PURE__*/_jsx("tbody", {
|
16
|
+
...attributes,
|
17
|
+
children: children
|
18
|
+
})
|
19
|
+
})
|
20
|
+
});
|
14
21
|
};
|
15
22
|
export default Table;
|
@@ -4,6 +4,8 @@ import usePopup from '../../utils/customHooks/usePopup';
|
|
4
4
|
import { Transforms } from 'slate';
|
5
5
|
import { TableUtil } from '../../utils/table.js';
|
6
6
|
import './TableSelector.css';
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
9
|
const TableSelector = ({
|
8
10
|
editor
|
9
11
|
}) => {
|
@@ -55,39 +57,45 @@ const TableSelector = ({
|
|
55
57
|
table.insertTable(tableData.row, tableData.column);
|
56
58
|
setShowOptions(false);
|
57
59
|
};
|
58
|
-
return /*#__PURE__*/
|
60
|
+
return /*#__PURE__*/_jsxs("div", {
|
59
61
|
ref: tableOptionsRef,
|
60
|
-
className: "popup-wrapper"
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
62
|
+
className: "popup-wrapper",
|
63
|
+
children: [/*#__PURE__*/_jsx("button", {
|
64
|
+
style: {
|
65
|
+
border: showOptions ? '1px solid lightgray' : 'none'
|
66
|
+
},
|
67
|
+
title: "table",
|
68
|
+
onClick: handleButtonClick,
|
69
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
70
|
+
icon: "table"
|
71
|
+
})
|
72
|
+
}), showOptions && /*#__PURE__*/_jsxs("div", {
|
73
|
+
className: "popup",
|
74
|
+
children: [/*#__PURE__*/_jsx("span", {
|
75
|
+
style: {
|
76
|
+
fontSize: '0.85em'
|
77
|
+
},
|
78
|
+
children: /*#__PURE__*/_jsx("i", {
|
79
|
+
children: `Insert a ${tableData.row >= 1 ? `${tableData.row} x ${tableData.column}` : ''} table`
|
80
|
+
})
|
81
|
+
}), /*#__PURE__*/_jsx("div", {
|
82
|
+
className: "table-input",
|
83
|
+
children: tableInput.map((grp, row) => grp.map(({
|
84
|
+
column,
|
85
|
+
bg
|
86
|
+
}, col) => /*#__PURE__*/_jsx("div", {
|
87
|
+
onClick: () => handleInsert(),
|
88
|
+
onMouseOver: () => setTableData({
|
89
|
+
row: row + 1,
|
90
|
+
column: column + 1
|
91
|
+
}),
|
92
|
+
className: "table-unit",
|
93
|
+
style: {
|
94
|
+
border: `1px solid ${bg}`
|
95
|
+
}
|
96
|
+
}, row + col)))
|
97
|
+
})]
|
98
|
+
})]
|
99
|
+
});
|
92
100
|
};
|
93
101
|
export default TableSelector;
|
@@ -5,6 +5,8 @@ import "./styles.css";
|
|
5
5
|
import { TableUtil } from "../../utils/table";
|
6
6
|
import { Transforms } from "slate";
|
7
7
|
import { ReactEditor } from "slate-react";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
10
|
const TableContextMenu = props => {
|
9
11
|
const {
|
10
12
|
editor
|
@@ -70,22 +72,25 @@ const TableContextMenu = props => {
|
|
70
72
|
}
|
71
73
|
ReactEditor.focus(editor);
|
72
74
|
};
|
73
|
-
return showMenu && /*#__PURE__*/
|
75
|
+
return showMenu && /*#__PURE__*/_jsx("div", {
|
74
76
|
className: "contextMenu",
|
75
77
|
style: {
|
76
78
|
top,
|
77
79
|
left
|
78
|
-
}
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
80
|
+
},
|
81
|
+
children: menu.map(({
|
82
|
+
icon,
|
83
|
+
text,
|
84
|
+
action
|
85
|
+
}, index) => /*#__PURE__*/_jsxs("div", {
|
86
|
+
className: "menuOption",
|
87
|
+
onClick: () => handleInsert(action),
|
88
|
+
children: [/*#__PURE__*/_jsx(Icon, {
|
89
|
+
icon: icon
|
90
|
+
}), /*#__PURE__*/_jsx("span", {
|
91
|
+
children: text
|
92
|
+
})]
|
93
|
+
}, index))
|
94
|
+
});
|
90
95
|
};
|
91
96
|
export default TableContextMenu;
|
@@ -1,6 +1,7 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React, { useRef } from "react";
|
3
2
|
import { useRemoteCursorOverlayPositions } from "@slate-yjs/react";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
5
|
function Caret({
|
5
6
|
caretPosition,
|
6
7
|
data
|
@@ -13,21 +14,23 @@ function Caret({
|
|
13
14
|
transform: "translateY(-100%)",
|
14
15
|
background: data?.color || "#d33d3db5"
|
15
16
|
};
|
16
|
-
return /*#__PURE__*/
|
17
|
+
return /*#__PURE__*/_jsx("div", {
|
17
18
|
style: {
|
18
19
|
...caretStyle,
|
19
20
|
position: "absolute",
|
20
21
|
width: "0.5px"
|
21
|
-
}
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
22
|
+
},
|
23
|
+
children: /*#__PURE__*/_jsx("div", {
|
24
|
+
style: {
|
25
|
+
position: "absolute",
|
26
|
+
color: "#FFF",
|
27
|
+
whiteSpace: "nowrap",
|
28
|
+
top: 0,
|
29
|
+
...labelStyle
|
30
|
+
},
|
31
|
+
children: data?.name
|
32
|
+
})
|
33
|
+
});
|
31
34
|
}
|
32
35
|
function RemoteSelection({
|
33
36
|
data,
|
@@ -40,20 +43,20 @@ function RemoteSelection({
|
|
40
43
|
const selectionStyle = {
|
41
44
|
backgroundColor: data.color
|
42
45
|
};
|
43
|
-
return /*#__PURE__*/
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
})
|
46
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
47
|
+
children: [selectionRects.map((position, i) => /*#__PURE__*/_jsx("div", {
|
48
|
+
style: {
|
49
|
+
...selectionStyle,
|
50
|
+
...position,
|
51
|
+
position: "absolute",
|
52
|
+
pointerEvents: "none"
|
53
|
+
}
|
54
|
+
// eslint-disable-next-line react/no-array-index-key
|
55
|
+
}, i)), caretPosition && /*#__PURE__*/_jsx(Caret, {
|
56
|
+
caretPosition: caretPosition,
|
57
|
+
data: data
|
58
|
+
})]
|
59
|
+
});
|
57
60
|
}
|
58
61
|
export function RemoteCursorOverlay({
|
59
62
|
className,
|
@@ -63,13 +66,14 @@ export function RemoteCursorOverlay({
|
|
63
66
|
const [cursors] = useRemoteCursorOverlayPositions({
|
64
67
|
containerRef
|
65
68
|
});
|
66
|
-
return /*#__PURE__*/
|
69
|
+
return /*#__PURE__*/_jsxs("div", {
|
67
70
|
className: `${className}`,
|
68
71
|
style: {
|
69
72
|
position: "relative"
|
70
73
|
},
|
71
|
-
ref: containerRef
|
72
|
-
|
73
|
-
|
74
|
-
|
74
|
+
ref: containerRef,
|
75
|
+
children: [children, cursors.map(cursor => /*#__PURE__*/_jsx(RemoteSelection, {
|
76
|
+
...cursor
|
77
|
+
}, cursor.clientId))]
|
78
|
+
});
|
75
79
|
}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React, { useEffect, useState } from "react";
|
3
2
|
import { useSlate } from "slate-react";
|
4
3
|
import Button from "../common/Button";
|
@@ -18,6 +17,8 @@ import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
|
|
18
17
|
import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
|
19
18
|
import GridButton from "../Elements/Grid/GridButton";
|
20
19
|
import NewLineButton from "../Elements/NewLine/NewLineButton";
|
20
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
21
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
22
|
const Toolbar = props => {
|
22
23
|
const {
|
23
24
|
handleCodeToText
|
@@ -40,42 +41,45 @@ const Toolbar = props => {
|
|
40
41
|
const BlockButton = ({
|
41
42
|
format
|
42
43
|
}) => {
|
43
|
-
return /*#__PURE__*/
|
44
|
+
return /*#__PURE__*/_jsx(Button, {
|
44
45
|
active: isBlockActive(editor, format),
|
45
46
|
format: format,
|
46
47
|
onMouseDown: e => {
|
47
48
|
e.preventDefault();
|
48
49
|
toggleBlock(editor, format);
|
49
|
-
}
|
50
|
-
|
51
|
-
|
52
|
-
|
50
|
+
},
|
51
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
52
|
+
icon: format
|
53
|
+
})
|
54
|
+
});
|
53
55
|
};
|
54
56
|
const MarkButton = ({
|
55
57
|
format
|
56
58
|
}) => {
|
57
|
-
return /*#__PURE__*/
|
59
|
+
return /*#__PURE__*/_jsx(Button, {
|
58
60
|
active: isMarkActive(editor, format),
|
59
61
|
format: format,
|
60
62
|
onMouseDown: e => {
|
61
63
|
e.preventDefault();
|
62
64
|
toggleMark(editor, format);
|
63
|
-
}
|
64
|
-
|
65
|
-
|
66
|
-
|
65
|
+
},
|
66
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
67
|
+
icon: format
|
68
|
+
})
|
69
|
+
});
|
67
70
|
};
|
68
71
|
const Dropdown = ({
|
69
72
|
format,
|
70
73
|
options
|
71
74
|
}) => {
|
72
|
-
return /*#__PURE__*/
|
75
|
+
return /*#__PURE__*/_jsx("select", {
|
73
76
|
value: activeMark(editor, format),
|
74
|
-
onChange: e => changeMarkData(e, format)
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
77
|
+
onChange: e => changeMarkData(e, format),
|
78
|
+
children: options.map((item, index) => /*#__PURE__*/_jsx("option", {
|
79
|
+
value: item.value,
|
80
|
+
children: item.text
|
81
|
+
}, index))
|
82
|
+
});
|
79
83
|
};
|
80
84
|
const changeMarkData = (event, format) => {
|
81
85
|
event.preventDefault();
|
@@ -85,82 +89,74 @@ const Toolbar = props => {
|
|
85
89
|
value
|
86
90
|
});
|
87
91
|
};
|
88
|
-
return /*#__PURE__*/
|
89
|
-
className: "toolbar"
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
return null;
|
158
|
-
}
|
159
|
-
}))), /*#__PURE__*/React.createElement(TableContextMenu, {
|
160
|
-
editor: editor
|
161
|
-
}), /*#__PURE__*/React.createElement(HtmlContextMenu, {
|
162
|
-
editor: editor,
|
163
|
-
handleCodeToText: handleCodeToText
|
164
|
-
}));
|
92
|
+
return /*#__PURE__*/_jsxs("div", {
|
93
|
+
className: "toolbar",
|
94
|
+
children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
|
95
|
+
className: "toolbar-grp",
|
96
|
+
children: group.map((element, gi) => {
|
97
|
+
switch (element.type) {
|
98
|
+
case "block":
|
99
|
+
return /*#__PURE__*/_jsx(BlockButton, {
|
100
|
+
...element
|
101
|
+
}, element.id);
|
102
|
+
case "mark":
|
103
|
+
return /*#__PURE__*/_jsx(MarkButton, {
|
104
|
+
...element
|
105
|
+
}, element.id);
|
106
|
+
case "dropdown":
|
107
|
+
return /*#__PURE__*/_jsx(Dropdown, {
|
108
|
+
...element
|
109
|
+
}, element.id);
|
110
|
+
case "link":
|
111
|
+
return /*#__PURE__*/_jsx(LinkButton, {
|
112
|
+
active: isBlockActive(editor, "link"),
|
113
|
+
editor: editor
|
114
|
+
}, element.id);
|
115
|
+
case "embed":
|
116
|
+
return /*#__PURE__*/_jsx(Embed, {
|
117
|
+
format: element.format,
|
118
|
+
editor: editor
|
119
|
+
}, element.id);
|
120
|
+
case "color-picker":
|
121
|
+
return /*#__PURE__*/_jsx(ColorPicker, {
|
122
|
+
activeMark: activeMark,
|
123
|
+
format: element.format,
|
124
|
+
editor: editor
|
125
|
+
}, element.id);
|
126
|
+
case "table":
|
127
|
+
return /*#__PURE__*/_jsx(TableSelector, {
|
128
|
+
editor: editor
|
129
|
+
}, element.id);
|
130
|
+
case "id":
|
131
|
+
return /*#__PURE__*/_jsx(Id, {
|
132
|
+
editor: editor
|
133
|
+
}, `gi_id_${gi}`);
|
134
|
+
case "equation":
|
135
|
+
return /*#__PURE__*/_jsx(EquationButton, {
|
136
|
+
editor: editor
|
137
|
+
}, `gi_equation_${gi}`);
|
138
|
+
case "codeToText":
|
139
|
+
return /*#__PURE__*/_jsx(CodeToTextButton, {
|
140
|
+
handleButtonClick: handleCodeToText
|
141
|
+
}, `gi_codeToText_${gi}`);
|
142
|
+
case "grid":
|
143
|
+
return /*#__PURE__*/_jsx(GridButton, {
|
144
|
+
editor: editor
|
145
|
+
}, element.id);
|
146
|
+
case "newLine":
|
147
|
+
return /*#__PURE__*/_jsx(NewLineButton, {
|
148
|
+
editor: editor
|
149
|
+
}, element.id);
|
150
|
+
default:
|
151
|
+
return null;
|
152
|
+
}
|
153
|
+
})
|
154
|
+
}, index)), /*#__PURE__*/_jsx(TableContextMenu, {
|
155
|
+
editor: editor
|
156
|
+
}), /*#__PURE__*/_jsx(HtmlContextMenu, {
|
157
|
+
editor: editor,
|
158
|
+
handleCodeToText: handleCodeToText
|
159
|
+
})]
|
160
|
+
});
|
165
161
|
};
|
166
162
|
export default Toolbar;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React from 'react';
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
const Button = props => {
|
4
4
|
const {
|
5
5
|
children,
|
@@ -7,15 +7,16 @@ const Button = props => {
|
|
7
7
|
active,
|
8
8
|
...rest
|
9
9
|
} = props;
|
10
|
-
return /*#__PURE__*/
|
10
|
+
return /*#__PURE__*/_jsx("button", {
|
11
11
|
className: active ? 'btnActive' : '',
|
12
|
-
title: format
|
13
|
-
|
12
|
+
title: format,
|
13
|
+
...rest,
|
14
14
|
style: {
|
15
15
|
width: '30px',
|
16
16
|
height: '20px',
|
17
17
|
margin: '0 2px'
|
18
|
-
}
|
19
|
-
|
18
|
+
},
|
19
|
+
children: children
|
20
|
+
});
|
20
21
|
};
|
21
22
|
export default Button;
|