es-grid-template 1.5.6 → 1.5.7

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.
@@ -13,7 +13,7 @@ import styled from "styled-components";
13
13
  const BoxAction = styled.div.withConfig({
14
14
  displayName: "BoxAction",
15
15
  componentId: "es-grid-template__sc-1uj3tyy-0"
16
- })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
16
+ })(["padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
17
17
  export const ColumnsGroup = props => {
18
18
  const {
19
19
  columns,
@@ -397,6 +397,31 @@ const EditableCell = props => {
397
397
  value: keySelect,
398
398
  label: inputKey ?? 'label'
399
399
  },
400
+ onBlur: event => {
401
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
402
+ const val = event.inputValue;
403
+ onChange(val ?? '');
404
+ const formState = getValues();
405
+ // const itemState = getValues(dataIndex)
406
+ // @ts-ignore
407
+ const prevState = record[dataIndex];
408
+ const newState = val;
409
+ handleCellChange?.({
410
+ key: getRowKey?.(record, index),
411
+ field: column.field ?? column.dataIndex,
412
+ record: formState,
413
+ prevState,
414
+ newState,
415
+ option: {
416
+ value: val,
417
+ label: val
418
+ },
419
+ indexCol,
420
+ indexRow,
421
+ type: 'blur'
422
+ });
423
+ }
424
+ },
400
425
  "data-tooltip-content": message,
401
426
  "data-tooltip-id": `${id}-tooltip-form-error`
402
427
  });
@@ -455,6 +480,31 @@ const EditableCell = props => {
455
480
  value: keySelect,
456
481
  label: inputKey ?? 'label'
457
482
  },
483
+ onBlur: event => {
484
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
485
+ const val = event.inputValue;
486
+ onChange(val ?? '');
487
+ const formState = getValues();
488
+ // const itemState = getValues(dataIndex)
489
+ // @ts-ignore
490
+ const prevState = record[dataIndex];
491
+ const newState = val;
492
+ handleCellChange?.({
493
+ key: getRowKey?.(record, index),
494
+ field: column.field ?? column.dataIndex,
495
+ record: formState,
496
+ prevState,
497
+ newState,
498
+ option: {
499
+ value: val,
500
+ label: val
501
+ },
502
+ indexCol,
503
+ indexRow,
504
+ type: 'blur'
505
+ });
506
+ }
507
+ },
458
508
  "data-tooltip-content": message,
459
509
  "data-tooltip-id": `${id}-tooltip-form-error`
460
510
  });
@@ -552,6 +602,31 @@ const EditableCell = props => {
552
602
  value: keySelect,
553
603
  label: inputKey ?? 'label'
554
604
  },
605
+ onBlur: event => {
606
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
607
+ const val = event.inputValue;
608
+ onChange(val ?? '');
609
+ const formState = getValues();
610
+ // const itemState = getValues(dataIndex)
611
+ // @ts-ignore
612
+ const prevState = record[dataIndex];
613
+ const newState = val;
614
+ handleCellChange?.({
615
+ key: getRowKey?.(record, index),
616
+ field: column.field ?? column.dataIndex,
617
+ record: formState,
618
+ prevState,
619
+ newState,
620
+ option: {
621
+ value: val,
622
+ label: val
623
+ },
624
+ indexCol,
625
+ indexRow,
626
+ type: 'blur'
627
+ });
628
+ }
629
+ },
555
630
  "data-tooltip-content": message,
556
631
  "data-tooltip-id": `${id}-tooltip-form-error`
557
632
  });
