@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.
Files changed (86) hide show
  1. package/dist/AddToDashboardModal.js +146 -180
  2. package/dist/BarList.js +36 -43
  3. package/dist/Chart.js +99 -131
  4. package/dist/ChartBuilder.js +80 -88
  5. package/dist/ChartEditor.js +14 -20
  6. package/dist/Context.js +52 -56
  7. package/dist/Dashboard.d.ts.map +1 -1
  8. package/dist/Dashboard.js +246 -305
  9. package/dist/DateRangePicker/Calendar.js +41 -45
  10. package/dist/DateRangePicker/DateRangePicker.js +32 -60
  11. package/dist/DateRangePicker/DateRangePickerButton.js +14 -16
  12. package/dist/DateRangePicker/dateRangePickerUtils.d.ts +6 -0
  13. package/dist/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  14. package/dist/DateRangePicker/dateRangePickerUtils.js +89 -89
  15. package/dist/DateRangePicker/index.js +1 -8
  16. package/dist/PieChart.js +35 -69
  17. package/dist/QuillProvider.js +4 -6
  18. package/dist/ReportBuilder.js +120 -128
  19. package/dist/SQLEditor.js +56 -64
  20. package/dist/Table.d.ts +2 -1
  21. package/dist/Table.d.ts.map +1 -1
  22. package/dist/Table.js +64 -68
  23. package/dist/TableChart.js +17 -44
  24. package/dist/assets/ArrowDownHeadIcon.js +3 -5
  25. package/dist/assets/ArrowDownIcon.js +3 -5
  26. package/dist/assets/ArrowDownRightIcon.js +3 -5
  27. package/dist/assets/ArrowLeftHeadIcon.js +3 -5
  28. package/dist/assets/ArrowRightHeadIcon.js +3 -5
  29. package/dist/assets/ArrowRightIcon.js +3 -5
  30. package/dist/assets/ArrowUpHeadIcon.js +3 -5
  31. package/dist/assets/ArrowUpIcon.js +3 -5
  32. package/dist/assets/ArrowUpRightIcon.js +3 -5
  33. package/dist/assets/CalendarIcon.js +3 -5
  34. package/dist/assets/CalendarNormalIcon.js +3 -5
  35. package/dist/assets/DoubleArrowLeftHeadIcon.js +3 -5
  36. package/dist/assets/DoubleArrowRightHeadIcon.js +3 -5
  37. package/dist/assets/ExclamationFilledIcon.js +3 -5
  38. package/dist/assets/FilterIcon.js +3 -5
  39. package/dist/assets/LoadingSpinner.js +3 -5
  40. package/dist/assets/RefreshIcon.js +3 -5
  41. package/dist/assets/SearchIcon.js +3 -5
  42. package/dist/assets/UpLeftArrowsIcon.js +3 -5
  43. package/dist/assets/XCircleIcon.js +3 -5
  44. package/dist/assets/XIcon.js +3 -5
  45. package/dist/assets/index.js +21 -48
  46. package/dist/components/BigModal/BigModal.js +13 -38
  47. package/dist/components/Dropdown/Dropdown.js +24 -52
  48. package/dist/components/Dropdown/DropdownItem.js +9 -34
  49. package/dist/components/Dropdown/index.js +2 -10
  50. package/dist/components/Modal/Modal.js +13 -38
  51. package/dist/components/Modal/index.js +1 -8
  52. package/dist/components/QuillCard.js +8 -12
  53. package/dist/components/SqlTextEditor.d.ts +7 -0
  54. package/dist/components/SqlTextEditor.d.ts.map +1 -0
  55. package/dist/components/SqlTextEditor.js +14 -0
  56. package/dist/components/UiComponents.js +37 -50
  57. package/dist/components/selectUtils.js +6 -16
  58. package/dist/contexts/BaseColorContext.js +3 -5
  59. package/dist/contexts/HoveredValueContext.js +3 -5
  60. package/dist/contexts/RootStylesContext.js +3 -5
  61. package/dist/contexts/SelectedValueContext.js +3 -5
  62. package/dist/contexts/index.js +4 -14
  63. package/dist/hooks/index.js +4 -14
  64. package/dist/hooks/useDashboard.d.ts +7 -0
  65. package/dist/hooks/useDashboard.d.ts.map +1 -0
  66. package/dist/hooks/useDashboard.js +48 -0
  67. package/dist/hooks/useInternalState.js +3 -5
  68. package/dist/hooks/useOnClickOutside.js +3 -5
  69. package/dist/hooks/useOnWindowResize.js +4 -6
  70. package/dist/hooks/useQuill.js +11 -15
  71. package/dist/hooks/useSelectOnKeyDown.js +4 -6
  72. package/dist/index.d.ts +2 -0
  73. package/dist/index.d.ts.map +1 -1
  74. package/dist/index.js +13 -28
  75. package/dist/internals/ReportBuilder/PivotList.js +14 -19
  76. package/dist/internals/ReportBuilder/PivotModal.js +84 -91
  77. package/dist/internals/ReportBuilder/PivotModal.spec.js +70 -72
  78. package/dist/lib/font.js +2 -5
  79. package/dist/lib/index.js +3 -19
  80. package/dist/lib/inputTypes.js +1 -2
  81. package/dist/lib/utils.js +8 -18
  82. package/dist/utils/aggregate.js +28 -34
  83. package/dist/utils/colorToHex.js +1 -4
  84. package/dist/utils/dataFetcher.js +2 -7
  85. package/dist/utils/downloadCSV.js +1 -5
  86. package/package.json +2 -1
