@quillsql/react 2.8.5 → 2.8.6
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/AddToDashboardModal.js +146 -180
- package/dist/BarList.js +36 -43
- package/dist/Chart.js +99 -131
- package/dist/ChartBuilder.js +80 -88
- package/dist/ChartEditor.js +14 -20
- package/dist/Context.js +52 -56
- package/dist/Dashboard.d.ts.map +1 -1
- package/dist/Dashboard.js +246 -305
- package/dist/DateRangePicker/Calendar.js +41 -45
- package/dist/DateRangePicker/DateRangePicker.js +32 -60
- package/dist/DateRangePicker/DateRangePickerButton.js +14 -16
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts +6 -0
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
- package/dist/DateRangePicker/dateRangePickerUtils.js +89 -89
- package/dist/DateRangePicker/index.js +1 -8
- package/dist/PieChart.js +35 -69
- package/dist/QuillProvider.js +4 -6
- package/dist/ReportBuilder.js +120 -128
- package/dist/SQLEditor.js +56 -64
- package/dist/Table.d.ts +2 -1
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +64 -68
- package/dist/TableChart.js +17 -44
- package/dist/assets/ArrowDownHeadIcon.js +3 -5
- package/dist/assets/ArrowDownIcon.js +3 -5
- package/dist/assets/ArrowDownRightIcon.js +3 -5
- package/dist/assets/ArrowLeftHeadIcon.js +3 -5
- package/dist/assets/ArrowRightHeadIcon.js +3 -5
- package/dist/assets/ArrowRightIcon.js +3 -5
- package/dist/assets/ArrowUpHeadIcon.js +3 -5
- package/dist/assets/ArrowUpIcon.js +3 -5
- package/dist/assets/ArrowUpRightIcon.js +3 -5
- package/dist/assets/CalendarIcon.js +3 -5
- package/dist/assets/CalendarNormalIcon.js +3 -5
- package/dist/assets/DoubleArrowLeftHeadIcon.js +3 -5
- package/dist/assets/DoubleArrowRightHeadIcon.js +3 -5
- package/dist/assets/ExclamationFilledIcon.js +3 -5
- package/dist/assets/FilterIcon.js +3 -5
- package/dist/assets/LoadingSpinner.js +3 -5
- package/dist/assets/RefreshIcon.js +3 -5
- package/dist/assets/SearchIcon.js +3 -5
- package/dist/assets/UpLeftArrowsIcon.js +3 -5
- package/dist/assets/XCircleIcon.js +3 -5
- package/dist/assets/XIcon.js +3 -5
- package/dist/assets/index.js +21 -48
- package/dist/components/BigModal/BigModal.js +13 -38
- package/dist/components/Dropdown/Dropdown.js +24 -52
- package/dist/components/Dropdown/DropdownItem.js +9 -34
- package/dist/components/Dropdown/index.js +2 -10
- package/dist/components/Modal/Modal.js +13 -38
- package/dist/components/Modal/index.js +1 -8
- package/dist/components/QuillCard.js +8 -12
- package/dist/components/SqlTextEditor.d.ts +7 -0
- package/dist/components/SqlTextEditor.d.ts.map +1 -0
- package/dist/components/SqlTextEditor.js +14 -0
- package/dist/components/UiComponents.js +37 -50
- package/dist/components/selectUtils.js +6 -16
- package/dist/contexts/BaseColorContext.js +3 -5
- package/dist/contexts/HoveredValueContext.js +3 -5
- package/dist/contexts/RootStylesContext.js +3 -5
- package/dist/contexts/SelectedValueContext.js +3 -5
- package/dist/contexts/index.js +4 -14
- package/dist/hooks/index.js +4 -14
- package/dist/hooks/useDashboard.d.ts +7 -0
- package/dist/hooks/useDashboard.d.ts.map +1 -0
- package/dist/hooks/useDashboard.js +48 -0
- package/dist/hooks/useInternalState.js +3 -5
- package/dist/hooks/useOnClickOutside.js +3 -5
- package/dist/hooks/useOnWindowResize.js +4 -6
- package/dist/hooks/useQuill.js +11 -15
- package/dist/hooks/useSelectOnKeyDown.js +4 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -28
- package/dist/internals/ReportBuilder/PivotList.js +14 -19
- package/dist/internals/ReportBuilder/PivotModal.js +84 -91
- package/dist/internals/ReportBuilder/PivotModal.spec.js +70 -72
- package/dist/lib/font.js +2 -5
- package/dist/lib/index.js +3 -19
- package/dist/lib/inputTypes.js +1 -2
- package/dist/lib/utils.js +8 -18
- package/dist/utils/aggregate.js +28 -34
- package/dist/utils/colorToHex.js +1 -4
- package/dist/utils/dataFetcher.js +2 -7
- package/dist/utils/downloadCSV.js +1 -5
- package/package.json +2 -1
|
@@ -1,8 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var Modal_1 = require("./Modal");
|
|
8
|
-
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
|
|
1
|
+
export { default } from "./Modal";
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const assets_1 = require("../assets");
|
|
6
|
-
function QuillCard({ children, theme, onClick, isSelected = false, clickable = true, onClose, minHeight = 0, style = {}, }) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: clickable ? 'quill-card-hover' : '', style: {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { XIcon } from '../assets';
|
|
3
|
+
export function QuillCard({ children, theme, onClick, isSelected = false, clickable = true, onClose, minHeight = 0, style = {}, }) {
|
|
4
|
+
return (_jsxs("div", { className: clickable ? 'quill-card-hover' : '', style: {
|
|
8
5
|
backgroundColor: theme.backgroundColor || 'white',
|
|
9
6
|
cursor: clickable ? 'pointer' : 'default',
|
|
10
7
|
padding: 16,
|
|
@@ -17,7 +14,7 @@ function QuillCard({ children, theme, onClick, isSelected = false, clickable = t
|
|
|
17
14
|
position: 'relative',
|
|
18
15
|
minHeight: minHeight,
|
|
19
16
|
...style,
|
|
20
|
-
}, onClick: onClick, children: [(
|
|
17
|
+
}, onClick: onClick, children: [_jsx("style", { children: `
|
|
21
18
|
.quill-card-hover:hover {
|
|
22
19
|
background-color: #f9f9f9 !important;
|
|
23
20
|
.quill-delete-button {
|
|
@@ -27,7 +24,7 @@ function QuillCard({ children, theme, onClick, isSelected = false, clickable = t
|
|
|
27
24
|
background-color: #f5f5f5;
|
|
28
25
|
}
|
|
29
26
|
}
|
|
30
|
-
` }), onClose && ((
|
|
27
|
+
` }), onClose && (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: e => {
|
|
31
28
|
e.stopPropagation();
|
|
32
29
|
onClose();
|
|
33
30
|
}, style: {
|
|
@@ -45,12 +42,11 @@ function QuillCard({ children, theme, onClick, isSelected = false, clickable = t
|
|
|
45
42
|
justifyContent: 'center',
|
|
46
43
|
borderRadius: 6,
|
|
47
44
|
float: 'right',
|
|
48
|
-
}, children: [(
|
|
45
|
+
}, children: [_jsx("style", { children: `
|
|
49
46
|
.quill-delete-button {
|
|
50
47
|
background-color: white;
|
|
51
48
|
}
|
|
52
49
|
.quill-delete-button:hover {
|
|
53
50
|
background-color: rgba(56, 65, 81, 0.03);
|
|
54
|
-
}` }), (
|
|
51
|
+
}` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] })), _jsx("div", { style: { overflowX: 'scroll' }, children: children })] }));
|
|
55
52
|
}
|
|
56
|
-
exports.QuillCard = QuillCard;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export default function SqlTextEditor({ containerStyle, value, setValue, }: {
|
|
3
|
+
containerStyle?: CSSProperties;
|
|
4
|
+
value: string;
|
|
5
|
+
setValue: (e: string) => void;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=SqlTextEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SqlTextEditor.d.ts","sourceRoot":"","sources":["../../src/components/SqlTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,KAAK,EACL,QAAQ,GACT,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,2CAuBA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import MonacoEditor from '@monaco-editor/react';
|
|
3
|
+
export default function SqlTextEditor({ containerStyle, value, setValue, }) {
|
|
4
|
+
return (_jsx("div", { style: { ...containerStyle, padding: '10px 0px' }, children: _jsx(MonacoEditor, { height: "100px", defaultLanguage: "pgsql", defaultValue: "", value: value, loading: _jsx("div", {}), options: {
|
|
5
|
+
wordWrap: 'on',
|
|
6
|
+
minimap: {
|
|
7
|
+
enabled: false,
|
|
8
|
+
},
|
|
9
|
+
padding: { top: 16 },
|
|
10
|
+
}, onChange: (query) => {
|
|
11
|
+
console.log(query);
|
|
12
|
+
setValue(query);
|
|
13
|
+
} }) }));
|
|
14
|
+
}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MemoizedDeleteButton = exports.MemoizedModal = exports.MemoizedPopover = exports.MemoizedText = exports.MemoizedLabel = exports.MemoizedHeader = exports.MemoizedSelect = exports.MemoizedSecondaryButton = exports.MemoizedButton = exports.MemoizedTextInput = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
2
|
// @ts-nocheck
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
|
|
10
|
-
const [theme] =
|
|
11
|
-
return ((
|
|
3
|
+
import { useContext, useEffect, useRef } from 'react';
|
|
4
|
+
import { ArrowDownHeadIcon, XIcon } from '../assets';
|
|
5
|
+
import { ThemeContext } from '../Context';
|
|
6
|
+
export const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
|
|
7
|
+
const [theme] = useContext(ThemeContext);
|
|
8
|
+
return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("style", { children: `
|
|
12
9
|
.quill-text-input {
|
|
13
10
|
background-color: white;
|
|
14
11
|
height: 40px;
|
|
@@ -23,12 +20,11 @@ const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
|
|
|
23
20
|
padding-top: 0px;
|
|
24
21
|
padding-bottom: 0px;
|
|
25
22
|
box-sizing: content-box;
|
|
26
|
-
}` }), (
|
|
23
|
+
}` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: event => onChange(event.target.value), placeholder: placeholder, style: { fontFamily: theme?.fontFamily } })] }));
|
|
27
24
|
};
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
25
|
+
export const MemoizedButton = ({ label, onClick, primary = true }) => {
|
|
26
|
+
const [theme] = useContext(ThemeContext);
|
|
27
|
+
return (_jsxs("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_jsx("style", { children: `
|
|
32
28
|
.quill-button {
|
|
33
29
|
background-color: #384151;
|
|
34
30
|
color: white;
|
|
@@ -49,10 +45,9 @@ const MemoizedButton = ({ label, onClick, primary = true }) => {
|
|
|
49
45
|
overflow: hidden;
|
|
50
46
|
}` }), label] }));
|
|
51
47
|
};
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
48
|
+
export const MemoizedSecondaryButton = ({ label, onClick }) => {
|
|
49
|
+
const [theme] = useContext(ThemeContext);
|
|
50
|
+
return (_jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_jsx("style", { children: `
|
|
56
51
|
.quill-secondary-button {
|
|
57
52
|
background-color: #F5F5F6;
|
|
58
53
|
color: rgba(56, 65, 81, 0.75);
|
|
@@ -70,13 +65,12 @@ const MemoizedSecondaryButton = ({ label, onClick }) => {
|
|
|
70
65
|
background-color: rgba(56, 65, 81, 0.09);
|
|
71
66
|
}` }), label] }));
|
|
72
67
|
};
|
|
73
|
-
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
68
|
+
export const MemoizedSelect = ({ value, onChange, options, disabled = false, label, }) => {
|
|
69
|
+
const [theme] = useContext(ThemeContext);
|
|
70
|
+
return (_jsxs("div", { style: {
|
|
77
71
|
position: 'relative',
|
|
78
72
|
maxWidth: 206,
|
|
79
|
-
}, children: [(
|
|
73
|
+
}, children: [_jsx("style", { children: `
|
|
80
74
|
.quill-select {
|
|
81
75
|
background-color: white;
|
|
82
76
|
height: 42px;
|
|
@@ -88,7 +82,7 @@ const MemoizedSelect = ({ value, onChange, options, disabled = false, label, })
|
|
|
88
82
|
box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
|
|
89
83
|
padding-left: 12px;
|
|
90
84
|
padding-right: 12px;
|
|
91
|
-
}` }), (
|
|
85
|
+
}` }), _jsx("select", { style: { WebkitAppearance: 'none', fontFamily: theme?.fontFamily }, className: "quill-select", value: value, disabled: disabled, onChange: event => onChange(event.target.value), children: options.map(option => (_jsx("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), _jsx(ArrowDownHeadIcon, { style: {
|
|
92
86
|
height: '20px',
|
|
93
87
|
width: '20px',
|
|
94
88
|
flex: 'none',
|
|
@@ -98,8 +92,7 @@ const MemoizedSelect = ({ value, onChange, options, disabled = false, label, })
|
|
|
98
92
|
color: '#6C727F',
|
|
99
93
|
}, "aria-hidden": "true" })] }));
|
|
100
94
|
};
|
|
101
|
-
|
|
102
|
-
const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
|
|
95
|
+
export const MemoizedHeader = ({ children }) => (_jsx("h1", { style: {
|
|
103
96
|
fontSize: 16,
|
|
104
97
|
fontWeight: 600,
|
|
105
98
|
color: '#384151',
|
|
@@ -107,25 +100,22 @@ const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style:
|
|
|
107
100
|
margin: 0,
|
|
108
101
|
padding: 0,
|
|
109
102
|
}, children: children }));
|
|
110
|
-
|
|
111
|
-
const MemoizedLabel = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
|
|
103
|
+
export const MemoizedLabel = ({ children }) => (_jsx("h1", { style: {
|
|
112
104
|
fontSize: 14,
|
|
113
105
|
fontWeight: 600,
|
|
114
106
|
color: '#575E6A',
|
|
115
107
|
userSelect: 'none',
|
|
116
108
|
paddingBottom: 5,
|
|
117
109
|
}, children: children }));
|
|
118
|
-
|
|
119
|
-
const MemoizedText = ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: {
|
|
110
|
+
export const MemoizedText = ({ children }) => (_jsx("p", { style: {
|
|
120
111
|
fontSize: 12,
|
|
121
112
|
fontWeight: 400,
|
|
122
113
|
margin: 0,
|
|
123
114
|
color: '#575E6A',
|
|
124
115
|
userSelect: 'none',
|
|
125
116
|
}, children: children }));
|
|
126
|
-
exports.MemoizedText = MemoizedText;
|
|
127
117
|
const useOnClickOutside = (ref, handler) => {
|
|
128
|
-
|
|
118
|
+
useEffect(() => {
|
|
129
119
|
const listener = (event) => {
|
|
130
120
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
131
121
|
return;
|
|
@@ -140,8 +130,8 @@ const useOnClickOutside = (ref, handler) => {
|
|
|
140
130
|
};
|
|
141
131
|
}, [ref, handler]);
|
|
142
132
|
};
|
|
143
|
-
function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
|
|
144
|
-
const modalRef =
|
|
133
|
+
export function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
|
|
134
|
+
const modalRef = useRef(null);
|
|
145
135
|
useOnClickOutside(modalRef, e => {
|
|
146
136
|
// Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
|
|
147
137
|
const isTriggerElem = parentRef
|
|
@@ -157,12 +147,12 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
|
|
|
157
147
|
onClose();
|
|
158
148
|
}
|
|
159
149
|
};
|
|
160
|
-
return ((
|
|
150
|
+
return (_jsxs("div", { children: [showTrigger && (_jsx(MemoizedSecondaryButton, { onClick: e => {
|
|
161
151
|
setIsOpen(isOpen => !isOpen);
|
|
162
152
|
if (onClick) {
|
|
163
153
|
onClick(e);
|
|
164
154
|
}
|
|
165
|
-
}, label: label })), isOpen && ((
|
|
155
|
+
}, label: label })), isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
|
|
166
156
|
background: 'white',
|
|
167
157
|
position: 'absolute',
|
|
168
158
|
boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
|
|
@@ -176,12 +166,11 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
|
|
|
176
166
|
...style,
|
|
177
167
|
}, children: children }) }))] }));
|
|
178
168
|
}
|
|
179
|
-
|
|
180
|
-
function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
|
|
169
|
+
export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
|
|
181
170
|
if (!isOpen) {
|
|
182
171
|
return null;
|
|
183
172
|
}
|
|
184
|
-
return ((
|
|
173
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
|
|
185
174
|
position: 'fixed',
|
|
186
175
|
top: '0',
|
|
187
176
|
right: '0',
|
|
@@ -190,7 +179,7 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
|
|
|
190
179
|
zIndex: '50',
|
|
191
180
|
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
|
192
181
|
backdropFilter: 'blur(5px)',
|
|
193
|
-
}, onClick: onClose }), (
|
|
182
|
+
}, onClick: onClose }), _jsx("div", { style: {
|
|
194
183
|
// position: "absolute",
|
|
195
184
|
position: 'fixed',
|
|
196
185
|
left: '50%',
|
|
@@ -210,7 +199,7 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
|
|
|
210
199
|
borderColor: '#e7e7e7',
|
|
211
200
|
overflow: 'hidden',
|
|
212
201
|
// zIndex: 1000,
|
|
213
|
-
}, children: (
|
|
202
|
+
}, children: _jsxs("div", { style: {
|
|
214
203
|
// width: "80%",
|
|
215
204
|
maxHeight: '90vh',
|
|
216
205
|
overflowY: 'scroll',
|
|
@@ -222,13 +211,13 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
|
|
|
222
211
|
flexDirection: 'column',
|
|
223
212
|
alignItems: 'center',
|
|
224
213
|
fontFamily: theme?.fontFamily,
|
|
225
|
-
}, children: [(
|
|
214
|
+
}, children: [_jsxs("div", { style: {
|
|
226
215
|
display: 'flex',
|
|
227
216
|
flexDirection: 'row',
|
|
228
217
|
width: '100%',
|
|
229
218
|
justifyContent: 'space-between',
|
|
230
219
|
alignItems: 'center',
|
|
231
|
-
}, children: [(
|
|
220
|
+
}, children: [_jsx("h2", { style: {
|
|
232
221
|
fontSize: 18,
|
|
233
222
|
fontWeight: '600',
|
|
234
223
|
marginLeft: 20,
|
|
@@ -236,10 +225,9 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
|
|
|
236
225
|
textAlign: 'left',
|
|
237
226
|
paddingTop: 18,
|
|
238
227
|
color: theme?.primaryTextColor,
|
|
239
|
-
}, children: title }), (
|
|
228
|
+
}, children: title }), _jsx(MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
|
|
240
229
|
}
|
|
241
|
-
|
|
242
|
-
const MemoizedDeleteButton = ({ onClick, style }) => ((0, jsx_runtime_1.jsxs)("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
|
|
230
|
+
export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
|
|
243
231
|
height: 42,
|
|
244
232
|
width: 42,
|
|
245
233
|
border: 'none',
|
|
@@ -249,11 +237,10 @@ const MemoizedDeleteButton = ({ onClick, style }) => ((0, jsx_runtime_1.jsxs)("b
|
|
|
249
237
|
justifyContent: 'center',
|
|
250
238
|
borderRadius: 6,
|
|
251
239
|
...style,
|
|
252
|
-
}, children: [(
|
|
240
|
+
}, children: [_jsx("style", { children: `
|
|
253
241
|
.quill-delete-button {
|
|
254
242
|
background-color: white;
|
|
255
243
|
}
|
|
256
244
|
.quill-delete-button:hover {
|
|
257
245
|
background-color: rgba(56, 65, 81, 0.03);
|
|
258
|
-
}` }), (
|
|
259
|
-
exports.MemoizedDeleteButton = MemoizedDeleteButton;
|
|
246
|
+
}` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
|
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.hasValue = exports.getSelectButtonColors = exports.getFilteredOptions = exports.constructValueToNameMapping = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
function constructValueToNameMapping(children) {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export function constructValueToNameMapping(children) {
|
|
9
3
|
const valueToNameMapping = new Map();
|
|
10
|
-
|
|
4
|
+
React.Children.map(children, (child) => {
|
|
11
5
|
valueToNameMapping.set(child.props.value, child.props.text ?? child.props.value);
|
|
12
6
|
});
|
|
13
7
|
return valueToNameMapping;
|
|
14
8
|
}
|
|
15
|
-
|
|
16
|
-
function getFilteredOptions(searchQuery, options) {
|
|
9
|
+
export function getFilteredOptions(searchQuery, options) {
|
|
17
10
|
return searchQuery === ''
|
|
18
11
|
? options
|
|
19
12
|
: options.filter((option) => {
|
|
@@ -21,8 +14,7 @@ function getFilteredOptions(searchQuery, options) {
|
|
|
21
14
|
return optionText.toLowerCase().includes(searchQuery.toLowerCase());
|
|
22
15
|
});
|
|
23
16
|
}
|
|
24
|
-
|
|
25
|
-
const getSelectButtonColors = (hasSelection, isDisabled, hasError = false) => {
|
|
17
|
+
export const getSelectButtonColors = (hasSelection, isDisabled, hasError = false) => {
|
|
26
18
|
return null;
|
|
27
19
|
// return twMerge(
|
|
28
20
|
// isDisabled
|
|
@@ -42,6 +34,4 @@ const getSelectButtonColors = (hasSelection, isDisabled, hasError = false) => {
|
|
|
42
34
|
// : getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor
|
|
43
35
|
// );
|
|
44
36
|
};
|
|
45
|
-
|
|
46
|
-
const hasValue = (value) => value !== null && value !== undefined && value !== '';
|
|
47
|
-
exports.hasValue = hasValue;
|
|
37
|
+
export const hasValue = (value) => value !== null && value !== undefined && value !== '';
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const BaseColorContext = (0, react_1.createContext)('blue');
|
|
5
|
-
exports.default = BaseColorContext;
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
const BaseColorContext = createContext('blue');
|
|
3
|
+
export default BaseColorContext;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const react_1 = require("react");
|
|
4
|
-
const HoveredValueContext = (0, react_1.createContext)({
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
const HoveredValueContext = createContext({
|
|
5
3
|
hoveredValue: undefined,
|
|
6
4
|
});
|
|
7
|
-
|
|
5
|
+
export default HoveredValueContext;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const RootStylesContext = (0, react_1.createContext)(undefined);
|
|
5
|
-
exports.default = RootStylesContext;
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
const RootStylesContext = createContext(undefined);
|
|
3
|
+
export default RootStylesContext;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const react_1 = require("react");
|
|
4
|
-
const SelectedValueContext = (0, react_1.createContext)({
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
const SelectedValueContext = createContext({
|
|
5
3
|
selectedValue: undefined,
|
|
6
4
|
handleValueChange: undefined,
|
|
7
5
|
});
|
|
8
|
-
|
|
6
|
+
export default SelectedValueContext;
|
package/dist/contexts/index.js
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.SelectedValueContext = exports.RootStylesContext = exports.HoveredValueContext = exports.BaseColorContext = void 0;
|
|
7
|
-
var BaseColorContext_1 = require("./BaseColorContext");
|
|
8
|
-
Object.defineProperty(exports, "BaseColorContext", { enumerable: true, get: function () { return __importDefault(BaseColorContext_1).default; } });
|
|
9
|
-
var HoveredValueContext_1 = require("./HoveredValueContext");
|
|
10
|
-
Object.defineProperty(exports, "HoveredValueContext", { enumerable: true, get: function () { return __importDefault(HoveredValueContext_1).default; } });
|
|
11
|
-
var RootStylesContext_1 = require("./RootStylesContext");
|
|
12
|
-
Object.defineProperty(exports, "RootStylesContext", { enumerable: true, get: function () { return __importDefault(RootStylesContext_1).default; } });
|
|
13
|
-
var SelectedValueContext_1 = require("./SelectedValueContext");
|
|
14
|
-
Object.defineProperty(exports, "SelectedValueContext", { enumerable: true, get: function () { return __importDefault(SelectedValueContext_1).default; } });
|
|
1
|
+
export { default as BaseColorContext } from './BaseColorContext';
|
|
2
|
+
export { default as HoveredValueContext } from './HoveredValueContext';
|
|
3
|
+
export { default as RootStylesContext } from './RootStylesContext';
|
|
4
|
+
export { default as SelectedValueContext } from './SelectedValueContext';
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.useSelectOnKeyDown = exports.useOnWindowResize = exports.useOnClickOutside = exports.useInternalState = void 0;
|
|
7
|
-
var useInternalState_1 = require("./useInternalState");
|
|
8
|
-
Object.defineProperty(exports, "useInternalState", { enumerable: true, get: function () { return __importDefault(useInternalState_1).default; } });
|
|
9
|
-
var useOnClickOutside_1 = require("./useOnClickOutside");
|
|
10
|
-
Object.defineProperty(exports, "useOnClickOutside", { enumerable: true, get: function () { return __importDefault(useOnClickOutside_1).default; } });
|
|
11
|
-
var useOnWindowResize_1 = require("./useOnWindowResize");
|
|
12
|
-
Object.defineProperty(exports, "useOnWindowResize", { enumerable: true, get: function () { return __importDefault(useOnWindowResize_1).default; } });
|
|
13
|
-
var useSelectOnKeyDown_1 = require("./useSelectOnKeyDown");
|
|
14
|
-
Object.defineProperty(exports, "useSelectOnKeyDown", { enumerable: true, get: function () { return __importDefault(useSelectOnKeyDown_1).default; } });
|
|
1
|
+
export { default as useInternalState } from "./useInternalState";
|
|
2
|
+
export { default as useOnClickOutside } from "./useOnClickOutside";
|
|
3
|
+
export { default as useOnWindowResize } from "./useOnWindowResize";
|
|
4
|
+
export { default as useSelectOnKeyDown } from "./useSelectOnKeyDown";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useDashboard.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,kBAAmB,MAAM;;;;;CAyDjD,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useContext, useEffect, useState } from 'react';
|
|
2
|
+
import { ClientContext } from '../Context';
|
|
3
|
+
import { getData } from '../utils/dataFetcher';
|
|
4
|
+
export const useDashboard = (dashboardName) => {
|
|
5
|
+
// if (dashboardName === undefined || dashboardName === null) {
|
|
6
|
+
// throw new Error('useDashboard requires a dashboard name parameter');
|
|
7
|
+
// }
|
|
8
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
9
|
+
const [error, setError] = useState(null);
|
|
10
|
+
const [data, setData] = useState(null);
|
|
11
|
+
const [client] = useContext(ClientContext);
|
|
12
|
+
const handleReload = () => {
|
|
13
|
+
console.log('reloading...');
|
|
14
|
+
getDashboards();
|
|
15
|
+
};
|
|
16
|
+
async function getDashboards() {
|
|
17
|
+
setIsLoading(true);
|
|
18
|
+
const { publicKey, customerId } = client;
|
|
19
|
+
try {
|
|
20
|
+
const searchParams = new URLSearchParams({
|
|
21
|
+
publicKey: publicKey,
|
|
22
|
+
orgId: customerId,
|
|
23
|
+
name: dashboardName,
|
|
24
|
+
}).toString();
|
|
25
|
+
const hostedBody = {
|
|
26
|
+
metadata: {
|
|
27
|
+
name: dashboardName,
|
|
28
|
+
task: 'config',
|
|
29
|
+
clientId: publicKey,
|
|
30
|
+
...(customerId ? { orgId: customerId } : {}),
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
const resp = await getData(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
|
|
34
|
+
setData(resp);
|
|
35
|
+
setError(null);
|
|
36
|
+
}
|
|
37
|
+
catch (error) {
|
|
38
|
+
setError(null);
|
|
39
|
+
setError(error);
|
|
40
|
+
console.error('Error fetching data:', error);
|
|
41
|
+
}
|
|
42
|
+
setIsLoading(false);
|
|
43
|
+
}
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
getDashboards();
|
|
46
|
+
}, [dashboardName, client]);
|
|
47
|
+
return { data, isLoading, error, reload: handleReload };
|
|
48
|
+
};
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const react_1 = require("react");
|
|
1
|
+
import { useState } from 'react';
|
|
4
2
|
const useInternalState = (defaultValueProp, valueProp) => {
|
|
5
3
|
const isControlled = valueProp !== undefined;
|
|
6
|
-
const [valueState, setValueState] =
|
|
4
|
+
const [valueState, setValueState] = useState(defaultValueProp);
|
|
7
5
|
const value = isControlled ? valueProp : valueState;
|
|
8
6
|
const setValue = (nextValue) => {
|
|
9
7
|
if (isControlled) {
|
|
@@ -13,4 +11,4 @@ const useInternalState = (defaultValueProp, valueProp) => {
|
|
|
13
11
|
};
|
|
14
12
|
return [value, setValue];
|
|
15
13
|
};
|
|
16
|
-
|
|
14
|
+
export default useInternalState;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const react_1 = require("react");
|
|
1
|
+
import { useEffect } from "react";
|
|
4
2
|
const useOnClickOutside = (ref, handler) => {
|
|
5
|
-
|
|
3
|
+
useEffect(() => {
|
|
6
4
|
const listener = (event) => {
|
|
7
5
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
8
6
|
return;
|
|
@@ -17,4 +15,4 @@ const useOnClickOutside = (ref, handler) => {
|
|
|
17
15
|
};
|
|
18
16
|
}, [ref, handler]);
|
|
19
17
|
};
|
|
20
|
-
|
|
18
|
+
export default useOnClickOutside;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const react_1 = require("react");
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
4
2
|
const useOnWindowResize = (handler, initialWindowSize) => {
|
|
5
|
-
const [windowSize, setWindowSize] =
|
|
6
|
-
|
|
3
|
+
const [windowSize, setWindowSize] = useState(initialWindowSize);
|
|
4
|
+
useEffect(() => {
|
|
7
5
|
const handleResize = () => {
|
|
8
6
|
setWindowSize(window.innerWidth);
|
|
9
7
|
handler();
|
|
@@ -13,4 +11,4 @@ const useOnWindowResize = (handler, initialWindowSize) => {
|
|
|
13
11
|
return () => window.removeEventListener("resize", handleResize);
|
|
14
12
|
}, [handler, windowSize]);
|
|
15
13
|
};
|
|
16
|
-
|
|
14
|
+
export default useOnWindowResize;
|
package/dist/hooks/useQuill.js
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useQuill = void 0;
|
|
4
1
|
// @ts-nocheck
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const useQuill = (chartId) => {
|
|
2
|
+
import { useContext, useEffect, useState } from 'react';
|
|
3
|
+
import { ClientContext, DashboardContext } from '../Context';
|
|
4
|
+
import { getData } from '../utils/dataFetcher';
|
|
5
|
+
export const useQuill = (chartId) => {
|
|
9
6
|
// @ts-ignore
|
|
10
|
-
const { dashboard, dispatch } =
|
|
11
|
-
const [client] =
|
|
12
|
-
const [data, setData] =
|
|
13
|
-
const [loading, setLoading] =
|
|
14
|
-
const [error, setError] =
|
|
15
|
-
|
|
7
|
+
const { dashboard, dispatch } = useContext(DashboardContext);
|
|
8
|
+
const [client] = useContext(ClientContext);
|
|
9
|
+
const [data, setData] = useState(null);
|
|
10
|
+
const [loading, setLoading] = useState(true);
|
|
11
|
+
const [error, setError] = useState(null);
|
|
12
|
+
useEffect(() => {
|
|
16
13
|
let isSubscribed = true;
|
|
17
14
|
async function getChartOptions(id) {
|
|
18
15
|
if (isSubscribed) {
|
|
@@ -33,7 +30,7 @@ const useQuill = (chartId) => {
|
|
|
33
30
|
id,
|
|
34
31
|
filters: [],
|
|
35
32
|
};
|
|
36
|
-
const resp = await
|
|
33
|
+
const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
|
|
37
34
|
if (resp) {
|
|
38
35
|
setLoading(false);
|
|
39
36
|
setData(resp);
|
|
@@ -59,7 +56,6 @@ const useQuill = (chartId) => {
|
|
|
59
56
|
}, [chartId, dashboard]);
|
|
60
57
|
return { data, loading, error };
|
|
61
58
|
};
|
|
62
|
-
exports.useQuill = useQuill;
|
|
63
59
|
function stringifyIfObject(e) {
|
|
64
60
|
if (typeof e === 'string') {
|
|
65
61
|
// do nothing if e is a string
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const react_1 = require("react");
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
4
2
|
const useSelectOnKeyDown = (onValueChange, optionValues, isFocused, handleFocusChange, value) => {
|
|
5
3
|
const NO_SELECTION_IDX = -1;
|
|
6
|
-
const [hoveredIdx, setHoveredIdx] =
|
|
4
|
+
const [hoveredIdx, setHoveredIdx] = useState(NO_SELECTION_IDX);
|
|
7
5
|
const getHoveredValue = (hoveredIdx, optionValues) => {
|
|
8
6
|
if (hoveredIdx < 0)
|
|
9
7
|
return undefined;
|
|
10
8
|
return optionValues[hoveredIdx];
|
|
11
9
|
};
|
|
12
|
-
|
|
10
|
+
useEffect(() => {
|
|
13
11
|
const getIndexOfSelectedValue = () => {
|
|
14
12
|
if (!isFocused) {
|
|
15
13
|
setHoveredIdx(NO_SELECTION_IDX);
|
|
@@ -62,4 +60,4 @@ const useSelectOnKeyDown = (onValueChange, optionValues, isFocused, handleFocusC
|
|
|
62
60
|
};
|
|
63
61
|
return [hoveredValue, handleKeyDown];
|
|
64
62
|
};
|
|
65
|
-
|
|
63
|
+
export default useSelectOnKeyDown;
|