@@ -1653,34 +1653,20 @@ export const addBorderClass = (selectedCells, type, className, id, nextCellRight
1653
1653
  if (cellsFilter && cellsFilter.length > 0) {
1654
1654
  cellsFilter.forEach(cell => {
1655
1655
  cell.classList.add(className);
1656
- if (nextCellRight) {
1657
- cell.style.zIndex = 1;
1656
+
1657
+ // if (nextCellRight) {
1658
+ // // cell.style.zIndex = 1
1659
+ // }
1660
+
1661
+ if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1662
+ cell.style.zIndex = 3;
1663
+ } else {
1664
+ if (cell) {
1665
+ cell.style.zIndex = nextCellRight ? 3 : 1;
1666
+ }
1658
1667
  }
1659
1668
  });
1660
1669
  }
1661
-
1662
- // ui-rc-table-tbody-virtual-scrollbar ui-rc-table-tbody-virtual-scrollbar-horizontal ui-rc-table-tbody-virtual-scrollbar-visible
1663
-
1664
- // if (type === 'left') {
1665
- //
1666
- // const selectorsCells2 = typeCells.map((pos: any) => {
1667
- // const [row, col] = pos.split('-');
1668
- // return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
1669
- // });
1670
- //
1671
- // const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
1672
- //
1673
- // const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null
1674
- //
1675
- // if (cellsFilter2 && cellsFilter2.length > 0) {
1676
- //
1677
- // cellsFilter2.forEach(cell => {
1678
- // // cell.classList.add('has-before');
1679
- // cell.classList.add('cell-border-left');
1680
- // });
1681
- // }
1682
- //
1683
- // }
1684
1670
  };
1685
1671
  export const removeBorderClass = (selectedCells, type, className, id) => {
1686
1672
  const table = document.querySelector(`#${id}`);
@@ -1874,18 +1860,26 @@ export const onRemoveBgCellIndex = (selectedCells, id, rowsSelected) => {
1874
1860
  export const onAddBorderSelectedCell = (selectedCells, id) => {
1875
1861
  const table = document.querySelector(`#${id}`);
1876
1862
 
1877
- // tăng z-index để hiển thị round point paste
1863
+ // // tăng z-index để hiển thị round point paste
1878
1864
  const row = getLastSelectCell(selectedCells).row;
1879
1865
  const col = getLastSelectCell(selectedCells).col;
1880
- const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
1881
- const nextCellLeft = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`);
1866
+ // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
1867
+ //
1868
+ // const nextCellLeft: any = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`)
1882
1869
  const nextCellRight = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`);
1883
- if (cell) {
1884
- cell.style.zIndex = nextCellLeft ? 3 : 1;
1885
- }
1886
- if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1887
- cell.style.zIndex = 3;
1888
- }
1870
+ //
1871
+ // // if (cell) {
1872
+ // // // cell.style.zIndex = nextCellLeft ? 3 : 1
1873
+ // // }
1874
+ //
1875
+ // if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1876
+ // cell.style.zIndex = 3
1877
+ // } else {
1878
+ // if (cell) {
1879
+ // cell.style.zIndex = nextCellLeft ? 3 : 3
1880
+ // }
1881
+ // }
1882
+
1889
1883
  removeBorderClass2('cell-border-bottom', id);
1890
1884
  removeBorderClass2('cell-border-top', id);
1891
1885
  removeBorderClass2('cell-border-right', id);
@@ -942,6 +942,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
942
942
  }
943
943
  }
944
944
 
945
+ input.be-cell-editing, .ant-picker, .ui-rc-select-selector, .ui-rc-table-select-selector {
946
+ padding-inline: 7px;
947
+ }
948
+
945
949
  .#{$prefix}-checkbox-wrapper {
946
950
  .#{$prefix}-checkbox {
947
951
  background-color: red;
@@ -973,7 +973,7 @@ const GridEdit = props => {
973
973
  // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
974
974
  const container = document.querySelector(".be-popup-container");
975
975
  const containerContextMenu = document.querySelector(".popup-context-menu");
976
- const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
976
+ const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody .ui-rc-table-tbody-virtual-holder`);
977
977
  // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
978
978
 
979
979
  // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
@@ -53,6 +53,8 @@ export type IEditSelectSettings = {
53
53
  fieldValue?: string;
54
54
  /** get label form other field **/
55
55
  fieldLabel?: string;
56
+ /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
57
+ searchTextAsValue?: boolean;
56
58
  inputKey?: string;
57
59
  filterKey?: string[];
58
60
  selectMode?: SelectMode;
@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
23
23
  const BoxAction = _styledComponents.default.div.withConfig({
24
24
  displayName: "BoxAction",
25
25
  componentId: "es-grid-template__sc-1uj3tyy-0"
26
- })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
26
+ })(["padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
27
27
  const ColumnsGroup = props => {
28
28
  const {
29
29
  columns,
@@ -399,6 +399,31 @@ const EditableCell = props => {
399
399
  value: keySelect,
400
400
  label: inputKey ?? 'label'
401
401
  },
402
+ onBlur: event => {
403
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
404
+ const val = event.inputValue;
405
+ onChange(val ?? '');
406
+ const formState = getValues();
407
+ // const itemState = getValues(dataIndex)
408
+ // @ts-ignore
409
+ const prevState = record[dataIndex];
410
+ const newState = val;
411
+ handleCellChange?.({
412
+ key: getRowKey?.(record, index),
413
+ field: column.field ?? column.dataIndex,
414
+ record: formState,
415
+ prevState,
416
+ newState,
417
+ option: {
418
+ value: val,
419
+ label: val
420
+ },
421
+ indexCol,
422
+ indexRow,
423
+ type: 'blur'
424
+ });
425
+ }
426
+ },
402
427
  "data-tooltip-content": message,
403
428
  "data-tooltip-id": `${id}-tooltip-form-error`
404
429
  });
@@ -457,6 +482,31 @@ const EditableCell = props => {
457
482
  value: keySelect,
458
483
  label: inputKey ?? 'label'
459
484
  },
485
+ onBlur: event => {
486
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
487
+ const val = event.inputValue;
488
+ onChange(val ?? '');
489
+ const formState = getValues();
490
+ // const itemState = getValues(dataIndex)
491
+ // @ts-ignore
492
+ const prevState = record[dataIndex];
493
+ const newState = val;
494
+ handleCellChange?.({
495
+ key: getRowKey?.(record, index),
496
+ field: column.field ?? column.dataIndex,
497
+ record: formState,
498
+ prevState,
499
+ newState,
500
+ option: {
501
+ value: val,
502
+ label: val
503
+ },
504
+ indexCol,
505
+ indexRow,
506
+ type: 'blur'
507
+ });
508
+ }
509
+ },
460
510
  "data-tooltip-content": message,