@@ -1,8 +1 @@
1
- "use strict";
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
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.QuillCard = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
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: [(0, jsx_runtime_1.jsx)("style", { 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 && ((0, jsx_runtime_1.jsxs)("button", { className: "quill-delete-button", type: "button", onClick: e => {
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: [(0, jsx_runtime_1.jsx)("style", { 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
- }` }), (0, jsx_runtime_1.jsx)(assets_1.XIcon, { height: "20", width: "20", fill: "#6C727F" })] })), (0, jsx_runtime_1.jsx)("div", { style: { overflowX: 'scroll' }, children: children })] }));
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
- "use strict";
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
- const react_1 = require("react");
7
- const assets_1 = require("../assets");
8
- const Context_1 = require("../Context");
9
- const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
10
- const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
11
- return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
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
- }` }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: event => onChange(event.target.value), placeholder: placeholder, style: { fontFamily: theme?.fontFamily } })] }));
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
- exports.MemoizedTextInput = MemoizedTextInput;
29
- const MemoizedButton = ({ label, onClick, primary = true }) => {
30
- const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
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
- exports.MemoizedButton = MemoizedButton;
53
- const MemoizedSecondaryButton = ({ label, onClick }) => {
54
- const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
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
- exports.MemoizedSecondaryButton = MemoizedSecondaryButton;
74
- const MemoizedSelect = ({ value, onChange, options, disabled = false, label, }) => {
75
- const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
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: [(0, jsx_runtime_1.jsx)("style", { 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
- }` }), (0, jsx_runtime_1.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 => ((0, jsx_runtime_1.jsx)("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
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
- exports.MemoizedSelect = MemoizedSelect;
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
- exports.MemoizedHeader = MemoizedHeader;
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
- exports.MemoizedLabel = MemoizedLabel;
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
- (0, react_1.useEffect)(() => {
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 = (0, react_1.useRef)(null);
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 ((0, jsx_runtime_1.jsxs)("div", { children: [showTrigger && ((0, jsx_runtime_1.jsx)(exports.MemoizedSecondaryButton, { onClick: e => {
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 && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
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
- exports.MemoizedPopover = MemoizedPopover;
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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
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 }), (0, jsx_runtime_1.jsx)("div", { style: {
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: (0, jsx_runtime_1.jsxs)("div", { style: {
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: [(0, jsx_runtime_1.jsxs)("div", { style: {
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: [(0, jsx_runtime_1.jsx)("h2", { style: {
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 }), (0, jsx_runtime_1.jsx)(exports.MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
228
+ }, children: title }), _jsx(MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
240
229
  }
241
- exports.MemoizedModal = MemoizedModal;
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: [(0, jsx_runtime_1.jsx)("style", { 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
- }` }), (0, jsx_runtime_1.jsx)(assets_1.XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
259
- exports.MemoizedDeleteButton = MemoizedDeleteButton;
246
+ }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
@@ -1,19 +1,12 @@
1
- "use strict";
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.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
- react_1.default.Children.map(children, (child) => {
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
- exports.constructValueToNameMapping = constructValueToNameMapping;
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
- exports.getFilteredOptions = getFilteredOptions;
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
- exports.getSelectButtonColors = getSelectButtonColors;
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
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
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
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
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
- exports.default = HoveredValueContext;
5
+ export default HoveredValueContext;
@@ -1,5 +1,3 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
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
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
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
- exports.default = SelectedValueContext;
6
+ export default SelectedValueContext;
@@ -1,14 +1,4 @@
1
- "use strict";
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.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';
@@ -1,14 +1,4 @@
1
- "use strict";
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.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,7 @@
1
+ export declare const useDashboard: (dashboardName: string) => {
2
+ data: any;
3
+ isLoading: boolean;
4
+ error: any;
5
+ reload: () => void;
6
+ };
7
+ //# sourceMappingURL=useDashboard.d.ts.map
@@ -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
- "use strict";
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] = (0, react_1.useState)(defaultValueProp);
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
- exports.default = useInternalState;
14
+ export default useInternalState;
@@ -1,8 +1,6 @@
1
- "use strict";
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
- (0, react_1.useEffect)(() => {
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
- exports.default = useOnClickOutside;
18
+ export default useOnClickOutside;
@@ -1,9 +1,7 @@
1
- "use strict";
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] = (0, react_1.useState)(initialWindowSize);
6
- (0, react_1.useEffect)(() => {
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
- exports.default = useOnWindowResize;
14
+ export default useOnWindowResize;
@@ -1,18 +1,15 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useQuill = void 0;
4
1
  // @ts-nocheck
5
- const react_1 = require("react");
6
- const Context_1 = require("../Context");
7
- const dataFetcher_1 = require("../utils/dataFetcher");
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 } = (0, react_1.useContext)(Context_1.DashboardContext);
11
- const [client] = (0, react_1.useContext)(Context_1.ClientContext);
12
- const [data, setData] = (0, react_1.useState)(null);
13
- const [loading, setLoading] = (0, react_1.useState)(true);
14
- const [error, setError] = (0, react_1.useState)(null);
15
- (0, react_1.useEffect)(() => {
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 (0, dataFetcher_1.getData)(client, 'itempost', 'same-origin', hostedBody, cloudBody);
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
- "use strict";
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] = (0, react_1.useState)(NO_SELECTION_IDX);
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
- (0, react_1.useEffect)(() => {
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
- exports.default = useSelectOnKeyDown;
63
+ export default useSelectOnKeyDown;