@quillsql/react 1.7.1 → 1.7.2
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/lib/AddToDashboardModal.js +369 -249
- package/lib/AddToDashboardModal.js.map +1 -1
- package/lib/BarList.js +109 -92
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.js +414 -364
- package/lib/Chart.js.map +1 -1
- package/lib/Context.js +84 -92
- package/lib/Context.js.map +1 -1
- package/lib/Dashboard.js +209 -181
- package/lib/Dashboard.js.map +1 -1
- package/lib/DateRangePicker/Calendar.js +91 -87
- package/lib/DateRangePicker/Calendar.js.map +1 -1
- package/lib/DateRangePicker/DateRangePicker.js +68 -70
- package/lib/DateRangePicker/DateRangePicker.js.map +1 -1
- package/lib/DateRangePicker/DateRangePickerButton.js +57 -46
- package/lib/DateRangePicker/DateRangePickerButton.js.map +1 -1
- package/lib/DateRangePicker/dateRangePickerUtils.js +99 -105
- package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
- package/lib/DateRangePicker/index.js +1 -8
- package/lib/DateRangePicker/index.js.map +1 -1
- package/lib/PieChart.js +225 -221
- package/lib/PieChart.js.map +1 -1
- package/lib/QuillProvider.js +18 -8
- package/lib/QuillProvider.js.map +1 -1
- package/lib/ReportBuilder.js +526 -430
- package/lib/ReportBuilder.js.map +1 -1
- package/lib/SQLEditor.js +268 -183
- package/lib/SQLEditor.js.map +1 -1
- package/lib/Table.js +256 -213
- package/lib/Table.js.map +1 -1
- package/lib/TableChart.js +75 -76
- package/lib/TableChart.js.map +1 -1
- package/lib/assets/ArrowDownHeadIcon.js +28 -5
- package/lib/assets/ArrowDownHeadIcon.js.map +1 -1
- package/lib/assets/ArrowDownIcon.js +28 -5
- package/lib/assets/ArrowDownIcon.js.map +1 -1
- package/lib/assets/ArrowDownRightIcon.js +28 -5
- package/lib/assets/ArrowDownRightIcon.js.map +1 -1
- package/lib/assets/ArrowLeftHeadIcon.js +28 -5
- package/lib/assets/ArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightHeadIcon.js +28 -5
- package/lib/assets/ArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightIcon.js +28 -5
- package/lib/assets/ArrowRightIcon.js.map +1 -1
- package/lib/assets/ArrowUpHeadIcon.js +28 -5
- package/lib/assets/ArrowUpHeadIcon.js.map +1 -1
- package/lib/assets/ArrowUpIcon.js +28 -5
- package/lib/assets/ArrowUpIcon.js.map +1 -1
- package/lib/assets/ArrowUpRightIcon.js +28 -5
- package/lib/assets/ArrowUpRightIcon.js.map +1 -1
- package/lib/assets/CalendarIcon.js +28 -5
- package/lib/assets/CalendarIcon.js.map +1 -1
- package/lib/assets/DoubleArrowLeftHeadIcon.js +28 -5
- package/lib/assets/DoubleArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/DoubleArrowRightHeadIcon.js +28 -5
- package/lib/assets/DoubleArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ExclamationFilledIcon.js +28 -5
- package/lib/assets/ExclamationFilledIcon.js.map +1 -1
- package/lib/assets/LoadingSpinner.js +28 -5
- package/lib/assets/LoadingSpinner.js.map +1 -1
- package/lib/assets/SearchIcon.js +28 -5
- package/lib/assets/SearchIcon.js.map +1 -1
- package/lib/assets/XCircleIcon.js +28 -5
- package/lib/assets/XCircleIcon.js.map +1 -1
- package/lib/assets/index.js +16 -38
- package/lib/assets/index.js.map +1 -1
- package/lib/components/BigModal/BigModal.js +43 -45
- package/lib/components/BigModal/BigModal.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +53 -57
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/DropdownItem.js +40 -43
- package/lib/components/Dropdown/DropdownItem.js.map +1 -1
- package/lib/components/Dropdown/index.js +2 -10
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Modal/Modal.js +43 -45
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/index.js +1 -8
- package/lib/components/Modal/index.js.map +1 -1
- package/lib/components/selectUtils.js +15 -20
- package/lib/components/selectUtils.js.map +1 -1
- package/lib/contexts/BaseColorContext.js +3 -5
- package/lib/contexts/BaseColorContext.js.map +1 -1
- package/lib/contexts/HoveredValueContext.js +3 -5
- package/lib/contexts/HoveredValueContext.js.map +1 -1
- package/lib/contexts/RootStylesContext.js +3 -5
- package/lib/contexts/RootStylesContext.js.map +1 -1
- package/lib/contexts/SelectedValueContext.js +3 -5
- package/lib/contexts/SelectedValueContext.js.map +1 -1
- package/lib/contexts/index.js +4 -14
- package/lib/contexts/index.js.map +1 -1
- package/lib/hooks/index.js +4 -14
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useInternalState.js +7 -9
- package/lib/hooks/useInternalState.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +6 -8
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnWindowResize.js +7 -9
- package/lib/hooks/useOnWindowResize.js.map +1 -1
- package/lib/hooks/useQuill.js +111 -60
- package/lib/hooks/useQuill.js.map +1 -1
- package/lib/hooks/useSelectOnKeyDown.js +15 -17
- package/lib/hooks/useSelectOnKeyDown.js.map +1 -1
- package/lib/index.js +8 -22
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,73 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
24
22
|
};
|
|
25
|
-
|
|
26
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
24
|
/* eslint-disable react/display-name */
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
25
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
26
|
+
import { useOnClickOutside, useOnWindowResize } from '../../hooks';
|
|
27
|
+
import { mergeRefs } from '../../lib';
|
|
28
|
+
var BigModal = React.forwardRef(function (props, ref) {
|
|
29
|
+
var showModal = props.showModal, setShowModal = props.setShowModal, parentRef = props.parentRef, width = props.width, _a = props.maxHeight, maxHeight = _a === void 0 ? '18rem' : _a, children = props.children, className = props.className, theme = props.theme, other = __rest(props, ["showModal", "setShowModal", "parentRef", "width", "maxHeight", "children", "className", "theme"]);
|
|
30
|
+
var _b = useState(false), modalExceedsWindow = _b[0], setModalExceedsWindow = _b[1];
|
|
31
|
+
var modalRef = useRef(null);
|
|
32
|
+
var checkModalExceedsWindow = useCallback(function (modalWidth, windowWidth) {
|
|
36
33
|
if (!parentRef.current) {
|
|
37
34
|
return false;
|
|
38
35
|
}
|
|
39
|
-
|
|
36
|
+
var modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
|
|
40
37
|
return windowWidth - modalBoundingRight < 0;
|
|
41
38
|
}, [parentRef]);
|
|
42
|
-
|
|
39
|
+
var getAbsoluteSpacing = function () {
|
|
43
40
|
return modalExceedsWindow ? '0' : '0';
|
|
44
41
|
};
|
|
45
|
-
|
|
42
|
+
useOnClickOutside(modalRef, function (e) {
|
|
43
|
+
var _a;
|
|
46
44
|
// Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
|
|
47
|
-
|
|
48
|
-
? parentRef.current
|
|
45
|
+
var isTriggerElem = parentRef
|
|
46
|
+
? (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)
|
|
49
47
|
: false;
|
|
50
48
|
if (!isTriggerElem) {
|
|
51
49
|
setShowModal(false);
|
|
52
50
|
}
|
|
53
51
|
});
|
|
54
52
|
// Execute only when modal is of absolute size
|
|
55
|
-
(
|
|
53
|
+
useEffect(function () {
|
|
56
54
|
if (width) {
|
|
57
55
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
58
56
|
}
|
|
59
57
|
}, [checkModalExceedsWindow, parentRef, width]);
|
|
60
|
-
(
|
|
58
|
+
useOnWindowResize(function () {
|
|
61
59
|
if (width) {
|
|
62
60
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
63
61
|
}
|
|
64
62
|
});
|
|
65
|
-
return showModal ? ((
|
|
63
|
+
return showModal ? (_jsx("div", __assign({ ref: mergeRefs([modalRef, ref]), style: {
|
|
66
64
|
position: 'absolute',
|
|
67
65
|
zIndex: 10,
|
|
68
66
|
overflowY: 'auto',
|
|
69
|
-
backgroundColor: theme
|
|
70
|
-
borderColor: theme
|
|
67
|
+
backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
|
|
68
|
+
borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
|
|
71
69
|
borderTopStyle: 'solid',
|
|
72
70
|
borderBottomStyle: 'solid',
|
|
73
71
|
borderLeftStyle: 'solid',
|
|
@@ -81,7 +79,7 @@ const BigModal = react_1.default.forwardRef((props, ref) => {
|
|
|
81
79
|
top: '50%',
|
|
82
80
|
left: '50%',
|
|
83
81
|
transform: 'translate(-50%, -50%)',
|
|
84
|
-
},
|
|
82
|
+
} }, other, { children: children }))) : null;
|
|
85
83
|
});
|
|
86
|
-
|
|
84
|
+
export default BigModal;
|
|
87
85
|
//# sourceMappingURL=BigModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BigModal.js","sourceRoot":"","sources":["../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BigModal.js","sourceRoot":"","sources":["../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,60 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
24
11
|
};
|
|
25
|
-
var
|
|
26
|
-
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
27
22
|
};
|
|
28
|
-
|
|
29
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
24
|
/* eslint-disable react/display-name */
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
25
|
+
import React, { useRef, useState } from 'react';
|
|
26
|
+
import { HoveredValueContext, SelectedValueContext } from '../../contexts';
|
|
27
|
+
import { useInternalState, useSelectOnKeyDown } from '../../hooks';
|
|
28
|
+
import { ArrowDownHeadIcon } from '../../assets';
|
|
29
|
+
import { mergeRefs } from '../../lib';
|
|
30
|
+
import { constructValueToNameMapping, hasValue } from '../selectUtils';
|
|
31
|
+
import Modal from '../Modal';
|
|
32
|
+
var Dropdown = React.forwardRef(function (props, ref) {
|
|
33
|
+
var defaultValue = props.defaultValue, value = props.value, onValueChange = props.onValueChange, _a = props.placeholder, placeholder = _a === void 0 ? 'Select...' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, icon = props.icon, children = props.children, className = props.className, theme = props.theme, other = __rest(props, ["defaultValue", "value", "onValueChange", "placeholder", "disabled", "icon", "children", "className", "theme"]);
|
|
34
|
+
var _c = useInternalState(defaultValue, value), selectedValue = _c[0], setSelectedValue = _c[1];
|
|
35
|
+
var _d = useState(false), isFocused = _d[0], setIsFocused = _d[1];
|
|
36
|
+
var dropdownRef = useRef(null);
|
|
37
|
+
var Icon = icon;
|
|
38
|
+
var valueToNameMapping = constructValueToNameMapping(children);
|
|
39
|
+
var optionValues = React.Children.map(children, function (child) { return child.props.value; });
|
|
40
|
+
var handleValueChange = function (value) {
|
|
47
41
|
setSelectedValue(value);
|
|
48
42
|
setIsFocused(false);
|
|
49
|
-
onValueChange
|
|
43
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
50
44
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
return ((
|
|
45
|
+
var _e = useSelectOnKeyDown(handleValueChange, optionValues, isFocused, setIsFocused, selectedValue), hoveredValue = _e[0], handleKeyDown = _e[1];
|
|
46
|
+
var hasSelection = hasValue(selectedValue);
|
|
47
|
+
return (_jsxs("div", __assign({ ref: mergeRefs([dropdownRef, ref]), onKeyDown: handleKeyDown, style: {
|
|
54
48
|
position: 'relative',
|
|
55
49
|
width: '100%',
|
|
56
50
|
minWidth: '10rem',
|
|
57
|
-
},
|
|
51
|
+
} }, other, { children: [_jsxs("button", __assign({ style: {
|
|
58
52
|
display: 'flex',
|
|
59
53
|
justifyContent: 'space-between',
|
|
60
54
|
alignItems: 'center',
|
|
@@ -66,35 +60,37 @@ const Dropdown = react_1.default.forwardRef((props, ref) => {
|
|
|
66
60
|
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
67
61
|
cursor: 'pointer',
|
|
68
62
|
background: 'white',
|
|
69
|
-
}, type: "button", onClick: ()
|
|
63
|
+
}, type: "button", onClick: function () { return setIsFocused(!isFocused); }, disabled: disabled }, { children: [_jsxs("div", __assign({ style: {
|
|
70
64
|
display: 'flex',
|
|
71
65
|
justifyContent: 'start',
|
|
72
66
|
alignItems: 'center',
|
|
73
67
|
whiteSpace: 'nowrap',
|
|
74
68
|
overflow: 'hidden',
|
|
75
69
|
textOverflow: 'ellipsis',
|
|
76
|
-
}, children: [Icon ? ((
|
|
70
|
+
} }, { children: [Icon ? (_jsx(Icon, { style: {
|
|
77
71
|
flexShrink: 0,
|
|
78
72
|
height: '1.5rem',
|
|
79
73
|
width: '1.5rem',
|
|
80
|
-
color: theme
|
|
74
|
+
color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || '#6C727F',
|
|
81
75
|
marginRight: '1.5rem',
|
|
82
|
-
}, "aria-hidden": "true" })) : null, (
|
|
76
|
+
}, "aria-hidden": "true" })) : null, _jsx("p", __assign({ style: {
|
|
83
77
|
margin: 0,
|
|
84
78
|
fontSize: '0.875rem',
|
|
85
79
|
fontWeight: '500',
|
|
86
80
|
whiteSpace: 'nowrap',
|
|
87
81
|
overflow: 'hidden',
|
|
88
82
|
textOverflow: 'ellipsis',
|
|
89
|
-
}, children: selectedValue
|
|
83
|
+
} }, { children: selectedValue
|
|
90
84
|
? valueToNameMapping.get(selectedValue)
|
|
91
|
-
: placeholder })] }), (
|
|
85
|
+
: placeholder }))] })), _jsx(ArrowDownHeadIcon, { style: {
|
|
92
86
|
flexShrink: 0,
|
|
93
87
|
height: '1.5rem',
|
|
94
88
|
width: '1.5rem',
|
|
95
89
|
marginRight: '-0.25rem',
|
|
96
|
-
color: theme
|
|
97
|
-
}, "aria-hidden": "true" })] }), (
|
|
90
|
+
color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || '#6C727F',
|
|
91
|
+
}, "aria-hidden": "true" })] })), _jsx(Modal, __assign({ theme: theme, showModal: isFocused, setShowModal: setIsFocused, parentRef: dropdownRef }, { children: _jsx(SelectedValueContext.Provider, __assign({ value: { selectedValue: selectedValue, handleValueChange: handleValueChange } }, { children: _jsx(HoveredValueContext.Provider, __assign({ value: { hoveredValue: hoveredValue } }, { children: React.Children.map(children, function (child) {
|
|
92
|
+
return React.cloneElement(child);
|
|
93
|
+
}) })) })) }))] })));
|
|
98
94
|
});
|
|
99
|
-
|
|
95
|
+
export default Dropdown;
|
|
100
96
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,40 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
24
22
|
};
|
|
25
|
-
|
|
26
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
24
|
/* eslint-disable react/display-name */
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return ((
|
|
25
|
+
import React, { useContext } from 'react';
|
|
26
|
+
import { HoveredValueContext, SelectedValueContext } from '../../contexts';
|
|
27
|
+
var DropdownItem = React.forwardRef(function (props, ref) {
|
|
28
|
+
var value = props.value, text = props.text, icon = props.icon, className = props.className, theme = props.theme, lastItem = props.lastItem, other = __rest(props, ["value", "text", "icon", "className", "theme", "lastItem"]);
|
|
29
|
+
var _a = useContext(SelectedValueContext), selectedValue = _a.selectedValue, handleValueChange = _a.handleValueChange;
|
|
30
|
+
var hoveredValue = useContext(HoveredValueContext).hoveredValue;
|
|
31
|
+
var isActive = selectedValue === value;
|
|
32
|
+
var isHovered = hoveredValue === value;
|
|
33
|
+
var Icon = icon ? icon : null;
|
|
34
|
+
return (_jsx("button", __assign({ ref: ref, style: {
|
|
38
35
|
display: 'flex',
|
|
39
36
|
alignItems: 'center',
|
|
40
37
|
justifyContent: 'start',
|
|
@@ -45,21 +42,21 @@ const DropdownItem = react_1.default.forwardRef((props, ref) => {
|
|
|
45
42
|
fontSize: '0.875rem',
|
|
46
43
|
borderStyle: 'solid',
|
|
47
44
|
borderBottomWidth: lastItem ? '0px' : '1px',
|
|
48
|
-
borderBottomColor: theme
|
|
49
|
-
background: theme
|
|
45
|
+
borderBottomColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
|
|
46
|
+
background: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
|
|
50
47
|
borderTop: 'none',
|
|
51
48
|
borderRight: 'none',
|
|
52
49
|
borderLeft: 'none',
|
|
53
50
|
cursor: 'pointer',
|
|
54
|
-
color: theme
|
|
55
|
-
}, type: "button", onClick: ()
|
|
51
|
+
color: (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || '#364153',
|
|
52
|
+
}, type: "button", onClick: function () { return handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(value); } }, other, { children: _jsx("p", __assign({ style: {
|
|
56
53
|
margin: 0,
|
|
57
|
-
fontFamily: theme
|
|
58
|
-
color: theme
|
|
54
|
+
fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
|
|
55
|
+
color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
|
|
59
56
|
whiteSpace: 'nowrap',
|
|
60
57
|
overflow: 'hidden',
|
|
61
58
|
textOverflow: 'ellipsis',
|
|
62
|
-
}, children: text
|
|
59
|
+
} }, { children: text !== null && text !== void 0 ? text : value })) })));
|
|
63
60
|
});
|
|
64
|
-
|
|
61
|
+
export default DropdownItem;
|
|
65
62
|
//# sourceMappingURL=DropdownItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAW3E,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,UAAC,KAAK,EAAE,GAAG;IACD,IAAA,KAAK,GAAuD,KAAK,MAA5D,EAAE,IAAI,GAAiD,KAAK,KAAtD,EAAE,IAAI,GAA2C,KAAK,KAAhD,EAAE,SAAS,GAAgC,KAAK,UAArC,EAAE,KAAK,GAAyB,KAAK,MAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAK,KAAK,UAAK,KAAK,EAAnE,2DAA2D,CAAF,CAAW;IACpE,IAAA,KACJ,UAAU,CAAC,oBAAoB,CAAC,EAD1B,aAAa,mBAAA,EAAE,iBAAiB,uBACN,CAAC;IAC3B,IAAA,YAAY,GAAK,UAAU,CAAC,mBAAmB,CAAC,aAApC,CAAqC;IACzD,IAAM,QAAQ,GAAG,aAAa,KAAK,KAAK,CAAC;IACzC,IAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;IAEzC,IAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChC,OAAO,CACL,0BACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,OAAO;YACvB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,OAAO,EAAE,iBAAiB;YAC1B,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,OAAO;YACpB,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,SAAS;YAClD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO;YAC7C,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,KAAI,SAAS;SAC5C,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,KAAK,CAAC,EAA1B,CAA0B,IACrC,KAAK,cAET,qBACE,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU;gBAC7B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB;gBAC9B,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;aACzB,gBAEA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,IACZ,IACG,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DropdownItem = exports.Dropdown = void 0;
|
|
7
|
-
var Dropdown_1 = require("./Dropdown");
|
|
8
|
-
Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
|
|
9
|
-
var DropdownItem_1 = require("./DropdownItem");
|
|
10
|
-
Object.defineProperty(exports, "DropdownItem", { enumerable: true, get: function () { return __importDefault(DropdownItem_1).default; } });
|
|
1
|
+
export { default as Dropdown } from "./Dropdown";
|
|
2
|
+
export { default as DropdownItem } from "./DropdownItem";
|
|
11
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,68 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
24
22
|
};
|
|
25
|
-
|
|
26
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
24
|
/* eslint-disable react/display-name */
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
25
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
26
|
+
import { useOnClickOutside, useOnWindowResize } from '../../hooks';
|
|
27
|
+
import { mergeRefs } from '../../lib';
|
|
28
|
+
var Modal = React.forwardRef(function (props, ref) {
|
|
29
|
+
var showModal = props.showModal, setShowModal = props.setShowModal, parentRef = props.parentRef, width = props.width, _a = props.maxHeight, maxHeight = _a === void 0 ? '18rem' : _a, children = props.children, className = props.className, theme = props.theme, other = __rest(props, ["showModal", "setShowModal", "parentRef", "width", "maxHeight", "children", "className", "theme"]);
|
|
30
|
+
var _b = useState(false), modalExceedsWindow = _b[0], setModalExceedsWindow = _b[1];
|
|
31
|
+
var modalRef = useRef(null);
|
|
32
|
+
var checkModalExceedsWindow = useCallback(function (modalWidth, windowWidth) {
|
|
36
33
|
if (!parentRef.current) {
|
|
37
34
|
return false;
|
|
38
35
|
}
|
|
39
|
-
|
|
36
|
+
var modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
|
|
40
37
|
return windowWidth - modalBoundingRight < 0;
|
|
41
38
|
}, [parentRef]);
|
|
42
|
-
|
|
39
|
+
var getAbsoluteSpacing = function () {
|
|
43
40
|
return modalExceedsWindow ? '0' : '0';
|
|
44
41
|
};
|
|
45
|
-
|
|
42
|
+
useOnClickOutside(modalRef, function (e) {
|
|
43
|
+
var _a;
|
|
46
44
|
// Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
|
|
47
|
-
|
|
48
|
-
? parentRef.current
|
|
45
|
+
var isTriggerElem = parentRef
|
|
46
|
+
? (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)
|
|
49
47
|
: false;
|
|
50
48
|
if (!isTriggerElem) {
|
|
51
49
|
setShowModal(false);
|
|
52
50
|
}
|
|
53
51
|
});
|
|
54
52
|
// Execute only when modal is of absolute size
|
|
55
|
-
(
|
|
53
|
+
useEffect(function () {
|
|
56
54
|
if (width) {
|
|
57
55
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
58
56
|
}
|
|
59
57
|
}, [checkModalExceedsWindow, parentRef, width]);
|
|
60
|
-
(
|
|
58
|
+
useOnWindowResize(function () {
|
|
61
59
|
if (width) {
|
|
62
60
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
63
61
|
}
|
|
64
62
|
});
|
|
65
|
-
return showModal ? ((
|
|
63
|
+
return showModal ? (_jsx("div", __assign({ ref: mergeRefs([modalRef, ref]), style: {
|
|
66
64
|
position: 'absolute',
|
|
67
65
|
zIndex: 10,
|
|
68
66
|
overflowY: 'auto',
|
|
@@ -70,8 +68,8 @@ const Modal = react_1.default.forwardRef((props, ref) => {
|
|
|
70
68
|
left: getAbsoluteSpacing(),
|
|
71
69
|
right: getAbsoluteSpacing(),
|
|
72
70
|
maxHeight: maxHeight,
|
|
73
|
-
backgroundColor: theme
|
|
74
|
-
borderColor: theme
|
|
71
|
+
backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
|
|
72
|
+
borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
|
|
75
73
|
// borderTopColor: getColorClassNames(
|
|
76
74
|
// DEFAULT_COLOR,
|
|
77
75
|
// colorPalette.lightBorder
|
|
@@ -105,7 +103,7 @@ const Modal = react_1.default.forwardRef((props, ref) => {
|
|
|
105
103
|
// borderBottomWidth: '2px',
|
|
106
104
|
// borderLeftWidth: '2px',
|
|
107
105
|
// borderRightWidth: '2px',
|
|
108
|
-
},
|
|
106
|
+
} }, other, { children: children }))) : null;
|
|
109
107
|
});
|
|
110
|
-
|
|
108
|
+
export default Modal;
|
|
111
109
|
//# sourceMappingURL=Modal.js.map
|