es-grid-template 1.9.84 → 1.9.90

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.
Files changed (11) hide show
  1. package/es/group-component/body/TableBodyRow.js +10 -0
  2. package/es/table-component/body/TableBodyRow.js +15 -1
  3. package/es/table-component/style.scss +18 -0
  4. package/es/table-virtuoso/body/TableBodyRow.js +10 -0
  5. package/es/table-virtuoso/table/Grid.js +1 -2
  6. package/lib/group-component/body/TableBodyRow.js +10 -0
  7. package/lib/table-component/body/TableBodyRow.js +15 -1
  8. package/lib/table-component/style.scss +18 -0
  9. package/lib/table-virtuoso/body/TableBodyRow.js +10 -0
  10. package/lib/table-virtuoso/table/Grid.js +1 -2
  11. package/package.json +1 -1
package/es/group-component/body/TableBodyRow.js CHANGED
@@ -43,6 +43,13 @@ const TableBodyRow = ({
43
43
  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
44
44
  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
45
45
  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
46
+ const [isHover, setIsHover] = React.useState(false);
47
+ const handleMouseEnter = React.useCallback(() => {
48
+ setIsHover(true);
49
+ }, []);
50
+ const handleMouseLeave = React.useCallback(() => {
51
+ setIsHover(false);
52
+ }, []);
46
53
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
47
54
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
48
55
  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
@@ -56,8 +63,11 @@ const TableBodyRow = ({
56
63
  className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
57
64
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
58
65
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
66
+ [`${prefix}-grid-row-hover`]: isHover && row.id !== focusedCell?.rowId && !row.getIsSelected(),
59
67
  [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0
60
68
  }),
69
+ onMouseEnter: handleMouseEnter,
70
+ onMouseLeave: handleMouseLeave,
61
71
  style: {
62
72
  // display: 'flex',
63
73
  display: 'grid',
package/es/table-component/body/TableBodyRow.js CHANGED
@@ -40,8 +40,19 @@ const TableBodyRow = ({
40
40
  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
41
41
  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
42
42
  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
43
+ const [isHover, setIsHover] = React.useState(false);
44
+ const handleMouseEnter = React.useCallback(() => {
45
+ setIsHover(true);
46
+ }, []);
47
+ const handleMouseLeave = React.useCallback(() => {
48
+ setIsHover(false);
49
+ }, []);
43
50
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
44
- const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
51
+ const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row, {
52
+ isHover,
53
+ isFocused: row.id === focusedCell?.rowId && !editAble,
54
+ isSelected: row.getIsSelected()
55
+ }) : onRowStyles;
45
56
  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
46
57
  return /*#__PURE__*/React.createElement("div", {
47
58
  "data-index": virtualRow.index //needed for dynamic row height measurement
@@ -53,11 +64,14 @@ const TableBodyRow = ({
53
64
  className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
54
65
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
55
66
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
67
+ [`${prefix}-grid-row-hover`]: isHover,
56
68
  // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
57
69
  [`${prefix}-grid-row-parent`]: row.getCanExpand(),
58
70
  [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
59
71
  [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
60
72
  }),
73
+ onMouseEnter: handleMouseEnter,
74
+ onMouseLeave: handleMouseLeave,
61
75
  style: {
62
76
  display: 'grid',
63
77
  transform: `translateY(${virtualRow.start}px)`,
package/es/table-component/style.scss CHANGED
@@ -126,6 +126,16 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
126
126
 
127
127
  }
128
128
 
129
+ &.#{$prefix}-grid-row-hover {
130
+
131
+ &:not(.#{$prefix}-grid-row-selected):not(.#{$prefix}-grid-row-focus) {
132
+ .#{$prefix}-grid-cell {
133
+ background-color: $rowSelectedBg;
134
+ }
135
+ }
136
+
137
+ }
138
+
129
139
  }
130
140
 
131
141
  .#{$prefix}-grid-cell {
@@ -1143,6 +1153,14 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
1143
1153
  }
1144
1154
  }
1145
1155
 
1156
+ .ui-rc-grid-row-hover {
1157
+ &:not(.ui-rc-grid-row-selected):not(.ui-rc-grid-row-focus) {
1158
+ .ui-rc-grid-cell {
1159
+ background-color: rgba(64, 64, 113, 0.4);
1160
+ }
1161
+ }
1162
+ }
1163
+
1146
1164
  }
1147
1165
 
1148
1166
  .ui-rc-grid-thead {
package/es/table-virtuoso/body/TableBodyRow.js CHANGED
@@ -32,6 +32,13 @@ const TableBodyRow = ({
32
32
  groupSetting,
33
33
  format
34
34
  } = React.useContext(TableContext);
35
+ const [isHover, setIsHover] = React.useState(false);
36
+ const handleMouseEnter = React.useCallback(() => {
37
+ setIsHover(true);
38
+ }, []);
39
+ const handleMouseLeave = React.useCallback(() => {
40
+ setIsHover(false);
41
+ }, []);
35
42
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
36
43
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
37
44
  const visibleCells = row.getVisibleCells();
@@ -45,8 +52,11 @@ const TableBodyRow = ({
45
52
  className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
46
53
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
47
54
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId,
55
+ [`${prefix}-grid-row-hover`]: isHover && row.id !== focusedCell?.rowId && !row.getIsSelected(),
48
56
  [`${prefix}-grid-row-parent`]: row.getCanExpand()
49
57
  }),
58
+ onMouseEnter: handleMouseEnter,
59
+ onMouseLeave: handleMouseLeave,
50
60
  style: {
51
61
  ...rowStyles,
52
62
  height: rowheight
package/es/table-virtuoso/table/Grid.js CHANGED
@@ -82,11 +82,10 @@ const Grid = props => {
82
82
  const ids = Object.keys(aa);
83
83
  const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
84
84
 
85
- const rs = ssss.map(it => it.original);
86
85
  rowSelected?.({
87
86
  type: isSelectionChange.type,
88
87
  rowData: isSelectionChange.rowData,
89
- selected: rs
88
+ selected: ssss
90
89
  });
91
90
  }
92
91
  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
package/lib/group-component/body/TableBodyRow.js CHANGED
@@ -50,6 +50,13 @@ const TableBodyRow = ({
50
50
  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
51
51
  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
52
52
  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
53
+ const [isHover, setIsHover] = _react.default.useState(false);
54
+ const handleMouseEnter = _react.default.useCallback(() => {
55
+ setIsHover(true);
56
+ }, []);
57
+ const handleMouseLeave = _react.default.useCallback(() => {
58
+ setIsHover(false);
59
+ }, []);
53
60
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
54
61
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
55
62
  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
@@ -63,8 +70,11 @@ const TableBodyRow = ({
63
70
  className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
64
71
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
65
72
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
73
+ [`${prefix}-grid-row-hover`]: isHover && row.id !== focusedCell?.rowId && !row.getIsSelected(),
66
74
  [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0
67
75
  }),
76
+ onMouseEnter: handleMouseEnter,
77
+ onMouseLeave: handleMouseLeave,
68
78
  style: {
69
79
  // display: 'flex',
70
80
  display: 'grid',
package/lib/table-component/body/TableBodyRow.js CHANGED
@@ -47,8 +47,19 @@ const TableBodyRow = ({
47
47
  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
48
48
  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
49
49
  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
50
+ const [isHover, setIsHover] = _react.default.useState(false);
51
+ const handleMouseEnter = _react.default.useCallback(() => {
52
+ setIsHover(true);
53
+ }, []);
54
+ const handleMouseLeave = _react.default.useCallback(() => {
55
+ setIsHover(false);
56
+ }, []);
50
57
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
51
- const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
58
+ const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row, {
59
+ isHover,
60
+ isFocused: row.id === focusedCell?.rowId && !editAble,
61
+ isSelected: row.getIsSelected()
62
+ }) : onRowStyles;
52
63
  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
53
64
  return /*#__PURE__*/_react.default.createElement("div", {
54
65
  "data-index": virtualRow.index //needed for dynamic row height measurement
@@ -60,11 +71,14 @@ const TableBodyRow = ({
60
71
  className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
61
72
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
62
73
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
74
+ [`${prefix}-grid-row-hover`]: isHover,
63
75
  // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
64
76
  [`${prefix}-grid-row-parent`]: row.getCanExpand(),
65
77
  [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
66
78
  [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
67
79
  }),
80
+ onMouseEnter: handleMouseEnter,
81
+ onMouseLeave: handleMouseLeave,
68
82
  style: {
69
83
  display: 'grid',
70
84
  transform: `translateY(${virtualRow.start}px)`,
package/lib/table-component/style.scss CHANGED
@@ -126,6 +126,16 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
126
126
 
127
127
  }
128
128
 
129
+ &.#{$prefix}-grid-row-hover {
130
+
131
+ &:not(.#{$prefix}-grid-row-selected):not(.#{$prefix}-grid-row-focus) {
132
+ .#{$prefix}-grid-cell {
133
+ background-color: $rowSelectedBg;
134
+ }
135
+ }
136
+
137
+ }
138
+
129
139
  }
130
140
 
131
141
  .#{$prefix}-grid-cell {
@@ -1143,6 +1153,14 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
1143
1153
  }
1144
1154
  }
1145
1155
 
1156
+ .ui-rc-grid-row-hover {
1157
+ &:not(.ui-rc-grid-row-selected):not(.ui-rc-grid-row-focus) {
1158
+ .ui-rc-grid-cell {
1159
+ background-color: rgba(64, 64, 113, 0.4);
1160
+ }
1161
+ }
1162
+ }
1163
+
1146
1164
  }
1147
1165
 
1148
1166
  .ui-rc-grid-thead {
package/lib/table-virtuoso/body/TableBodyRow.js CHANGED
@@ -39,6 +39,13 @@ const TableBodyRow = ({
39
39
  groupSetting,
40
40
  format
41
41
  } = _react.default.useContext(_useContext.TableContext);
42
+ const [isHover, setIsHover] = _react.default.useState(false);
43
+ const handleMouseEnter = _react.default.useCallback(() => {
44
+ setIsHover(true);
45
+ }, []);
46
+ const handleMouseLeave = _react.default.useCallback(() => {
47
+ setIsHover(false);
48
+ }, []);
42
49
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
43
50
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
44
51
  const visibleCells = row.getVisibleCells();
@@ -52,8 +59,11 @@ const TableBodyRow = ({
52
59
  className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
53
60
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
54
61
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId,
62
+ [`${prefix}-grid-row-hover`]: isHover && row.id !== focusedCell?.rowId && !row.getIsSelected(),
55
63
  [`${prefix}-grid-row-parent`]: row.getCanExpand()
56
64
  }),
65
+ onMouseEnter: handleMouseEnter,
66
+ onMouseLeave: handleMouseLeave,
57
67
  style: {
58
68
  ...rowStyles,
59
69
  height: rowheight
package/lib/table-virtuoso/table/Grid.js CHANGED
@@ -91,11 +91,10 @@ const Grid = props => {
91
91
  const ids = Object.keys(aa);
92
92
  const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
93
93
 
94
- const rs = ssss.map(it => it.original);
95
94
  rowSelected?.({
96
95
  type: isSelectionChange.type,
97
96
  rowData: isSelectionChange.rowData,
98
- selected: rs
97
+ selected: ssss
99
98
  });
100
99
  }
101
100
  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.9.84",
3
+ "version": "1.9.90",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",