@quillsql/react 2.11.3 → 2.11.4
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/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.js +5 -3
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +22 -6
- package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.js +6 -4
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +22 -6
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAiML"}
|
|
@@ -5,7 +5,9 @@ const react_1 = require("react");
|
|
|
5
5
|
const core_1 = require("@dnd-kit/core");
|
|
6
6
|
const sortable_1 = require("@dnd-kit/sortable");
|
|
7
7
|
const utilities_1 = require("@dnd-kit/utilities");
|
|
8
|
+
const Context_1 = require("../../Context");
|
|
8
9
|
function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
|
|
10
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
9
11
|
const [search, setSearch] = (0, react_1.useState)('');
|
|
10
12
|
const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
|
|
11
13
|
coordinateGetter: sortable_1.sortableKeyboardCoordinates,
|
|
@@ -52,8 +54,8 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
|
|
|
52
54
|
overflowY: 'auto',
|
|
53
55
|
maxWidth: '300px',
|
|
54
56
|
}, children: [searchResults.map((value) => {
|
|
55
|
-
return ((0, jsx_runtime_1.jsx)(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
|
|
56
|
-
}), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)("div", { children: "No results found" }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(SortableItem, { theme: theme, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
|
|
58
|
+
}), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
57
59
|
display: 'flex',
|
|
58
60
|
width: '100%',
|
|
59
61
|
flexDirection: 'row',
|
|
@@ -106,7 +108,7 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
|
|
|
106
108
|
}, children: "Save" })] })] }));
|
|
107
109
|
}
|
|
108
110
|
exports.default = AddColumnPopover;
|
|
109
|
-
const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, HandleButton, }) => {
|
|
111
|
+
const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
|
|
110
112
|
const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: id });
|
|
111
113
|
const style = {
|
|
112
114
|
transform: utilities_1.CSS.Transform.toString(transform),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAkDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
|
|
@@ -152,6 +152,7 @@ const QuillSelect = ({ onChange, ...props }) => {
|
|
|
152
152
|
exports.QuillSelect = QuillSelect;
|
|
153
153
|
function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
|
|
154
154
|
const modalRef = (0, react_1.useRef)(null);
|
|
155
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
155
156
|
(0, react_1.useEffect)(() => {
|
|
156
157
|
const listener = (event) => {
|
|
157
158
|
if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
|
|
@@ -164,10 +165,12 @@ function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
|
|
|
164
165
|
};
|
|
165
166
|
}, [modalRef, onClose]);
|
|
166
167
|
return ((0, jsx_runtime_1.jsxs)("div", { children: [trigger, isOpen && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
167
|
-
background: 'white',
|
|
168
|
+
background: theme?.backgroundColor || 'white',
|
|
168
169
|
position: 'absolute',
|
|
169
170
|
boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
|
|
170
|
-
border:
|
|
171
|
+
border: theme
|
|
172
|
+
? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#e7e7e7'}`
|
|
173
|
+
: '1px solid #e7e7e7',
|
|
171
174
|
boxSizing: 'content-box',
|
|
172
175
|
zIndex: 999,
|
|
173
176
|
top: 12,
|
|
@@ -179,16 +182,20 @@ function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
|
|
|
179
182
|
}
|
|
180
183
|
exports.MemoizedPopover = MemoizedPopover;
|
|
181
184
|
exports.QuillPopover = (0, react_1.forwardRef)(({ children, trigger, isOpen, onClose = () => { }, title = undefined }, ref) => {
|
|
185
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
182
186
|
return ((0, jsx_runtime_1.jsxs)(MemoizedPopover, { isOpen: isOpen, onClose: onClose, trigger: trigger, parentRef: ref, ref: ref, children: [title && ((0, jsx_runtime_1.jsx)("h1", { style: {
|
|
183
187
|
fontWeight: '600',
|
|
184
188
|
fontSize: 18,
|
|
185
189
|
margin: 0,
|
|
186
190
|
textAlign: 'left',
|
|
187
191
|
paddingBottom: 12,
|
|
192
|
+
color: theme?.primaryTextColor,
|
|
193
|
+
fontFamily: theme?.fontFamily,
|
|
188
194
|
}, children: title })), children] }));
|
|
189
195
|
});
|
|
190
196
|
// The six-dot grab-handle icon.
|
|
191
197
|
const QuillHandleButton = () => {
|
|
198
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
192
199
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
193
200
|
display: 'flex',
|
|
194
201
|
gap: 2,
|
|
@@ -242,7 +249,7 @@ const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
|
|
|
242
249
|
borderRadius: 4,
|
|
243
250
|
display: 'flex',
|
|
244
251
|
alignItems: 'center',
|
|
245
|
-
backgroundColor: 'white',
|
|
252
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
246
253
|
}, children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (0, jsx_runtime_1.jsxs)("label", { style: {
|
|
247
254
|
display: 'flex',
|
|
248
255
|
gap: 2,
|
|
@@ -255,6 +262,8 @@ const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
|
|
|
255
262
|
whiteSpace: 'nowrap',
|
|
256
263
|
textOverflow: 'ellipsis',
|
|
257
264
|
overflow: 'hidden',
|
|
265
|
+
fontFamily: theme?.fontFamily,
|
|
266
|
+
color: theme?.primaryTextColor,
|
|
258
267
|
}, children: label })] })] }));
|
|
259
268
|
};
|
|
260
269
|
exports.QuillSelectColumn = QuillSelectColumn;
|
|
@@ -267,7 +276,7 @@ const QuillDraggableColumn = ({ label, children, onDelete }) => {
|
|
|
267
276
|
borderRadius: 6,
|
|
268
277
|
display: 'flex',
|
|
269
278
|
alignItems: 'center',
|
|
270
|
-
backgroundColor: 'white',
|
|
279
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
271
280
|
}, children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
272
281
|
marginLeft: 2,
|
|
273
282
|
marginRight: 'auto',
|
|
@@ -275,8 +284,15 @@ const QuillDraggableColumn = ({ label, children, onDelete }) => {
|
|
|
275
284
|
display: 'block',
|
|
276
285
|
whiteSpace: 'nowrap',
|
|
277
286
|
textOverflow: 'ellipsis',
|
|
278
|
-
fontFamily: theme
|
|
279
|
-
}, children: label }), (0, jsx_runtime_1.jsx)("button", { onClick: onDelete, style: {
|
|
287
|
+
fontFamily: theme?.fontFamily,
|
|
288
|
+
}, children: label }), (0, jsx_runtime_1.jsx)("button", { onClick: onDelete, style: {
|
|
289
|
+
paddingRight: 8,
|
|
290
|
+
margin: -4,
|
|
291
|
+
fontFamily: theme?.fontFamily,
|
|
292
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
293
|
+
border: 'none',
|
|
294
|
+
outline: 'none',
|
|
295
|
+
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
|
|
280
296
|
};
|
|
281
297
|
exports.QuillDraggableColumn = QuillDraggableColumn;
|
|
282
298
|
// Three dots animated bouncing
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAiML"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useContext, useState } from 'react';
|
|
3
3
|
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
|
|
4
4
|
import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
|
|
5
5
|
import { CSS as DND_CSS } from '@dnd-kit/utilities';
|
|
6
|
+
import { ThemeContext } from '../../Context';
|
|
6
7
|
export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
|
|
8
|
+
const [theme] = useContext(ThemeContext);
|
|
7
9
|
const [search, setSearch] = useState('');
|
|
8
10
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
9
11
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
@@ -50,8 +52,8 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
|
|
|
50
52
|
overflowY: 'auto',
|
|
51
53
|
maxWidth: '300px',
|
|
52
54
|
}, children: [searchResults.map((value) => {
|
|
53
|
-
return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
|
|
54
|
-
}), search.length > 0 && searchResults.length === 0 && (_jsx("div", { children: "No results found" }))] }) }) }), _jsxs("div", { style: {
|
|
55
|
+
return (_jsx(SortableItem, { theme: theme, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
|
|
56
|
+
}), search.length > 0 && searchResults.length === 0 && (_jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), _jsxs("div", { style: {
|
|
55
57
|
display: 'flex',
|
|
56
58
|
width: '100%',
|
|
57
59
|
flexDirection: 'row',
|
|
@@ -103,7 +105,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
|
|
|
103
105
|
onSave();
|
|
104
106
|
}, children: "Save" })] })] }));
|
|
105
107
|
}
|
|
106
|
-
const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, HandleButton, }) => {
|
|
108
|
+
const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
|
|
107
109
|
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
|
|
108
110
|
const style = {
|
|
109
111
|
transform: DND_CSS.Transform.toString(transform),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAkDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
|
|
@@ -139,6 +139,7 @@ export const QuillSelect = ({ onChange, ...props }) => {
|
|
|
139
139
|
};
|
|
140
140
|
export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
|
|
141
141
|
const modalRef = useRef(null);
|
|
142
|
+
const [theme] = useContext(ThemeContext);
|
|
142
143
|
useEffect(() => {
|
|
143
144
|
const listener = (event) => {
|
|
144
145
|
if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
|
|
@@ -151,10 +152,12 @@ export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen
|
|
|
151
152
|
};
|
|
152
153
|
}, [modalRef, onClose]);
|
|
153
154
|
return (_jsxs("div", { children: [trigger, isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
|
|
154
|
-
background: 'white',
|
|
155
|
+
background: theme?.backgroundColor || 'white',
|
|
155
156
|
position: 'absolute',
|
|
156
157
|
boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
|
|
157
|
-
border:
|
|
158
|
+
border: theme
|
|
159
|
+
? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#e7e7e7'}`
|
|
160
|
+
: '1px solid #e7e7e7',
|
|
158
161
|
boxSizing: 'content-box',
|
|
159
162
|
zIndex: 999,
|
|
160
163
|
top: 12,
|
|
@@ -165,16 +168,20 @@ export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen
|
|
|
165
168
|
}, children: children }) }))] }));
|
|
166
169
|
}
|
|
167
170
|
export const QuillPopover = forwardRef(({ children, trigger, isOpen, onClose = () => { }, title = undefined }, ref) => {
|
|
171
|
+
const [theme] = useContext(ThemeContext);
|
|
168
172
|
return (_jsxs(MemoizedPopover, { isOpen: isOpen, onClose: onClose, trigger: trigger, parentRef: ref, ref: ref, children: [title && (_jsx("h1", { style: {
|
|
169
173
|
fontWeight: '600',
|
|
170
174
|
fontSize: 18,
|
|
171
175
|
margin: 0,
|
|
172
176
|
textAlign: 'left',
|
|
173
177
|
paddingBottom: 12,
|
|
178
|
+
color: theme?.primaryTextColor,
|
|
179
|
+
fontFamily: theme?.fontFamily,
|
|
174
180
|
}, children: title })), children] }));
|
|
175
181
|
});
|
|
176
182
|
// The six-dot grab-handle icon.
|
|
177
183
|
export const QuillHandleButton = () => {
|
|
184
|
+
const [theme] = useContext(ThemeContext);
|
|
178
185
|
return (_jsxs("div", { style: {
|
|
179
186
|
display: 'flex',
|
|
180
187
|
gap: 2,
|
|
@@ -227,7 +234,7 @@ export const QuillSelectColumn = ({ label, selected, setSelected, children, }) =
|
|
|
227
234
|
borderRadius: 4,
|
|
228
235
|
display: 'flex',
|
|
229
236
|
alignItems: 'center',
|
|
230
|
-
backgroundColor: 'white',
|
|
237
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
231
238
|
}, children: [_jsx("div", { children: children }), _jsxs("label", { style: {
|
|
232
239
|
display: 'flex',
|
|
233
240
|
gap: 2,
|
|
@@ -240,6 +247,8 @@ export const QuillSelectColumn = ({ label, selected, setSelected, children, }) =
|
|
|
240
247
|
whiteSpace: 'nowrap',
|
|
241
248
|
textOverflow: 'ellipsis',
|
|
242
249
|
overflow: 'hidden',
|
|
250
|
+
fontFamily: theme?.fontFamily,
|
|
251
|
+
color: theme?.primaryTextColor,
|
|
243
252
|
}, children: label })] })] }));
|
|
244
253
|
};
|
|
245
254
|
// A draggable card with a grab-handle and a column name
|
|
@@ -251,7 +260,7 @@ export const QuillDraggableColumn = ({ label, children, onDelete }) => {
|
|
|
251
260
|
borderRadius: 6,
|
|
252
261
|
display: 'flex',
|
|
253
262
|
alignItems: 'center',
|
|
254
|
-
backgroundColor: 'white',
|
|
263
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
255
264
|
}, children: [_jsx("div", { children: children }), _jsx("div", { style: {
|
|
256
265
|
marginLeft: 2,
|
|
257
266
|
marginRight: 'auto',
|
|
@@ -259,8 +268,15 @@ export const QuillDraggableColumn = ({ label, children, onDelete }) => {
|
|
|
259
268
|
display: 'block',
|
|
260
269
|
whiteSpace: 'nowrap',
|
|
261
270
|
textOverflow: 'ellipsis',
|
|
262
|
-
fontFamily: theme
|
|
263
|
-
}, children: label }), _jsx("button", { onClick: onDelete, style: {
|
|
271
|
+
fontFamily: theme?.fontFamily,
|
|
272
|
+
}, children: label }), _jsx("button", { onClick: onDelete, style: {
|
|
273
|
+
paddingRight: 8,
|
|
274
|
+
margin: -4,
|
|
275
|
+
fontFamily: theme?.fontFamily,
|
|
276
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
277
|
+
border: 'none',
|
|
278
|
+
outline: 'none',
|
|
279
|
+
}, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
|
|
264
280
|
};
|
|
265
281
|
// Three dots animated bouncing
|
|
266
282
|
export const QuillButtonLoadingState = () => {
|