@quillsql/react 2.12.2 → 2.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +3 -3
- package/dist/cjs/QuillProvider.d.ts +3 -3
- package/dist/cjs/QuillProvider.d.ts.map +1 -1
- package/dist/cjs/QuillProvider.js +1 -1
- package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts +11 -0
- package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map +1 -0
- package/dist/cjs/components/QuillMultiSelectWithCombo.js +228 -0
- package/dist/cjs/components/QuillSelectWithCombo.d.ts +6 -0
- package/dist/cjs/components/QuillSelectWithCombo.d.ts.map +1 -0
- package/dist/cjs/components/QuillSelectWithCombo.js +186 -0
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +3 -3
- package/dist/esm/QuillProvider.d.ts +3 -3
- package/dist/esm/QuillProvider.d.ts.map +1 -1
- package/dist/esm/QuillProvider.js +1 -1
- package/dist/esm/components/QuillMultiSelectWithCombo.d.ts +11 -0
- package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map +1 -0
- package/dist/esm/components/QuillMultiSelectWithCombo.js +200 -0
- package/dist/esm/components/QuillSelectWithCombo.d.ts +6 -0
- package/dist/esm/components/QuillSelectWithCombo.d.ts.map +1 -0
- package/dist/esm/components/QuillSelectWithCombo.js +159 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAsCf,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/Dashboard.js
CHANGED
|
@@ -45,8 +45,8 @@ const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker")
|
|
|
45
45
|
const DataLoader_1 = __importStar(require("./components/Dashboard/DataLoader"));
|
|
46
46
|
const UiComponents_1 = require("./components/UiComponents");
|
|
47
47
|
const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
|
|
48
|
-
const
|
|
49
|
-
const
|
|
48
|
+
const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
|
|
49
|
+
const QuillSelectWithCombo_1 = require("./components/QuillSelectWithCombo");
|
|
50
50
|
const defaultChartContainerStyles = {
|
|
51
51
|
display: 'flex',
|
|
52
52
|
width: '100%',
|
|
@@ -84,7 +84,7 @@ const defaultChartContainerStyles = {
|
|
|
84
84
|
* ### API Reference
|
|
85
85
|
* @see https://docs.quillsql.com/components/dashboard
|
|
86
86
|
*/
|
|
87
|
-
function Dashboard({ name, SelectComponent =
|
|
87
|
+
function Dashboard({ name, SelectComponent = QuillSelectWithCombo_1.QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = UiComponents_1.QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, onClickReport, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, }) {
|
|
88
88
|
const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
89
89
|
const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
|
|
90
90
|
const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
|
|
@@ -9,7 +9,7 @@ interface WithOrganizationId extends BaseQuillProviderProps {
|
|
|
9
9
|
organizationId: string;
|
|
10
10
|
queryEndpoint?: never;
|
|
11
11
|
queryHeaders?: never;
|
|
12
|
-
withCredentials?:
|
|
12
|
+
withCredentials?: never;
|
|
13
13
|
}
|
|
14
14
|
interface WithQueryEndpoint extends BaseQuillProviderProps {
|
|
15
15
|
organizationId?: string;
|
|
@@ -17,11 +17,11 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
|
|
|
17
17
|
queryHeaders: object;
|
|
18
18
|
withCredentials?: boolean;
|
|
19
19
|
}
|
|
20
|
-
export type
|
|
20
|
+
export type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
|
|
21
21
|
/**
|
|
22
22
|
* Props for the QuillProvider component.
|
|
23
23
|
*/
|
|
24
|
-
export type
|
|
24
|
+
export type IQuillProviderProps = {
|
|
25
25
|
/**
|
|
26
26
|
* Your Quill public key.
|
|
27
27
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAGD,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -87,7 +87,7 @@ exports.defaultQuillTheme = {
|
|
|
87
87
|
* ### Dashboard API
|
|
88
88
|
* @see https://docs.quillsql.com/components/quill-provider
|
|
89
89
|
*/
|
|
90
|
-
const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = exports.defaultQuillTheme, withCredentials
|
|
90
|
+
const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = exports.defaultQuillTheme, withCredentials, }) => {
|
|
91
91
|
return ((0, jsx_runtime_1.jsxs)(Context_1.ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: [children, (0, jsx_runtime_1.jsx)("style", { children: `/* For WebKit-based browsers (Chrome, Safari, Opera) */
|
|
92
92
|
::-webkit-scrollbar {
|
|
93
93
|
width: 0;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MultiSelectComponentProps } from './UiComponents';
|
|
2
|
+
/**
|
|
3
|
+
* A robust select component that implements the new minimal Select interface.
|
|
4
|
+
*/
|
|
5
|
+
export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
|
|
7
|
+
value: string;
|
|
8
|
+
onChange: (e: string) => void;
|
|
9
|
+
placeholder: string;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EAE1B,MAAM,gBAAgB,CAAC;AAYxB;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAoS3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
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;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.ListboxTextInput = exports.QuillMultiSelectComponentWithCombo = void 0;
|
|
27
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
|
+
const hooks_1 = require("../hooks");
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const Context_1 = require("../Context");
|
|
31
|
+
/**
|
|
32
|
+
* A robust select component that implements the new minimal Select interface.
|
|
33
|
+
*/
|
|
34
|
+
function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }) {
|
|
35
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
36
|
+
const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
|
|
37
|
+
const [showModal, setShowModal] = (0, react_1.useState)(false);
|
|
38
|
+
const modalRef = (0, react_1.useRef)(null);
|
|
39
|
+
const debounceTimeoutId = (0, react_1.useRef)(null);
|
|
40
|
+
const [searchQuery, setSearchQuery] = react_1.default.useState('');
|
|
41
|
+
const [filteredItems, setFilteredItems] = react_1.default.useState(options.slice(0, 20));
|
|
42
|
+
(0, react_1.useEffect)(() => {
|
|
43
|
+
setFilteredItems(options.slice(0, 20));
|
|
44
|
+
}, [options]);
|
|
45
|
+
const handleSearchChange = (value) => {
|
|
46
|
+
setSearchQuery(value);
|
|
47
|
+
const curFilteredItems = value === ''
|
|
48
|
+
? options.slice(0, 20)
|
|
49
|
+
: options
|
|
50
|
+
.filter((option) => {
|
|
51
|
+
if (!option) {
|
|
52
|
+
return false;
|
|
53
|
+
}
|
|
54
|
+
return option.value
|
|
55
|
+
.toLowerCase()
|
|
56
|
+
.replace(/\s+/g, '')
|
|
57
|
+
.includes(value.toLowerCase().replace(/\s+/g, ''));
|
|
58
|
+
})
|
|
59
|
+
.slice(0, 20);
|
|
60
|
+
setFilteredItems(curFilteredItems);
|
|
61
|
+
};
|
|
62
|
+
(0, hooks_1.useOnClickOutside)(modalRef, (e) => setShowModal(false));
|
|
63
|
+
(0, react_1.useEffect)(() => {
|
|
64
|
+
if (!value) {
|
|
65
|
+
setSelectedOptions([]);
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
setSelectedOptions(value);
|
|
69
|
+
}
|
|
70
|
+
}, [value]);
|
|
71
|
+
const debounce = (updatedChangeEvent) => {
|
|
72
|
+
if (debounceTimeoutId.current) {
|
|
73
|
+
clearTimeout(debounceTimeoutId.current);
|
|
74
|
+
}
|
|
75
|
+
debounceTimeoutId.current = setTimeout(() => {
|
|
76
|
+
onChange(updatedChangeEvent);
|
|
77
|
+
}, 500);
|
|
78
|
+
};
|
|
79
|
+
// const filterOptions = (query: string) => {
|
|
80
|
+
// setSearchQuery(query);
|
|
81
|
+
// setFilteredOptions(
|
|
82
|
+
// options.filter((option) =>
|
|
83
|
+
// option.label.toLowerCase().includes(query.toLowerCase()),
|
|
84
|
+
// ),
|
|
85
|
+
// );
|
|
86
|
+
// };
|
|
87
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
88
|
+
position: 'relative',
|
|
89
|
+
borderRadius: '6px',
|
|
90
|
+
width: width,
|
|
91
|
+
minWidth: width,
|
|
92
|
+
}, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
93
|
+
fontSize: 14,
|
|
94
|
+
color: theme.secondaryTextColor,
|
|
95
|
+
fontFamily: theme.fontFamily,
|
|
96
|
+
paddingBottom: 5,
|
|
97
|
+
fontWeight: 600,
|
|
98
|
+
}, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
99
|
+
fontFamily: theme.fontFamily,
|
|
100
|
+
color: theme.primaryTextColor,
|
|
101
|
+
width: '100%',
|
|
102
|
+
display: 'flex',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
justifyContent: 'space-between',
|
|
105
|
+
fontWeight: 'inherit',
|
|
106
|
+
lineHeight: 'inherit',
|
|
107
|
+
padding: '8px 12px',
|
|
108
|
+
fontSize: 14,
|
|
109
|
+
margin: 0,
|
|
110
|
+
boxSizing: 'border-box',
|
|
111
|
+
borderWidth: 1,
|
|
112
|
+
borderStyle: 'solid',
|
|
113
|
+
borderColor: theme.borderColor,
|
|
114
|
+
borderRadius: 6,
|
|
115
|
+
paddingTop: 9,
|
|
116
|
+
paddingBottom: 9,
|
|
117
|
+
height: 40,
|
|
118
|
+
minHeight: 40,
|
|
119
|
+
maxHeight: 40,
|
|
120
|
+
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; }
|
|
121
|
+
.quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }
|
|
122
|
+
` }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
123
|
+
textOverflow: 'ellipsis',
|
|
124
|
+
whiteSpace: 'nowrap',
|
|
125
|
+
overflow: 'hidden',
|
|
126
|
+
width: '100%',
|
|
127
|
+
textAlign: 'left',
|
|
128
|
+
zIndex: 1,
|
|
129
|
+
}, children: value && value.length > 0 ? value.join(', ') : 'Select' }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
|
|
130
|
+
position: 'absolute',
|
|
131
|
+
width: '100%',
|
|
132
|
+
display: 'flex',
|
|
133
|
+
flexDirection: 'column',
|
|
134
|
+
boxSizing: 'border-box',
|
|
135
|
+
borderWidth: 1,
|
|
136
|
+
borderStyle: 'solid',
|
|
137
|
+
borderColor: theme.borderColor,
|
|
138
|
+
borderRadius: 6,
|
|
139
|
+
background: 'white',
|
|
140
|
+
marginTop: 12,
|
|
141
|
+
zIndex: 100,
|
|
142
|
+
padding: 6,
|
|
143
|
+
fontFamily: theme.fontFamily,
|
|
144
|
+
maxHeight: '50vh',
|
|
145
|
+
overflow: 'scroll',
|
|
146
|
+
}, children: [options && options.length > 20 && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
147
|
+
handleSearchChange(value);
|
|
148
|
+
} })), options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
149
|
+
display: 'flex',
|
|
150
|
+
alignItems: 'center',
|
|
151
|
+
padding: 8,
|
|
152
|
+
margin: 0,
|
|
153
|
+
boxSizing: 'border-box',
|
|
154
|
+
borderWidth: 0,
|
|
155
|
+
fontSize: 14,
|
|
156
|
+
borderStyle: 'solid',
|
|
157
|
+
borderColor: theme.borderColor,
|
|
158
|
+
borderRadius: 4,
|
|
159
|
+
fontFamily: theme.fontFamily,
|
|
160
|
+
textOverflow: 'ellipsis',
|
|
161
|
+
whiteSpace: 'nowrap',
|
|
162
|
+
height: 34,
|
|
163
|
+
minHeight: 34,
|
|
164
|
+
gap: 6,
|
|
165
|
+
overflow: 'hidden',
|
|
166
|
+
}, className: "quill-option", onClick: () => {
|
|
167
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
168
|
+
const changeEvent = { target: { value: option.value } };
|
|
169
|
+
let updateSelctedOptions = [...selectedOptions];
|
|
170
|
+
if (selectedOptions.includes(changeEvent.target.value)) {
|
|
171
|
+
updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
|
|
172
|
+
setSelectedOptions(updateSelctedOptions);
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
updateSelctedOptions = [
|
|
176
|
+
...updateSelctedOptions,
|
|
177
|
+
changeEvent.target.value,
|
|
178
|
+
];
|
|
179
|
+
setSelectedOptions(updateSelctedOptions);
|
|
180
|
+
}
|
|
181
|
+
const updatedChangeEvent = {
|
|
182
|
+
target: { value: JSON.stringify(updateSelctedOptions) },
|
|
183
|
+
};
|
|
184
|
+
if (updateSelctedOptions.length === 0) {
|
|
185
|
+
updatedChangeEvent.target.value = '';
|
|
186
|
+
}
|
|
187
|
+
debounce(updatedChangeEvent);
|
|
188
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
189
|
+
.quill-option {
|
|
190
|
+
background: white;
|
|
191
|
+
}
|
|
192
|
+
.quill-option:hover {
|
|
193
|
+
background: #F4F4F5;
|
|
194
|
+
}
|
|
195
|
+
` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
196
|
+
textOverflow: 'ellipsis',
|
|
197
|
+
whiteSpace: 'nowrap',
|
|
198
|
+
overflow: 'hidden',
|
|
199
|
+
}, children: option.label })] }, option.value)))] }))] }));
|
|
200
|
+
}
|
|
201
|
+
exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
|
|
202
|
+
const ListboxTextInput = ({ value, onChange, placeholder, }) => {
|
|
203
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
204
|
+
position: 'relative',
|
|
205
|
+
display: 'flex',
|
|
206
|
+
flexDirection: 'row',
|
|
207
|
+
alignItems: 'center',
|
|
208
|
+
marginTop: 2,
|
|
209
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
210
|
+
.quill-text-input {
|
|
211
|
+
background-color: white;
|
|
212
|
+
height: 40px;
|
|
213
|
+
width: 180px;
|
|
214
|
+
z-index: 2;
|
|
215
|
+
color: #384151;
|
|
216
|
+
border-radius: 4px;
|
|
217
|
+
text-align: left;
|
|
218
|
+
padding-right: 12px;
|
|
219
|
+
padding-top: 0px;
|
|
220
|
+
padding-bottom: 0px;
|
|
221
|
+
box-sizing: content-box;
|
|
222
|
+
margin-left: 6px;
|
|
223
|
+
}
|
|
224
|
+
.quill-text-input:focus {
|
|
225
|
+
outline: none;
|
|
226
|
+
}` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
|
|
227
|
+
};
|
|
228
|
+
exports.ListboxTextInput = ListboxTextInput;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SelectComponentProps } from './UiComponents';
|
|
2
|
+
/**
|
|
3
|
+
* A robust select component that implements the new minimal Select interface.
|
|
4
|
+
*/
|
|
5
|
+
export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
//# sourceMappingURL=QuillSelectWithCombo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtD;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA+OtB"}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
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;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.QuillSelectComponentWithCombo = void 0;
|
|
27
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
|
+
const hooks_1 = require("../hooks");
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const Context_1 = require("../Context");
|
|
31
|
+
const QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
|
|
32
|
+
/**
|
|
33
|
+
* A robust select component that implements the new minimal Select interface.
|
|
34
|
+
*/
|
|
35
|
+
function QuillSelectComponentWithCombo({ options, value, width, onChange, label, }) {
|
|
36
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
37
|
+
const [showModal, setShowModal] = (0, react_1.useState)(false);
|
|
38
|
+
const modalRef = (0, react_1.useRef)(null);
|
|
39
|
+
const [searchQuery, setSearchQuery] = react_1.default.useState('');
|
|
40
|
+
const [filteredItems, setFilteredItems] = react_1.default.useState(options.slice(0, 20));
|
|
41
|
+
(0, hooks_1.useOnClickOutside)(modalRef, (e) => setShowModal(false));
|
|
42
|
+
const handleSearchChange = (value) => {
|
|
43
|
+
setSearchQuery(value);
|
|
44
|
+
const curFilteredItems = value === ''
|
|
45
|
+
? options.slice(0, 20)
|
|
46
|
+
: options
|
|
47
|
+
.filter((option) => {
|
|
48
|
+
if (!option) {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
return option.value
|
|
52
|
+
.toLowerCase()
|
|
53
|
+
.replace(/\s+/g, '')
|
|
54
|
+
.includes(value.toLowerCase().replace(/\s+/g, ''));
|
|
55
|
+
})
|
|
56
|
+
.slice(0, 20);
|
|
57
|
+
setFilteredItems(curFilteredItems);
|
|
58
|
+
};
|
|
59
|
+
(0, hooks_1.useOnClickOutside)(modalRef, (e) => setShowModal(false));
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
61
|
+
position: 'relative',
|
|
62
|
+
// width: 200,
|
|
63
|
+
// minWidth: 200,
|
|
64
|
+
borderRadius: '6px',
|
|
65
|
+
width: width,
|
|
66
|
+
minWidth: width,
|
|
67
|
+
}, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
68
|
+
fontSize: 14,
|
|
69
|
+
color: theme.secondaryTextColor,
|
|
70
|
+
fontFamily: theme.fontFamily,
|
|
71
|
+
paddingBottom: 5,
|
|
72
|
+
fontWeight: 600,
|
|
73
|
+
}, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
74
|
+
fontFamily: theme.fontFamily,
|
|
75
|
+
color: theme.primaryTextColor,
|
|
76
|
+
width: '100%',
|
|
77
|
+
display: 'flex',
|
|
78
|
+
alignItems: 'center',
|
|
79
|
+
justifyContent: 'space-between',
|
|
80
|
+
lineHeight: 'inherit',
|
|
81
|
+
padding: '8px 12px',
|
|
82
|
+
fontSize: 14,
|
|
83
|
+
margin: 0,
|
|
84
|
+
boxSizing: 'border-box',
|
|
85
|
+
borderWidth: 1,
|
|
86
|
+
borderStyle: 'solid',
|
|
87
|
+
borderColor: theme.borderColor,
|
|
88
|
+
borderRadius: 6,
|
|
89
|
+
paddingTop: 9,
|
|
90
|
+
paddingBottom: 9,
|
|
91
|
+
height: 40,
|
|
92
|
+
minHeight: 40,
|
|
93
|
+
maxHeight: 40,
|
|
94
|
+
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
95
|
+
textOverflow: 'ellipsis',
|
|
96
|
+
whiteSpace: 'nowrap',
|
|
97
|
+
overflow: 'hidden',
|
|
98
|
+
}, children: options.find((elem) => elem.value === value)?.label || 'Select' }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
|
|
99
|
+
position: 'absolute',
|
|
100
|
+
width: '100%',
|
|
101
|
+
display: 'flex',
|
|
102
|
+
flexDirection: 'column',
|
|
103
|
+
boxSizing: 'border-box',
|
|
104
|
+
borderWidth: 1,
|
|
105
|
+
borderStyle: 'solid',
|
|
106
|
+
borderColor: theme.borderColor,
|
|
107
|
+
borderRadius: 6,
|
|
108
|
+
background: 'white',
|
|
109
|
+
marginTop: 12,
|
|
110
|
+
zIndex: 100,
|
|
111
|
+
paddingTop: 6,
|
|
112
|
+
paddingBottom: 6,
|
|
113
|
+
paddingLeft: 6,
|
|
114
|
+
paddingRight: 6,
|
|
115
|
+
fontFamily: theme.fontFamily,
|
|
116
|
+
maxHeight: '50vh',
|
|
117
|
+
overflow: 'scroll',
|
|
118
|
+
}, children: [options && options.length > 20 && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
119
|
+
handleSearchChange(value);
|
|
120
|
+
} })), searchQuery === '' && ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
121
|
+
display: 'flex',
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
justifyContent: 'space-between',
|
|
124
|
+
padding: '8px 8px',
|
|
125
|
+
margin: 0,
|
|
126
|
+
boxSizing: 'border-box',
|
|
127
|
+
borderWidth: 0,
|
|
128
|
+
fontSize: 14,
|
|
129
|
+
borderStyle: 'solid',
|
|
130
|
+
borderColor: theme.borderColor,
|
|
131
|
+
borderRadius: 4,
|
|
132
|
+
fontFamily: theme.fontFamily,
|
|
133
|
+
textOverflow: 'ellipsis',
|
|
134
|
+
whiteSpace: 'nowrap',
|
|
135
|
+
overflow: 'hidden',
|
|
136
|
+
height: 34,
|
|
137
|
+
minHeight: 34,
|
|
138
|
+
}, className: "quill-option", onClick: () => {
|
|
139
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
140
|
+
const changeEvent = { target: { value: '' } };
|
|
141
|
+
onChange(changeEvent);
|
|
142
|
+
setShowModal(false);
|
|
143
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
144
|
+
.quill-option {
|
|
145
|
+
background: white;
|
|
146
|
+
}
|
|
147
|
+
.quill-option:hover {
|
|
148
|
+
background: #F4F4F5;
|
|
149
|
+
}
|
|
150
|
+
` }), 'Select'] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
151
|
+
display: 'flex',
|
|
152
|
+
alignItems: 'center',
|
|
153
|
+
justifyContent: 'space-between',
|
|
154
|
+
padding: '8px 8px',
|
|
155
|
+
margin: 0,
|
|
156
|
+
boxSizing: 'border-box',
|
|
157
|
+
borderWidth: 0,
|
|
158
|
+
fontSize: 14,
|
|
159
|
+
borderStyle: 'solid',
|
|
160
|
+
borderColor: theme.borderColor,
|
|
161
|
+
borderRadius: 4,
|
|
162
|
+
fontFamily: theme.fontFamily,
|
|
163
|
+
textOverflow: 'ellipsis',
|
|
164
|
+
whiteSpace: 'nowrap',
|
|
165
|
+
height: 34,
|
|
166
|
+
minHeight: 34,
|
|
167
|
+
overflow: 'hidden',
|
|
168
|
+
}, className: "quill-option", onClick: () => {
|
|
169
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
170
|
+
const changeEvent = { target: { value: option.value } };
|
|
171
|
+
onChange(changeEvent);
|
|
172
|
+
setShowModal(false);
|
|
173
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
174
|
+
.quill-option {
|
|
175
|
+
background: white;
|
|
176
|
+
}
|
|
177
|
+
.quill-option:hover {
|
|
178
|
+
background: #F4F4F5;
|
|
179
|
+
}
|
|
180
|
+
` }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
181
|
+
textOverflow: 'ellipsis',
|
|
182
|
+
whiteSpace: 'nowrap',
|
|
183
|
+
overflow: 'hidden',
|
|
184
|
+
}, children: option.label })] }, option.value)))] }))] }));
|
|
185
|
+
}
|
|
186
|
+
exports.QuillSelectComponentWithCombo = QuillSelectComponentWithCombo;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAsCf,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/Dashboard.js
CHANGED
|
@@ -17,8 +17,8 @@ import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
|
|
|
17
17
|
import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
|
|
18
18
|
import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, } from './components/UiComponents';
|
|
19
19
|
import { DashboardFilter } from './components/Dashboard/DashboardFilter';
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
20
|
+
import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
|
|
21
|
+
import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
|
|
22
22
|
const defaultChartContainerStyles = {
|
|
23
23
|
display: 'flex',
|
|
24
24
|
width: '100%',
|
|
@@ -56,7 +56,7 @@ const defaultChartContainerStyles = {
|
|
|
56
56
|
* ### API Reference
|
|
57
57
|
* @see https://docs.quillsql.com/components/dashboard
|
|
58
58
|
*/
|
|
59
|
-
export default function Dashboard({ name, SelectComponent =
|
|
59
|
+
export default function Dashboard({ name, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, onClickReport, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, }) {
|
|
60
60
|
const { dispatch } = useContext(DashboardContext);
|
|
61
61
|
const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
|
|
62
62
|
const [dashboardSections, setDashboardSections] = useState(null);
|
|
@@ -9,7 +9,7 @@ interface WithOrganizationId extends BaseQuillProviderProps {
|
|
|
9
9
|
organizationId: string;
|
|
10
10
|
queryEndpoint?: never;
|
|
11
11
|
queryHeaders?: never;
|
|
12
|
-
withCredentials?:
|
|
12
|
+
withCredentials?: never;
|
|
13
13
|
}
|
|
14
14
|
interface WithQueryEndpoint extends BaseQuillProviderProps {
|
|
15
15
|
organizationId?: string;
|
|
@@ -17,11 +17,11 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
|
|
|
17
17
|
queryHeaders: object;
|
|
18
18
|
withCredentials?: boolean;
|
|
19
19
|
}
|
|
20
|
-
export type
|
|
20
|
+
export type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
|
|
21
21
|
/**
|
|
22
22
|
* Props for the QuillProvider component.
|
|
23
23
|
*/
|
|
24
|
-
export type
|
|
24
|
+
export type IQuillProviderProps = {
|
|
25
25
|
/**
|
|
26
26
|
* Your Quill public key.
|
|
27
27
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAGD,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -84,7 +84,7 @@ export const defaultQuillTheme = {
|
|
|
84
84
|
* ### Dashboard API
|
|
85
85
|
* @see https://docs.quillsql.com/components/quill-provider
|
|
86
86
|
*/
|
|
87
|
-
const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = defaultQuillTheme, withCredentials
|
|
87
|
+
const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = defaultQuillTheme, withCredentials, }) => {
|
|
88
88
|
return (_jsxs(ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: [children, _jsx("style", { children: `/* For WebKit-based browsers (Chrome, Safari, Opera) */
|
|
89
89
|
::-webkit-scrollbar {
|
|
90
90
|
width: 0;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MultiSelectComponentProps } from './UiComponents';
|
|
2
|
+
/**
|
|
3
|
+
* A robust select component that implements the new minimal Select interface.
|
|
4
|
+
*/
|
|
5
|
+
export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
|
|
7
|
+
value: string;
|
|
8
|
+
onChange: (e: string) => void;
|
|
9
|
+
placeholder: string;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EAE1B,MAAM,gBAAgB,CAAC;AAYxB;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAoS3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useOnClickOutside } from '../hooks';
|
|
3
|
+
import React, { useContext, useEffect, useRef, useState, } from 'react';
|
|
4
|
+
import { ThemeContext } from '../Context';
|
|
5
|
+
/**
|
|
6
|
+
* A robust select component that implements the new minimal Select interface.
|
|
7
|
+
*/
|
|
8
|
+
export function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }) {
|
|
9
|
+
const [theme] = useContext(ThemeContext);
|
|
10
|
+
const [selectedOptions, setSelectedOptions] = useState([]);
|
|
11
|
+
const [showModal, setShowModal] = useState(false);
|
|
12
|
+
const modalRef = useRef(null);
|
|
13
|
+
const debounceTimeoutId = useRef(null);
|
|
14
|
+
const [searchQuery, setSearchQuery] = React.useState('');
|
|
15
|
+
const [filteredItems, setFilteredItems] = React.useState(options.slice(0, 20));
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
setFilteredItems(options.slice(0, 20));
|
|
18
|
+
}, [options]);
|
|
19
|
+
const handleSearchChange = (value) => {
|
|
20
|
+
setSearchQuery(value);
|
|
21
|
+
const curFilteredItems = value === ''
|
|
22
|
+
? options.slice(0, 20)
|
|
23
|
+
: options
|
|
24
|
+
.filter((option) => {
|
|
25
|
+
if (!option) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
return option.value
|
|
29
|
+
.toLowerCase()
|
|
30
|
+
.replace(/\s+/g, '')
|
|
31
|
+
.includes(value.toLowerCase().replace(/\s+/g, ''));
|
|
32
|
+
})
|
|
33
|
+
.slice(0, 20);
|
|
34
|
+
setFilteredItems(curFilteredItems);
|
|
35
|
+
};
|
|
36
|
+
useOnClickOutside(modalRef, (e) => setShowModal(false));
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (!value) {
|
|
39
|
+
setSelectedOptions([]);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
setSelectedOptions(value);
|
|
43
|
+
}
|
|
44
|
+
}, [value]);
|
|
45
|
+
const debounce = (updatedChangeEvent) => {
|
|
46
|
+
if (debounceTimeoutId.current) {
|
|
47
|
+
clearTimeout(debounceTimeoutId.current);
|
|
48
|
+
}
|
|
49
|
+
debounceTimeoutId.current = setTimeout(() => {
|
|
50
|
+
onChange(updatedChangeEvent);
|
|
51
|
+
}, 500);
|
|
52
|
+
};
|
|
53
|
+
// const filterOptions = (query: string) => {
|
|
54
|
+
// setSearchQuery(query);
|
|
55
|
+
// setFilteredOptions(
|
|
56
|
+
// options.filter((option) =>
|
|
57
|
+
// option.label.toLowerCase().includes(query.toLowerCase()),
|
|
58
|
+
// ),
|
|
59
|
+
// );
|
|
60
|
+
// };
|
|
61
|
+
return (_jsxs("div", { style: {
|
|
62
|
+
position: 'relative',
|
|
63
|
+
borderRadius: '6px',
|
|
64
|
+
width: width,
|
|
65
|
+
minWidth: width,
|
|
66
|
+
}, children: [label && (_jsx("div", { style: {
|
|
67
|
+
fontSize: 14,
|
|
68
|
+
color: theme.secondaryTextColor,
|
|
69
|
+
fontFamily: theme.fontFamily,
|
|
70
|
+
paddingBottom: 5,
|
|
71
|
+
fontWeight: 600,
|
|
72
|
+
}, children: label })), _jsxs("button", { style: {
|
|
73
|
+
fontFamily: theme.fontFamily,
|
|
74
|
+
color: theme.primaryTextColor,
|
|
75
|
+
width: '100%',
|
|
76
|
+
display: 'flex',
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
justifyContent: 'space-between',
|
|
79
|
+
fontWeight: 'inherit',
|
|
80
|
+
lineHeight: 'inherit',
|
|
81
|
+
padding: '8px 12px',
|
|
82
|
+
fontSize: 14,
|
|
83
|
+
margin: 0,
|
|
84
|
+
boxSizing: 'border-box',
|
|
85
|
+
borderWidth: 1,
|
|
86
|
+
borderStyle: 'solid',
|
|
87
|
+
borderColor: theme.borderColor,
|
|
88
|
+
borderRadius: 6,
|
|
89
|
+
paddingTop: 9,
|
|
90
|
+
paddingBottom: 9,
|
|
91
|
+
height: 40,
|
|
92
|
+
minHeight: 40,
|
|
93
|
+
maxHeight: 40,
|
|
94
|
+
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; }
|
|
95
|
+
.quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }
|
|
96
|
+
` }), _jsx("span", { style: {
|
|
97
|
+
textOverflow: 'ellipsis',
|
|
98
|
+
whiteSpace: 'nowrap',
|
|
99
|
+
overflow: 'hidden',
|
|
100
|
+
width: '100%',
|
|
101
|
+
textAlign: 'left',
|
|
102
|
+
zIndex: 1,
|
|
103
|
+
}, children: value && value.length > 0 ? value.join(', ') : 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { ref: modalRef, style: {
|
|
104
|
+
position: 'absolute',
|
|
105
|
+
width: '100%',
|
|
106
|
+
display: 'flex',
|
|
107
|
+
flexDirection: 'column',
|
|
108
|
+
boxSizing: 'border-box',
|
|
109
|
+
borderWidth: 1,
|
|
110
|
+
borderStyle: 'solid',
|
|
111
|
+
borderColor: theme.borderColor,
|
|
112
|
+
borderRadius: 6,
|
|
113
|
+
background: 'white',
|
|
114
|
+
marginTop: 12,
|
|
115
|
+
zIndex: 100,
|
|
116
|
+
padding: 6,
|
|
117
|
+
fontFamily: theme.fontFamily,
|
|
118
|
+
maxHeight: '50vh',
|
|
119
|
+
overflow: 'scroll',
|
|
120
|
+
}, children: [options && options.length > 20 && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
121
|
+
handleSearchChange(value);
|
|
122
|
+
} })), options && options.length > 20 && (_jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } })), filteredItems.map((option) => (_jsxs("button", { style: {
|
|
123
|
+
display: 'flex',
|
|
124
|
+
alignItems: 'center',
|
|
125
|
+
padding: 8,
|
|
126
|
+
margin: 0,
|
|
127
|
+
boxSizing: 'border-box',
|
|
128
|
+
borderWidth: 0,
|
|
129
|
+
fontSize: 14,
|
|
130
|
+
borderStyle: 'solid',
|
|
131
|
+
borderColor: theme.borderColor,
|
|
132
|
+
borderRadius: 4,
|
|
133
|
+
fontFamily: theme.fontFamily,
|
|
134
|
+
textOverflow: 'ellipsis',
|
|
135
|
+
whiteSpace: 'nowrap',
|
|
136
|
+
height: 34,
|
|
137
|
+
minHeight: 34,
|
|
138
|
+
gap: 6,
|
|
139
|
+
overflow: 'hidden',
|
|
140
|
+
}, className: "quill-option", onClick: () => {
|
|
141
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
142
|
+
const changeEvent = { target: { value: option.value } };
|
|
143
|
+
let updateSelctedOptions = [...selectedOptions];
|
|
144
|
+
if (selectedOptions.includes(changeEvent.target.value)) {
|
|
145
|
+
updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
|
|
146
|
+
setSelectedOptions(updateSelctedOptions);
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
updateSelctedOptions = [
|
|
150
|
+
...updateSelctedOptions,
|
|
151
|
+
changeEvent.target.value,
|
|
152
|
+
];
|
|
153
|
+
setSelectedOptions(updateSelctedOptions);
|
|
154
|
+
}
|
|
155
|
+
const updatedChangeEvent = {
|
|
156
|
+
target: { value: JSON.stringify(updateSelctedOptions) },
|
|
157
|
+
};
|
|
158
|
+
if (updateSelctedOptions.length === 0) {
|
|
159
|
+
updatedChangeEvent.target.value = '';
|
|
160
|
+
}
|
|
161
|
+
debounce(updatedChangeEvent);
|
|
162
|
+
}, children: [_jsx("style", { children: `
|
|
163
|
+
.quill-option {
|
|
164
|
+
background: white;
|
|
165
|
+
}
|
|
166
|
+
.quill-option:hover {
|
|
167
|
+
background: #F4F4F5;
|
|
168
|
+
}
|
|
169
|
+
` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
|
|
170
|
+
textOverflow: 'ellipsis',
|
|
171
|
+
whiteSpace: 'nowrap',
|
|
172
|
+
overflow: 'hidden',
|
|
173
|
+
}, children: option.label })] }, option.value)))] }))] }));
|
|
174
|
+
}
|
|
175
|
+
export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
|
|
176
|
+
return (_jsxs("div", { style: {
|
|
177
|
+
position: 'relative',
|
|
178
|
+
display: 'flex',
|
|
179
|
+
flexDirection: 'row',
|
|
180
|
+
alignItems: 'center',
|
|
181
|
+
marginTop: 2,
|
|
182
|
+
}, children: [_jsx("style", { children: `
|
|
183
|
+
.quill-text-input {
|
|
184
|
+
background-color: white;
|
|
185
|
+
height: 40px;
|
|
186
|
+
width: 180px;
|
|
187
|
+
z-index: 2;
|
|
188
|
+
color: #384151;
|
|
189
|
+
border-radius: 4px;
|
|
190
|
+
text-align: left;
|
|
191
|
+
padding-right: 12px;
|
|
192
|
+
padding-top: 0px;
|
|
193
|
+
padding-bottom: 0px;
|
|
194
|
+
box-sizing: content-box;
|
|
195
|
+
margin-left: 6px;
|
|
196
|
+
}
|
|
197
|
+
.quill-text-input:focus {
|
|
198
|
+
outline: none;
|
|
199
|
+
}` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
|
|
200
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SelectComponentProps } from './UiComponents';
|
|
2
|
+
/**
|
|
3
|
+
* A robust select component that implements the new minimal Select interface.
|
|
4
|
+
*/
|
|
5
|
+
export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
//# sourceMappingURL=QuillSelectWithCombo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtD;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA+OtB"}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useOnClickOutside } from '../hooks';
|
|
3
|
+
import React, { useContext, useRef, useState } from 'react';
|
|
4
|
+
import { ThemeContext } from '../Context';
|
|
5
|
+
import { ListboxTextInput } from './QuillMultiSelectWithCombo';
|
|
6
|
+
/**
|
|
7
|
+
* A robust select component that implements the new minimal Select interface.
|
|
8
|
+
*/
|
|
9
|
+
export function QuillSelectComponentWithCombo({ options, value, width, onChange, label, }) {
|
|
10
|
+
const [theme] = useContext(ThemeContext);
|
|
11
|
+
const [showModal, setShowModal] = useState(false);
|
|
12
|
+
const modalRef = useRef(null);
|
|
13
|
+
const [searchQuery, setSearchQuery] = React.useState('');
|
|
14
|
+
const [filteredItems, setFilteredItems] = React.useState(options.slice(0, 20));
|
|
15
|
+
useOnClickOutside(modalRef, (e) => setShowModal(false));
|
|
16
|
+
const handleSearchChange = (value) => {
|
|
17
|
+
setSearchQuery(value);
|
|
18
|
+
const curFilteredItems = value === ''
|
|
19
|
+
? options.slice(0, 20)
|
|
20
|
+
: options
|
|
21
|
+
.filter((option) => {
|
|
22
|
+
if (!option) {
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
return option.value
|
|
26
|
+
.toLowerCase()
|
|
27
|
+
.replace(/\s+/g, '')
|
|
28
|
+
.includes(value.toLowerCase().replace(/\s+/g, ''));
|
|
29
|
+
})
|
|
30
|
+
.slice(0, 20);
|
|
31
|
+
setFilteredItems(curFilteredItems);
|
|
32
|
+
};
|
|
33
|
+
useOnClickOutside(modalRef, (e) => setShowModal(false));
|
|
34
|
+
return (_jsxs("div", { style: {
|
|
35
|
+
position: 'relative',
|
|
36
|
+
// width: 200,
|
|
37
|
+
// minWidth: 200,
|
|
38
|
+
borderRadius: '6px',
|
|
39
|
+
width: width,
|
|
40
|
+
minWidth: width,
|
|
41
|
+
}, children: [label && (_jsx("div", { style: {
|
|
42
|
+
fontSize: 14,
|
|
43
|
+
color: theme.secondaryTextColor,
|
|
44
|
+
fontFamily: theme.fontFamily,
|
|
45
|
+
paddingBottom: 5,
|
|
46
|
+
fontWeight: 600,
|
|
47
|
+
}, children: label })), _jsxs("button", { style: {
|
|
48
|
+
fontFamily: theme.fontFamily,
|
|
49
|
+
color: theme.primaryTextColor,
|
|
50
|
+
width: '100%',
|
|
51
|
+
display: 'flex',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
justifyContent: 'space-between',
|
|
54
|
+
lineHeight: 'inherit',
|
|
55
|
+
padding: '8px 12px',
|
|
56
|
+
fontSize: 14,
|
|
57
|
+
margin: 0,
|
|
58
|
+
boxSizing: 'border-box',
|
|
59
|
+
borderWidth: 1,
|
|
60
|
+
borderStyle: 'solid',
|
|
61
|
+
borderColor: theme.borderColor,
|
|
62
|
+
borderRadius: 6,
|
|
63
|
+
paddingTop: 9,
|
|
64
|
+
paddingBottom: 9,
|
|
65
|
+
height: 40,
|
|
66
|
+
minHeight: 40,
|
|
67
|
+
maxHeight: 40,
|
|
68
|
+
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }` }), _jsx("span", { style: {
|
|
69
|
+
textOverflow: 'ellipsis',
|
|
70
|
+
whiteSpace: 'nowrap',
|
|
71
|
+
overflow: 'hidden',
|
|
72
|
+
}, children: options.find((elem) => elem.value === value)?.label || 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { ref: modalRef, style: {
|
|
73
|
+
position: 'absolute',
|
|
74
|
+
width: '100%',
|
|
75
|
+
display: 'flex',
|
|
76
|
+
flexDirection: 'column',
|
|
77
|
+
boxSizing: 'border-box',
|
|
78
|
+
borderWidth: 1,
|
|
79
|
+
borderStyle: 'solid',
|
|
80
|
+
borderColor: theme.borderColor,
|
|
81
|
+
borderRadius: 6,
|
|
82
|
+
background: 'white',
|
|
83
|
+
marginTop: 12,
|
|
84
|
+
zIndex: 100,
|
|
85
|
+
paddingTop: 6,
|
|
86
|
+
paddingBottom: 6,
|
|
87
|
+
paddingLeft: 6,
|
|
88
|
+
paddingRight: 6,
|
|
89
|
+
fontFamily: theme.fontFamily,
|
|
90
|
+
maxHeight: '50vh',
|
|
91
|
+
overflow: 'scroll',
|
|
92
|
+
}, children: [options && options.length > 20 && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
93
|
+
handleSearchChange(value);
|
|
94
|
+
} })), searchQuery === '' && (_jsxs("button", { style: {
|
|
95
|
+
display: 'flex',
|
|
96
|
+
alignItems: 'center',
|
|
97
|
+
justifyContent: 'space-between',
|
|
98
|
+
padding: '8px 8px',
|
|
99
|
+
margin: 0,
|
|
100
|
+
boxSizing: 'border-box',
|
|
101
|
+
borderWidth: 0,
|
|
102
|
+
fontSize: 14,
|
|
103
|
+
borderStyle: 'solid',
|
|
104
|
+
borderColor: theme.borderColor,
|
|
105
|
+
borderRadius: 4,
|
|
106
|
+
fontFamily: theme.fontFamily,
|
|
107
|
+
textOverflow: 'ellipsis',
|
|
108
|
+
whiteSpace: 'nowrap',
|
|
109
|
+
overflow: 'hidden',
|
|
110
|
+
height: 34,
|
|
111
|
+
minHeight: 34,
|
|
112
|
+
}, className: "quill-option", onClick: () => {
|
|
113
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
114
|
+
const changeEvent = { target: { value: '' } };
|
|
115
|
+
onChange(changeEvent);
|
|
116
|
+
setShowModal(false);
|
|
117
|
+
}, children: [_jsx("style", { children: `
|
|
118
|
+
.quill-option {
|
|
119
|
+
background: white;
|
|
120
|
+
}
|
|
121
|
+
.quill-option:hover {
|
|
122
|
+
background: #F4F4F5;
|
|
123
|
+
}
|
|
124
|
+
` }), 'Select'] })), filteredItems.map((option) => (_jsxs("button", { style: {
|
|
125
|
+
display: 'flex',
|
|
126
|
+
alignItems: 'center',
|
|
127
|
+
justifyContent: 'space-between',
|
|
128
|
+
padding: '8px 8px',
|
|
129
|
+
margin: 0,
|
|
130
|
+
boxSizing: 'border-box',
|
|
131
|
+
borderWidth: 0,
|
|
132
|
+
fontSize: 14,
|
|
133
|
+
borderStyle: 'solid',
|
|
134
|
+
borderColor: theme.borderColor,
|
|
135
|
+
borderRadius: 4,
|
|
136
|
+
fontFamily: theme.fontFamily,
|
|
137
|
+
textOverflow: 'ellipsis',
|
|
138
|
+
whiteSpace: 'nowrap',
|
|
139
|
+
height: 34,
|
|
140
|
+
minHeight: 34,
|
|
141
|
+
overflow: 'hidden',
|
|
142
|
+
}, className: "quill-option", onClick: () => {
|
|
143
|
+
// Manually create a synthetic ChangeEvent and pass it to callback
|
|
144
|
+
const changeEvent = { target: { value: option.value } };
|
|
145
|
+
onChange(changeEvent);
|
|
146
|
+
setShowModal(false);
|
|
147
|
+
}, children: [_jsx("style", { children: `
|
|
148
|
+
.quill-option {
|
|
149
|
+
background: white;
|
|
150
|
+
}
|
|
151
|
+
.quill-option:hover {
|
|
152
|
+
background: #F4F4F5;
|
|
153
|
+
}
|
|
154
|
+
` }), _jsx("span", { style: {
|
|
155
|
+
textOverflow: 'ellipsis',
|
|
156
|
+
whiteSpace: 'nowrap',
|
|
157
|
+
overflow: 'hidden',
|
|
158
|
+
}, children: option.label })] }, option.value)))] }))] }));
|
|
159
|
+
}
|