@elastic/eui 92.1.0 → 92.1.1
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/es/components/datagrid/body/cell/data_grid_cell.js +82 -62
- package/eui.d.ts +6 -1
- package/lib/components/datagrid/body/cell/data_grid_cell.js +82 -62
- package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +82 -62
- package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +82 -62
- package/package.json +1 -1
- package/test-env/components/datagrid/body/cell/data_grid_cell.js +82 -62
|
@@ -597,6 +597,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
597
597
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
598
598
|
cellProps: {},
|
|
599
599
|
isFocused: false,
|
|
600
|
+
isHovered: false,
|
|
600
601
|
cellTextAlign: 'Left'
|
|
601
602
|
});
|
|
602
603
|
_defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
|
|
@@ -765,14 +766,59 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
765
766
|
setPopoverContent(popoverContent);
|
|
766
767
|
}
|
|
767
768
|
});
|
|
769
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellKeyDown", function (event) {
|
|
770
|
+
if (_this.isExpandable()) {
|
|
771
|
+
if (_this.isPopoverOpen()) return;
|
|
772
|
+
var _this$props6 = _this.props,
|
|
773
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
774
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
775
|
+
colIndex = _this$props6.colIndex;
|
|
776
|
+
switch (event.key) {
|
|
777
|
+
case keys.ENTER:
|
|
778
|
+
case keys.F2:
|
|
779
|
+
event.preventDefault();
|
|
780
|
+
openCellPopover({
|
|
781
|
+
rowIndex: visibleRowIndex,
|
|
782
|
+
colIndex: colIndex
|
|
783
|
+
});
|
|
784
|
+
break;
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
});
|
|
788
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellExpansionClick", function () {
|
|
789
|
+
var _this$props7 = _this.props,
|
|
790
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
791
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
792
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
793
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
794
|
+
colIndex = _this$props7.colIndex;
|
|
795
|
+
if (_this.isPopoverOpen()) {
|
|
796
|
+
closeCellPopover();
|
|
797
|
+
} else {
|
|
798
|
+
openCellPopover({
|
|
799
|
+
rowIndex: visibleRowIndex,
|
|
800
|
+
colIndex: colIndex
|
|
801
|
+
});
|
|
802
|
+
}
|
|
803
|
+
});
|
|
804
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseEnter", function () {
|
|
805
|
+
return _this.setState({
|
|
806
|
+
isHovered: true
|
|
807
|
+
});
|
|
808
|
+
});
|
|
809
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
|
|
810
|
+
return _this.setState({
|
|
811
|
+
isHovered: false
|
|
812
|
+
});
|
|
813
|
+
});
|
|
768
814
|
return _this;
|
|
769
815
|
}
|
|
770
816
|
_createClass(EuiDataGridCell, [{
|
|
771
817
|
key: "componentDidMount",
|
|
772
818
|
value: function componentDidMount() {
|
|
773
|
-
var _this$
|
|
774
|
-
colIndex = _this$
|
|
775
|
-
visibleRowIndex = _this$
|
|
819
|
+
var _this$props8 = this.props,
|
|
820
|
+
colIndex = _this$props8.colIndex,
|
|
821
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
776
822
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
777
823
|
|
|
778
824
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -858,32 +904,32 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
858
904
|
}
|
|
859
905
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
860
906
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
907
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
861
908
|
return false;
|
|
862
909
|
}
|
|
863
910
|
}, {
|
|
864
911
|
key: "render",
|
|
865
912
|
value: function render() {
|
|
866
913
|
var _classNames, _rowHeightsOptions$li;
|
|
867
|
-
var _this$
|
|
868
|
-
width = _this$
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
pagination = _this$props7.pagination,
|
|
881
|
-
rest = _objectWithoutProperties(_this$props7, _excluded2);
|
|
914
|
+
var _this$props9 = this.props,
|
|
915
|
+
width = _this$props9.width,
|
|
916
|
+
popoverContext = _this$props9.popoverContext,
|
|
917
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
918
|
+
columnType = _this$props9.columnType,
|
|
919
|
+
className = _this$props9.className,
|
|
920
|
+
column = _this$props9.column,
|
|
921
|
+
style = _this$props9.style,
|
|
922
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
923
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
924
|
+
rowManager = _this$props9.rowManager,
|
|
925
|
+
pagination = _this$props9.pagination,
|
|
926
|
+
rest = _objectWithoutProperties(_this$props9, _excluded2);
|
|
882
927
|
var rowIndex = rest.rowIndex,
|
|
883
928
|
visibleRowIndex = rest.visibleRowIndex,
|
|
884
929
|
colIndex = rest.colIndex;
|
|
885
930
|
var isExpandable = this.isExpandable();
|
|
886
931
|
var popoverIsOpen = this.isPopoverOpen();
|
|
932
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
887
933
|
var cellClasses = classNames('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
888
934
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
889
935
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -904,23 +950,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
904
950
|
// column width, can be undefined
|
|
905
951
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
906
952
|
}, cellPropsStyle);
|
|
907
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
908
|
-
if (isExpandable) {
|
|
909
|
-
if (popoverIsOpen) {
|
|
910
|
-
return;
|
|
911
|
-
}
|
|
912
|
-
switch (event.key) {
|
|
913
|
-
case keys.ENTER:
|
|
914
|
-
case keys.F2:
|
|
915
|
-
event.preventDefault();
|
|
916
|
-
openCellPopover({
|
|
917
|
-
rowIndex: visibleRowIndex,
|
|
918
|
-
colIndex: colIndex
|
|
919
|
-
});
|
|
920
|
-
break;
|
|
921
|
-
}
|
|
922
|
-
}
|
|
923
|
-
};
|
|
924
953
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
925
954
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
926
955
|
setCellProps: this.setCellProps,
|
|
@@ -936,31 +965,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
936
965
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
937
966
|
ariaRowIndex: ariaRowIndex
|
|
938
967
|
});
|
|
939
|
-
var cellActions = isExpandable ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
|
|
940
|
-
rowIndex: rowIndex,
|
|
941
|
-
colIndex: colIndex,
|
|
942
|
-
column: column,
|
|
943
|
-
onExpandClick: function onExpandClick() {
|
|
944
|
-
if (popoverIsOpen) {
|
|
945
|
-
closeCellPopover();
|
|
946
|
-
} else {
|
|
947
|
-
openCellPopover({
|
|
948
|
-
rowIndex: visibleRowIndex,
|
|
949
|
-
colIndex: colIndex
|
|
950
|
-
});
|
|
951
|
-
}
|
|
952
|
-
}
|
|
953
|
-
}), ___EmotionJSX("div", {
|
|
954
|
-
ref: this.popoverAnchorRef,
|
|
955
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
956
|
-
})) : undefined;
|
|
957
|
-
var cellContent = ___EmotionJSX(HandleInteractiveChildren, {
|
|
958
|
-
cellEl: this.cellRef.current,
|
|
959
|
-
updateCellFocusContext: this.updateCellFocusContext,
|
|
960
|
-
renderFocusTrap: !isExpandable
|
|
961
|
-
}, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
962
|
-
cellActions: cellActions
|
|
963
|
-
})));
|
|
964
968
|
var cell = ___EmotionJSX("div", _extends({
|
|
965
969
|
role: "gridcell",
|
|
966
970
|
"aria-rowindex": ariaRowIndex,
|
|
@@ -978,8 +982,24 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
978
982
|
,
|
|
979
983
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
980
984
|
,
|
|
981
|
-
onKeyDown: handleCellKeyDown
|
|
982
|
-
|
|
985
|
+
onKeyDown: this.handleCellKeyDown,
|
|
986
|
+
onMouseEnter: this.onMouseEnter,
|
|
987
|
+
onMouseLeave: this.onMouseLeave
|
|
988
|
+
}), ___EmotionJSX(HandleInteractiveChildren, {
|
|
989
|
+
cellEl: this.cellRef.current,
|
|
990
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
991
|
+
renderFocusTrap: !isExpandable
|
|
992
|
+
}, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
993
|
+
cellActions: showCellActions && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
|
|
994
|
+
rowIndex: rowIndex,
|
|
995
|
+
colIndex: colIndex,
|
|
996
|
+
column: column,
|
|
997
|
+
onExpandClick: this.handleCellExpansionClick
|
|
998
|
+
}), ___EmotionJSX("div", {
|
|
999
|
+
ref: this.popoverAnchorRef,
|
|
1000
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
1001
|
+
}))
|
|
1002
|
+
}))));
|
|
983
1003
|
return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(cell, rowManager.getRow({
|
|
984
1004
|
rowIndex: rowIndex,
|
|
985
1005
|
visibleRowIndex: visibleRowIndex,
|
package/eui.d.ts
CHANGED
|
@@ -13932,6 +13932,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
|
|
|
13932
13932
|
export interface EuiDataGridCellState {
|
|
13933
13933
|
cellProps: EuiDataGridSetCellProps;
|
|
13934
13934
|
isFocused: boolean;
|
|
13935
|
+
isHovered: boolean;
|
|
13935
13936
|
cellTextAlign: 'Left' | 'Right';
|
|
13936
13937
|
}
|
|
13937
13938
|
export type EuiDataGridCellValueProps = Omit<EuiDataGridCellProps, 'width' | 'interactiveCellId' | 'popoverContext' | 'rowManager'>;
|
|
@@ -14745,7 +14746,7 @@ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_po
|
|
|
14745
14746
|
|
|
14746
14747
|
}
|
|
14747
14748
|
declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell' {
|
|
14748
|
-
import React, { Component, ContextType } from 'react';
|
|
14749
|
+
import React, { Component, ContextType, KeyboardEvent } from 'react';
|
|
14749
14750
|
import { DataGridFocusContext } from '@elastic/eui/src/components/datagrid/utils/focus';
|
|
14750
14751
|
import { EuiDataGridCellProps, EuiDataGridCellState, EuiDataGridSetCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
|
|
14751
14752
|
export class EuiDataGridCell extends Component<EuiDataGridCellProps, EuiDataGridCellState> {
|
|
@@ -14774,6 +14775,10 @@ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell' {
|
|
|
14774
14775
|
isExpandable: () => boolean;
|
|
14775
14776
|
isPopoverOpen: () => boolean;
|
|
14776
14777
|
handleCellPopover: () => void;
|
|
14778
|
+
handleCellKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
|
|
14779
|
+
handleCellExpansionClick: () => void;
|
|
14780
|
+
onMouseEnter: () => void;
|
|
14781
|
+
onMouseLeave: () => void;
|
|
14777
14782
|
render(): React.JSX.Element;
|
|
14778
14783
|
}
|
|
14779
14784
|
|
|
@@ -605,6 +605,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
605
605
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
606
606
|
cellProps: {},
|
|
607
607
|
isFocused: false,
|
|
608
|
+
isHovered: false,
|
|
608
609
|
cellTextAlign: 'Left'
|
|
609
610
|
});
|
|
610
611
|
_defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
|
|
@@ -773,14 +774,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
773
774
|
setPopoverContent(popoverContent);
|
|
774
775
|
}
|
|
775
776
|
});
|
|
777
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellKeyDown", function (event) {
|
|
778
|
+
if (_this.isExpandable()) {
|
|
779
|
+
if (_this.isPopoverOpen()) return;
|
|
780
|
+
var _this$props6 = _this.props,
|
|
781
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
782
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
783
|
+
colIndex = _this$props6.colIndex;
|
|
784
|
+
switch (event.key) {
|
|
785
|
+
case _services.keys.ENTER:
|
|
786
|
+
case _services.keys.F2:
|
|
787
|
+
event.preventDefault();
|
|
788
|
+
openCellPopover({
|
|
789
|
+
rowIndex: visibleRowIndex,
|
|
790
|
+
colIndex: colIndex
|
|
791
|
+
});
|
|
792
|
+
break;
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
});
|
|
796
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellExpansionClick", function () {
|
|
797
|
+
var _this$props7 = _this.props,
|
|
798
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
799
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
800
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
801
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
802
|
+
colIndex = _this$props7.colIndex;
|
|
803
|
+
if (_this.isPopoverOpen()) {
|
|
804
|
+
closeCellPopover();
|
|
805
|
+
} else {
|
|
806
|
+
openCellPopover({
|
|
807
|
+
rowIndex: visibleRowIndex,
|
|
808
|
+
colIndex: colIndex
|
|
809
|
+
});
|
|
810
|
+
}
|
|
811
|
+
});
|
|
812
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseEnter", function () {
|
|
813
|
+
return _this.setState({
|
|
814
|
+
isHovered: true
|
|
815
|
+
});
|
|
816
|
+
});
|
|
817
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
|
|
818
|
+
return _this.setState({
|
|
819
|
+
isHovered: false
|
|
820
|
+
});
|
|
821
|
+
});
|
|
776
822
|
return _this;
|
|
777
823
|
}
|
|
778
824
|
_createClass(EuiDataGridCell, [{
|
|
779
825
|
key: "componentDidMount",
|
|
780
826
|
value: function componentDidMount() {
|
|
781
|
-
var _this$
|
|
782
|
-
colIndex = _this$
|
|
783
|
-
visibleRowIndex = _this$
|
|
827
|
+
var _this$props8 = this.props,
|
|
828
|
+
colIndex = _this$props8.colIndex,
|
|
829
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
784
830
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
785
831
|
|
|
786
832
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -866,32 +912,32 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
866
912
|
}
|
|
867
913
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
868
914
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
915
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
869
916
|
return false;
|
|
870
917
|
}
|
|
871
918
|
}, {
|
|
872
919
|
key: "render",
|
|
873
920
|
value: function render() {
|
|
874
921
|
var _classNames, _rowHeightsOptions$li;
|
|
875
|
-
var _this$
|
|
876
|
-
width = _this$
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
pagination = _this$props7.pagination,
|
|
889
|
-
rest = _objectWithoutProperties(_this$props7, _excluded2);
|
|
922
|
+
var _this$props9 = this.props,
|
|
923
|
+
width = _this$props9.width,
|
|
924
|
+
popoverContext = _this$props9.popoverContext,
|
|
925
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
926
|
+
columnType = _this$props9.columnType,
|
|
927
|
+
className = _this$props9.className,
|
|
928
|
+
column = _this$props9.column,
|
|
929
|
+
style = _this$props9.style,
|
|
930
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
931
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
932
|
+
rowManager = _this$props9.rowManager,
|
|
933
|
+
pagination = _this$props9.pagination,
|
|
934
|
+
rest = _objectWithoutProperties(_this$props9, _excluded2);
|
|
890
935
|
var rowIndex = rest.rowIndex,
|
|
891
936
|
visibleRowIndex = rest.visibleRowIndex,
|
|
892
937
|
colIndex = rest.colIndex;
|
|
893
938
|
var isExpandable = this.isExpandable();
|
|
894
939
|
var popoverIsOpen = this.isPopoverOpen();
|
|
940
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
895
941
|
var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
896
942
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
897
943
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -912,23 +958,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
912
958
|
// column width, can be undefined
|
|
913
959
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
914
960
|
}, cellPropsStyle);
|
|
915
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
916
|
-
if (isExpandable) {
|
|
917
|
-
if (popoverIsOpen) {
|
|
918
|
-
return;
|
|
919
|
-
}
|
|
920
|
-
switch (event.key) {
|
|
921
|
-
case _services.keys.ENTER:
|
|
922
|
-
case _services.keys.F2:
|
|
923
|
-
event.preventDefault();
|
|
924
|
-
openCellPopover({
|
|
925
|
-
rowIndex: visibleRowIndex,
|
|
926
|
-
colIndex: colIndex
|
|
927
|
-
});
|
|
928
|
-
break;
|
|
929
|
-
}
|
|
930
|
-
}
|
|
931
|
-
};
|
|
932
961
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
933
962
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
934
963
|
setCellProps: this.setCellProps,
|
|
@@ -944,31 +973,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
944
973
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
945
974
|
ariaRowIndex: ariaRowIndex
|
|
946
975
|
});
|
|
947
|
-
var cellActions = isExpandable ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
948
|
-
rowIndex: rowIndex,
|
|
949
|
-
colIndex: colIndex,
|
|
950
|
-
column: column,
|
|
951
|
-
onExpandClick: function onExpandClick() {
|
|
952
|
-
if (popoverIsOpen) {
|
|
953
|
-
closeCellPopover();
|
|
954
|
-
} else {
|
|
955
|
-
openCellPopover({
|
|
956
|
-
rowIndex: visibleRowIndex,
|
|
957
|
-
colIndex: colIndex
|
|
958
|
-
});
|
|
959
|
-
}
|
|
960
|
-
}
|
|
961
|
-
}), (0, _react2.jsx)("div", {
|
|
962
|
-
ref: this.popoverAnchorRef,
|
|
963
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
964
|
-
})) : undefined;
|
|
965
|
-
var cellContent = (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
966
|
-
cellEl: this.cellRef.current,
|
|
967
|
-
updateCellFocusContext: this.updateCellFocusContext,
|
|
968
|
-
renderFocusTrap: !isExpandable
|
|
969
|
-
}, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
970
|
-
cellActions: cellActions
|
|
971
|
-
})));
|
|
972
976
|
var cell = (0, _react2.jsx)("div", _extends({
|
|
973
977
|
role: "gridcell",
|
|
974
978
|
"aria-rowindex": ariaRowIndex,
|
|
@@ -986,8 +990,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
986
990
|
,
|
|
987
991
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
988
992
|
,
|
|
989
|
-
onKeyDown: handleCellKeyDown
|
|
990
|
-
|
|
993
|
+
onKeyDown: this.handleCellKeyDown,
|
|
994
|
+
onMouseEnter: this.onMouseEnter,
|
|
995
|
+
onMouseLeave: this.onMouseLeave
|
|
996
|
+
}), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
997
|
+
cellEl: this.cellRef.current,
|
|
998
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
999
|
+
renderFocusTrap: !isExpandable
|
|
1000
|
+
}, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
1001
|
+
cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
1002
|
+
rowIndex: rowIndex,
|
|
1003
|
+
colIndex: colIndex,
|
|
1004
|
+
column: column,
|
|
1005
|
+
onExpandClick: this.handleCellExpansionClick
|
|
1006
|
+
}), (0, _react2.jsx)("div", {
|
|
1007
|
+
ref: this.popoverAnchorRef,
|
|
1008
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
1009
|
+
}))
|
|
1010
|
+
}))));
|
|
991
1011
|
return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
|
|
992
1012
|
rowIndex: rowIndex,
|
|
993
1013
|
visibleRowIndex: visibleRowIndex,
|
|
@@ -108,6 +108,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
108
108
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
109
109
|
cellProps: {},
|
|
110
110
|
isFocused: false,
|
|
111
|
+
isHovered: false,
|
|
111
112
|
cellTextAlign: 'Left'
|
|
112
113
|
});
|
|
113
114
|
_defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
|
|
@@ -276,14 +277,59 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
276
277
|
setPopoverContent(popoverContent);
|
|
277
278
|
}
|
|
278
279
|
});
|
|
280
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellKeyDown", function (event) {
|
|
281
|
+
if (_this.isExpandable()) {
|
|
282
|
+
if (_this.isPopoverOpen()) return;
|
|
283
|
+
var _this$props6 = _this.props,
|
|
284
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
285
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
286
|
+
colIndex = _this$props6.colIndex;
|
|
287
|
+
switch (event.key) {
|
|
288
|
+
case keys.ENTER:
|
|
289
|
+
case keys.F2:
|
|
290
|
+
event.preventDefault();
|
|
291
|
+
openCellPopover({
|
|
292
|
+
rowIndex: visibleRowIndex,
|
|
293
|
+
colIndex: colIndex
|
|
294
|
+
});
|
|
295
|
+
break;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
});
|
|
299
|
+
_defineProperty(_assertThisInitialized(_this), "handleCellExpansionClick", function () {
|
|
300
|
+
var _this$props7 = _this.props,
|
|
301
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
302
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
303
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
304
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
305
|
+
colIndex = _this$props7.colIndex;
|
|
306
|
+
if (_this.isPopoverOpen()) {
|
|
307
|
+
closeCellPopover();
|
|
308
|
+
} else {
|
|
309
|
+
openCellPopover({
|
|
310
|
+
rowIndex: visibleRowIndex,
|
|
311
|
+
colIndex: colIndex
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
});
|
|
315
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseEnter", function () {
|
|
316
|
+
return _this.setState({
|
|
317
|
+
isHovered: true
|
|
318
|
+
});
|
|
319
|
+
});
|
|
320
|
+
_defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
|
|
321
|
+
return _this.setState({
|
|
322
|
+
isHovered: false
|
|
323
|
+
});
|
|
324
|
+
});
|
|
279
325
|
return _this;
|
|
280
326
|
}
|
|
281
327
|
_createClass(EuiDataGridCell, [{
|
|
282
328
|
key: "componentDidMount",
|
|
283
329
|
value: function componentDidMount() {
|
|
284
|
-
var _this$
|
|
285
|
-
colIndex = _this$
|
|
286
|
-
visibleRowIndex = _this$
|
|
330
|
+
var _this$props8 = this.props,
|
|
331
|
+
colIndex = _this$props8.colIndex,
|
|
332
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
287
333
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
288
334
|
|
|
289
335
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -369,32 +415,32 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
369
415
|
}
|
|
370
416
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
371
417
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
418
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
372
419
|
return false;
|
|
373
420
|
}
|
|
374
421
|
}, {
|
|
375
422
|
key: "render",
|
|
376
423
|
value: function render() {
|
|
377
424
|
var _classNames, _rowHeightsOptions$li;
|
|
378
|
-
var _this$
|
|
379
|
-
width = _this$
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
pagination = _this$props7.pagination,
|
|
392
|
-
rest = _objectWithoutProperties(_this$props7, _excluded2);
|
|
425
|
+
var _this$props9 = this.props,
|
|
426
|
+
width = _this$props9.width,
|
|
427
|
+
popoverContext = _this$props9.popoverContext,
|
|
428
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
429
|
+
columnType = _this$props9.columnType,
|
|
430
|
+
className = _this$props9.className,
|
|
431
|
+
column = _this$props9.column,
|
|
432
|
+
style = _this$props9.style,
|
|
433
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
434
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
435
|
+
rowManager = _this$props9.rowManager,
|
|
436
|
+
pagination = _this$props9.pagination,
|
|
437
|
+
rest = _objectWithoutProperties(_this$props9, _excluded2);
|
|
393
438
|
var rowIndex = rest.rowIndex,
|
|
394
439
|
visibleRowIndex = rest.visibleRowIndex,
|
|
395
440
|
colIndex = rest.colIndex;
|
|
396
441
|
var isExpandable = this.isExpandable();
|
|
397
442
|
var popoverIsOpen = this.isPopoverOpen();
|
|
443
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
398
444
|
var cellClasses = classNames('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
399
445
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
400
446
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -415,23 +461,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
415
461
|
// column width, can be undefined
|
|
416
462
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
417
463
|
}, cellPropsStyle);
|
|
418
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
419
|
-
if (isExpandable) {
|
|
420
|
-
if (popoverIsOpen) {
|
|
421
|
-
return;
|
|
422
|
-
}
|
|
423
|
-
switch (event.key) {
|
|
424
|
-
case keys.ENTER:
|
|
425
|
-
case keys.F2:
|
|
426
|
-
event.preventDefault();
|
|
427
|
-
openCellPopover({
|
|
428
|
-
rowIndex: visibleRowIndex,
|
|
429
|
-
colIndex: colIndex
|
|
430
|
-
});
|
|
431
|
-
break;
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
};
|
|
435
464
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
436
465
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
437
466
|
setCellProps: this.setCellProps,
|
|
@@ -447,31 +476,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
447
476
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
448
477
|
ariaRowIndex: ariaRowIndex
|
|
449
478
|
});
|
|
450
|
-
var cellActions = isExpandable ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
|
|
451
|
-
rowIndex: rowIndex,
|
|
452
|
-
colIndex: colIndex,
|
|
453
|
-
column: column,
|
|
454
|
-
onExpandClick: function onExpandClick() {
|
|
455
|
-
if (popoverIsOpen) {
|
|
456
|
-
closeCellPopover();
|
|
457
|
-
} else {
|
|
458
|
-
openCellPopover({
|
|
459
|
-
rowIndex: visibleRowIndex,
|
|
460
|
-
colIndex: colIndex
|
|
461
|
-
});
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
|
-
}), ___EmotionJSX("div", {
|
|
465
|
-
ref: this.popoverAnchorRef,
|
|
466
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
467
|
-
})) : undefined;
|
|
468
|
-
var cellContent = ___EmotionJSX(HandleInteractiveChildren, {
|
|
469
|
-
cellEl: this.cellRef.current,
|
|
470
|
-
updateCellFocusContext: this.updateCellFocusContext,
|
|
471
|
-
renderFocusTrap: !isExpandable
|
|
472
|
-
}, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
473
|
-
cellActions: cellActions
|
|
474
|
-
})));
|
|
475
479
|
var cell = ___EmotionJSX("div", _extends({
|
|
476
480
|
role: "gridcell",
|
|
477
481
|
"aria-rowindex": ariaRowIndex,
|
|
@@ -489,8 +493,24 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
489
493
|
,
|
|
490
494
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
491
495
|
,
|
|
492
|
-
onKeyDown: handleCellKeyDown
|
|
493
|
-
|
|
496
|
+
onKeyDown: this.handleCellKeyDown,
|
|
497
|
+
onMouseEnter: this.onMouseEnter,
|
|
498
|
+
onMouseLeave: this.onMouseLeave
|
|
499
|
+
}), ___EmotionJSX(HandleInteractiveChildren, {
|
|
500
|
+
cellEl: this.cellRef.current,
|
|
501
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
502
|
+
renderFocusTrap: !isExpandable
|
|
503
|
+
}, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
|
|
504
|
+
cellActions: showCellActions && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
|
|
505
|
+
rowIndex: rowIndex,
|
|
506
|
+
colIndex: colIndex,
|
|
507
|
+
column: column,
|
|
508
|
+
onExpandClick: this.handleCellExpansionClick
|
|
509
|
+
}), ___EmotionJSX("div", {
|
|
510
|
+
ref: this.popoverAnchorRef,
|
|
511
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
512
|
+
}))
|
|
513
|
+
}))));
|
|
494
514
|
return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(cell, rowManager.getRow({
|
|
495
515
|
rowIndex: rowIndex,
|
|
496
516
|
visibleRowIndex: visibleRowIndex,
|
|
@@ -117,6 +117,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
117
117
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
|
118
118
|
cellProps: {},
|
|
119
119
|
isFocused: false,
|
|
120
|
+
isHovered: false,
|
|
120
121
|
cellTextAlign: 'Left'
|
|
121
122
|
});
|
|
122
123
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribeCell", void 0);
|
|
@@ -285,14 +286,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
285
286
|
setPopoverContent(popoverContent);
|
|
286
287
|
}
|
|
287
288
|
});
|
|
289
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellKeyDown", function (event) {
|
|
290
|
+
if (_this.isExpandable()) {
|
|
291
|
+
if (_this.isPopoverOpen()) return;
|
|
292
|
+
var _this$props6 = _this.props,
|
|
293
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
294
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
295
|
+
colIndex = _this$props6.colIndex;
|
|
296
|
+
switch (event.key) {
|
|
297
|
+
case _services.keys.ENTER:
|
|
298
|
+
case _services.keys.F2:
|
|
299
|
+
event.preventDefault();
|
|
300
|
+
openCellPopover({
|
|
301
|
+
rowIndex: visibleRowIndex,
|
|
302
|
+
colIndex: colIndex
|
|
303
|
+
});
|
|
304
|
+
break;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellExpansionClick", function () {
|
|
309
|
+
var _this$props7 = _this.props,
|
|
310
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
311
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
312
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
313
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
314
|
+
colIndex = _this$props7.colIndex;
|
|
315
|
+
if (_this.isPopoverOpen()) {
|
|
316
|
+
closeCellPopover();
|
|
317
|
+
} else {
|
|
318
|
+
openCellPopover({
|
|
319
|
+
rowIndex: visibleRowIndex,
|
|
320
|
+
colIndex: colIndex
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
|
|
325
|
+
return _this.setState({
|
|
326
|
+
isHovered: true
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
|
|
330
|
+
return _this.setState({
|
|
331
|
+
isHovered: false
|
|
332
|
+
});
|
|
333
|
+
});
|
|
288
334
|
return _this;
|
|
289
335
|
}
|
|
290
336
|
(0, _createClass2.default)(EuiDataGridCell, [{
|
|
291
337
|
key: "componentDidMount",
|
|
292
338
|
value: function componentDidMount() {
|
|
293
|
-
var _this$
|
|
294
|
-
colIndex = _this$
|
|
295
|
-
visibleRowIndex = _this$
|
|
339
|
+
var _this$props8 = this.props,
|
|
340
|
+
colIndex = _this$props8.colIndex,
|
|
341
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
296
342
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
297
343
|
|
|
298
344
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -378,32 +424,32 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
378
424
|
}
|
|
379
425
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
380
426
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
427
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
381
428
|
return false;
|
|
382
429
|
}
|
|
383
430
|
}, {
|
|
384
431
|
key: "render",
|
|
385
432
|
value: function render() {
|
|
386
433
|
var _classNames, _rowHeightsOptions$li;
|
|
387
|
-
var _this$
|
|
388
|
-
width = _this$
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
pagination = _this$props7.pagination,
|
|
401
|
-
rest = (0, _objectWithoutProperties2.default)(_this$props7, _excluded2);
|
|
434
|
+
var _this$props9 = this.props,
|
|
435
|
+
width = _this$props9.width,
|
|
436
|
+
popoverContext = _this$props9.popoverContext,
|
|
437
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
438
|
+
columnType = _this$props9.columnType,
|
|
439
|
+
className = _this$props9.className,
|
|
440
|
+
column = _this$props9.column,
|
|
441
|
+
style = _this$props9.style,
|
|
442
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
443
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
444
|
+
rowManager = _this$props9.rowManager,
|
|
445
|
+
pagination = _this$props9.pagination,
|
|
446
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props9, _excluded2);
|
|
402
447
|
var rowIndex = rest.rowIndex,
|
|
403
448
|
visibleRowIndex = rest.visibleRowIndex,
|
|
404
449
|
colIndex = rest.colIndex;
|
|
405
450
|
var isExpandable = this.isExpandable();
|
|
406
451
|
var popoverIsOpen = this.isPopoverOpen();
|
|
452
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
407
453
|
var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
408
454
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
409
455
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -424,23 +470,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
424
470
|
// column width, can be undefined
|
|
425
471
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
426
472
|
}, cellPropsStyle);
|
|
427
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
428
|
-
if (isExpandable) {
|
|
429
|
-
if (popoverIsOpen) {
|
|
430
|
-
return;
|
|
431
|
-
}
|
|
432
|
-
switch (event.key) {
|
|
433
|
-
case _services.keys.ENTER:
|
|
434
|
-
case _services.keys.F2:
|
|
435
|
-
event.preventDefault();
|
|
436
|
-
openCellPopover({
|
|
437
|
-
rowIndex: visibleRowIndex,
|
|
438
|
-
colIndex: colIndex
|
|
439
|
-
});
|
|
440
|
-
break;
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
};
|
|
444
473
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
445
474
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
446
475
|
setCellProps: this.setCellProps,
|
|
@@ -456,31 +485,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
456
485
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
457
486
|
ariaRowIndex: ariaRowIndex
|
|
458
487
|
});
|
|
459
|
-
var cellActions = isExpandable ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
460
|
-
rowIndex: rowIndex,
|
|
461
|
-
colIndex: colIndex,
|
|
462
|
-
column: column,
|
|
463
|
-
onExpandClick: function onExpandClick() {
|
|
464
|
-
if (popoverIsOpen) {
|
|
465
|
-
closeCellPopover();
|
|
466
|
-
} else {
|
|
467
|
-
openCellPopover({
|
|
468
|
-
rowIndex: visibleRowIndex,
|
|
469
|
-
colIndex: colIndex
|
|
470
|
-
});
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
}), (0, _react2.jsx)("div", {
|
|
474
|
-
ref: this.popoverAnchorRef,
|
|
475
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
476
|
-
})) : undefined;
|
|
477
|
-
var cellContent = (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
478
|
-
cellEl: this.cellRef.current,
|
|
479
|
-
updateCellFocusContext: this.updateCellFocusContext,
|
|
480
|
-
renderFocusTrap: !isExpandable
|
|
481
|
-
}, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
482
|
-
cellActions: cellActions
|
|
483
|
-
})));
|
|
484
488
|
var cell = (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
485
489
|
role: "gridcell",
|
|
486
490
|
"aria-rowindex": ariaRowIndex,
|
|
@@ -498,8 +502,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
498
502
|
,
|
|
499
503
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
500
504
|
,
|
|
501
|
-
onKeyDown: handleCellKeyDown
|
|
502
|
-
|
|
505
|
+
onKeyDown: this.handleCellKeyDown,
|
|
506
|
+
onMouseEnter: this.onMouseEnter,
|
|
507
|
+
onMouseLeave: this.onMouseLeave
|
|
508
|
+
}), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
509
|
+
cellEl: this.cellRef.current,
|
|
510
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
511
|
+
renderFocusTrap: !isExpandable
|
|
512
|
+
}, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
513
|
+
cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
514
|
+
rowIndex: rowIndex,
|
|
515
|
+
colIndex: colIndex,
|
|
516
|
+
column: column,
|
|
517
|
+
onExpandClick: this.handleCellExpansionClick
|
|
518
|
+
}), (0, _react2.jsx)("div", {
|
|
519
|
+
ref: this.popoverAnchorRef,
|
|
520
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
521
|
+
}))
|
|
522
|
+
}))));
|
|
503
523
|
return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
|
|
504
524
|
rowIndex: rowIndex,
|
|
505
525
|
visibleRowIndex: visibleRowIndex,
|
package/package.json
CHANGED
|
@@ -600,6 +600,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
600
600
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
|
601
601
|
cellProps: {},
|
|
602
602
|
isFocused: false,
|
|
603
|
+
isHovered: false,
|
|
603
604
|
cellTextAlign: 'Left'
|
|
604
605
|
});
|
|
605
606
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribeCell", void 0);
|
|
@@ -768,14 +769,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
768
769
|
setPopoverContent(popoverContent);
|
|
769
770
|
}
|
|
770
771
|
});
|
|
772
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellKeyDown", function (event) {
|
|
773
|
+
if (_this.isExpandable()) {
|
|
774
|
+
if (_this.isPopoverOpen()) return;
|
|
775
|
+
var _this$props6 = _this.props,
|
|
776
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
777
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
778
|
+
colIndex = _this$props6.colIndex;
|
|
779
|
+
switch (event.key) {
|
|
780
|
+
case _services.keys.ENTER:
|
|
781
|
+
case _services.keys.F2:
|
|
782
|
+
event.preventDefault();
|
|
783
|
+
openCellPopover({
|
|
784
|
+
rowIndex: visibleRowIndex,
|
|
785
|
+
colIndex: colIndex
|
|
786
|
+
});
|
|
787
|
+
break;
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
});
|
|
791
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellExpansionClick", function () {
|
|
792
|
+
var _this$props7 = _this.props,
|
|
793
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
794
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
795
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
796
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
797
|
+
colIndex = _this$props7.colIndex;
|
|
798
|
+
if (_this.isPopoverOpen()) {
|
|
799
|
+
closeCellPopover();
|
|
800
|
+
} else {
|
|
801
|
+
openCellPopover({
|
|
802
|
+
rowIndex: visibleRowIndex,
|
|
803
|
+
colIndex: colIndex
|
|
804
|
+
});
|
|
805
|
+
}
|
|
806
|
+
});
|
|
807
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
|
|
808
|
+
return _this.setState({
|
|
809
|
+
isHovered: true
|
|
810
|
+
});
|
|
811
|
+
});
|
|
812
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
|
|
813
|
+
return _this.setState({
|
|
814
|
+
isHovered: false
|
|
815
|
+
});
|
|
816
|
+
});
|
|
771
817
|
return _this;
|
|
772
818
|
}
|
|
773
819
|
(0, _createClass2.default)(EuiDataGridCell, [{
|
|
774
820
|
key: "componentDidMount",
|
|
775
821
|
value: function componentDidMount() {
|
|
776
|
-
var _this$
|
|
777
|
-
colIndex = _this$
|
|
778
|
-
visibleRowIndex = _this$
|
|
822
|
+
var _this$props8 = this.props,
|
|
823
|
+
colIndex = _this$props8.colIndex,
|
|
824
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
779
825
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
780
826
|
|
|
781
827
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -861,32 +907,32 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
861
907
|
}
|
|
862
908
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
863
909
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
910
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
864
911
|
return false;
|
|
865
912
|
}
|
|
866
913
|
}, {
|
|
867
914
|
key: "render",
|
|
868
915
|
value: function render() {
|
|
869
916
|
var _classNames, _rowHeightsOptions$li;
|
|
870
|
-
var _this$
|
|
871
|
-
width = _this$
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
pagination = _this$props7.pagination,
|
|
884
|
-
rest = (0, _objectWithoutProperties2.default)(_this$props7, _excluded2);
|
|
917
|
+
var _this$props9 = this.props,
|
|
918
|
+
width = _this$props9.width,
|
|
919
|
+
popoverContext = _this$props9.popoverContext,
|
|
920
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
921
|
+
columnType = _this$props9.columnType,
|
|
922
|
+
className = _this$props9.className,
|
|
923
|
+
column = _this$props9.column,
|
|
924
|
+
style = _this$props9.style,
|
|
925
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
926
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
927
|
+
rowManager = _this$props9.rowManager,
|
|
928
|
+
pagination = _this$props9.pagination,
|
|
929
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props9, _excluded2);
|
|
885
930
|
var rowIndex = rest.rowIndex,
|
|
886
931
|
visibleRowIndex = rest.visibleRowIndex,
|
|
887
932
|
colIndex = rest.colIndex;
|
|
888
933
|
var isExpandable = this.isExpandable();
|
|
889
934
|
var popoverIsOpen = this.isPopoverOpen();
|
|
935
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
890
936
|
var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
891
937
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
892
938
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -907,23 +953,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
907
953
|
// column width, can be undefined
|
|
908
954
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
909
955
|
}, cellPropsStyle);
|
|
910
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
911
|
-
if (isExpandable) {
|
|
912
|
-
if (popoverIsOpen) {
|
|
913
|
-
return;
|
|
914
|
-
}
|
|
915
|
-
switch (event.key) {
|
|
916
|
-
case _services.keys.ENTER:
|
|
917
|
-
case _services.keys.F2:
|
|
918
|
-
event.preventDefault();
|
|
919
|
-
openCellPopover({
|
|
920
|
-
rowIndex: visibleRowIndex,
|
|
921
|
-
colIndex: colIndex
|
|
922
|
-
});
|
|
923
|
-
break;
|
|
924
|
-
}
|
|
925
|
-
}
|
|
926
|
-
};
|
|
927
956
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
928
957
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
929
958
|
setCellProps: this.setCellProps,
|
|
@@ -939,31 +968,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
939
968
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
940
969
|
ariaRowIndex: ariaRowIndex
|
|
941
970
|
});
|
|
942
|
-
var cellActions = isExpandable ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
943
|
-
rowIndex: rowIndex,
|
|
944
|
-
colIndex: colIndex,
|
|
945
|
-
column: column,
|
|
946
|
-
onExpandClick: function onExpandClick() {
|
|
947
|
-
if (popoverIsOpen) {
|
|
948
|
-
closeCellPopover();
|
|
949
|
-
} else {
|
|
950
|
-
openCellPopover({
|
|
951
|
-
rowIndex: visibleRowIndex,
|
|
952
|
-
colIndex: colIndex
|
|
953
|
-
});
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
}), (0, _react2.jsx)("div", {
|
|
957
|
-
ref: this.popoverAnchorRef,
|
|
958
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
959
|
-
})) : undefined;
|
|
960
|
-
var cellContent = (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
961
|
-
cellEl: this.cellRef.current,
|
|
962
|
-
updateCellFocusContext: this.updateCellFocusContext,
|
|
963
|
-
renderFocusTrap: !isExpandable
|
|
964
|
-
}, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
965
|
-
cellActions: cellActions
|
|
966
|
-
})));
|
|
967
971
|
var cell = (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
968
972
|
role: "gridcell",
|
|
969
973
|
"aria-rowindex": ariaRowIndex,
|
|
@@ -981,8 +985,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
981
985
|
,
|
|
982
986
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
983
987
|
,
|
|
984
|
-
onKeyDown: handleCellKeyDown
|
|
985
|
-
|
|
988
|
+
onKeyDown: this.handleCellKeyDown,
|
|
989
|
+
onMouseEnter: this.onMouseEnter,
|
|
990
|
+
onMouseLeave: this.onMouseLeave
|
|
991
|
+
}), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
992
|
+
cellEl: this.cellRef.current,
|
|
993
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
994
|
+
renderFocusTrap: !isExpandable
|
|
995
|
+
}, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
996
|
+
cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
997
|
+
rowIndex: rowIndex,
|
|
998
|
+
colIndex: colIndex,
|
|
999
|
+
column: column,
|
|
1000
|
+
onExpandClick: this.handleCellExpansionClick
|
|
1001
|
+
}), (0, _react2.jsx)("div", {
|
|
1002
|
+
ref: this.popoverAnchorRef,
|
|
1003
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
1004
|
+
}))
|
|
1005
|
+
}))));
|
|
986
1006
|
return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
|
|
987
1007
|
rowIndex: rowIndex,
|
|
988
1008
|
visibleRowIndex: visibleRowIndex,
|