@redsift/table 8.0.0-alpha.0 → 8.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +27 -10
- package/index.js +197 -117
- package/index.js.map +1 -1
- package/package.json +4 -4
package/index.d.ts
CHANGED
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
|
|
2
|
-
import { GridFilterItem, GridCellParams,
|
|
3
|
-
export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators,
|
|
2
|
+
import { GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputMultipleValue, DataGridProProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
|
|
3
|
+
export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
|
|
4
4
|
import { Comp, ColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
|
|
5
|
-
import {
|
|
5
|
+
import React, { ReactNode, RefObject, ComponentProps } from 'react';
|
|
6
6
|
|
|
7
7
|
declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any, any, any>;
|
|
8
8
|
|
|
9
|
+
declare const IS_BETWEEN: {
|
|
10
|
+
label: string;
|
|
11
|
+
value: string;
|
|
12
|
+
getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
|
|
13
|
+
InputComponent: (props: any) => JSX.Element;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
|
|
17
|
+
|
|
18
|
+
declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];
|
|
19
|
+
|
|
9
20
|
declare const CONTAINS_ANY_OF: {
|
|
10
21
|
label: string;
|
|
11
22
|
value: string;
|
|
@@ -20,13 +31,18 @@ declare const ENDS_WITH_ANY_OF: {
|
|
|
20
31
|
InputComponent: typeof GridFilterInputMultipleValue;
|
|
21
32
|
};
|
|
22
33
|
|
|
23
|
-
declare const IS_ANY_OF:
|
|
34
|
+
declare const IS_ANY_OF: {
|
|
35
|
+
label: string;
|
|
36
|
+
value: string;
|
|
37
|
+
getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
|
|
38
|
+
InputComponent: typeof GridFilterInputMultipleValue;
|
|
39
|
+
};
|
|
24
40
|
|
|
25
|
-
declare const
|
|
41
|
+
declare const IS_NOT_ANY_OF: {
|
|
26
42
|
label: string;
|
|
27
43
|
value: string;
|
|
28
44
|
getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
|
|
29
|
-
InputComponent:
|
|
45
|
+
InputComponent: typeof GridFilterInputMultipleValue;
|
|
30
46
|
};
|
|
31
47
|
|
|
32
48
|
declare const STARTS_WITH_ANY_OF: {
|
|
@@ -38,13 +54,13 @@ declare const STARTS_WITH_ANY_OF: {
|
|
|
38
54
|
|
|
39
55
|
declare const getGridStringArrayOperators: () => GridFilterOperator<any, number | string | null, any>[];
|
|
40
56
|
|
|
41
|
-
interface DataGridProps extends DataGridProProps {
|
|
57
|
+
interface DataGridProps extends Partial<Pick<DataGridProProps, 'rows'>>, Omit<DataGridProProps, 'rows'> {
|
|
42
58
|
/** License key for MUI Datagrid Pro. */
|
|
43
59
|
license?: string;
|
|
44
60
|
/** Height. A default one is set to prevent rendering all rows. */
|
|
45
61
|
height?: string;
|
|
46
62
|
/** Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. */
|
|
47
|
-
toolbar?:
|
|
63
|
+
toolbar?: ReactNode;
|
|
48
64
|
/** Whether the Toolbar is displayed or not. */
|
|
49
65
|
hideToolbar?: boolean;
|
|
50
66
|
}
|
|
@@ -97,7 +113,8 @@ declare global {
|
|
|
97
113
|
}
|
|
98
114
|
}
|
|
99
115
|
}
|
|
100
|
-
|
|
116
|
+
/** ------ */
|
|
117
|
+
declare const Toolbar: React.FC<ToolbarProps>;
|
|
101
118
|
|
|
102
119
|
interface TextCellProps extends ComponentProps<'div'> {
|
|
103
120
|
/** Including Badge Component. */
|
|
@@ -129,4 +146,4 @@ interface TextCellProps extends ComponentProps<'div'> {
|
|
|
129
146
|
*/
|
|
130
147
|
declare const TextCell: Comp<TextCellProps, HTMLDivElement>;
|
|
131
148
|
|
|
132
|
-
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, DataGridProps, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, STARTS_WITH_ANY_OF, StyledDataGridProps, TextCell, Toolbar, getGridStringArrayOperators };
|
|
149
|
+
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, DataGridProps, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, StyledDataGridProps, TextCell, Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
|
package/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, GridFilterInputMultipleValue, getGridStringOperators, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
|
|
2
|
-
export { getGridBooleanOperators, getGridDateOperators,
|
|
1
|
+
import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
|
|
2
|
+
export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, useRef } from 'react';
|
|
5
|
-
import { Icon, Shield } from '@redsift/design-system';
|
|
4
|
+
import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
|
|
5
|
+
import { Icon, Flexbox, Button, Checkbox, Shield } from '@redsift/design-system';
|
|
6
6
|
import { mdiSync, mdiChevronUp, mdiChevronDown, mdiChevronRight, mdiFilterVariant } from '@redsift/icons';
|
|
7
7
|
import emStyled from '@emotion/styled';
|
|
8
8
|
import { Global, ThemeContext } from '@emotion/react';
|
|
@@ -15,60 +15,6 @@ import styled$3, { css } from 'styled-components';
|
|
|
15
15
|
const DETAIL_PANEL_TOGGLE_COL_DEF = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
|
|
16
16
|
DETAIL_PANEL_TOGGLE_COL_DEF.type = 'actions';
|
|
17
17
|
|
|
18
|
-
const containsAnyOfOperator = {
|
|
19
|
-
label: 'contains any of',
|
|
20
|
-
value: 'containsAnyOf',
|
|
21
|
-
getApplyFilterFn: filterItem => {
|
|
22
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
23
|
-
return null;
|
|
24
|
-
}
|
|
25
|
-
return params => {
|
|
26
|
-
if (filterItem.value.length === 0) {
|
|
27
|
-
return true;
|
|
28
|
-
}
|
|
29
|
-
let match = false;
|
|
30
|
-
filterItem.value.forEach(filteredValue => {
|
|
31
|
-
if (params.value.indexOf(filteredValue) !== -1) {
|
|
32
|
-
match = true;
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
return match;
|
|
36
|
-
};
|
|
37
|
-
},
|
|
38
|
-
InputComponent: GridFilterInputMultipleValue
|
|
39
|
-
};
|
|
40
|
-
const CONTAINS_ANY_OF = containsAnyOfOperator;
|
|
41
|
-
|
|
42
|
-
const endsWithAnyOfOperator = {
|
|
43
|
-
label: 'ends with any of',
|
|
44
|
-
value: 'endsWithAnyOf',
|
|
45
|
-
getApplyFilterFn: filterItem => {
|
|
46
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
47
|
-
return null;
|
|
48
|
-
}
|
|
49
|
-
return params => {
|
|
50
|
-
if (filterItem.value.length === 0) {
|
|
51
|
-
return true;
|
|
52
|
-
}
|
|
53
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
54
|
-
let match = false;
|
|
55
|
-
filterItem.value.forEach(filteredValue => {
|
|
56
|
-
paramValues.forEach(paramValue => {
|
|
57
|
-
if (paramValue.endsWith(filteredValue)) {
|
|
58
|
-
match = true;
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
return match;
|
|
63
|
-
};
|
|
64
|
-
},
|
|
65
|
-
InputComponent: GridFilterInputMultipleValue
|
|
66
|
-
};
|
|
67
|
-
const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
|
|
68
|
-
|
|
69
|
-
const isAnyOfOperator = getGridStringOperators().filter(operator => operator.value === 'isAnyOf')[0];
|
|
70
|
-
const IS_ANY_OF = isAnyOfOperator;
|
|
71
|
-
|
|
72
18
|
function ownKeys(object, enumerableOnly) {
|
|
73
19
|
var keys = Object.keys(object);
|
|
74
20
|
if (Object.getOwnPropertySymbols) {
|
|
@@ -12442,7 +12388,7 @@ function getPopoverUtilityClass(slot) {
|
|
|
12442
12388
|
generateUtilityClasses('MuiPopover', ['root', 'paper']);
|
|
12443
12389
|
|
|
12444
12390
|
const _excluded$8 = ["onEntering"],
|
|
12445
|
-
_excluded2$
|
|
12391
|
+
_excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
|
|
12446
12392
|
function getOffsetTop(rect, vertical) {
|
|
12447
12393
|
let offset = 0;
|
|
12448
12394
|
if (typeof vertical === 'number') {
|
|
@@ -12535,7 +12481,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
|
|
|
12535
12481
|
} = {}
|
|
12536
12482
|
} = props,
|
|
12537
12483
|
TransitionProps = _objectWithoutPropertiesLoose$2(props.TransitionProps, _excluded$8),
|
|
12538
|
-
other = _objectWithoutPropertiesLoose$2(props, _excluded2$
|
|
12484
|
+
other = _objectWithoutPropertiesLoose$2(props, _excluded2$2);
|
|
12539
12485
|
const paperRef = React.useRef();
|
|
12540
12486
|
const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
|
|
12541
12487
|
const ownerState = _extends$1({}, props, {
|
|
@@ -12896,7 +12842,7 @@ function getMenuUtilityClass(slot) {
|
|
|
12896
12842
|
generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
|
|
12897
12843
|
|
|
12898
12844
|
const _excluded$7 = ["onEntering"],
|
|
12899
|
-
_excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
|
|
12845
|
+
_excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
|
|
12900
12846
|
const RTL_ORIGIN = {
|
|
12901
12847
|
vertical: 'top',
|
|
12902
12848
|
horizontal: 'right'
|
|
@@ -12963,7 +12909,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
|
|
|
12963
12909
|
variant = 'selectedMenu'
|
|
12964
12910
|
} = props,
|
|
12965
12911
|
TransitionProps = _objectWithoutPropertiesLoose$2(props.TransitionProps, _excluded$7),
|
|
12966
|
-
other = _objectWithoutPropertiesLoose$2(props, _excluded2);
|
|
12912
|
+
other = _objectWithoutPropertiesLoose$2(props, _excluded2$1);
|
|
12967
12913
|
const theme = useTheme();
|
|
12968
12914
|
const isRtl = theme.direction === 'rtl';
|
|
12969
12915
|
const ownerState = _extends$1({}, props, {
|
|
@@ -14896,13 +14842,16 @@ const isBetweenOperator = {
|
|
|
14896
14842
|
label: 'is between',
|
|
14897
14843
|
value: 'isBetween',
|
|
14898
14844
|
getApplyFilterFn: filterItem => {
|
|
14845
|
+
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
14846
|
+
return null;
|
|
14847
|
+
}
|
|
14899
14848
|
if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
|
|
14900
14849
|
return null;
|
|
14901
14850
|
}
|
|
14902
14851
|
if (filterItem.value[0] == null || filterItem.value[1] == null) {
|
|
14903
14852
|
return null;
|
|
14904
14853
|
}
|
|
14905
|
-
if (
|
|
14854
|
+
if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
|
|
14906
14855
|
return null;
|
|
14907
14856
|
}
|
|
14908
14857
|
return params => {
|
|
@@ -14913,6 +14862,108 @@ const isBetweenOperator = {
|
|
|
14913
14862
|
};
|
|
14914
14863
|
const IS_BETWEEN = isBetweenOperator;
|
|
14915
14864
|
|
|
14865
|
+
const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
|
|
14866
|
+
|
|
14867
|
+
const containsAnyOfOperator = {
|
|
14868
|
+
label: 'contains any of',
|
|
14869
|
+
value: 'containsAnyOf',
|
|
14870
|
+
getApplyFilterFn: filterItem => {
|
|
14871
|
+
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
14872
|
+
return null;
|
|
14873
|
+
}
|
|
14874
|
+
return params => {
|
|
14875
|
+
if (filterItem.value.length === 0) {
|
|
14876
|
+
return true;
|
|
14877
|
+
}
|
|
14878
|
+
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
14879
|
+
let match = false;
|
|
14880
|
+
filterItem.value.forEach(filteredValue => {
|
|
14881
|
+
if (paramValues.indexOf(filteredValue) !== -1) {
|
|
14882
|
+
match = true;
|
|
14883
|
+
}
|
|
14884
|
+
});
|
|
14885
|
+
return match;
|
|
14886
|
+
};
|
|
14887
|
+
},
|
|
14888
|
+
InputComponent: GridFilterInputMultipleValue
|
|
14889
|
+
};
|
|
14890
|
+
const CONTAINS_ANY_OF = containsAnyOfOperator;
|
|
14891
|
+
|
|
14892
|
+
const endsWithAnyOfOperator = {
|
|
14893
|
+
label: 'ends with any of',
|
|
14894
|
+
value: 'endsWithAnyOf',
|
|
14895
|
+
getApplyFilterFn: filterItem => {
|
|
14896
|
+
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
14897
|
+
return null;
|
|
14898
|
+
}
|
|
14899
|
+
return params => {
|
|
14900
|
+
if (filterItem.value.length === 0) {
|
|
14901
|
+
return true;
|
|
14902
|
+
}
|
|
14903
|
+
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
14904
|
+
let match = false;
|
|
14905
|
+
filterItem.value.forEach(filteredValue => {
|
|
14906
|
+
paramValues.forEach(paramValue => {
|
|
14907
|
+
if (paramValue.endsWith(filteredValue)) {
|
|
14908
|
+
match = true;
|
|
14909
|
+
}
|
|
14910
|
+
});
|
|
14911
|
+
});
|
|
14912
|
+
return match;
|
|
14913
|
+
};
|
|
14914
|
+
},
|
|
14915
|
+
InputComponent: GridFilterInputMultipleValue
|
|
14916
|
+
};
|
|
14917
|
+
const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
|
|
14918
|
+
|
|
14919
|
+
const isAnyOfOperator = {
|
|
14920
|
+
label: 'is any of',
|
|
14921
|
+
value: 'isAnyOf',
|
|
14922
|
+
getApplyFilterFn: filterItem => {
|
|
14923
|
+
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
14924
|
+
return null;
|
|
14925
|
+
}
|
|
14926
|
+
return params => {
|
|
14927
|
+
if (filterItem.value.length === 0) {
|
|
14928
|
+
return true;
|
|
14929
|
+
}
|
|
14930
|
+
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
14931
|
+
for (const paramValue of paramValues) {
|
|
14932
|
+
if (filterItem.value.includes(paramValue)) {
|
|
14933
|
+
return true;
|
|
14934
|
+
}
|
|
14935
|
+
}
|
|
14936
|
+
return false;
|
|
14937
|
+
};
|
|
14938
|
+
},
|
|
14939
|
+
InputComponent: GridFilterInputMultipleValue
|
|
14940
|
+
};
|
|
14941
|
+
const IS_ANY_OF = isAnyOfOperator;
|
|
14942
|
+
|
|
14943
|
+
const isNotAnyOfOperator = {
|
|
14944
|
+
label: 'is not any of',
|
|
14945
|
+
value: 'isNotAnyOf',
|
|
14946
|
+
getApplyFilterFn: filterItem => {
|
|
14947
|
+
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
14948
|
+
return null;
|
|
14949
|
+
}
|
|
14950
|
+
return params => {
|
|
14951
|
+
if (filterItem.value.length === 0) {
|
|
14952
|
+
return true;
|
|
14953
|
+
}
|
|
14954
|
+
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
14955
|
+
for (const paramValue of paramValues) {
|
|
14956
|
+
if (filterItem.value.includes(paramValue)) {
|
|
14957
|
+
return false;
|
|
14958
|
+
}
|
|
14959
|
+
}
|
|
14960
|
+
return true;
|
|
14961
|
+
};
|
|
14962
|
+
},
|
|
14963
|
+
InputComponent: GridFilterInputMultipleValue
|
|
14964
|
+
};
|
|
14965
|
+
const IS_NOT_ANY_OF = isNotAnyOfOperator;
|
|
14966
|
+
|
|
14916
14967
|
const startsWithAnyOfOperator = {
|
|
14917
14968
|
label: 'starts with any of',
|
|
14918
14969
|
value: 'startsWithAnyOf',
|
|
@@ -14940,7 +14991,9 @@ const startsWithAnyOfOperator = {
|
|
|
14940
14991
|
};
|
|
14941
14992
|
const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
|
|
14942
14993
|
|
|
14943
|
-
const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, STARTS_WITH_ANY_OF];
|
|
14994
|
+
const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
|
|
14995
|
+
|
|
14996
|
+
const getGridStringOperators = () => [...getGridStringOperators$1(), ...getGridStringArrayOperators()];
|
|
14944
14997
|
|
|
14945
14998
|
/* eslint-disable */
|
|
14946
14999
|
// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
|
|
@@ -15035,6 +15088,10 @@ const StyledDataGrid = styled$3.div`
|
|
|
15035
15088
|
.MuiTablePagination-displayedRows {
|
|
15036
15089
|
font-family: var(--redsift-typography-datagrid-row-font-family);
|
|
15037
15090
|
}
|
|
15091
|
+
|
|
15092
|
+
.MuiBadge-standard {
|
|
15093
|
+
font-family: var(--redsift-typography-datagrid-row-font-family);
|
|
15094
|
+
}
|
|
15038
15095
|
`;
|
|
15039
15096
|
|
|
15040
15097
|
/**
|
|
@@ -15048,61 +15105,31 @@ const GridToolbarWrapper = styled$3.div`
|
|
|
15048
15105
|
}
|
|
15049
15106
|
}
|
|
15050
15107
|
}
|
|
15051
|
-
|
|
15052
|
-
.MuiDataGrid-toolbarContainer {
|
|
15053
|
-
font-family: var(--redsift-typography-datagrid-font-family);
|
|
15054
|
-
|
|
15055
|
-
button {
|
|
15056
|
-
font-family: var(--redsift-typography-datagrid-font-family);
|
|
15057
|
-
font-size: var(--redsift-typography-button-large-font-size);
|
|
15058
|
-
line-height: var(--redsift-typography-button-large-line-height);
|
|
15059
|
-
color: var(--redsift-color-default-primary);
|
|
15060
|
-
border-radius: 0px;
|
|
15061
|
-
padding: 6px 8px;
|
|
15062
|
-
|
|
15063
|
-
.MuiButton-startIcon {
|
|
15064
|
-
margin-left: 0px;
|
|
15065
|
-
|
|
15066
|
-
svg {
|
|
15067
|
-
color: var(--redsift-color-default-primary);
|
|
15068
|
-
}
|
|
15069
|
-
}
|
|
15070
|
-
}
|
|
15071
|
-
|
|
15072
|
-
button:hover {
|
|
15073
|
-
background: var(--redsift-color-primary-outlined-hover);
|
|
15074
|
-
}
|
|
15075
|
-
}
|
|
15076
15108
|
`;
|
|
15077
15109
|
|
|
15110
|
+
/**
|
|
15111
|
+
* Temporary workaround for a type mismatch between react 17 and 18
|
|
15112
|
+
* https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566
|
|
15113
|
+
*/
|
|
15114
|
+
|
|
15078
15115
|
/** ------ */
|
|
15079
15116
|
|
|
15080
|
-
const
|
|
15081
|
-
const CLASSNAME$2 = 'redsift-data-grid';
|
|
15082
|
-
const DEFAULT_PROPS$1 = {
|
|
15083
|
-
hasExportButton: true,
|
|
15084
|
-
hasFilterButton: true,
|
|
15085
|
-
hasColumnsButton: true,
|
|
15086
|
-
hasDensityButton: true
|
|
15087
|
-
};
|
|
15088
|
-
const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
|
|
15117
|
+
const Toolbar = props => {
|
|
15089
15118
|
const {
|
|
15090
|
-
hasExportButton,
|
|
15119
|
+
hasExportButton = true,
|
|
15091
15120
|
exportButtonProps,
|
|
15092
15121
|
exportButtonRef,
|
|
15093
|
-
hasFilterButton,
|
|
15122
|
+
hasFilterButton = true,
|
|
15094
15123
|
filterButtonProps,
|
|
15095
15124
|
filterButtonRef,
|
|
15096
|
-
hasColumnsButton,
|
|
15125
|
+
hasColumnsButton = true,
|
|
15097
15126
|
columnsButtonProps,
|
|
15098
15127
|
columnsButtonRef,
|
|
15099
|
-
hasDensityButton,
|
|
15128
|
+
hasDensityButton = true,
|
|
15100
15129
|
densityButtonProps,
|
|
15101
15130
|
densityButtonRef
|
|
15102
15131
|
} = props;
|
|
15103
|
-
return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, {
|
|
15104
|
-
ref: ref
|
|
15105
|
-
}, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends$3({}, filterButtonProps, {
|
|
15132
|
+
return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, null, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, /*#__PURE__*/React__default.createElement(Flexbox, null, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends$3({}, filterButtonProps, {
|
|
15106
15133
|
ref: filterButtonRef
|
|
15107
15134
|
})) : null, hasColumnsButton ? /*#__PURE__*/React__default.createElement(GridToolbarColumnsButton, _extends$3({}, columnsButtonProps, {
|
|
15108
15135
|
ref: columnsButtonRef
|
|
@@ -15124,15 +15151,14 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
15124
15151
|
}
|
|
15125
15152
|
}, exportButtonProps, {
|
|
15126
15153
|
ref: exportButtonRef
|
|
15127
|
-
})) : null));
|
|
15128
|
-
}
|
|
15129
|
-
Toolbar.className = CLASSNAME$2;
|
|
15130
|
-
Toolbar.defaultProps = DEFAULT_PROPS$1;
|
|
15131
|
-
Toolbar.displayName = COMPONENT_NAME$2;
|
|
15154
|
+
})) : null)));
|
|
15155
|
+
};
|
|
15132
15156
|
|
|
15133
|
-
const _excluded$1 = ["className", "
|
|
15157
|
+
const _excluded$1 = ["className", "filterModel", "hideToolbar", "height", "license", "onFilterModelChange", "rows"],
|
|
15158
|
+
_excluded2 = ["onClick"],
|
|
15159
|
+
_excluded3 = ["checked", "indeterminate", "disabled", "onChange"];
|
|
15134
15160
|
const COMPONENT_NAME$1 = 'DataGrid';
|
|
15135
|
-
const CLASSNAME$1 = 'redsift-
|
|
15161
|
+
const CLASSNAME$1 = 'redsift-datagrid';
|
|
15136
15162
|
const DEFAULT_PROPS = {
|
|
15137
15163
|
license: process.env.MUI_LICENSE_KEY,
|
|
15138
15164
|
height: '500px'
|
|
@@ -15158,30 +15184,84 @@ const ColumnFilteredIcon = () => /*#__PURE__*/React__default.createElement(Icon,
|
|
|
15158
15184
|
size: "small"
|
|
15159
15185
|
});
|
|
15160
15186
|
const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
|
|
15187
|
+
var _props$componentsProp;
|
|
15161
15188
|
const datagridRef = ref || useRef();
|
|
15162
15189
|
const {
|
|
15163
15190
|
className,
|
|
15164
|
-
|
|
15191
|
+
filterModel: propsFilterModel,
|
|
15165
15192
|
hideToolbar,
|
|
15193
|
+
height,
|
|
15166
15194
|
license,
|
|
15167
|
-
|
|
15195
|
+
onFilterModelChange: propsOnFilterModelChange,
|
|
15196
|
+
rows
|
|
15168
15197
|
} = props,
|
|
15169
15198
|
forwardedProps = _objectWithoutProperties(props, _excluded$1);
|
|
15170
15199
|
LicenseInfo.setLicenseKey(license);
|
|
15200
|
+
const [filterModel, setFilterModel] = useState(propsFilterModel);
|
|
15201
|
+
useEffect(() => {
|
|
15202
|
+
setFilterModel(propsFilterModel);
|
|
15203
|
+
}, [propsFilterModel]);
|
|
15204
|
+
const onFilterModelChange = (model, details) => {
|
|
15205
|
+
if (propsOnFilterModelChange) {
|
|
15206
|
+
propsOnFilterModelChange(model, details);
|
|
15207
|
+
} else {
|
|
15208
|
+
setFilterModel(model);
|
|
15209
|
+
}
|
|
15210
|
+
};
|
|
15211
|
+
if (!Array.isArray(rows)) {
|
|
15212
|
+
return null;
|
|
15213
|
+
}
|
|
15171
15214
|
return /*#__PURE__*/React__default.createElement(StyledDataGrid, {
|
|
15172
15215
|
ref: datagridRef,
|
|
15173
15216
|
className: classNames(DataGrid.className, className),
|
|
15174
15217
|
$height: height
|
|
15175
15218
|
}, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$3({}, forwardedProps, {
|
|
15219
|
+
rows: rows,
|
|
15220
|
+
filterModel: filterModel,
|
|
15221
|
+
onFilterModelChange: onFilterModelChange,
|
|
15176
15222
|
components: _objectSpread2(_objectSpread2({
|
|
15223
|
+
BaseButton: /*#__PURE__*/forwardRef((props, ref) => {
|
|
15224
|
+
const {
|
|
15225
|
+
onClick
|
|
15226
|
+
} = props,
|
|
15227
|
+
forwardedProps = _objectWithoutProperties(props, _excluded2);
|
|
15228
|
+
return /*#__PURE__*/React__default.createElement(Button, _extends$3({}, forwardedProps, {
|
|
15229
|
+
onPress: onClick,
|
|
15230
|
+
ref: ref,
|
|
15231
|
+
variant: "unstyled"
|
|
15232
|
+
}));
|
|
15233
|
+
}),
|
|
15234
|
+
BaseCheckbox: /*#__PURE__*/forwardRef((props, ref) => {
|
|
15235
|
+
const {
|
|
15236
|
+
checked,
|
|
15237
|
+
indeterminate,
|
|
15238
|
+
disabled,
|
|
15239
|
+
onChange
|
|
15240
|
+
} = props,
|
|
15241
|
+
forwardedProps = _objectWithoutProperties(props, _excluded3);
|
|
15242
|
+
return /*#__PURE__*/React__default.createElement(Checkbox, _extends$3({}, forwardedProps, forwardedProps.inputProps, {
|
|
15243
|
+
isSelected: checked && !indeterminate,
|
|
15244
|
+
isColored: false,
|
|
15245
|
+
isDisabled: disabled,
|
|
15246
|
+
isIndeterminate: indeterminate,
|
|
15247
|
+
ref: ref,
|
|
15248
|
+
onChange: (isChecked, value, name, event) => onChange(event)
|
|
15249
|
+
}));
|
|
15250
|
+
}),
|
|
15177
15251
|
ColumnFilteredIcon,
|
|
15178
15252
|
ColumnSortedAscendingIcon,
|
|
15179
15253
|
ColumnSortedDescendingIcon,
|
|
15180
15254
|
DetailPanelExpandIcon,
|
|
15181
15255
|
DetailPanelCollapseIcon,
|
|
15182
15256
|
OpenFilterButtonIcon: ColumnFilteredIcon
|
|
15183
|
-
},
|
|
15184
|
-
Toolbar
|
|
15257
|
+
}, !hideToolbar && {
|
|
15258
|
+
Toolbar
|
|
15259
|
+
}), props.components),
|
|
15260
|
+
componentsProps: _objectSpread2(_objectSpread2({}, props.componentsProps), {}, {
|
|
15261
|
+
toolbar: _objectSpread2(_objectSpread2({}, (_props$componentsProp = props.componentsProps) === null || _props$componentsProp === void 0 ? void 0 : _props$componentsProp.toolbar), {}, {
|
|
15262
|
+
filterModel,
|
|
15263
|
+
onFilterModelChange
|
|
15264
|
+
})
|
|
15185
15265
|
})
|
|
15186
15266
|
})));
|
|
15187
15267
|
});
|
|
@@ -15247,5 +15327,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
15247
15327
|
TextCell.className = CLASSNAME;
|
|
15248
15328
|
TextCell.displayName = COMPONENT_NAME;
|
|
15249
15329
|
|
|
15250
|
-
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, STARTS_WITH_ANY_OF, TextCell, Toolbar, getGridStringArrayOperators };
|
|
15330
|
+
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
|
|
15251
15331
|
//# sourceMappingURL=index.js.map
|