@elliemae/ds-data-table 2.4.3-rc.2 → 2.4.3-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DataTableSchema.js +5 -0
- package/cjs/configs/useDatatableConfig.js +5 -1
- package/cjs/exported-related/EditableCell.js +1 -2
- package/cjs/parts/FilterBar/FiltersBar.js +28 -1
- package/cjs/styled.js +1 -2
- package/esm/DataTableSchema.js +5 -0
- package/esm/configs/useDatatableConfig.js +5 -1
- package/esm/exported-related/EditableCell.js +1 -2
- package/esm/parts/FilterBar/FiltersBar.js +29 -2
- package/esm/styled.js +1 -2
- package/package.json +19 -19
package/cjs/DataTableSchema.js
CHANGED
|
@@ -57,6 +57,11 @@ const DataTableSchema = {
|
|
|
57
57
|
withFilterBar: dsPropsHelpers.PropTypes.bool.description('Whether to display the filter bar'),
|
|
58
58
|
filterBarProps: dsPropsHelpers.PropTypes.shape({
|
|
59
59
|
customPillRenderer: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
|
|
60
|
+
isDropdownMenuOpen: dsPropsHelpers.PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
|
|
61
|
+
onDropdownMenuToggle: dsPropsHelpers.PropTypes.func.description('Callback to toggle the DropdownMenu.'),
|
|
62
|
+
onClearAllFiltersClick: dsPropsHelpers.PropTypes.func.description('Callback for Clear Al Filters option.'),
|
|
63
|
+
onDropdownMenuClickOutside: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
|
|
64
|
+
onDropdownMenuTriggerClick: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
|
|
60
65
|
extraOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.shape({
|
|
61
66
|
type: dsPropsHelpers.PropTypes.string,
|
|
62
67
|
id: dsPropsHelpers.PropTypes.string,
|
|
@@ -54,7 +54,11 @@ const useDatatableConfig = props => {
|
|
|
54
54
|
// Layout config
|
|
55
55
|
// ===========================================================================
|
|
56
56
|
|
|
57
|
-
const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
|
|
57
|
+
const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
|
|
58
|
+
|
|
59
|
+
React.useEffect(() => {
|
|
60
|
+
setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
|
|
61
|
+
}, [visibleColumns, props.colsLayoutStyle]);
|
|
58
62
|
const totalColumnsWidth = React.useMemo(() => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
|
|
59
63
|
const layoutHelpers = React.useMemo(() => ({
|
|
60
64
|
gridLayout,
|
|
@@ -76,6 +76,7 @@ const FiltersBar = () => {
|
|
|
76
76
|
},
|
|
77
77
|
visibleColumns
|
|
78
78
|
} = React.useContext(DataTableContext["default"]);
|
|
79
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
79
80
|
const pillGroupRefs = React.useMemo(() => {
|
|
80
81
|
const refs = [];
|
|
81
82
|
|
|
@@ -86,7 +87,29 @@ const FiltersBar = () => {
|
|
|
86
87
|
const dropdownMenuRef = React.useRef(null);
|
|
87
88
|
const removeAllFilters = React.useCallback(() => {
|
|
88
89
|
onFiltersChange([]);
|
|
89
|
-
|
|
90
|
+
filterBarProps?.onClearAllFiltersClick?.();
|
|
91
|
+
}, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
|
|
92
|
+
const onFilterBarClose = React.useCallback(() => {
|
|
93
|
+
filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
|
|
94
|
+
setIsOpen(false);
|
|
95
|
+
}, [filterBarProps.onDropdownMenuToggle]);
|
|
96
|
+
const onFilterBarOpen = React.useCallback(() => {
|
|
97
|
+
filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
|
|
98
|
+
setIsOpen(true);
|
|
99
|
+
}, [filterBarProps.onDropdownMenuToggle]);
|
|
100
|
+
const onFilterBarOnClickOutside = React.useCallback(() => {
|
|
101
|
+
filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
|
|
102
|
+
filterBarProps?.onDropdownMenuClickOutside?.();
|
|
103
|
+
setIsOpen(false);
|
|
104
|
+
}, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
|
|
105
|
+
const onTriggerClick = React.useCallback(() => {
|
|
106
|
+
filterBarProps?.onDropdownMenuTriggerClick?.();
|
|
107
|
+
onFilterBarOpen();
|
|
108
|
+
}, [filterBarProps.onDropdownMenuTriggerClick]);
|
|
109
|
+
const finalIsOpen = React.useMemo(() => {
|
|
110
|
+
if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
|
|
111
|
+
return isOpen;
|
|
112
|
+
}, [filterBarProps.isDropdownMenuOpen, isOpen]);
|
|
90
113
|
return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
|
|
91
114
|
width: width,
|
|
92
115
|
"aria-live": "polite",
|
|
@@ -122,6 +145,9 @@ const FiltersBar = () => {
|
|
|
122
145
|
}, column);
|
|
123
146
|
}), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
|
|
124
147
|
preventOverflow: "scrollParent",
|
|
148
|
+
isOpen: finalIsOpen,
|
|
149
|
+
onClose: onFilterBarClose,
|
|
150
|
+
onClickOutsideMenu: onFilterBarOnClickOutside,
|
|
125
151
|
options: [{
|
|
126
152
|
id: '__internal__option__clear__filters',
|
|
127
153
|
label: 'Clear Filters',
|
|
@@ -133,6 +159,7 @@ const FiltersBar = () => {
|
|
|
133
159
|
},
|
|
134
160
|
buttonType: "text",
|
|
135
161
|
innerRef: dropdownMenuRef,
|
|
162
|
+
onClick: onTriggerClick,
|
|
136
163
|
icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
|
|
137
164
|
})
|
|
138
165
|
}));
|
package/cjs/styled.js
CHANGED
|
@@ -127,12 +127,11 @@ const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig
|
|
|
127
127
|
})(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
|
|
128
128
|
const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
|
|
129
129
|
componentId: "sc-38sgfo-6"
|
|
130
|
-
})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
|
|
130
|
+
})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
|
|
131
131
|
cols: props.cols,
|
|
132
132
|
isExpandable: props.isExpandable,
|
|
133
133
|
colsLayoutStyle: props.colsLayoutStyle
|
|
134
134
|
}), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
|
|
135
|
-
|
|
136
135
|
const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
137
136
|
componentId: "sc-38sgfo-7"
|
|
138
137
|
})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
|
package/esm/DataTableSchema.js
CHANGED
|
@@ -53,6 +53,11 @@ const DataTableSchema = {
|
|
|
53
53
|
withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),
|
|
54
54
|
filterBarProps: PropTypes.shape({
|
|
55
55
|
customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
|
|
56
|
+
isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
|
|
57
|
+
onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),
|
|
58
|
+
onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),
|
|
59
|
+
onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
|
|
60
|
+
onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
|
|
56
61
|
extraOptions: PropTypes.arrayOf(PropTypes.shape({
|
|
57
62
|
type: PropTypes.string,
|
|
58
63
|
id: PropTypes.string,
|
|
@@ -50,7 +50,11 @@ const useDatatableConfig = props => {
|
|
|
50
50
|
// Layout config
|
|
51
51
|
// ===========================================================================
|
|
52
52
|
|
|
53
|
-
const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));
|
|
53
|
+
const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
|
|
54
|
+
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));
|
|
57
|
+
}, [visibleColumns, props.colsLayoutStyle]);
|
|
54
58
|
const totalColumnsWidth = useMemo(() => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
|
|
55
59
|
const layoutHelpers = useMemo(() => ({
|
|
56
60
|
gridLayout,
|
|
@@ -4,7 +4,7 @@ import 'core-js/modules/esnext.iterator.map.js';
|
|
|
4
4
|
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
5
5
|
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
6
6
|
import 'core-js/modules/esnext.iterator.find.js';
|
|
7
|
-
import React, { useContext, useMemo, useRef, useCallback } from 'react';
|
|
7
|
+
import React, { useContext, useState, useMemo, useRef, useCallback } from 'react';
|
|
8
8
|
import DSButton from '@elliemae/ds-button';
|
|
9
9
|
import { MoreOptionsVert } from '@elliemae/ds-icons';
|
|
10
10
|
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
@@ -66,6 +66,7 @@ const FiltersBar = () => {
|
|
|
66
66
|
},
|
|
67
67
|
visibleColumns
|
|
68
68
|
} = useContext(DataTableContext);
|
|
69
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
69
70
|
const pillGroupRefs = useMemo(() => {
|
|
70
71
|
const refs = [];
|
|
71
72
|
|
|
@@ -76,7 +77,29 @@ const FiltersBar = () => {
|
|
|
76
77
|
const dropdownMenuRef = useRef(null);
|
|
77
78
|
const removeAllFilters = useCallback(() => {
|
|
78
79
|
onFiltersChange([]);
|
|
79
|
-
|
|
80
|
+
filterBarProps?.onClearAllFiltersClick?.();
|
|
81
|
+
}, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
|
|
82
|
+
const onFilterBarClose = useCallback(() => {
|
|
83
|
+
filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
|
|
84
|
+
setIsOpen(false);
|
|
85
|
+
}, [filterBarProps.onDropdownMenuToggle]);
|
|
86
|
+
const onFilterBarOpen = useCallback(() => {
|
|
87
|
+
filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
|
|
88
|
+
setIsOpen(true);
|
|
89
|
+
}, [filterBarProps.onDropdownMenuToggle]);
|
|
90
|
+
const onFilterBarOnClickOutside = useCallback(() => {
|
|
91
|
+
filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
|
|
92
|
+
filterBarProps?.onDropdownMenuClickOutside?.();
|
|
93
|
+
setIsOpen(false);
|
|
94
|
+
}, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
|
|
95
|
+
const onTriggerClick = useCallback(() => {
|
|
96
|
+
filterBarProps?.onDropdownMenuTriggerClick?.();
|
|
97
|
+
onFilterBarOpen();
|
|
98
|
+
}, [filterBarProps.onDropdownMenuTriggerClick]);
|
|
99
|
+
const finalIsOpen = useMemo(() => {
|
|
100
|
+
if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
|
|
101
|
+
return isOpen;
|
|
102
|
+
}, [filterBarProps.isDropdownMenuOpen, isOpen]);
|
|
80
103
|
return /*#__PURE__*/_jsx(StyledWrapper, {
|
|
81
104
|
width: width,
|
|
82
105
|
"aria-live": "polite",
|
|
@@ -112,6 +135,9 @@ const FiltersBar = () => {
|
|
|
112
135
|
}, column);
|
|
113
136
|
}), /*#__PURE__*/_jsx(StyledDropdownMenu, {
|
|
114
137
|
preventOverflow: "scrollParent",
|
|
138
|
+
isOpen: finalIsOpen,
|
|
139
|
+
onClose: onFilterBarClose,
|
|
140
|
+
onClickOutsideMenu: onFilterBarOnClickOutside,
|
|
115
141
|
options: [{
|
|
116
142
|
id: '__internal__option__clear__filters',
|
|
117
143
|
label: 'Clear Filters',
|
|
@@ -123,6 +149,7 @@ const FiltersBar = () => {
|
|
|
123
149
|
},
|
|
124
150
|
buttonType: "text",
|
|
125
151
|
innerRef: dropdownMenuRef,
|
|
152
|
+
onClick: onTriggerClick,
|
|
126
153
|
icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
|
|
127
154
|
})
|
|
128
155
|
}));
|
package/esm/styled.js
CHANGED
|
@@ -118,12 +118,11 @@ const StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
118
118
|
})(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%');
|
|
119
119
|
const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
|
|
120
120
|
componentId: "sc-38sgfo-6"
|
|
121
|
-
})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
|
|
121
|
+
})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
|
|
122
122
|
cols: props.cols,
|
|
123
123
|
isExpandable: props.isExpandable,
|
|
124
124
|
colsLayoutStyle: props.colsLayoutStyle
|
|
125
125
|
}), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
|
|
126
|
-
|
|
127
126
|
const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
|
|
128
127
|
componentId: "sc-38sgfo-7"
|
|
129
128
|
})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "2.4.3-rc.
|
|
3
|
+
"version": "2.4.3-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -570,24 +570,24 @@
|
|
|
570
570
|
"dependencies": {
|
|
571
571
|
"@dnd-kit/core": "~4.0.1",
|
|
572
572
|
"@dnd-kit/sortable": "~5.0.0",
|
|
573
|
-
"@elliemae/ds-button": "2.4.3-rc.
|
|
574
|
-
"@elliemae/ds-circular-progress-indicator": "2.4.3-rc.
|
|
575
|
-
"@elliemae/ds-controlled-form": "2.4.3-rc.
|
|
576
|
-
"@elliemae/ds-drag-and-drop": "2.4.3-rc.
|
|
577
|
-
"@elliemae/ds-dropdownmenu": "2.4.3-rc.
|
|
578
|
-
"@elliemae/ds-form": "2.4.3-rc.
|
|
579
|
-
"@elliemae/ds-form-layout-blocks": "2.4.3-rc.
|
|
580
|
-
"@elliemae/ds-grid": "2.4.3-rc.
|
|
581
|
-
"@elliemae/ds-icons": "2.4.3-rc.
|
|
582
|
-
"@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.
|
|
583
|
-
"@elliemae/ds-pagination": "2.4.3-rc.
|
|
584
|
-
"@elliemae/ds-pills": "2.4.3-rc.
|
|
585
|
-
"@elliemae/ds-popperjs": "2.4.3-rc.
|
|
586
|
-
"@elliemae/ds-props-helpers": "2.4.3-rc.
|
|
587
|
-
"@elliemae/ds-system": "2.4.3-rc.
|
|
588
|
-
"@elliemae/ds-toolbar": "2.4.3-rc.
|
|
589
|
-
"@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.
|
|
590
|
-
"@elliemae/ds-utilities": "2.4.3-rc.
|
|
573
|
+
"@elliemae/ds-button": "2.4.3-rc.6",
|
|
574
|
+
"@elliemae/ds-circular-progress-indicator": "2.4.3-rc.6",
|
|
575
|
+
"@elliemae/ds-controlled-form": "2.4.3-rc.6",
|
|
576
|
+
"@elliemae/ds-drag-and-drop": "2.4.3-rc.6",
|
|
577
|
+
"@elliemae/ds-dropdownmenu": "2.4.3-rc.6",
|
|
578
|
+
"@elliemae/ds-form": "2.4.3-rc.6",
|
|
579
|
+
"@elliemae/ds-form-layout-blocks": "2.4.3-rc.6",
|
|
580
|
+
"@elliemae/ds-grid": "2.4.3-rc.6",
|
|
581
|
+
"@elliemae/ds-icons": "2.4.3-rc.6",
|
|
582
|
+
"@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.6",
|
|
583
|
+
"@elliemae/ds-pagination": "2.4.3-rc.6",
|
|
584
|
+
"@elliemae/ds-pills": "2.4.3-rc.6",
|
|
585
|
+
"@elliemae/ds-popperjs": "2.4.3-rc.6",
|
|
586
|
+
"@elliemae/ds-props-helpers": "2.4.3-rc.6",
|
|
587
|
+
"@elliemae/ds-system": "2.4.3-rc.6",
|
|
588
|
+
"@elliemae/ds-toolbar": "2.4.3-rc.6",
|
|
589
|
+
"@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.6",
|
|
590
|
+
"@elliemae/ds-utilities": "2.4.3-rc.6",
|
|
591
591
|
"@reduxjs/toolkit": "~1.6.2",
|
|
592
592
|
"csstype": "~3.0.9",
|
|
593
593
|
"moment": "~2.29.1",
|