react-table-edit 1.5.42 → 1.5.43
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/dist/component/table-view/content.d.ts +1 -0
- package/dist/component/table-view/index.d.ts +1 -0
- package/dist/component/table-view/table.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +249 -82
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +249 -82
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -20275,7 +20275,7 @@ const TableElement$1 = React__default["default"].memo((props) => {
|
|
|
20275
20275
|
|
|
20276
20276
|
const defaultMaxHeight$1 = 250;
|
|
20277
20277
|
const SelectTable = React$5.forwardRef((props, ref) => {
|
|
20278
|
-
const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
|
|
20278
|
+
const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction, } = props;
|
|
20279
20279
|
const selectTableRef = React$5.useRef(null);
|
|
20280
20280
|
const selectMenuTableRef = React$5.useRef(null);
|
|
20281
20281
|
const inputRef = React$5.useRef(null);
|
|
@@ -20292,8 +20292,8 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20292
20292
|
{
|
|
20293
20293
|
headerText: 'Name',
|
|
20294
20294
|
field: fieldLabel ?? 'label',
|
|
20295
|
-
width: menuWidth
|
|
20296
|
-
}
|
|
20295
|
+
width: menuWidth,
|
|
20296
|
+
},
|
|
20297
20297
|
];
|
|
20298
20298
|
const closeMenu = () => {
|
|
20299
20299
|
setDropdownOpen(false);
|
|
@@ -20303,7 +20303,12 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20303
20303
|
};
|
|
20304
20304
|
const handChange = (val) => {
|
|
20305
20305
|
if (val && val.isCreated) {
|
|
20306
|
-
const newVal = {
|
|
20306
|
+
const newVal = {
|
|
20307
|
+
...val,
|
|
20308
|
+
[fieldLabel ?? 'label']: val.valueCreate,
|
|
20309
|
+
isCreated: undefined,
|
|
20310
|
+
isCreatedItem: true,
|
|
20311
|
+
};
|
|
20307
20312
|
options.unshift(newVal);
|
|
20308
20313
|
onChange(newVal);
|
|
20309
20314
|
return;
|
|
@@ -20312,7 +20317,9 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20312
20317
|
};
|
|
20313
20318
|
React$5.useEffect(() => {
|
|
20314
20319
|
if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
|
|
20315
|
-
const index = currentOptions?.findIndex((row) =>
|
|
20320
|
+
const index = currentOptions?.findIndex((row) => compareFunction
|
|
20321
|
+
? compareFunction(row)
|
|
20322
|
+
: row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
|
|
20316
20323
|
if (index >= 0) {
|
|
20317
20324
|
selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
|
|
20318
20325
|
}
|
|
@@ -20359,14 +20366,28 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20359
20366
|
}
|
|
20360
20367
|
}
|
|
20361
20368
|
};
|
|
20362
|
-
const listKeyUse = [
|
|
20369
|
+
const listKeyUse = [
|
|
20370
|
+
'Escape',
|
|
20371
|
+
'Space',
|
|
20372
|
+
'Enter',
|
|
20373
|
+
'Tab',
|
|
20374
|
+
'NumpadEnter',
|
|
20375
|
+
'ArrowDown',
|
|
20376
|
+
'ArrowUp',
|
|
20377
|
+
'F9',
|
|
20378
|
+
];
|
|
20363
20379
|
const handleOnKeyDown = (e) => {
|
|
20364
20380
|
let key = '';
|
|
20365
20381
|
if (onKeyDown &&
|
|
20366
20382
|
(!dropdownOpen ||
|
|
20367
20383
|
!listKeyUse.includes(e.code) ||
|
|
20368
|
-
((e.code === 'Enter' ||
|
|
20369
|
-
|
|
20384
|
+
((e.code === 'Enter' ||
|
|
20385
|
+
e.code === 'Tab' ||
|
|
20386
|
+
e.code === 'NumpadEnter' ||
|
|
20387
|
+
e.code === 'Space') &&
|
|
20388
|
+
!(currentOptions[indexFocus] || haveCreateNew)) ||
|
|
20389
|
+
((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
|
|
20390
|
+
currentOptions.length === 0) ||
|
|
20370
20391
|
(e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
|
|
20371
20392
|
key = onKeyDown(e);
|
|
20372
20393
|
}
|
|
@@ -20379,7 +20400,12 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20379
20400
|
else if (e.code === 'Space') {
|
|
20380
20401
|
let newItem;
|
|
20381
20402
|
if (haveCreateNew && indexFocus === 0) {
|
|
20382
|
-
newItem = {
|
|
20403
|
+
newItem = {
|
|
20404
|
+
valueCreate: searchTerm,
|
|
20405
|
+
[fieldValue ?? 'value']: searchTerm,
|
|
20406
|
+
[fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
|
|
20407
|
+
isCreated: true,
|
|
20408
|
+
};
|
|
20383
20409
|
}
|
|
20384
20410
|
else {
|
|
20385
20411
|
newItem = currentOptions[indexFocus];
|
|
@@ -20400,10 +20426,17 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20400
20426
|
flag = true;
|
|
20401
20427
|
}
|
|
20402
20428
|
}
|
|
20403
|
-
else if (e.code === 'Enter' ||
|
|
20429
|
+
else if (e.code === 'Enter' ||
|
|
20430
|
+
e.code === 'Tab' ||
|
|
20431
|
+
e.code === 'NumpadEnter') {
|
|
20404
20432
|
let newItem;
|
|
20405
20433
|
if (haveCreateNew && indexFocus === 0) {
|
|
20406
|
-
newItem = {
|
|
20434
|
+
newItem = {
|
|
20435
|
+
valueCreate: searchTerm,
|
|
20436
|
+
[fieldValue ?? 'value']: searchTerm,
|
|
20437
|
+
[fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
|
|
20438
|
+
isCreated: true,
|
|
20439
|
+
};
|
|
20407
20440
|
}
|
|
20408
20441
|
else {
|
|
20409
20442
|
newItem = currentOptions[indexFocus];
|
|
@@ -20421,7 +20454,10 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20421
20454
|
newIndex = indexFocus + 1;
|
|
20422
20455
|
}
|
|
20423
20456
|
else if (value) {
|
|
20424
|
-
newIndex =
|
|
20457
|
+
newIndex =
|
|
20458
|
+
currentOptions?.findIndex((row) => compareFunction
|
|
20459
|
+
? compareFunction(row)
|
|
20460
|
+
: row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
|
|
20425
20461
|
}
|
|
20426
20462
|
if (newIndex < currentOptions.length) {
|
|
20427
20463
|
setIndexFocus(newIndex);
|
|
@@ -20445,7 +20481,10 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20445
20481
|
newIndex = indexFocus - 1;
|
|
20446
20482
|
}
|
|
20447
20483
|
else if (value) {
|
|
20448
|
-
newIndex =
|
|
20484
|
+
newIndex =
|
|
20485
|
+
currentOptions?.findIndex((row) => compareFunction
|
|
20486
|
+
? compareFunction(row)
|
|
20487
|
+
: row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
|
|
20449
20488
|
}
|
|
20450
20489
|
if (newIndex >= 0) {
|
|
20451
20490
|
setIndexFocus(newIndex);
|
|
@@ -20478,7 +20517,11 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20478
20517
|
scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
|
|
20479
20518
|
}
|
|
20480
20519
|
else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
|
|
20481
|
-
scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
|
|
20520
|
+
scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
|
|
20521
|
+
selectMenuTableRef.current.offsetTop -
|
|
20522
|
+
parentRect.height +
|
|
20523
|
+
rect.height +
|
|
20524
|
+
50);
|
|
20482
20525
|
}
|
|
20483
20526
|
else if (flag === 2 && rect.top < parentRect.top + 50) {
|
|
20484
20527
|
scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
|
|
@@ -20492,7 +20535,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20492
20535
|
timeOutElement = setTimeout(() => {
|
|
20493
20536
|
elemment.scrollTo({
|
|
20494
20537
|
top,
|
|
20495
|
-
behavior: 'smooth'
|
|
20538
|
+
behavior: 'smooth',
|
|
20496
20539
|
});
|
|
20497
20540
|
}, 100);
|
|
20498
20541
|
};
|
|
@@ -20502,7 +20545,12 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20502
20545
|
}
|
|
20503
20546
|
for (let index = 0; index < columnsSearch.length; index++) {
|
|
20504
20547
|
const key = columnsSearch[index].field.trim();
|
|
20505
|
-
if (data[key] &&
|
|
20548
|
+
if (data[key] &&
|
|
20549
|
+
data[key]
|
|
20550
|
+
.toString()
|
|
20551
|
+
.trim()
|
|
20552
|
+
.toLowerCase()
|
|
20553
|
+
.includes(keyword.trim().toLowerCase())) {
|
|
20506
20554
|
return true;
|
|
20507
20555
|
}
|
|
20508
20556
|
}
|
|
@@ -20518,7 +20566,8 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20518
20566
|
if (!searchTerm) {
|
|
20519
20567
|
setOptionsLoad(undefined);
|
|
20520
20568
|
}
|
|
20521
|
-
else if (allowCreate &&
|
|
20569
|
+
else if (allowCreate &&
|
|
20570
|
+
!currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
|
|
20522
20571
|
setHaveCreateNew(true);
|
|
20523
20572
|
return;
|
|
20524
20573
|
}
|
|
@@ -20530,9 +20579,24 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20530
20579
|
};
|
|
20531
20580
|
React__default["default"].memo((props) => {
|
|
20532
20581
|
const { indexRow, row, isSelected, level = 0 } = props;
|
|
20533
|
-
return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsxRuntime.jsx("td", { className: classNames$1(`r-select-rowcell`, {
|
|
20582
|
+
return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsxRuntime.jsx("td", { className: classNames$1(`r-select-rowcell`, {
|
|
20583
|
+
'r-select-move': indexFocus === indexRow,
|
|
20584
|
+
'r-select-active': !isMulti &&
|
|
20585
|
+
value &&
|
|
20586
|
+
(compareFunction
|
|
20587
|
+
? compareFunction(row)
|
|
20588
|
+
: value[fieldValue ?? 'value'] ===
|
|
20589
|
+
row[fieldValue ?? 'value']),
|
|
20590
|
+
}), style: {
|
|
20591
|
+
width: 40,
|
|
20592
|
+
textAlign: 'center',
|
|
20593
|
+
padding: 0,
|
|
20594
|
+
paddingBottom: 6,
|
|
20595
|
+
}, onClick: (e) => {
|
|
20534
20596
|
if (isMulti) {
|
|
20535
|
-
const index = value?.findIndex((x) =>
|
|
20597
|
+
const index = value?.findIndex((x) => compareFunction
|
|
20598
|
+
? compareFunction(row)
|
|
20599
|
+
: x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
|
|
20536
20600
|
if (index > -1) {
|
|
20537
20601
|
value?.splice(index, 1);
|
|
20538
20602
|
handChange([...value]);
|
|
@@ -20550,25 +20614,42 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20550
20614
|
}
|
|
20551
20615
|
}, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
|
|
20552
20616
|
let valueDisplay = row[col.field];
|
|
20553
|
-
if (col.type === 'numeric' ||
|
|
20554
|
-
|
|
20617
|
+
if (col.type === 'numeric' ||
|
|
20618
|
+
(col.typeCondition && col.typeCondition(row) === 'numeric')) {
|
|
20619
|
+
valueDisplay =
|
|
20620
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
|
|
20555
20621
|
}
|
|
20556
20622
|
else if (col.type === 'date') {
|
|
20557
|
-
valueDisplay = valueDisplay
|
|
20623
|
+
valueDisplay = valueDisplay
|
|
20624
|
+
? formatDateTime(valueDisplay, formatSetting?.dateFormat)
|
|
20625
|
+
: '';
|
|
20558
20626
|
}
|
|
20559
20627
|
else if (col.type === 'datetime') {
|
|
20560
|
-
valueDisplay = valueDisplay
|
|
20628
|
+
valueDisplay = valueDisplay
|
|
20629
|
+
? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
20630
|
+
: '';
|
|
20561
20631
|
}
|
|
20562
20632
|
return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && (jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`,
|
|
20563
20633
|
// ref={refRow}
|
|
20564
|
-
className: classNames$1(`r-select-rowcell`, {
|
|
20634
|
+
className: classNames$1(`r-select-rowcell`, {
|
|
20635
|
+
'r-select-move': indexFocus === indexRow,
|
|
20636
|
+
'r-select-active': !isMulti &&
|
|
20637
|
+
value &&
|
|
20638
|
+
(compareFunction
|
|
20639
|
+
? compareFunction(row)
|
|
20640
|
+
: value[fieldValue ?? 'value'] ===
|
|
20641
|
+
row[fieldValue ?? 'value']),
|
|
20642
|
+
}), style: {
|
|
20565
20643
|
minWidth: col.minWidth,
|
|
20566
20644
|
width: col.width,
|
|
20567
20645
|
maxWidth: col.maxWidth,
|
|
20568
|
-
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
20646
|
+
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
20569
20647
|
}, onClick: (e) => {
|
|
20570
20648
|
if (isMulti) {
|
|
20571
|
-
const index = value?.findIndex((x) =>
|
|
20649
|
+
const index = value?.findIndex((x) => compareFunction
|
|
20650
|
+
? compareFunction(row)
|
|
20651
|
+
: x[fieldValue ?? 'value'] ===
|
|
20652
|
+
row[fieldValue ?? 'value']);
|
|
20572
20653
|
if (index > -1) {
|
|
20573
20654
|
value?.splice(index, 1);
|
|
20574
20655
|
handChange([...value]);
|
|
@@ -20595,7 +20676,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20595
20676
|
setIndexFocus(indexRow);
|
|
20596
20677
|
}
|
|
20597
20678
|
e.stopPropagation();
|
|
20598
|
-
}, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [
|
|
20679
|
+
}, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
|
|
20599
20680
|
})] }, `row-${indexRow}`));
|
|
20600
20681
|
});
|
|
20601
20682
|
return (jsxRuntime.jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
|
|
@@ -20604,9 +20685,27 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20604
20685
|
handleOpenClose();
|
|
20605
20686
|
}
|
|
20606
20687
|
e.preventDefault();
|
|
20607
|
-
}, tag: "div", style: {
|
|
20608
|
-
|
|
20609
|
-
|
|
20688
|
+
}, tag: "div", style: {
|
|
20689
|
+
width: width
|
|
20690
|
+
? width
|
|
20691
|
+
: selectTableRef?.current?.clientWidth
|
|
20692
|
+
? selectTableRef?.current?.clientWidth
|
|
20693
|
+
: 'auto',
|
|
20694
|
+
}, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? (jsxRuntime.jsx("div", { className: classNames$1('select-value is-mutil', {
|
|
20695
|
+
'd-none': searchTerm,
|
|
20696
|
+
}), children: value?.map((ele, index) => {
|
|
20697
|
+
return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
|
|
20698
|
+
? formatOptionLabel(ele)
|
|
20699
|
+
: ele[fieldLabel ?? 'label']] }, index));
|
|
20700
|
+
}) })) : (jsxRuntime.jsxs("div", { className: classNames$1('select-value', {
|
|
20701
|
+
'd-none': searchTerm,
|
|
20702
|
+
}), children: [value
|
|
20703
|
+
? formatOptionLabel
|
|
20704
|
+
? formatOptionLabel(value)
|
|
20705
|
+
: value[fieldLabel ?? 'label']
|
|
20706
|
+
: '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
|
|
20707
|
+
isDisabled ||
|
|
20708
|
+
searchTerm) && (jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsxRuntime.jsx("div", { className: "input-container", children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
|
|
20610
20709
|
if (val.target.value) {
|
|
20611
20710
|
if (loadOptions && val.target.value) {
|
|
20612
20711
|
setIsLoading(true);
|
|
@@ -20628,13 +20727,23 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
20628
20727
|
width: width ? width + 2 : 'min-content',
|
|
20629
20728
|
position: 'fixed',
|
|
20630
20729
|
borderRadius: 4,
|
|
20631
|
-
zIndex: 9999
|
|
20730
|
+
zIndex: 9999,
|
|
20632
20731
|
}, children: jsxRuntime.jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsxRuntime.jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
|
|
20633
20732
|
if (!isDisabled) {
|
|
20634
20733
|
inputRef?.current.focus();
|
|
20635
20734
|
e.preventDefault();
|
|
20636
20735
|
}
|
|
20637
|
-
}, children: jsxRuntime.jsxs("div", { className: "r-select-grid", children: [jsxRuntime.jsx("div", { className: classNames$1('r-select-gridtable', {
|
|
20736
|
+
}, children: jsxRuntime.jsxs("div", { className: "r-select-grid", children: [jsxRuntime.jsx("div", { className: classNames$1('r-select-gridtable', {
|
|
20737
|
+
'no-header': noHeader || (columns?.length ?? 0) === 0,
|
|
20738
|
+
}), ref: selectMenuTableRef, style: {
|
|
20739
|
+
width: menuWidth,
|
|
20740
|
+
minWidth: selectTableRef?.current?.clientWidth,
|
|
20741
|
+
maxHeight: maxHeight ?? defaultMaxHeight$1,
|
|
20742
|
+
}, children: jsxRuntime.jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxRuntime.jsxs("div", { className: classNames$1('r-select-footer', {
|
|
20743
|
+
'd-none': !(showFooter === true ||
|
|
20744
|
+
handleAdd ||
|
|
20745
|
+
isMulti),
|
|
20746
|
+
}), children: [jsxRuntime.jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
|
|
20638
20747
|
});
|
|
20639
20748
|
|
|
20640
20749
|
const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
|
|
@@ -68893,7 +69002,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68893
69002
|
};
|
|
68894
69003
|
|
|
68895
69004
|
const RenderContentCol = React__default["default"].memo((props) => {
|
|
68896
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
|
|
69005
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
|
|
68897
69006
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68898
69007
|
const checkOverflow = () => {
|
|
68899
69008
|
const element = document.getElementById(cellId);
|
|
@@ -68915,10 +69024,12 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
68915
69024
|
const RenderElement = () => {
|
|
68916
69025
|
if (col.field === '#' || col.type === '#') {
|
|
68917
69026
|
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
|
|
68918
|
-
'r-active-cell': isSelected
|
|
69027
|
+
'r-active-cell': isSelected,
|
|
68919
69028
|
}), style: {
|
|
68920
|
-
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68921
|
-
|
|
69029
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
69030
|
+
? 600
|
|
69031
|
+
: 400,
|
|
69032
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68922
69033
|
}, onDoubleClick: (e) => {
|
|
68923
69034
|
e.preventDefault();
|
|
68924
69035
|
handleCloseContext();
|
|
@@ -68927,11 +69038,15 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
68927
69038
|
}
|
|
68928
69039
|
else if (col.type === 'checkbox' || col.field === 'checkbox') {
|
|
68929
69040
|
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68930
|
-
'r-active-cell': isSelected
|
|
69041
|
+
'r-active-cell': isSelected,
|
|
68931
69042
|
}), style: {
|
|
68932
69043
|
display: 'flex',
|
|
68933
|
-
justifyContent: col.textAlign === 'center'
|
|
68934
|
-
|
|
69044
|
+
justifyContent: col.textAlign === 'center'
|
|
69045
|
+
? 'center'
|
|
69046
|
+
: col.textAlign === 'right'
|
|
69047
|
+
? 'flex-end'
|
|
69048
|
+
: 'flex-start',
|
|
69049
|
+
alignItems: 'center',
|
|
68935
69050
|
}, onClick: (e) => {
|
|
68936
69051
|
setSelectedRows(toggleSelect());
|
|
68937
69052
|
e.stopPropagation();
|
|
@@ -68941,8 +69056,12 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
68941
69056
|
let value = row[col.field];
|
|
68942
69057
|
// ✅ Format dữ liệu theo loại cột
|
|
68943
69058
|
if (col.type === 'numeric') {
|
|
68944
|
-
value =
|
|
68945
|
-
|
|
69059
|
+
value =
|
|
69060
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
69061
|
+
if (!zeroVisiable &&
|
|
69062
|
+
!col.zeroVisiable &&
|
|
69063
|
+
!(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
|
|
69064
|
+
(value === '0' || value === 0)) {
|
|
68946
69065
|
value = '';
|
|
68947
69066
|
}
|
|
68948
69067
|
}
|
|
@@ -68950,31 +69069,43 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
68950
69069
|
value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
|
|
68951
69070
|
}
|
|
68952
69071
|
else if (col.type === 'datetime') {
|
|
68953
|
-
value = value
|
|
69072
|
+
value = value
|
|
69073
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
69074
|
+
: '';
|
|
68954
69075
|
}
|
|
68955
69076
|
if (col.template) {
|
|
68956
69077
|
value = col.template(row, indexRow) ?? '';
|
|
68957
69078
|
}
|
|
68958
69079
|
const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
|
|
68959
|
-
const textColor = isNegative
|
|
68960
|
-
|
|
68961
|
-
|
|
68962
|
-
const
|
|
69080
|
+
const textColor = isNegative
|
|
69081
|
+
? (formatSetting?.colorNegative ?? 'red')
|
|
69082
|
+
: undefined;
|
|
69083
|
+
const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
|
|
69084
|
+
const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
|
|
69085
|
+
const displayText = isNegative
|
|
69086
|
+
? `${prefix}${value}${suffix}`
|
|
69087
|
+
: (value ?? '');
|
|
68963
69088
|
return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68964
|
-
'r-active-cell': isSelected
|
|
69089
|
+
'r-active-cell': isSelected,
|
|
68965
69090
|
}), style: {
|
|
68966
|
-
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68967
|
-
|
|
69091
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
69092
|
+
? 600
|
|
69093
|
+
: 400,
|
|
69094
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68968
69095
|
}, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
|
|
68969
69096
|
display: 'flex',
|
|
68970
|
-
justifyContent: col.textAlign === 'center'
|
|
68971
|
-
|
|
69097
|
+
justifyContent: col.textAlign === 'center'
|
|
69098
|
+
? 'center'
|
|
69099
|
+
: col.textAlign === 'right'
|
|
69100
|
+
? 'flex-end'
|
|
69101
|
+
: 'flex-start',
|
|
69102
|
+
alignItems: 'center',
|
|
68972
69103
|
}, children: jsxRuntime.jsx("div", { id: cellId, style: {
|
|
68973
69104
|
color: textColor,
|
|
68974
69105
|
overflow: 'hidden',
|
|
68975
69106
|
textOverflow: 'ellipsis',
|
|
68976
69107
|
whiteSpace: 'pre',
|
|
68977
|
-
maxWidth: '100%'
|
|
69108
|
+
maxWidth: '100%',
|
|
68978
69109
|
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, onClick: (e) => {
|
|
68979
69110
|
e.stopPropagation();
|
|
68980
69111
|
e.preventDefault();
|
|
@@ -68983,15 +69114,21 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
68983
69114
|
};
|
|
68984
69115
|
const clickTimerRef = React$5.useRef(null);
|
|
68985
69116
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
|
|
68986
|
-
'fixed-last': (col.fixedType === 'left' &&
|
|
69117
|
+
'fixed-last': (col.fixedType === 'left' &&
|
|
69118
|
+
indexCol === lastObjWidthFixLeft) ||
|
|
69119
|
+
(col.fixedType === 'right' &&
|
|
69120
|
+
indexCol === fisrtObjWidthFixRight),
|
|
68987
69121
|
}, { 'r-active': isSelected }), style: {
|
|
68988
69122
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68989
|
-
right: col.fixedType === 'right'
|
|
69123
|
+
right: col.fixedType === 'right'
|
|
69124
|
+
? objWidthFixRight[indexCol]
|
|
69125
|
+
: undefined,
|
|
68990
69126
|
}, onClick: (e) => {
|
|
68991
69127
|
const tag = e.target?.nodeName;
|
|
68992
69128
|
if (tag !== 'DIV' && tag !== 'TD') {
|
|
68993
69129
|
return;
|
|
68994
69130
|
}
|
|
69131
|
+
handleCellClick?.(row, col);
|
|
68995
69132
|
if (clickTimerRef.current) {
|
|
68996
69133
|
window.clearTimeout(clickTimerRef.current);
|
|
68997
69134
|
}
|
|
@@ -69019,7 +69156,7 @@ const RenderContentCol = React__default["default"].memo((props) => {
|
|
|
69019
69156
|
});
|
|
69020
69157
|
|
|
69021
69158
|
const TableElement = React__default["default"].memo((props) => {
|
|
69022
|
-
const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, contextMenuItems, handleContextMenuClick, isLoading } = props;
|
|
69159
|
+
const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
|
|
69023
69160
|
const { t } = reactI18next.useTranslation();
|
|
69024
69161
|
const [context, setContext] = React$5.useState(null);
|
|
69025
69162
|
const virtualDivRef = React$5.useRef(null);
|
|
@@ -69065,7 +69202,10 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69065
69202
|
if (searchTerm) {
|
|
69066
69203
|
datas = datas.filter((row) => {
|
|
69067
69204
|
return searchSetting?.keyField?.some((key) => {
|
|
69068
|
-
return row[key]
|
|
69205
|
+
return row[key]
|
|
69206
|
+
?.toString()
|
|
69207
|
+
.toLowerCase()
|
|
69208
|
+
.includes(searchTerm.trim().toLowerCase());
|
|
69069
69209
|
});
|
|
69070
69210
|
});
|
|
69071
69211
|
}
|
|
@@ -69074,7 +69214,10 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69074
69214
|
return filterBy.every((filter) => {
|
|
69075
69215
|
const { key, value, ope } = filter;
|
|
69076
69216
|
const rowValue = row[key];
|
|
69077
|
-
if (rowValue === undefined ||
|
|
69217
|
+
if (rowValue === undefined ||
|
|
69218
|
+
rowValue === null ||
|
|
69219
|
+
value === undefined ||
|
|
69220
|
+
value === null) {
|
|
69078
69221
|
return false;
|
|
69079
69222
|
}
|
|
69080
69223
|
const valStr = String(rowValue).toLowerCase();
|
|
@@ -69140,56 +69283,72 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69140
69283
|
}
|
|
69141
69284
|
let value = row[col.field];
|
|
69142
69285
|
if (col.type === 'numeric') {
|
|
69143
|
-
value =
|
|
69286
|
+
value =
|
|
69287
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
69144
69288
|
}
|
|
69145
69289
|
else if (col.type === 'date') {
|
|
69146
|
-
value = value
|
|
69290
|
+
value = value
|
|
69291
|
+
? formatDateTime(value, formatSetting?.dateFormat)
|
|
69292
|
+
: '';
|
|
69147
69293
|
}
|
|
69148
69294
|
else if (col.type === 'datetime') {
|
|
69149
|
-
value = value
|
|
69295
|
+
value = value
|
|
69296
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
69297
|
+
: '';
|
|
69150
69298
|
}
|
|
69151
69299
|
if (col.template) {
|
|
69152
69300
|
value = col.template(row, indexRow) ?? '';
|
|
69153
69301
|
}
|
|
69154
69302
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
|
|
69155
69303
|
marginLeft: level * 20,
|
|
69156
|
-
transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
|
|
69304
|
+
transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
|
|
69157
69305
|
}, fontSize: 15, onClick: () => {
|
|
69158
69306
|
setExpand(!expand);
|
|
69159
69307
|
setExpandsAll(undefined);
|
|
69160
69308
|
row.expand = !expand;
|
|
69161
69309
|
} }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69162
|
-
if (indexCol <= firstColSpan ||
|
|
69310
|
+
if (indexCol <= firstColSpan ||
|
|
69311
|
+
colSum.visible === false ||
|
|
69312
|
+
colSum.isGroup === true) {
|
|
69163
69313
|
return;
|
|
69164
69314
|
}
|
|
69165
69315
|
let sumValue = row[colSum.field];
|
|
69166
|
-
const haveSum = row[colSum.field] !== undefined &&
|
|
69167
|
-
|
|
69316
|
+
const haveSum = row[colSum.field] !== undefined &&
|
|
69317
|
+
row[colSum.field] !== null;
|
|
69318
|
+
if (!haveSum &&
|
|
69319
|
+
colSum.haveSum === true &&
|
|
69320
|
+
colSum.type === 'numeric') {
|
|
69168
69321
|
sumValue = row.children.reduce(function (accumulator, currentValue) {
|
|
69169
|
-
return Number(accumulator ?? 0) +
|
|
69322
|
+
return (Number(accumulator ?? 0) +
|
|
69323
|
+
Number(currentValue[colSum.field] ?? 0));
|
|
69170
69324
|
}, 0);
|
|
69171
69325
|
}
|
|
69172
69326
|
if (colSum.type === 'numeric') {
|
|
69173
69327
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
|
|
69174
|
-
if (!zeroVisiable &&
|
|
69328
|
+
if (!zeroVisiable &&
|
|
69329
|
+
!col.zeroVisiable &&
|
|
69330
|
+
(sumValue === '0' || sumValue === 0)) {
|
|
69175
69331
|
sumValue = '';
|
|
69176
69332
|
}
|
|
69177
69333
|
}
|
|
69178
69334
|
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
|
|
69179
|
-
justifyContent: colSum.textAlign
|
|
69180
|
-
|
|
69181
|
-
|
|
69335
|
+
justifyContent: colSum.textAlign
|
|
69336
|
+
? colSum.textAlign
|
|
69337
|
+
: 'left',
|
|
69338
|
+
}, children: (haveSum || colSum.haveSum === true) &&
|
|
69339
|
+
Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69340
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69182
69341
|
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69183
|
-
})] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
|
|
69342
|
+
})] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
|
|
69184
69343
|
}
|
|
69185
69344
|
else {
|
|
69186
69345
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69187
69346
|
return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
|
|
69188
|
-
'r-last-row': level === 0 && indexRow === viewData.length - 1
|
|
69347
|
+
'r-last-row': level === 0 && indexRow === viewData.length - 1,
|
|
69189
69348
|
}), onContextMenu: (e) => {
|
|
69190
69349
|
e.preventDefault();
|
|
69191
69350
|
handleContextMenu(e, row);
|
|
69192
|
-
}, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
|
|
69351
|
+
}, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick }, indexCol))) }, `row-content-${indexRow}`));
|
|
69193
69352
|
}
|
|
69194
69353
|
}) }));
|
|
69195
69354
|
});
|
|
@@ -69201,7 +69360,7 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69201
69360
|
x: e.clientX,
|
|
69202
69361
|
y: e.clientY,
|
|
69203
69362
|
row,
|
|
69204
|
-
show: true
|
|
69363
|
+
show: true,
|
|
69205
69364
|
});
|
|
69206
69365
|
}, 100);
|
|
69207
69366
|
};
|
|
@@ -69225,20 +69384,28 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69225
69384
|
let sumValue = item?.value;
|
|
69226
69385
|
if (!item && col.haveSum === true && col.type === 'numeric') {
|
|
69227
69386
|
sumValue = viewData.reduce(function (accumulator, currentValue) {
|
|
69228
|
-
return Number(accumulator ?? 0) +
|
|
69387
|
+
return (Number(accumulator ?? 0) +
|
|
69388
|
+
Number(currentValue[col.field] ?? 0));
|
|
69229
69389
|
}, 0);
|
|
69230
69390
|
}
|
|
69231
69391
|
if (col.type === 'numeric') {
|
|
69232
69392
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
|
|
69233
69393
|
}
|
|
69234
69394
|
return (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
69235
|
-
left: col.fixedType === 'left'
|
|
69236
|
-
|
|
69237
|
-
|
|
69238
|
-
|
|
69239
|
-
|
|
69395
|
+
left: col.fixedType === 'left'
|
|
69396
|
+
? objWidthFixLeft[indexCol]
|
|
69397
|
+
: undefined,
|
|
69398
|
+
right: col.fixedType === 'right'
|
|
69399
|
+
? objWidthFixRight[indexCol]
|
|
69400
|
+
: undefined,
|
|
69401
|
+
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
69402
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
|
|
69403
|
+
Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69404
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69240
69405
|
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
|
|
69241
|
-
}) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
|
|
69406
|
+
}) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
|
|
69407
|
+
(contextMenuItems?.length ?? 0) > 0 &&
|
|
69408
|
+
handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
|
|
69242
69409
|
return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
|
|
69243
69410
|
handleCloseContext();
|
|
69244
69411
|
handleContextMenuClick?.(item, context.row);
|
|
@@ -69246,7 +69413,7 @@ const TableElement = React__default["default"].memo((props) => {
|
|
|
69246
69413
|
}) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }))] }));
|
|
69247
69414
|
});
|
|
69248
69415
|
|
|
69249
|
-
const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
|
|
69416
|
+
const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
|
|
69250
69417
|
const { t } = reactI18next.useTranslation();
|
|
69251
69418
|
const gridRef = React$5.useRef(null);
|
|
69252
69419
|
const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
|
|
@@ -69473,7 +69640,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69473
69640
|
}), children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
|
|
69474
69641
|
height: `${heightTable ? `${heightTable}px` : 'auto'}`,
|
|
69475
69642
|
position: 'relative',
|
|
69476
|
-
}, children: [jsxRuntime.jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69643
|
+
}, children: [jsxRuntime.jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69477
69644
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69478
69645
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|
|
69479
69646
|
if (saveSettingColumn) {
|