es-grid-template 1.8.53 → 1.8.55

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 (9) hide show
  1. package/es/table-component/TableContainer.js +16 -16
  2. package/es/table-component/body/TableBodyCell.js +31 -28
  3. package/es/table-component/hook/useColumns.js +6 -1
  4. package/es/table-component/table/Grid.js +2 -8
  5. package/lib/table-component/TableContainer.js +16 -16
  6. package/lib/table-component/body/TableBodyCell.js +31 -28
  7. package/lib/table-component/hook/useColumns.js +6 -1
  8. package/lib/table-component/table/Grid.js +2 -8
  9. package/package.json +1 -1
package/es/table-component/TableContainer.js CHANGED
@@ -190,7 +190,7 @@ const TableContainer = props => {
190
190
  alignItems: 'center',
191
191
  gap: '.75rem'
192
192
  }
193
- }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
193
+ }, /*#__PURE__*/React.createElement("div", {
194
194
  style: {
195
195
  flex: 1,
196
196
  overflow: 'hidden'
@@ -198,20 +198,6 @@ const TableContainer = props => {
198
198
  }, /*#__PURE__*/React.createElement(Toolbar, {
199
199
  items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
200
200
  mode: 'scroll'
201
- })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
202
- fontSize: 16,
203
- onClick: () => {
204
- setIsFullScreen(!isFullScreen);
205
- },
206
- "data-tooltip-id": `${id}-tooltip-content`,
207
- "data-tooltip-content": t ? t('Minimized') : 'Minimized'
208
- }) : /*#__PURE__*/React.createElement(Maximize, {
209
- fontSize: 16,
210
- onClick: () => {
211
- setIsFullScreen(!isFullScreen);
212
- },
213
- "data-tooltip-id": `${id}-tooltip-content`,
214
- "data-tooltip-content": t ? t('Full screen') : 'Full screen'
215
201
  })), /*#__PURE__*/React.createElement("div", {
216
202
  style: {
217
203
  display: 'flex',
@@ -227,7 +213,21 @@ const TableContainer = props => {
227
213
  showTotal: (totalItems, range) =>
228
214
  // @ts-ignore
229
215
  `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
230
- }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
216
+ }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
217
+ fontSize: 16,
218
+ onClick: () => {
219
+ setIsFullScreen(!isFullScreen);
220
+ },
221
+ "data-tooltip-id": `${id}-tooltip-content`,
222
+ "data-tooltip-content": t ? t('Minimized') : 'Minimized'
223
+ }) : /*#__PURE__*/React.createElement(Maximize, {
224
+ fontSize: 16,
225
+ onClick: () => {
226
+ setIsFullScreen(!isFullScreen);
227
+ },
228
+ "data-tooltip-id": `${id}-tooltip-content`,
229
+ "data-tooltip-content": t ? t('Full screen') : 'Full screen'
230
+ })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
231
231
  columnHidden: columnHidden,
232
232
  columns: columns,
233
233
  originColumns: propsColumns,
package/es/table-component/body/TableBodyCell.js CHANGED
@@ -430,38 +430,41 @@ const TableBodyCell = props => {
430
430
  }
431
431
  }
432
432
  if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
433
+ toggleRowSelection({
434
+ e,
435
+ cell,
436
+ setIsSelectionChange,
437
+ isSelectionChange,
438
+ selectionSettings
439
+ });
433
440
  cell.row.getToggleSelectedHandler()(e);
434
441
 
435
- // setIsSelectionChange({
436
- // isChange: true,
437
- // type: 'rowSelected',
438
- // rowData: record,
439
- // rowsData: []
440
- // })
442
+ // if (cell.row.getIsSelected()) { // nếu đã chọn
441
443
 
442
- if (cell.row.getIsSelected()) {
443
- // nếu đã chọn
444
+ // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
444
445
 
445
- const aaa = isSelectionChange?.rowsData.filter(it => it.id !== cell.row.id);
446
- setIsSelectionChange({
447
- isChange: true,
448
- type: 'rowSelected',
449
- rowData: cell.row.original,
450
- rowsData: aaa ?? []
451
- });
452
- } else {
453
- const {
454
- rowsData
455
- } = isSelectionChange ?? {};
456
- const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
457
- abc.push(cell.row);
458
- setIsSelectionChange({
459
- isChange: true,
460
- type: 'rowSelected',
461
- rowData: cell.row.original,
462
- rowsData: abc
463
- });
464
- }
446
+ // setIsSelectionChange({
447
+ // isChange: true,
448
+ // type: 'rowSelected',
449
+ // rowData: cell.row.original,
450
+ // rowsData: aaa ?? []
451
+ // })
452
+
453
+ // } else {
454
+
455
+ // const { rowsData } = isSelectionChange ?? {}
456
+
457
+ // const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
458
+
459
+ // abc.push(cell.row)
460
+
461
+ // setIsSelectionChange({
462
+ // isChange: true,
463
+ // type: 'rowSelected',
464
+ // rowData: cell.row.original,
465
+ // rowsData: abc
466
+ // })
467
+ // }
465
468
  }
466
469
  }
467
470
 
package/es/table-component/hook/useColumns.js CHANGED
@@ -270,7 +270,12 @@ export const toggleRowSelection = props => {
270
270
  } else {
271
271
  // chỉ thêm vào row hiện tại
272
272
 
273
- checkedRows = [...prevSelected, row];
273
+ const isInclude = prevSelected.find(it => it.id === cell.row.id);
274
+ if (isInclude) {
275
+ checkedRows = [...prevSelected];
276
+ } else {
277
+ checkedRows = [...prevSelected, row];
278
+ }
274
279
  }
275
280
  setIsSelectionChange({
276
281
  isChange: true,
package/es/table-component/table/Grid.js CHANGED
@@ -193,25 +193,19 @@ const Grid = props => {
193
193
  // ...prev,
194
194
  // isChange: false
195
195
  // }))
196
- // setRowSelection(convertToObjTrue(mergedSelectedKeys))
196
+
197
+ setRowSelection(convertToObjTrue(mergedSelectedKeys));
197
198
  }
198
199
  }, [mergedSelectedKeys]);
199
200
  React.useEffect(() => {
200
201
  if (isSelectionChange.isChange) {
201
- // setManualUpdate(true)
202
202
  const aa = table.getState().rowSelection;
203
-
204
- // const dataTable = table.getRowModel().flatRows
205
-
206
203
  const ids = Object.keys(aa);
207
204
 
208
205
  // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
209
206
  const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
210
- // const ssss = (isSelectionChange.rowsData ?? []) as any[] // lấy rowsData của trang hiện tại
211
207
 
212
208
  const rs = ssss.map(it => it.original);
213
- // const rs = allRows.map(it => it.original)
214
-
215
209
  rowSelected?.({
216
210
  type: isSelectionChange.type,
217
211
  rowData: isSelectionChange.rowData,
package/lib/table-component/TableContainer.js CHANGED
@@ -200,7 +200,7 @@ const TableContainer = props => {
200
200
  alignItems: 'center',
201
201
  gap: '.75rem'
202
202
  }
203
- }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
203
+ }, /*#__PURE__*/_react.default.createElement("div", {
204
204
  style: {
205
205
  flex: 1,
206
206
  overflow: 'hidden'
@@ -208,20 +208,6 @@ const TableContainer = props => {
208
208
  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
209
209
  items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
210
210
  mode: 'scroll'
211
- })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
212
- fontSize: 16,
213
- onClick: () => {
214
- setIsFullScreen(!isFullScreen);
215
- },
216
- "data-tooltip-id": `${id}-tooltip-content`,
217
- "data-tooltip-content": t ? t('Minimized') : 'Minimized'
218
- }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
219
- fontSize: 16,
220
- onClick: () => {
221
- setIsFullScreen(!isFullScreen);
222
- },
223
- "data-tooltip-id": `${id}-tooltip-content`,
224
- "data-tooltip-content": t ? t('Full screen') : 'Full screen'
225
211
  })), /*#__PURE__*/_react.default.createElement("div", {
226
212
  style: {
227
213
  display: 'flex',
@@ -237,7 +223,21 @@ const TableContainer = props => {
237
223
  showTotal: (totalItems, range) =>
238
224
  // @ts-ignore
239
225
  `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
240
- }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
226
+ }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
227
+ fontSize: 16,
228
+ onClick: () => {
229
+ setIsFullScreen(!isFullScreen);
230
+ },
231
+ "data-tooltip-id": `${id}-tooltip-content`,
232
+ "data-tooltip-content": t ? t('Minimized') : 'Minimized'
233
+ }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
234
+ fontSize: 16,
235
+ onClick: () => {
236
+ setIsFullScreen(!isFullScreen);
237
+ },
238
+ "data-tooltip-id": `${id}-tooltip-content`,
239
+ "data-tooltip-content": t ? t('Full screen') : 'Full screen'
240
+ })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
241
241
  columnHidden: columnHidden,