461
511
  "data-tooltip-id": `${id}-tooltip-form-error`
462
512
  });
@@ -554,6 +604,31 @@ const EditableCell = props => {
554
604
  value: keySelect,
555
605
  label: inputKey ?? 'label'
556
606
  },
607
+ onBlur: event => {
608
+ if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
609
+ const val = event.inputValue;
610
+ onChange(val ?? '');
611
+ const formState = getValues();
612
+ // const itemState = getValues(dataIndex)
613
+ // @ts-ignore
614
+ const prevState = record[dataIndex];
615
+ const newState = val;
616
+ handleCellChange?.({
617
+ key: getRowKey?.(record, index),
618
+ field: column.field ?? column.dataIndex,
619
+ record: formState,
620
+ prevState,
621
+ newState,
622
+ option: {
623
+ value: val,
624
+ label: val
625
+ },
626
+ indexCol,
627
+ indexRow,
628
+ type: 'blur'
629
+ });
630
+ }
631
+ },
557
632
  "data-tooltip-content": message,
558
633
  "data-tooltip-id": `${id}-tooltip-form-error`
559
634
  });
@@ -1756,34 +1756,20 @@ const addBorderClass = (selectedCells, type, className, id, nextCellRight) => {
1756
1756
  if (cellsFilter && cellsFilter.length > 0) {
1757
1757
  cellsFilter.forEach(cell => {
1758
1758
  cell.classList.add(className);
1759
- if (nextCellRight) {
1760
- cell.style.zIndex = 1;
1759
+
1760
+ // if (nextCellRight) {
1761
+ // // cell.style.zIndex = 1
1762
+ // }
1763
+
1764
+ if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1765
+ cell.style.zIndex = 3;
1766
+ } else {
1767
+ if (cell) {
1768
+ cell.style.zIndex = nextCellRight ? 3 : 1;
1769
+ }
1761
1770
  }
1762
1771
  });
1763
1772
  }
1764
-
1765
- // ui-rc-table-tbody-virtual-scrollbar ui-rc-table-tbody-virtual-scrollbar-horizontal ui-rc-table-tbody-virtual-scrollbar-visible
1766
-
1767
- // if (type === 'left') {
1768
- //
1769
- // const selectorsCells2 = typeCells.map((pos: any) => {
1770
- // const [row, col] = pos.split('-');
1771
- // return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
1772
- // });
1773
- //
1774
- // const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
1775
- //
1776
- // const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null
1777
- //
1778
- // if (cellsFilter2 && cellsFilter2.length > 0) {
1779
- //
1780
- // cellsFilter2.forEach(cell => {
1781
- // // cell.classList.add('has-before');
1782
- // cell.classList.add('cell-border-left');
1783
- // });
1784
- // }
1785
- //
1786
- // }
1787
1773
  };
