@pdg/react-table 1.0.117 → 1.0.119
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/Table/Table.types.d.ts +4 -0
- package/dist/index.esm.js +93 -8
- package/dist/index.js +93 -8
- package/package.json +1 -1
|
@@ -125,5 +125,9 @@ export interface TableCommands<T = TableItem> {
|
|
|
125
125
|
setItemsPaging(items: TableProps<T>['items'], paging: TableProps<T>['paging']): void;
|
|
126
126
|
resetSort(): void;
|
|
127
127
|
getCheckedItems(columnId: string): T[];
|
|
128
|
+
getChecked(itemKey: string, itemValue: any, columnId: string): boolean;
|
|
129
|
+
setChecked(itemKey: string, itemValue: any, columnId: string, checked: boolean): void;
|
|
130
|
+
toggleChecked(itemKey: string, itemValue: any, columnId: string): void;
|
|
131
|
+
setCheckedAll(columnId: string, checked: boolean): void;
|
|
128
132
|
scrollToTop(): void;
|
|
129
133
|
}
|
package/dist/index.esm.js
CHANGED
|
@@ -632,16 +632,31 @@ var TableBodyRow = function (_a) {
|
|
|
632
632
|
* Memo
|
|
633
633
|
* ******************************************************************************************************************/
|
|
634
634
|
var data = useMemo(function () {
|
|
635
|
-
var _a, _b;
|
|
635
|
+
var _a, _b, _c, _d;
|
|
636
636
|
if (column.type === 'check') {
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
}
|
|
637
|
+
if (column.hideAllCheck) {
|
|
638
|
+
if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
639
|
+
return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
|
|
640
|
+
}
|
|
641
|
+
else {
|
|
642
|
+
if (typeof column.label === 'string') {
|
|
643
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
|
|
644
|
+
}
|
|
645
|
+
else {
|
|
646
|
+
return column.label;
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
else {
|
|
651
|
+
return (React.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
|
|
652
|
+
setChecked(newChecked);
|
|
653
|
+
onCheckChange && onCheckChange(column, newChecked);
|
|
654
|
+
} }));
|
|
655
|
+
}
|
|
641
656
|
}
|
|
642
657
|
else {
|
|
643
|
-
if ((
|
|
644
|
-
return (
|
|
658
|
+
if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
|
|
659
|
+
return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender();
|
|
645
660
|
}
|
|
646
661
|
else {
|
|
647
662
|
if (typeof column.label === 'string') {
|
|
@@ -893,6 +908,58 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
893
908
|
}, 100);
|
|
894
909
|
}
|
|
895
910
|
}, [getFinalColumnId]);
|
|
911
|
+
var getChecked = useCallback(function (itemKey, itemValue, columnId) {
|
|
912
|
+
var checked = false;
|
|
913
|
+
Object.keys(localBodyDataRef.current).find(function (key) {
|
|
914
|
+
var itemData = localBodyDataRef.current[key];
|
|
915
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
916
|
+
var columnData = itemData.columns[columnId];
|
|
917
|
+
checked = !!(columnData === null || columnData === void 0 ? void 0 : columnData.checked);
|
|
918
|
+
return true;
|
|
919
|
+
}
|
|
920
|
+
});
|
|
921
|
+
return checked;
|
|
922
|
+
}, []);
|
|
923
|
+
var setChecked = useCallback(function (itemKey, itemValue, columnId, checked) {
|
|
924
|
+
Object.keys(localBodyDataRef.current).find(function (key) {
|
|
925
|
+
var _a;
|
|
926
|
+
var itemData = localBodyDataRef.current[key];
|
|
927
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
928
|
+
var columnData = itemData.columns[columnId];
|
|
929
|
+
if (columnData) {
|
|
930
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
931
|
+
updateHeadCheck(columnData.column);
|
|
932
|
+
}
|
|
933
|
+
return true;
|
|
934
|
+
}
|
|
935
|
+
});
|
|
936
|
+
}, [updateHeadCheck]);
|
|
937
|
+
var toggleChecked = useCallback(function (itemKey, itemValue, columnId) {
|
|
938
|
+
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
939
|
+
var _a;
|
|
940
|
+
var itemData = localBodyDataRef.current[key];
|
|
941
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
942
|
+
var columnData = itemData.columns[columnId];
|
|
943
|
+
if (columnData) {
|
|
944
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(!columnData.checked);
|
|
945
|
+
updateHeadCheck(columnData.column);
|
|
946
|
+
}
|
|
947
|
+
return true;
|
|
948
|
+
}
|
|
949
|
+
});
|
|
950
|
+
}, [updateHeadCheck]);
|
|
951
|
+
var setCheckedAll = useCallback(function (columnId, checked) {
|
|
952
|
+
var _a, _b;
|
|
953
|
+
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
954
|
+
var _a;
|
|
955
|
+
var itemData = localBodyDataRef.current[key];
|
|
956
|
+
var columnData = itemData.columns[columnId];
|
|
957
|
+
if (columnData) {
|
|
958
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
959
|
+
}
|
|
960
|
+
});
|
|
961
|
+
(_b = (_a = localHeaderDataRef.current[columnId]) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.setChecked(checked);
|
|
962
|
+
}, []);
|
|
896
963
|
var getCheckedItems = useCallback(function (columnId) {
|
|
897
964
|
var checkedItems = [];
|
|
898
965
|
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
@@ -1052,6 +1119,10 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
1052
1119
|
setSortableItems(makeSortableItems(lastItems_1));
|
|
1053
1120
|
},
|
|
1054
1121
|
getCheckedItems: getCheckedItems,
|
|
1122
|
+
getChecked: getChecked,
|
|
1123
|
+
setChecked: setChecked,
|
|
1124
|
+
toggleChecked: toggleChecked,
|
|
1125
|
+
setCheckedAll: setCheckedAll,
|
|
1055
1126
|
scrollToTop: simpleBarScrollToTop,
|
|
1056
1127
|
};
|
|
1057
1128
|
if (typeof ref === 'function') {
|
|
@@ -1061,7 +1132,21 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
1061
1132
|
ref.current = commands;
|
|
1062
1133
|
}
|
|
1063
1134
|
}
|
|
1064
|
-
}, [
|
|
1135
|
+
}, [
|
|
1136
|
+
ref,
|
|
1137
|
+
columns,
|
|
1138
|
+
items,
|
|
1139
|
+
paging,
|
|
1140
|
+
setColumns,
|
|
1141
|
+
setItems,
|
|
1142
|
+
setPaging,
|
|
1143
|
+
getCheckedItems,
|
|
1144
|
+
simpleBarScrollToTop,
|
|
1145
|
+
setChecked,
|
|
1146
|
+
toggleChecked,
|
|
1147
|
+
getChecked,
|
|
1148
|
+
setCheckedAll,
|
|
1149
|
+
]);
|
|
1065
1150
|
/********************************************************************************************************************
|
|
1066
1151
|
* Event Handler
|
|
1067
1152
|
* ******************************************************************************************************************/
|
package/dist/index.js
CHANGED
|
@@ -632,16 +632,31 @@ var TableBodyRow = function (_a) {
|
|
|
632
632
|
* Memo
|
|
633
633
|
* ******************************************************************************************************************/
|
|
634
634
|
var data = React.useMemo(function () {
|
|
635
|
-
var _a, _b;
|
|
635
|
+
var _a, _b, _c, _d;
|
|
636
636
|
if (column.type === 'check') {
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
}
|
|
637
|
+
if (column.hideAllCheck) {
|
|
638
|
+
if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
639
|
+
return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
|
|
640
|
+
}
|
|
641
|
+
else {
|
|
642
|
+
if (typeof column.label === 'string') {
|
|
643
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
|
|
644
|
+
}
|
|
645
|
+
else {
|
|
646
|
+
return column.label;
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
else {
|
|
651
|
+
return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
|
|
652
|
+
setChecked(newChecked);
|
|
653
|
+
onCheckChange && onCheckChange(column, newChecked);
|
|
654
|
+
} }));
|
|
655
|
+
}
|
|
641
656
|
}
|
|
642
657
|
else {
|
|
643
|
-
if ((
|
|
644
|
-
return (
|
|
658
|
+
if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
|
|
659
|
+
return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender();
|
|
645
660
|
}
|
|
646
661
|
else {
|
|
647
662
|
if (typeof column.label === 'string') {
|
|
@@ -893,6 +908,58 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
893
908
|
}, 100);
|
|
894
909
|
}
|
|
895
910
|
}, [getFinalColumnId]);
|
|
911
|
+
var getChecked = React.useCallback(function (itemKey, itemValue, columnId) {
|
|
912
|
+
var checked = false;
|
|
913
|
+
Object.keys(localBodyDataRef.current).find(function (key) {
|
|
914
|
+
var itemData = localBodyDataRef.current[key];
|
|
915
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
916
|
+
var columnData = itemData.columns[columnId];
|
|
917
|
+
checked = !!(columnData === null || columnData === void 0 ? void 0 : columnData.checked);
|
|
918
|
+
return true;
|
|
919
|
+
}
|
|
920
|
+
});
|
|
921
|
+
return checked;
|
|
922
|
+
}, []);
|
|
923
|
+
var setChecked = React.useCallback(function (itemKey, itemValue, columnId, checked) {
|
|
924
|
+
Object.keys(localBodyDataRef.current).find(function (key) {
|
|
925
|
+
var _a;
|
|
926
|
+
var itemData = localBodyDataRef.current[key];
|
|
927
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
928
|
+
var columnData = itemData.columns[columnId];
|
|
929
|
+
if (columnData) {
|
|
930
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
931
|
+
updateHeadCheck(columnData.column);
|
|
932
|
+
}
|
|
933
|
+
return true;
|
|
934
|
+
}
|
|
935
|
+
});
|
|
936
|
+
}, [updateHeadCheck]);
|
|
937
|
+
var toggleChecked = React.useCallback(function (itemKey, itemValue, columnId) {
|
|
938
|
+
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
939
|
+
var _a;
|
|
940
|
+
var itemData = localBodyDataRef.current[key];
|
|
941
|
+
if (itemData.item[itemKey] === itemValue) {
|
|
942
|
+
var columnData = itemData.columns[columnId];
|
|
943
|
+
if (columnData) {
|
|
944
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(!columnData.checked);
|
|
945
|
+
updateHeadCheck(columnData.column);
|
|
946
|
+
}
|
|
947
|
+
return true;
|
|
948
|
+
}
|
|
949
|
+
});
|
|
950
|
+
}, [updateHeadCheck]);
|
|
951
|
+
var setCheckedAll = React.useCallback(function (columnId, checked) {
|
|
952
|
+
var _a, _b;
|
|
953
|
+
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
954
|
+
var _a;
|
|
955
|
+
var itemData = localBodyDataRef.current[key];
|
|
956
|
+
var columnData = itemData.columns[columnId];
|
|
957
|
+
if (columnData) {
|
|
958
|
+
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
959
|
+
}
|
|
960
|
+
});
|
|
961
|
+
(_b = (_a = localHeaderDataRef.current[columnId]) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.setChecked(checked);
|
|
962
|
+
}, []);
|
|
896
963
|
var getCheckedItems = React.useCallback(function (columnId) {
|
|
897
964
|
var checkedItems = [];
|
|
898
965
|
Object.keys(localBodyDataRef.current).forEach(function (key) {
|
|
@@ -1052,6 +1119,10 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
1052
1119
|
setSortableItems(makeSortableItems(lastItems_1));
|
|
1053
1120
|
},
|
|
1054
1121
|
getCheckedItems: getCheckedItems,
|
|
1122
|
+
getChecked: getChecked,
|
|
1123
|
+
setChecked: setChecked,
|
|
1124
|
+
toggleChecked: toggleChecked,
|
|
1125
|
+
setCheckedAll: setCheckedAll,
|
|
1055
1126
|
scrollToTop: simpleBarScrollToTop,
|
|
1056
1127
|
};
|
|
1057
1128
|
if (typeof ref === 'function') {
|
|
@@ -1061,7 +1132,21 @@ var Table = React.forwardRef(function (_a, ref) {
|
|
|
1061
1132
|
ref.current = commands;
|
|
1062
1133
|
}
|
|
1063
1134
|
}
|
|
1064
|
-
}, [
|
|
1135
|
+
}, [
|
|
1136
|
+
ref,
|
|
1137
|
+
columns,
|
|
1138
|
+
items,
|
|
1139
|
+
paging,
|
|
1140
|
+
setColumns,
|
|
1141
|
+
setItems,
|
|
1142
|
+
setPaging,
|
|
1143
|
+
getCheckedItems,
|
|
1144
|
+
simpleBarScrollToTop,
|
|
1145
|
+
setChecked,
|
|
1146
|
+
toggleChecked,
|
|
1147
|
+
getChecked,
|
|
1148
|
+
setCheckedAll,
|
|
1149
|
+
]);
|
|
1065
1150
|
/********************************************************************************************************************
|
|
1066
1151
|
* Event Handler
|
|
1067
1152
|
* ******************************************************************************************************************/
|