242
242
  columns: columns,
243
243
  originColumns: propsColumns,
package/lib/table-component/body/TableBodyCell.js CHANGED
@@ -437,38 +437,41 @@ const TableBodyCell = props => {
437
437
  }
438
438
  }
439
439
  if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
440
+ (0, _useColumns.toggleRowSelection)({
441
+ e,
442
+ cell,
443
+ setIsSelectionChange,
444
+ isSelectionChange,
445
+ selectionSettings
446
+ });
440
447
  cell.row.getToggleSelectedHandler()(e);
441
448
 
442
- // setIsSelectionChange({
443
- // isChange: true,
444
- // type: 'rowSelected',
445
- // rowData: record,
446
- // rowsData: []
447
- // })
449
+ // if (cell.row.getIsSelected()) { // nếu đã chọn
448
450
 
449
- if (cell.row.getIsSelected()) {
450
- // nếu đã chọn
451
+ // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
451
452
 
452
- const aaa = isSelectionChange?.rowsData.filter(it => it.id !== cell.row.id);
453
- setIsSelectionChange({
454
- isChange: true,
455
- type: 'rowSelected',
456
- rowData: cell.row.original,
457
- rowsData: aaa ?? []
458
- });
459
- } else {
460
- const {
461
- rowsData
462
- } = isSelectionChange ?? {};
463
- const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
464
- abc.push(cell.row);
465
- setIsSelectionChange({
466
- isChange: true,
467
- type: 'rowSelected',
468
- rowData: cell.row.original,
469
- rowsData: abc
470
- });
471
- }
453
+ // setIsSelectionChange({
454
+ // isChange: true,
455
+ // type: 'rowSelected',
456
+ // rowData: cell.row.original,
457
+ // rowsData: aaa ?? []
458
+ // })
459
+
460
+ // } else {
461
+
462
+ // const { rowsData } = isSelectionChange ?? {}
463
+
464
+ // const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
465
+
466
+ // abc.push(cell.row)
467
+
468
+ // setIsSelectionChange({
469
+ // isChange: true,
470
+ // type: 'rowSelected',
471
+ // rowData: cell.row.original,
472
+ // rowsData: abc
473
+ // })
474
+ // }
472
475
  }