1788
1774
  exports.addBorderClass = addBorderClass;
1789
1775
  const removeBorderClass = (selectedCells, type, className, id) => {
@@ -1986,18 +1972,26 @@ exports.onRemoveBgCellIndex = onRemoveBgCellIndex;
1986
1972
  const onAddBorderSelectedCell = (selectedCells, id) => {
1987
1973
  const table = document.querySelector(`#${id}`);
1988
1974
 
1989
- // tăng z-index để hiển thị round point paste
1975
+ // // tăng z-index để hiển thị round point paste
1990
1976
  const row = getLastSelectCell(selectedCells).row;
1991
1977
  const col = getLastSelectCell(selectedCells).col;
1992
- const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
1993
- const nextCellLeft = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`);
1978
+ // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
1979
+ //
1980
+ // const nextCellLeft: any = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`)
1994
1981
  const nextCellRight = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`);
1995
- if (cell) {
1996
- cell.style.zIndex = nextCellLeft ? 3 : 1;
1997
- }
1998
- if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1999
- cell.style.zIndex = 3;
2000
- }
1982
+ //
1983
+ // // if (cell) {
1984
+ // // // cell.style.zIndex = nextCellLeft ? 3 : 1
1985
+ // // }
1986
+ //
1987
+ // if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
1988
+ // cell.style.zIndex = 3
1989
+ // } else {
1990
+ // if (cell) {
1991
+ // cell.style.zIndex = nextCellLeft ? 3 : 3
1992
+ // }
1993
+ // }
1994
+
2001
1995
  removeBorderClass2('cell-border-bottom', id);
2002
1996
  removeBorderClass2('cell-border-top', id);
2003
1997
  removeBorderClass2('cell-border-right', id);
@@ -942,6 +942,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
942
942
  }
943
943
  }
944
944
 
945
+ input.be-cell-editing, .ant-picker, .ui-rc-select-selector, .ui-rc-table-select-selector {
946
+ padding-inline: 7px;
947
+ }
948
+
945
949
  .#{$prefix}-checkbox-wrapper {
946
950
  .#{$prefix}-checkbox {
947
951
  background-color: red;
@@ -977,7 +977,7 @@ const GridEdit = props => {
977
977
  // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
978
978
  const container = document.querySelector(".be-popup-container");
979
979
  const containerContextMenu = document.querySelector(".popup-context-menu");
980
- const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
980
+ const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody .ui-rc-table-tbody-virtual-holder`);
981
981
  // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
982
982
 
983
983
  // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
@@ -53,6 +53,8 @@ export type IEditSelectSettings = {
53
53
  fieldValue?: string;
54
54
  /** get label form other field **/
55
55
  fieldLabel?: string;
56
+ /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
57
+ searchTextAsValue?: boolean;
56
58
  inputKey?: string;
57
59
  filterKey?: string[];
58
60
  selectMode?: SelectMode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.5.6",
3
+ "version": "1.5.7",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",