@monolith-forensics/monolith-ui 1.2.74 → 1.2.76
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/CheckBox/CheckBox.js +6 -4
- package/dist/DropDownMenu/components/MenuItem.js +0 -12
- package/dist/DropDownMenu/components/MenuItemList.js +1 -1
- package/dist/QueryFilter/DefaultOperators.d.ts +2 -2
- package/dist/QueryFilter/DefaultOperators.js +2 -2
- package/dist/QueryFilter/index.d.ts +1 -1
- package/dist/QueryFilter/index.js +1 -1
- package/dist/QueryFilter/{useFilterDefinitions.d.ts → useFilterHelper.d.ts} +3 -3
- package/dist/QueryFilter/{useFilterDefinitions.js → useFilterHelper.js} +2 -2
- package/dist/RichTextEditor/Components/BubbleMenu.d.ts +2 -2
- package/dist/RichTextEditor/Components/BubbleMenu.js +29 -26
- package/dist/RichTextEditor/Components/ColorPicker.d.ts +4 -0
- package/dist/RichTextEditor/Components/ColorPicker.js +37 -0
- package/dist/RichTextEditor/Components/index.d.ts +1 -0
- package/dist/RichTextEditor/Components/index.js +1 -0
- package/dist/RichTextEditor/RichTextEditor.js +0 -4
- package/dist/RichTextEditor/Toolbar/Toolbar.js +10 -14
- package/dist/Table/TableMenu/TableMenu.js +2 -2
- package/package.json +1 -1
- package/dist/RichTextEditor/Components/DefaultColorIcon.d.ts +0 -4
- package/dist/RichTextEditor/Components/DefaultColorIcon.js +0 -7
|
@@ -24,16 +24,18 @@ const CheckBox = styled(({ className, defaultValue = false, value, partialCheck
|
|
|
24
24
|
color: ${(props) => props.theme.palette.primary.main};
|
|
25
25
|
font-size: ${({ size }) => {
|
|
26
26
|
switch (size) {
|
|
27
|
-
case "
|
|
27
|
+
case "xxs":
|
|
28
28
|
return "12px";
|
|
29
|
+
case "xs":
|
|
30
|
+
return "14px";
|
|
29
31
|
case "sm":
|
|
30
32
|
return "16px";
|
|
31
33
|
case "md":
|
|
32
|
-
return "
|
|
34
|
+
return "18px";
|
|
33
35
|
case "lg":
|
|
34
|
-
return "
|
|
36
|
+
return "20px";
|
|
35
37
|
default:
|
|
36
|
-
return "
|
|
38
|
+
return "14px";
|
|
37
39
|
}
|
|
38
40
|
}};
|
|
39
41
|
}
|
|
@@ -62,18 +62,6 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
|
|
|
62
62
|
font-weight: normal;
|
|
63
63
|
letter-spacing: normal;
|
|
64
64
|
|
|
65
|
-
font-size: ${({ size }) => size === "xs"
|
|
66
|
-
? "11px"
|
|
67
|
-
: size === "sm"
|
|
68
|
-
? "13px"
|
|
69
|
-
: size === "md"
|
|
70
|
-
? "15px"
|
|
71
|
-
: size === "lg"
|
|
72
|
-
? "17px"
|
|
73
|
-
: size === "xl"
|
|
74
|
-
? "19px"
|
|
75
|
-
: "11px"};
|
|
76
|
-
|
|
77
65
|
padding: ${({ size }) => size === "xs"
|
|
78
66
|
? "2px 8px"
|
|
79
67
|
: size === "sm"
|
|
@@ -72,7 +72,7 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
|
|
|
72
72
|
const item = (data === null || data === void 0 ? void 0 : data[index]) || {};
|
|
73
73
|
const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item));
|
|
74
74
|
if (item.items) {
|
|
75
|
-
return _jsx(DropDownMenu, { data: item.items, children: item.label });
|
|
75
|
+
return (_jsx(DropDownMenu, { data: item.items, size: size, children: item.label }));
|
|
76
76
|
}
|
|
77
77
|
return (_jsxs(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, leftSection: multiselect && (_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
|
|
78
78
|
var _a;
|
|
@@ -11,8 +11,8 @@ export const Operators = {
|
|
|
11
11
|
DoesNotContain: { value: "doesNotContain", label: "does not contain" },
|
|
12
12
|
DoesNotBeginWith: { value: "doesNotBeginWith", label: "does not begin with" },
|
|
13
13
|
DoesNotEndWith: { value: "doesNotEndWith", label: "does not end with" },
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
IsEmpty: { value: "isEmpty", label: "is empty" },
|
|
15
|
+
IsNotEmpty: { value: "isNotEmpty", label: "is not empty" },
|
|
16
16
|
In: { value: "in", label: "is any of" },
|
|
17
17
|
NIn: { value: "nin", label: "is none of" },
|
|
18
18
|
Between: { value: "between", label: "between" },
|
|
@@ -11,10 +11,10 @@ type FilterDefinitionOverride = Partial<Omit<FilterDefinition, "query" | "dataFi
|
|
|
11
11
|
queryKey?: UseQueryOptions["queryKey"];
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
|
-
export interface
|
|
14
|
+
export interface UseFilterHelperParams {
|
|
15
15
|
filterDef: FilterDefinition[];
|
|
16
16
|
overrides?: FilterDefinitionOverride[];
|
|
17
17
|
}
|
|
18
|
-
export type
|
|
19
|
-
export declare
|
|
18
|
+
export type UseFilterHelperType = (p: UseFilterHelperParams) => FilterDefinition[];
|
|
19
|
+
export declare const useFilterHelper: UseFilterHelperType;
|
|
20
20
|
export {};
|
|
@@ -31,7 +31,7 @@ const mergeOverrides = (filterDef, overrides) => {
|
|
|
31
31
|
return Object.assign(Object.assign({}, f), rest);
|
|
32
32
|
});
|
|
33
33
|
};
|
|
34
|
-
export
|
|
34
|
+
export const useFilterHelper = ({ filterDef, overrides, }) => {
|
|
35
35
|
let _filterDef = filterDef;
|
|
36
36
|
if (!!overrides) {
|
|
37
37
|
_filterDef = mergeOverrides(filterDef, overrides);
|
|
@@ -58,4 +58,4 @@ export function useFilterDefinitions({ filterDef, overrides, }) {
|
|
|
58
58
|
filterDef[index].selectOptions = (_a = result[i]) === null || _a === void 0 ? void 0 : _a.data;
|
|
59
59
|
});
|
|
60
60
|
return filterDef;
|
|
61
|
-
}
|
|
61
|
+
};
|
|
@@ -26,7 +26,7 @@ export type BubbleItem = {
|
|
|
26
26
|
isActive?: (editor: Editor) => boolean;
|
|
27
27
|
buttonRender?: (props: any) => ReactElement;
|
|
28
28
|
buttonProps?: ButtonProps;
|
|
29
|
-
dropDownProps?: DropDownMenuProps
|
|
29
|
+
dropDownProps?: Partial<DropDownMenuProps>;
|
|
30
30
|
onClick?: (editor: Editor) => void;
|
|
31
31
|
} | {
|
|
32
32
|
name: Extensions | string;
|
|
@@ -36,7 +36,7 @@ export type BubbleItem = {
|
|
|
36
36
|
arrow?: boolean;
|
|
37
37
|
isActive?: (editor: Editor) => boolean;
|
|
38
38
|
buttonRender?: (props: any) => ReactElement;
|
|
39
|
-
buttonProps?: ButtonProps
|
|
39
|
+
buttonProps?: Partial<ButtonProps>;
|
|
40
40
|
onClick?: (editor: Editor) => void;
|
|
41
41
|
};
|
|
42
42
|
declare const BubbleMenu: React.FC<BubbleMenuProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import styled from "styled-components";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled, { useTheme } from "styled-components";
|
|
3
3
|
import Extensions from "../Enums/Extensions";
|
|
4
4
|
import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
|
|
5
5
|
import DropDownMenu from "../../DropDownMenu";
|
|
@@ -7,8 +7,7 @@ import { FloatingPortal, useFloating } from "@floating-ui/react";
|
|
|
7
7
|
import { useEffect, useRef } from "react";
|
|
8
8
|
import Button from "../../Button";
|
|
9
9
|
import TextColors from "../Enums/TextColors";
|
|
10
|
-
|
|
11
|
-
const getMenuItems = (editor, customMenuItems) => {
|
|
10
|
+
const getMenuItems = (editor, customMenuItems, theme) => {
|
|
12
11
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
13
12
|
const node = (_c = (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.parent;
|
|
14
13
|
const pos = (_e = (_d = editor === null || editor === void 0 ? void 0 : editor.state) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.$from;
|
|
@@ -60,8 +59,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
60
59
|
{
|
|
61
60
|
label: "Text",
|
|
62
61
|
value: "text",
|
|
63
|
-
leftSection: _jsx(CaseSensitiveIcon, { size: 16 }),
|
|
64
62
|
data: {
|
|
63
|
+
Icon: CaseSensitiveIcon,
|
|
65
64
|
command: (editor) => {
|
|
66
65
|
// remove ordered list
|
|
67
66
|
editor
|
|
@@ -76,8 +75,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
76
75
|
{
|
|
77
76
|
label: "Heading 1",
|
|
78
77
|
value: "heading_1",
|
|
79
|
-
leftSection: _jsx(Heading1Icon, { size: 16 }),
|
|
80
78
|
data: {
|
|
79
|
+
Icon: Heading1Icon,
|
|
81
80
|
command: (editor) => {
|
|
82
81
|
editor.chain().focus().setHeading({ level: 1 }).run();
|
|
83
82
|
},
|
|
@@ -86,8 +85,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
86
85
|
{
|
|
87
86
|
label: "Heading 2",
|
|
88
87
|
value: "heading_2",
|
|
89
|
-
leftSection: _jsx(Heading2Icon, { size: 16 }),
|
|
90
88
|
data: {
|
|
89
|
+
Icon: Heading2Icon,
|
|
91
90
|
command: (editor) => {
|
|
92
91
|
editor.chain().focus().setHeading({ level: 2 }).run();
|
|
93
92
|
},
|
|
@@ -96,8 +95,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
96
95
|
{
|
|
97
96
|
label: "Heading 3",
|
|
98
97
|
value: "heading_3",
|
|
99
|
-
leftSection: _jsx(Heading3Icon, { size: 16 }),
|
|
100
98
|
data: {
|
|
99
|
+
Icon: Heading3Icon,
|
|
101
100
|
command: (editor) => {
|
|
102
101
|
editor.chain().focus().setHeading({ level: 3 }).run();
|
|
103
102
|
},
|
|
@@ -106,8 +105,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
106
105
|
{
|
|
107
106
|
label: "Heading 4",
|
|
108
107
|
value: "heading_4",
|
|
109
|
-
leftSection: _jsx(Heading4Icon, { size: 16 }),
|
|
110
108
|
data: {
|
|
109
|
+
Icon: Heading4Icon,
|
|
111
110
|
command: (editor) => {
|
|
112
111
|
editor.chain().focus().setHeading({ level: 4 }).run();
|
|
113
112
|
},
|
|
@@ -116,8 +115,8 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
116
115
|
{
|
|
117
116
|
label: "Bullet List",
|
|
118
117
|
value: "bullet_list",
|
|
119
|
-
leftSection: _jsx(ListIcon, { size: 16 }),
|
|
120
118
|
data: {
|
|
119
|
+
Icon: ListIcon,
|
|
121
120
|
command: (editor) => {
|
|
122
121
|
editor.chain().focus().toggleBulletList().run();
|
|
123
122
|
},
|
|
@@ -126,14 +125,17 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
126
125
|
{
|
|
127
126
|
label: "Ordered List",
|
|
128
127
|
value: "ordered_list",
|
|
129
|
-
leftSection: _jsx(ListOrderedIcon, { size: 16 }),
|
|
130
128
|
data: {
|
|
129
|
+
Icon: ListOrderedIcon,
|
|
131
130
|
command: (editor) => {
|
|
132
131
|
editor.chain().focus().toggleOrderedList().run();
|
|
133
132
|
},
|
|
134
133
|
},
|
|
135
134
|
},
|
|
136
135
|
],
|
|
136
|
+
dropDownProps: {
|
|
137
|
+
renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(item.data.Icon, { size: 16 }), item.label] })),
|
|
138
|
+
},
|
|
137
139
|
},
|
|
138
140
|
{
|
|
139
141
|
name: "color",
|
|
@@ -145,15 +147,11 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
145
147
|
style: { fontSize: 11, padding: "4px" },
|
|
146
148
|
},
|
|
147
149
|
items: [
|
|
148
|
-
// remove Color Style
|
|
149
150
|
{
|
|
150
151
|
label: "Default",
|
|
151
152
|
value: "default",
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
command: (editor) => {
|
|
155
|
-
editor.chain().focus().unsetColor().run();
|
|
156
|
-
},
|
|
153
|
+
onClick: () => {
|
|
154
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
|
|
157
155
|
},
|
|
158
156
|
},
|
|
159
157
|
...Object.keys(TextColors).map((color) => {
|
|
@@ -161,18 +159,22 @@ const getMenuItems = (editor, customMenuItems) => {
|
|
|
161
159
|
return {
|
|
162
160
|
label: color,
|
|
163
161
|
value: TextColors[colorKey],
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
borderRadius: "3px",
|
|
167
|
-
} })),
|
|
168
|
-
data: {
|
|
169
|
-
command: (editor) => {
|
|
170
|
-
editor.chain().focus().setColor(TextColors[colorKey]).run();
|
|
171
|
-
},
|
|
162
|
+
onClick: () => {
|
|
163
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
|
|
172
164
|
},
|
|
173
165
|
};
|
|
174
166
|
}),
|
|
175
167
|
],
|
|
168
|
+
dropDownProps: {
|
|
169
|
+
renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
|
|
170
|
+
? theme.palette.text.primary
|
|
171
|
+
: item.value, style: {
|
|
172
|
+
backgroundColor: item.value === "default"
|
|
173
|
+
? theme.palette.text.primary
|
|
174
|
+
: item.value,
|
|
175
|
+
borderRadius: "3px",
|
|
176
|
+
} }), item.label] })),
|
|
177
|
+
},
|
|
176
178
|
},
|
|
177
179
|
{
|
|
178
180
|
name: Extensions.Bold,
|
|
@@ -274,6 +276,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
|
|
|
274
276
|
var _a;
|
|
275
277
|
const menuRef = useRef(null);
|
|
276
278
|
const { refs, elements } = useFloating();
|
|
279
|
+
const theme = useTheme();
|
|
277
280
|
useEffect(() => {
|
|
278
281
|
if (open && onOpen) {
|
|
279
282
|
onOpen(elements.floating);
|
|
@@ -301,7 +304,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
|
|
|
301
304
|
}, style: {
|
|
302
305
|
top,
|
|
303
306
|
left,
|
|
304
|
-
}, children: getMenuItems(editor, customMenuItems).map((item) => {
|
|
307
|
+
}, children: getMenuItems(editor, customMenuItems, theme).map((item) => {
|
|
305
308
|
var _a;
|
|
306
309
|
if (item.type === "button") {
|
|
307
310
|
const isActive = (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, editor);
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import DropDownMenu from "../../DropDownMenu";
|
|
3
|
+
import TextColors from "../Enums/TextColors";
|
|
4
|
+
import { SquircleIcon } from "lucide-react";
|
|
5
|
+
import { useTheme } from "styled-components";
|
|
6
|
+
export const ColorPicker = ({ editor }) => {
|
|
7
|
+
const theme = useTheme();
|
|
8
|
+
return (_jsx(DropDownMenu, { data: [
|
|
9
|
+
{
|
|
10
|
+
label: "Default",
|
|
11
|
+
value: "default",
|
|
12
|
+
onClick: () => {
|
|
13
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
...Object.keys(TextColors).map((color) => {
|
|
17
|
+
const colorKey = color;
|
|
18
|
+
return {
|
|
19
|
+
label: color,
|
|
20
|
+
value: TextColors[colorKey],
|
|
21
|
+
onClick: () => {
|
|
22
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
}),
|
|
26
|
+
], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default" ? theme.palette.text.primary : item.value, style: {
|
|
27
|
+
backgroundColor: item.value === "default"
|
|
28
|
+
? theme.palette.text.primary
|
|
29
|
+
: item.value,
|
|
30
|
+
borderRadius: "3px",
|
|
31
|
+
} }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
|
|
32
|
+
style: {
|
|
33
|
+
fontWeight: "normal",
|
|
34
|
+
},
|
|
35
|
+
title: "Select Color",
|
|
36
|
+
}, children: "Color" }));
|
|
37
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./ColorPicker";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./ColorPicker";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled from "styled-components";
|
|
2
|
+
import styled, { useTheme } from "styled-components";
|
|
3
3
|
import ControlsGroup from "./ControlsGroup";
|
|
4
4
|
import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
|
|
5
5
|
import Controls from "../Enums/Controls";
|
|
@@ -9,10 +9,10 @@ import { useContext } from "react";
|
|
|
9
9
|
import RichTextEditorContext from "../Contexts/RichTextEditorContext";
|
|
10
10
|
import Button from "../../Button";
|
|
11
11
|
import TextColors from "../Enums/TextColors";
|
|
12
|
-
import DefaultColorIcon from "../Components/DefaultColorIcon";
|
|
13
12
|
import { SquircleIcon } from "lucide-react";
|
|
14
13
|
const Toolbar = styled(({ className, editor, toolbarOptions }) => {
|
|
15
14
|
var _a;
|
|
15
|
+
const theme = useTheme();
|
|
16
16
|
const { controls } = toolbarOptions || {};
|
|
17
17
|
const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
|
|
18
18
|
(control.type === "menu" || control.type === "button"));
|
|
@@ -32,15 +32,11 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
|
|
|
32
32
|
setFont(font);
|
|
33
33
|
},
|
|
34
34
|
})), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
|
|
35
|
-
style: {
|
|
36
|
-
fontWeight: "normal",
|
|
37
|
-
},
|
|
38
35
|
title: "Select Font",
|
|
39
36
|
}, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
|
|
40
37
|
{
|
|
41
38
|
label: "Default",
|
|
42
39
|
value: "default",
|
|
43
|
-
leftSection: _jsx(DefaultColorIcon, { size: 12 }),
|
|
44
40
|
onClick: () => {
|
|
45
41
|
editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
|
|
46
42
|
},
|
|
@@ -50,19 +46,19 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
|
|
|
50
46
|
return {
|
|
51
47
|
label: color,
|
|
52
48
|
value: TextColors[colorKey],
|
|
53
|
-
leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
|
|
54
|
-
backgroundColor: TextColors[colorKey],
|
|
55
|
-
borderRadius: "3px",
|
|
56
|
-
} })),
|
|
57
49
|
onClick: () => {
|
|
58
50
|
editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
|
|
59
51
|
},
|
|
60
52
|
};
|
|
61
53
|
}),
|
|
62
|
-
],
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
|
|
55
|
+
? theme.palette.text.primary
|
|
56
|
+
: item.value, style: {
|
|
57
|
+
backgroundColor: item.value === "default"
|
|
58
|
+
? theme.palette.text.primary
|
|
59
|
+
: item.value,
|
|
60
|
+
borderRadius: "3px",
|
|
61
|
+
} }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
|
|
66
62
|
title: "Select Color",
|
|
67
63
|
}, children: "Color" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
|
|
68
64
|
}) `
|
|
@@ -59,7 +59,7 @@ const TableMenu = () => {
|
|
|
59
59
|
label: item.label,
|
|
60
60
|
});
|
|
61
61
|
};
|
|
62
|
-
return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "
|
|
62
|
+
return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
|
|
63
63
|
label: filter.label,
|
|
64
64
|
value: filter.dataField,
|
|
65
65
|
data: filter,
|
|
@@ -99,7 +99,7 @@ const TableMenu = () => {
|
|
|
99
99
|
value: col.dataField,
|
|
100
100
|
})), multiselect: true, searchable: true, buttonProps: {
|
|
101
101
|
title: "Show/Hide Columns",
|
|
102
|
-
size: "
|
|
102
|
+
size: "xs",
|
|
103
103
|
style: { padding: "0px 4px" },
|
|
104
104
|
}, dropDownProps: {
|
|
105
105
|
style: { width: 175, maxWidth: 400 },
|
package/package.json
CHANGED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
declare const DefaultColorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
|
|
2
|
-
ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
|
|
3
|
-
}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
|
|
4
|
-
export default DefaultColorIcon;
|