473
476
  }
474
477
 
package/lib/table-component/hook/useColumns.js CHANGED
@@ -281,7 +281,12 @@ const toggleRowSelection = props => {
281
281
  } else {
282
282
  // chỉ thêm vào row hiện tại
283
283
 
284
- checkedRows = [...prevSelected, row];
284
+ const isInclude = prevSelected.find(it => it.id === cell.row.id);
285
+ if (isInclude) {
286
+ checkedRows = [...prevSelected];
287
+ } else {
288
+ checkedRows = [...prevSelected, row];
289
+ }
285
290
  }
286
291
  setIsSelectionChange({
287
292
  isChange: true,
package/lib/table-component/table/Grid.js CHANGED
@@ -197,25 +197,19 @@ const Grid = props => {
197
197
  // ...prev,
198
198
  // isChange: false
199
199
  // }))
200
- // setRowSelection(convertToObjTrue(mergedSelectedKeys))
200
+
201
+ setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
201
202
  }
202
203
  }, [mergedSelectedKeys]);
203
204
  _react.default.useEffect(() => {
204
205
  if (isSelectionChange.isChange) {
205
- // setManualUpdate(true)
206
206
  const aa = table.getState().rowSelection;
207
-
208
- // const dataTable = table.getRowModel().flatRows
209
-
210
207
  const ids = Object.keys(aa);
211
208
 
212
209
  // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
213
210
  const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
214
- // const ssss = (isSelectionChange.rowsData ?? []) as any[] // lấy rowsData của trang hiện tại
215
211
 
216
212
  const rs = ssss.map(it => it.original);
217
- // const rs = allRows.map(it => it.original)
218
-
219
213
  rowSelected?.({
220
214
  type: isSelectionChange.type,
221
215
  rowData: isSelectionChange.rowData,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.8.53",
3
+ "version": "1.8.55",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",