@quillsql/react 2.12.52 → 2.12.53
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/Chart.js +1 -1
- package/dist/cjs/ChartBuilder.d.ts +7 -3
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +54 -18
- package/dist/cjs/ChartEditor.d.ts +3 -1
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +42 -7
- package/dist/cjs/Context.d.ts +4 -5
- package/dist/cjs/Context.d.ts.map +1 -1
- package/dist/cjs/Context.js +22 -34
- package/dist/cjs/Dashboard.d.ts +4 -3
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +24 -29
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.js +8 -10
- package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts +1 -0
- package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
- package/dist/cjs/DateRangePicker/dateRangePickerUtils.js +1 -1
- package/dist/cjs/QuillProvider.js +1 -1
- package/dist/cjs/ReportBuilder.d.ts +8 -12
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +157 -83
- package/dist/cjs/SQLEditor.d.ts +8 -1
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +80 -28
- package/dist/cjs/Table.js +1 -1
- package/dist/cjs/assets/AdjustmentsIcon.d.ts +5 -0
- package/dist/cjs/assets/AdjustmentsIcon.d.ts.map +1 -0
- package/dist/cjs/assets/AdjustmentsIcon.js +5 -0
- package/dist/cjs/assets/ArrowDownHeadIcon.d.ts.map +1 -1
- package/dist/cjs/components/Chart/ChartError.js +2 -2
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +2 -2
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.js +6 -6
- package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts +2 -2
- package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts +5 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +23 -4
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +2 -1
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +2 -2
- package/dist/cjs/components/Dashboard/util.d.ts +2 -2
- package/dist/cjs/components/Dashboard/util.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/util.js +2 -2
- package/dist/cjs/components/QuillMultiSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillMultiSelect.js +18 -13
- package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
- package/dist/cjs/components/QuillMultiSelectWithCombo.js +67 -45
- package/dist/cjs/components/QuillSelect.d.ts +1 -1
- package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelect.js +28 -6
- package/dist/cjs/components/QuillSelectWithCombo.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelectWithCombo.js +45 -24
- package/dist/cjs/components/QuillTable.d.ts +2 -1
- package/dist/cjs/components/QuillTable.d.ts.map +1 -1
- package/dist/cjs/components/QuillTable.js +7 -4
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts +2 -1
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.js +2 -2
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts +2 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.js +2 -2
- package/dist/cjs/components/ReportBuilder/FilterModal.d.ts +2 -1
- package/dist/cjs/components/ReportBuilder/FilterModal.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/FilterModal.js +17 -4
- package/dist/cjs/components/ReportBuilder/ui.d.ts +13 -7
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +14 -11
- package/dist/cjs/components/UiComponents.d.ts +15 -8
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +29 -23
- package/dist/cjs/hooks/useAstToFilterTree.d.ts +2 -2
- package/dist/cjs/hooks/useAstToFilterTree.d.ts.map +1 -1
- package/dist/cjs/hooks/useDashboard.d.ts +9 -4
- package/dist/cjs/hooks/useDashboard.d.ts.map +1 -1
- package/dist/cjs/hooks/useDashboard.js +61 -38
- package/dist/cjs/hooks/useExport.js +1 -1
- package/dist/cjs/hooks/useQuill.js +2 -2
- package/dist/cjs/hooks/useVirtualTables.d.ts +12 -3
- package/dist/cjs/hooks/useVirtualTables.d.ts.map +1 -1
- package/dist/cjs/hooks/useVirtualTables.js +105 -1
- package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts +3 -1
- package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotForm.js +9 -9
- package/dist/cjs/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotList.js +21 -15
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +3 -2
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +9 -9
- package/dist/cjs/models/Client.d.ts +10 -2
- package/dist/cjs/models/Client.d.ts.map +1 -1
- package/dist/cjs/utils/astProcessing.d.ts +3 -3
- package/dist/cjs/utils/astProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/client.d.ts.map +1 -1
- package/dist/cjs/utils/client.js +2 -7
- package/dist/cjs/utils/dashboard.d.ts +5 -5
- package/dist/cjs/utils/dashboard.d.ts.map +1 -1
- package/dist/cjs/utils/dashboard.js +87 -7
- package/dist/cjs/utils/dataFetcher.d.ts +4 -4
- package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
- package/dist/cjs/utils/dataFetcher.js +1 -1
- package/dist/cjs/utils/filterProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/filterProcessing.js +2 -8
- package/dist/cjs/utils/paginationProcessing.js +1 -1
- package/dist/cjs/utils/pivotConstructor.d.ts +2 -2
- package/dist/cjs/utils/pivotConstructor.d.ts.map +1 -1
- package/dist/cjs/utils/pivotConstructor.js +1 -1
- package/dist/cjs/utils/pivotProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/pivotProcessing.js +6 -2
- package/dist/cjs/utils/queryConstructor.d.ts.map +1 -1
- package/dist/cjs/utils/queryConstructor.js +12 -9
- package/dist/cjs/utils/report.d.ts +6 -5
- package/dist/cjs/utils/report.d.ts.map +1 -1
- package/dist/cjs/utils/report.js +69 -24
- package/dist/cjs/utils/schema.d.ts +3 -3
- package/dist/cjs/utils/schema.d.ts.map +1 -1
- package/dist/cjs/utils/schema.js +39 -35
- package/dist/cjs/utils/tableProcessing.d.ts +17 -10
- package/dist/cjs/utils/tableProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/tableProcessing.js +42 -23
- package/dist/esm/Chart.js +2 -2
- package/dist/esm/ChartBuilder.d.ts +7 -3
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +51 -18
- package/dist/esm/ChartEditor.d.ts +3 -1
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +43 -8
- package/dist/esm/Context.d.ts +4 -5
- package/dist/esm/Context.d.ts.map +1 -1
- package/dist/esm/Context.js +23 -35
- package/dist/esm/Dashboard.d.ts +4 -3
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +24 -29
- package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/esm/DateRangePicker/QuillDateRangePicker.js +8 -10
- package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts +1 -0
- package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
- package/dist/esm/DateRangePicker/dateRangePickerUtils.js +1 -1
- package/dist/esm/QuillProvider.js +1 -1
- package/dist/esm/ReportBuilder.d.ts +8 -12
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +160 -86
- package/dist/esm/SQLEditor.d.ts +8 -1
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +83 -31
- package/dist/esm/Table.js +2 -2
- package/dist/esm/assets/AdjustmentsIcon.d.ts +5 -0
- package/dist/esm/assets/AdjustmentsIcon.d.ts.map +1 -0
- package/dist/esm/assets/AdjustmentsIcon.js +3 -0
- package/dist/esm/assets/ArrowDownHeadIcon.d.ts.map +1 -1
- package/dist/esm/components/Chart/ChartError.js +2 -2
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts +2 -2
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DashboardFilter.js +6 -6
- package/dist/esm/components/Dashboard/DashboardTemplate.d.ts +2 -2
- package/dist/esm/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts +5 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +25 -6
- package/dist/esm/components/Dashboard/TableComponent.d.ts +2 -1
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +2 -2
- package/dist/esm/components/Dashboard/util.d.ts +2 -2
- package/dist/esm/components/Dashboard/util.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/util.js +2 -2
- package/dist/esm/components/QuillMultiSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillMultiSelect.js +19 -14
- package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
- package/dist/esm/components/QuillMultiSelectWithCombo.js +68 -46
- package/dist/esm/components/QuillSelect.d.ts +1 -1
- package/dist/esm/components/QuillSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillSelect.js +29 -7
- package/dist/esm/components/QuillSelectWithCombo.d.ts.map +1 -1
- package/dist/esm/components/QuillSelectWithCombo.js +46 -25
- package/dist/esm/components/QuillTable.d.ts +2 -1
- package/dist/esm/components/QuillTable.d.ts.map +1 -1
- package/dist/esm/components/QuillTable.js +7 -4
- package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts +2 -1
- package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddLimitPopover.js +2 -2
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts +2 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.js +2 -2
- package/dist/esm/components/ReportBuilder/FilterModal.d.ts +2 -1
- package/dist/esm/components/ReportBuilder/FilterModal.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/FilterModal.js +17 -4
- package/dist/esm/components/ReportBuilder/ui.d.ts +13 -7
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +14 -11
- package/dist/esm/components/UiComponents.d.ts +15 -8
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +29 -23
- package/dist/esm/hooks/useAstToFilterTree.d.ts +2 -2
- package/dist/esm/hooks/useAstToFilterTree.d.ts.map +1 -1
- package/dist/esm/hooks/useDashboard.d.ts +9 -4
- package/dist/esm/hooks/useDashboard.d.ts.map +1 -1
- package/dist/esm/hooks/useDashboard.js +62 -39
- package/dist/esm/hooks/useExport.js +1 -1
- package/dist/esm/hooks/useQuill.js +3 -3
- package/dist/esm/hooks/useVirtualTables.d.ts +12 -3
- package/dist/esm/hooks/useVirtualTables.d.ts.map +1 -1
- package/dist/esm/hooks/useVirtualTables.js +106 -2
- package/dist/esm/internals/ReportBuilder/PivotForm.d.ts +3 -1
- package/dist/esm/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotForm.js +9 -9
- package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotList.js +21 -15
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +3 -2
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +9 -9
- package/dist/esm/models/Client.d.ts +10 -2
- package/dist/esm/models/Client.d.ts.map +1 -1
- package/dist/esm/utils/astProcessing.d.ts +3 -3
- package/dist/esm/utils/astProcessing.d.ts.map +1 -1
- package/dist/esm/utils/client.d.ts.map +1 -1
- package/dist/esm/utils/client.js +2 -7
- package/dist/esm/utils/dashboard.d.ts +5 -5
- package/dist/esm/utils/dashboard.d.ts.map +1 -1
- package/dist/esm/utils/dashboard.js +87 -7
- package/dist/esm/utils/dataFetcher.d.ts +4 -4
- package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
- package/dist/esm/utils/dataFetcher.js +1 -1
- package/dist/esm/utils/filterProcessing.d.ts.map +1 -1
- package/dist/esm/utils/filterProcessing.js +2 -8
- package/dist/esm/utils/paginationProcessing.js +1 -1
- package/dist/esm/utils/pivotConstructor.d.ts +2 -2
- package/dist/esm/utils/pivotConstructor.d.ts.map +1 -1
- package/dist/esm/utils/pivotConstructor.js +1 -1
- package/dist/esm/utils/pivotProcessing.d.ts.map +1 -1
- package/dist/esm/utils/pivotProcessing.js +6 -2
- package/dist/esm/utils/queryConstructor.d.ts.map +1 -1
- package/dist/esm/utils/queryConstructor.js +12 -9
- package/dist/esm/utils/report.d.ts +6 -5
- package/dist/esm/utils/report.d.ts.map +1 -1
- package/dist/esm/utils/report.js +68 -24
- package/dist/esm/utils/schema.d.ts +3 -3
- package/dist/esm/utils/schema.d.ts.map +1 -1
- package/dist/esm/utils/schema.js +39 -35
- package/dist/esm/utils/tableProcessing.d.ts +17 -10
- package/dist/esm/utils/tableProcessing.d.ts.map +1 -1
- package/dist/esm/utils/tableProcessing.js +39 -20
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ const ChartError_1 = __importDefault(require("../Chart/ChartError"));
|
|
|
11
11
|
const useExport_1 = require("../../hooks/useExport");
|
|
12
12
|
const paginationProcessing_1 = require("../../utils/paginationProcessing");
|
|
13
13
|
const Context_1 = require("../../Context");
|
|
14
|
-
function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }) {
|
|
14
|
+
function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }) {
|
|
15
15
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
16
16
|
const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
|
|
17
17
|
const { downloadCSV } = (0, useExport_1.useExport)(report?.id);
|
|
@@ -45,7 +45,7 @@ function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPa
|
|
|
45
45
|
} })) : error ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
46
46
|
width: '100%',
|
|
47
47
|
height: '400px',
|
|
48
|
-
}, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
|
|
48
|
+
}, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
|
|
49
49
|
width: '100%',
|
|
50
50
|
height: '400px',
|
|
51
51
|
}, downloadCSV: () => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { QuillProviderClient } from '../../models/Client';
|
|
2
2
|
export declare function validateTemplatesAgainstFilters(filters: any[], templates: any[]): {
|
|
3
3
|
valid: boolean;
|
|
4
4
|
error: string;
|
|
5
5
|
};
|
|
6
|
-
export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client:
|
|
6
|
+
export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any): Promise<any>;
|
|
7
7
|
//# sourceMappingURL=util.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}
|
|
@@ -40,13 +40,13 @@ function validateTemplatesAgainstFilters(filters, templates) {
|
|
|
40
40
|
exports.validateTemplatesAgainstFilters = validateTemplatesAgainstFilters;
|
|
41
41
|
async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
|
|
42
42
|
try {
|
|
43
|
-
const { publicKey,
|
|
43
|
+
const { publicKey, organizationId } = client;
|
|
44
44
|
const hostedBody = {
|
|
45
45
|
metadata: {
|
|
46
46
|
dashboardName: name,
|
|
47
47
|
task: 'add-from-template',
|
|
48
48
|
clientId: publicKey,
|
|
49
|
-
orgId:
|
|
49
|
+
orgId: organizationId || '*',
|
|
50
50
|
templateReportIds: newTemplates.map((template) => template._id),
|
|
51
51
|
},
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAsO3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
|
|
@@ -18,7 +18,7 @@ function displaySelectedOptionLabels({ options, value, }) {
|
|
|
18
18
|
return 'Select';
|
|
19
19
|
}
|
|
20
20
|
return matchingOptions
|
|
21
|
-
.map((elem) => elem.label)
|
|
21
|
+
.map((elem) => elem.label ?? '-')
|
|
22
22
|
.join(', ');
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
@@ -30,8 +30,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
|
|
|
30
30
|
const [showModal, setShowModal] = (0, react_1.useState)(false);
|
|
31
31
|
const modalRef = (0, react_1.useRef)(null);
|
|
32
32
|
const debounceTimeoutId = (0, react_1.useRef)(null);
|
|
33
|
-
// const [searchQuery, setSearchQuery] = useState('');
|
|
34
|
-
// const [filteredOptions, setFilteredOptions] = useState(options);
|
|
35
33
|
(0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
|
|
36
34
|
(0, react_1.useEffect)(() => {
|
|
37
35
|
if (!value) {
|
|
@@ -41,6 +39,21 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
|
|
|
41
39
|
setSelectedOptions(value);
|
|
42
40
|
}
|
|
43
41
|
}, [value]);
|
|
42
|
+
const sortedItems = (0, react_1.useMemo)(() => {
|
|
43
|
+
// Sort null to top
|
|
44
|
+
return options.sort((a, b) => {
|
|
45
|
+
if (a.value === null) {
|
|
46
|
+
return -1;
|
|
47
|
+
}
|
|
48
|
+
if (b.value === null) {
|
|
49
|
+
return 1;
|
|
50
|
+
}
|
|
51
|
+
return a.label.localeCompare(b.label);
|
|
52
|
+
});
|
|
53
|
+
}, [options]);
|
|
54
|
+
const nullLabel = (0, react_1.useMemo)(() => {
|
|
55
|
+
return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
|
|
56
|
+
}, [sortedItems]);
|
|
44
57
|
const debounce = (updatedChangeEvent) => {
|
|
45
58
|
if (debounceTimeoutId.current) {
|
|
46
59
|
clearTimeout(debounceTimeoutId.current);
|
|
@@ -49,14 +62,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
|
|
|
49
62
|
onChange(updatedChangeEvent);
|
|
50
63
|
}, 500);
|
|
51
64
|
};
|
|
52
|
-
// const filterOptions = (query: string) => {
|
|
53
|
-
// setSearchQuery(query);
|
|
54
|
-
// setFilteredOptions(
|
|
55
|
-
// options.filter((option) =>
|
|
56
|
-
// option.label.toLowerCase().includes(query.toLowerCase()),
|
|
57
|
-
// ),
|
|
58
|
-
// );
|
|
59
|
-
// };
|
|
60
65
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
61
66
|
position: 'relative',
|
|
62
67
|
borderRadius: '6px',
|
|
@@ -116,7 +121,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
|
|
|
116
121
|
fontFamily: theme?.fontFamily,
|
|
117
122
|
maxHeight: '50vh',
|
|
118
123
|
overflow: 'scroll',
|
|
119
|
-
}, children: !isLoading ? (
|
|
124
|
+
}, children: !isLoading ? (sortedItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
120
125
|
display: 'flex',
|
|
121
126
|
alignItems: 'center',
|
|
122
127
|
padding: 8,
|
|
@@ -167,7 +172,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
|
|
|
167
172
|
textOverflow: 'ellipsis',
|
|
168
173
|
whiteSpace: 'nowrap',
|
|
169
174
|
overflow: 'hidden',
|
|
170
|
-
}, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
|
|
175
|
+
}, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
|
|
171
176
|
}
|
|
172
177
|
exports.QuillMultiSelectComponent = QuillMultiSelectComponent;
|
|
173
178
|
const ListboxTextInput = ({ value, onChange, placeholder, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4U3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
|
|
@@ -54,27 +54,15 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
54
54
|
const modalRef = (0, react_1.useRef)(null);
|
|
55
55
|
const debounceTimeoutId = (0, react_1.useRef)(null);
|
|
56
56
|
const [searchQuery, setSearchQuery] = react_1.default.useState('');
|
|
57
|
-
const [
|
|
57
|
+
const [exceedsLimit, setExceedsLimit] = (0, react_1.useState)(false);
|
|
58
58
|
(0, react_1.useEffect)(() => {
|
|
59
|
-
|
|
59
|
+
if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
|
|
60
|
+
setExceedsLimit(true);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
setExceedsLimit(false);
|
|
64
|
+
}
|
|
60
65
|
}, [options]);
|
|
61
|
-
const handleSearchChange = (value) => {
|
|
62
|
-
setSearchQuery(value);
|
|
63
|
-
const curFilteredItems = value === ''
|
|
64
|
-
? options.slice(0, 20)
|
|
65
|
-
: options
|
|
66
|
-
.filter((option) => {
|
|
67
|
-
if (!option) {
|
|
68
|
-
return false;
|
|
69
|
-
}
|
|
70
|
-
return option.value
|
|
71
|
-
.toLowerCase()
|
|
72
|
-
.replace(/\s+/g, '')
|
|
73
|
-
.includes(value.toLowerCase().replace(/\s+/g, ''));
|
|
74
|
-
})
|
|
75
|
-
.slice(0, 20);
|
|
76
|
-
setFilteredItems(curFilteredItems);
|
|
77
|
-
};
|
|
78
66
|
(0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
|
|
79
67
|
(0, react_1.useEffect)(() => {
|
|
80
68
|
if (!value) {
|
|
@@ -92,14 +80,43 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
92
80
|
onChange(updatedChangeEvent);
|
|
93
81
|
}, 500);
|
|
94
82
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
83
|
+
const filteredItems = react_1.default.useMemo(function () {
|
|
84
|
+
// Sort null to top
|
|
85
|
+
if (searchQuery === '') {
|
|
86
|
+
return options.sort((a, b) => {
|
|
87
|
+
if (a.value === null) {
|
|
88
|
+
return -1;
|
|
89
|
+
}
|
|
90
|
+
if (b.value === null) {
|
|
91
|
+
return 1;
|
|
92
|
+
}
|
|
93
|
+
return a.label.localeCompare(b.label);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
return options
|
|
97
|
+
.filter((option) => {
|
|
98
|
+
if (!option) {
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
return option.value
|
|
102
|
+
.toLowerCase()
|
|
103
|
+
.replace(/\s+/g, '')
|
|
104
|
+
.includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
|
|
105
|
+
})
|
|
106
|
+
.sort((a, b) => {
|
|
107
|
+
if (a.value === null) {
|
|
108
|
+
return -1;
|
|
109
|
+
}
|
|
110
|
+
if (b.value === null) {
|
|
111
|
+
return 1;
|
|
112
|
+
}
|
|
113
|
+
return a.label.localeCompare(b.label);
|
|
114
|
+
})
|
|
115
|
+
.slice(0, 20);
|
|
116
|
+
}, [options, searchQuery]);
|
|
117
|
+
const nullLabel = (0, react_1.useMemo)(() => {
|
|
118
|
+
return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
|
|
119
|
+
}, [filteredItems]);
|
|
103
120
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
104
121
|
position: 'relative',
|
|
105
122
|
borderRadius: '6px',
|
|
@@ -111,7 +128,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
111
128
|
fontFamily: theme?.fontFamily,
|
|
112
129
|
paddingBottom: 5,
|
|
113
130
|
fontWeight: 600,
|
|
114
|
-
}, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
131
|
+
}, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
115
132
|
fontFamily: theme?.fontFamily,
|
|
116
133
|
color: theme?.primaryTextColor,
|
|
117
134
|
width: '100%',
|
|
@@ -160,9 +177,14 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
160
177
|
maxHeight: '50vh',
|
|
161
178
|
overflow: 'scroll',
|
|
162
179
|
fontSize: 14,
|
|
163
|
-
}, children: [options && options.length > 20 &&
|
|
164
|
-
|
|
165
|
-
} })), options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
180
|
+
}, children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
181
|
+
setSearchQuery(value);
|
|
182
|
+
} })), !exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
183
|
+
height: 9,
|
|
184
|
+
width: 230,
|
|
185
|
+
borderTop: '1px solid #e7e7e7',
|
|
186
|
+
} })), !isLoading &&
|
|
187
|
+
(!filteredItems || filteredItems.length === 0 || exceedsLimit) && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
166
188
|
display: 'flex',
|
|
167
189
|
alignItems: 'center',
|
|
168
190
|
padding: 8,
|
|
@@ -181,18 +203,18 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
181
203
|
gap: 6,
|
|
182
204
|
overflow: 'hidden',
|
|
183
205
|
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
.quill-option:hover {
|
|
188
|
-
background: #F4F4F5;
|
|
206
|
+
.quill-option {
|
|
207
|
+
background: white;
|
|
189
208
|
}
|
|
190
|
-
|
|
209
|
+
.quill-option:hover {
|
|
210
|
+
background: #F4F4F5;
|
|
211
|
+
}
|
|
212
|
+
` }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
191
213
|
textOverflow: 'ellipsis',
|
|
192
214
|
whiteSpace: 'nowrap',
|
|
193
215
|
overflow: 'hidden',
|
|
194
216
|
cursor: 'default',
|
|
195
|
-
}, children:
|
|
217
|
+
}, children: exceedsLimit ? 'Too many options' : 'No options available' })] })), !exceedsLimit && !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
196
218
|
display: 'flex',
|
|
197
219
|
alignItems: 'center',
|
|
198
220
|
padding: 8,
|
|
@@ -233,17 +255,17 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
|
|
|
233
255
|
}
|
|
234
256
|
debounce(updatedChangeEvent);
|
|
235
257
|
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
.quill-option:hover {
|
|
240
|
-
background: #F4F4F5;
|
|
258
|
+
.quill-option {
|
|
259
|
+
background: white;
|
|
241
260
|
}
|
|
242
|
-
|
|
261
|
+
.quill-option:hover {
|
|
262
|
+
background: #F4F4F5;
|
|
263
|
+
}
|
|
264
|
+
` }), (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: {
|
|
243
265
|
textOverflow: 'ellipsis',
|
|
244
266
|
whiteSpace: 'nowrap',
|
|
245
267
|
overflow: 'hidden',
|
|
246
|
-
}, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
|
|
268
|
+
}, children: option.label ?? nullLabel })] }, option.value)))) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }))] }));
|
|
247
269
|
}
|
|
248
270
|
exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
|
|
249
271
|
const ListboxTextInput = ({ value, onChange, placeholder, }) => {
|
|
@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
|
|
|
2
2
|
/**
|
|
3
3
|
* A robust select component that implements the new minimal Select interface.
|
|
4
4
|
*/
|
|
5
|
-
export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
//# sourceMappingURL=QuillSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,
|
|
1
|
+
{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,oBAAoB,2CA8OtB"}
|
|
@@ -9,11 +9,26 @@ const Context_1 = require("../Context");
|
|
|
9
9
|
/**
|
|
10
10
|
* A robust select component that implements the new minimal Select interface.
|
|
11
11
|
*/
|
|
12
|
-
function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }) {
|
|
12
|
+
function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }) {
|
|
13
13
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
14
14
|
const [showModal, setShowModal] = (0, react_1.useState)(false);
|
|
15
15
|
const modalRef = (0, react_1.useRef)(null);
|
|
16
16
|
(0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
|
|
17
|
+
const sortedItems = (0, react_1.useMemo)(() => {
|
|
18
|
+
// Sort null to top
|
|
19
|
+
return options.sort((a, b) => {
|
|
20
|
+
if (a.value === null) {
|
|
21
|
+
return -1;
|
|
22
|
+
}
|
|
23
|
+
if (b.value === null) {
|
|
24
|
+
return 1;
|
|
25
|
+
}
|
|
26
|
+
return a.label.localeCompare(b.label);
|
|
27
|
+
});
|
|
28
|
+
}, [options]);
|
|
29
|
+
const nullLabel = (0, react_1.useMemo)(() => {
|
|
30
|
+
return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
|
|
31
|
+
}, [sortedItems]);
|
|
17
32
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
18
33
|
position: 'relative',
|
|
19
34
|
// width: 200,
|
|
@@ -27,7 +42,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
|
|
|
27
42
|
fontFamily: theme?.fontFamily,
|
|
28
43
|
paddingBottom: 5,
|
|
29
44
|
fontWeight: 600,
|
|
30
|
-
}, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
45
|
+
}, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
|
|
31
46
|
fontFamily: theme?.fontFamily,
|
|
32
47
|
color: theme?.primaryTextColor,
|
|
33
48
|
width: '100%',
|
|
@@ -48,7 +63,14 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
|
|
|
48
63
|
height: 40,
|
|
49
64
|
minHeight: 40,
|
|
50
65
|
maxHeight: 40,
|
|
51
|
-
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
66
|
+
}, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
67
|
+
.quill-select-button { background: ${theme?.backgroundColor}; }
|
|
68
|
+
.quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
|
|
69
|
+
.quill-select-button:disabled {
|
|
70
|
+
opacity: 0.5;
|
|
71
|
+
cursor: not-allowed;
|
|
72
|
+
}
|
|
73
|
+
` }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
52
74
|
textOverflow: 'ellipsis',
|
|
53
75
|
whiteSpace: 'nowrap',
|
|
54
76
|
overflow: 'hidden',
|
|
@@ -95,7 +117,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
|
|
|
95
117
|
const changeEvent = { target: { value: '' } };
|
|
96
118
|
onChange(changeEvent);
|
|
97
119
|
setShowModal(false);
|
|
98
|
-
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
120
|
+
}, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
99
121
|
.quill-option {
|
|
100
122
|
background: white;
|
|
101
123
|
}
|
|
@@ -125,7 +147,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
|
|
|
125
147
|
const changeEvent = { target: { value: option.value } };
|
|
126
148
|
onChange(changeEvent);
|
|
127
149
|
setShowModal(false);
|
|
128
|
-
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
150
|
+
}, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
129
151
|
.quill-option {
|
|
130
152
|
background: white;
|
|
131
153
|
}
|
|
@@ -136,6 +158,6 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
|
|
|
136
158
|
textOverflow: 'ellipsis',
|
|
137
159
|
whiteSpace: 'nowrap',
|
|
138
160
|
overflow: 'hidden',
|
|
139
|
-
}, children: option.label })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
|
|
161
|
+
}, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
|
|
140
162
|
}
|
|
141
163
|
exports.QuillSelectComponent = QuillSelectComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CA8QtB"}
|
|
@@ -38,28 +38,49 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
|
|
|
38
38
|
const [showModal, setShowModal] = (0, react_1.useState)(false);
|
|
39
39
|
const modalRef = (0, react_1.useRef)(null);
|
|
40
40
|
const [searchQuery, setSearchQuery] = react_1.default.useState('');
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
: options
|
|
51
|
-
.filter((option) => {
|
|
52
|
-
if (!option) {
|
|
53
|
-
return false;
|
|
41
|
+
const filteredItems = react_1.default.useMemo(function () {
|
|
42
|
+
// Sort null to top
|
|
43
|
+
if (searchQuery === '') {
|
|
44
|
+
return options.sort((a, b) => {
|
|
45
|
+
if (a.value === null) {
|
|
46
|
+
return -1;
|
|
47
|
+
}
|
|
48
|
+
if (b.value === null) {
|
|
49
|
+
return 1;
|
|
54
50
|
}
|
|
55
|
-
return
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
return a.label.localeCompare(b.label);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
return options
|
|
55
|
+
.filter((option) => {
|
|
56
|
+
if (!option) {
|
|
57
|
+
return false;
|
|
58
|
+
}
|
|
59
|
+
return option.value
|
|
60
|
+
.toLowerCase()
|
|
61
|
+
.replace(/\s+/g, '')
|
|
62
|
+
.includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
|
|
63
|
+
})
|
|
64
|
+
.sort((a, b) => {
|
|
65
|
+
if (a.value === null) {
|
|
66
|
+
return -1;
|
|
67
|
+
}
|
|
68
|
+
if (b.value === null) {
|
|
69
|
+
return 1;
|
|
70
|
+
}
|
|
71
|
+
return a.label.localeCompare(b.label);
|
|
72
|
+
})
|
|
73
|
+
.slice(0, 20);
|
|
74
|
+
}, [options, searchQuery]);
|
|
75
|
+
const nullLabel = (0, react_1.useMemo)(() => {
|
|
76
|
+
return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
|
|
77
|
+
}, [filteredItems]);
|
|
78
|
+
const selectedLabel = (0, react_1.useMemo)(() => {
|
|
79
|
+
const selectedOption = options.find((elem) => elem.value === value);
|
|
80
|
+
return selectedOption && selectedOption.label == null
|
|
81
|
+
? nullLabel
|
|
82
|
+
: selectedOption?.label ?? 'Select';
|
|
83
|
+
}, [value, options, nullLabel]);
|
|
63
84
|
(0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
|
|
64
85
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
65
86
|
position: 'relative',
|
|
@@ -99,7 +120,7 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
|
|
|
99
120
|
textOverflow: 'ellipsis',
|
|
100
121
|
whiteSpace: 'nowrap',
|
|
101
122
|
overflow: 'hidden',
|
|
102
|
-
}, children:
|
|
123
|
+
}, children: selectedLabel }), (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: {
|
|
103
124
|
position: 'absolute',
|
|
104
125
|
width: '100%',
|
|
105
126
|
display: 'flex',
|
|
@@ -121,7 +142,7 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
|
|
|
121
142
|
overflow: 'scroll',
|
|
122
143
|
fontSize: 14,
|
|
123
144
|
}, children: [options && options.length > 20 && !isLoading && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
|
|
124
|
-
|
|
145
|
+
setSearchQuery(value);
|
|
125
146
|
} })), searchQuery === '' && !isLoading && ((0, jsx_runtime_1.jsxs)("button", { style: {
|
|
126
147
|
display: 'flex',
|
|
127
148
|
alignItems: 'center',
|
|
@@ -186,6 +207,6 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
|
|
|
186
207
|
textOverflow: 'ellipsis',
|
|
187
208
|
whiteSpace: 'nowrap',
|
|
188
209
|
overflow: 'hidden',
|
|
189
|
-
}, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
|
|
210
|
+
}, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
|
|
190
211
|
}
|
|
191
212
|
exports.QuillSelectComponentWithCombo = QuillSelectComponentWithCombo;
|
|
@@ -3,6 +3,7 @@ import { ButtonComponentProps } from './UiComponents';
|
|
|
3
3
|
export interface TableComponentProps {
|
|
4
4
|
rows: object[];
|
|
5
5
|
rowCount?: number;
|
|
6
|
+
rowCountIsLoading?: boolean;
|
|
6
7
|
columns: {
|
|
7
8
|
label: string;
|
|
8
9
|
field: string;
|
|
@@ -27,5 +28,5 @@ export interface TableComponentProps {
|
|
|
27
28
|
direction: string;
|
|
28
29
|
}) => void;
|
|
29
30
|
}
|
|
30
|
-
export default function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export default function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
//# sourceMappingURL=QuillTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CAidrB"}
|
|
@@ -5,7 +5,7 @@ const react_1 = require("react");
|
|
|
5
5
|
const valueFormatter_1 = require("../utils/valueFormatter");
|
|
6
6
|
const Context_1 = require("../Context");
|
|
7
7
|
const UiComponents_1 = require("./UiComponents");
|
|
8
|
-
function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = UiComponents_1.QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
|
|
8
|
+
function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = UiComponents_1.QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
|
|
9
9
|
const [activeRows, setActiveRows] = (0, react_1.useState)([]);
|
|
10
10
|
const [pageIndex, setPageIndex] = (0, react_1.useState)(currentPage || 0);
|
|
11
11
|
const [maxPage, setMaxPage] = (0, react_1.useState)(1);
|
|
@@ -13,16 +13,16 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
|
|
|
13
13
|
const [sortDirection, setSortDirection] = (0, react_1.useState)(sort?.direction || 'desc');
|
|
14
14
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
15
15
|
const [isPaginating, setIsPaginating] = (0, react_1.useState)(true);
|
|
16
|
-
const [initialLoad, setInitialLoad] = (0, react_1.useState)(
|
|
16
|
+
const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
|
|
17
17
|
(0, react_1.useEffect)(() => {
|
|
18
18
|
setSortColumn(sort?.field || '');
|
|
19
19
|
setSortDirection(sort?.direction || 'desc');
|
|
20
20
|
}, [sort]);
|
|
21
21
|
(0, react_1.useEffect)(() => {
|
|
22
|
-
setIsPaginating(true);
|
|
23
22
|
if (rows?.length === 0 && isLoading) {
|
|
24
23
|
return;
|
|
25
24
|
}
|
|
25
|
+
setIsPaginating(true);
|
|
26
26
|
const start = pageIndex * rowsPerPage;
|
|
27
27
|
const end = (pageIndex + 1) * rowsPerPage;
|
|
28
28
|
if (rowCount && onSortChange && rowCount !== rows.length) {
|
|
@@ -104,6 +104,7 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
|
|
|
104
104
|
margin: 0,
|
|
105
105
|
boxSizing: 'border-box',
|
|
106
106
|
outline: 'none',
|
|
107
|
+
position: 'relative',
|
|
107
108
|
}, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: {
|
|
108
109
|
display: 'flex',
|
|
109
110
|
flexDirection: 'column',
|
|
@@ -177,6 +178,8 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
|
|
|
177
178
|
alignItems: 'center',
|
|
178
179
|
fontSize: 13,
|
|
179
180
|
color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
|
|
181
|
+
position: 'absolute',
|
|
182
|
+
width: '100%',
|
|
180
183
|
}, children: emptyStateLabel })) : ((0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows &&
|
|
181
184
|
activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
|
|
182
185
|
display: isPaginating || isLoading ? 'none' : 'flex',
|
|
@@ -261,7 +264,7 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
|
|
|
261
264
|
fontSize: 12,
|
|
262
265
|
fontFamily: theme?.fontFamily,
|
|
263
266
|
color: theme?.primaryTextColor,
|
|
264
|
-
}, children: [pageIndex + 1, ' of ', maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
|
|
267
|
+
}, children: [pageIndex + 1, ' of ', rowCountIsLoading && maxPage >= 30 ? 'many' : maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
|
|
265
268
|
cursor: 'pointer',
|
|
266
269
|
border: 'none',
|
|
267
270
|
background: 'transparent',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ButtonComponentProps, TextInputComponentProps } from '../UiComponents';
|
|
3
3
|
import { LimitPopoverComponentProps } from './ui';
|
|
4
|
-
export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, }: {
|
|
4
|
+
export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, disabled, }: {
|
|
5
5
|
limit: any;
|
|
6
6
|
handleDelete: () => void;
|
|
7
7
|
setOpenPopover: (arg: any) => void;
|
|
@@ -12,6 +12,7 @@ export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSa
|
|
|
12
12
|
TextInput: any;
|
|
13
13
|
Button: (props: ButtonComponentProps) => JSX.Element;
|
|
14
14
|
SecondaryButton: (props: ButtonComponentProps) => JSX.Element;
|
|
15
|
+
disabled?: boolean | undefined;
|
|
15
16
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export interface AddLimitPopoverProps {
|
|
17
18
|
onSave: (limit: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;
|
|
1
|
+
{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAajB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;;6CAmC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,CAAC,EACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,yBAAyB,CAC7B,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAChE,CAAC;IACN,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,6FAQzB,oBAAoB,4CAwEtB,CAAC"}
|
|
@@ -4,13 +4,13 @@ exports.AddLimitPopover = exports.LimitSentence = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const UiComponents_1 = require("../UiComponents");
|
|
7
|
-
const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = UiComponents_1.QuillTextInput, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, }) => {
|
|
7
|
+
const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = UiComponents_1.QuillTextInput, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, disabled = false, }) => {
|
|
8
8
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
9
9
|
const handleClickDelete = () => {
|
|
10
10
|
setOpenPopover(null);
|
|
11
11
|
handleDelete();
|
|
12
12
|
};
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.jsx)(EditPopover, { onSave: (column, direction) => {
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, disabled: disabled, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.jsx)(EditPopover, { onSave: (column, direction) => {
|
|
14
14
|
setIsOpen(false);
|
|
15
15
|
onSave(column, direction);
|
|
16
16
|
}, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) }) }));
|