phx-react
Version:
PHX REACT
34 lines • 1.98 kB
JavaScript
import React, { useEffect } from 'react';
import { PHXCheckbox } from '../../Checkbox';
import { PHXButton } from '../../Button';
function BulkAction({ dataSelected, list, setDataSelected, onBulkActions, setFilteredItems, content, }) {
// khi click chọn tất cả
const handleSelectAll = (checked) => {
if (checked) {
const newSelected = [...list];
setDataSelected(newSelected);
setFilteredItems(list);
onBulkActions === null || onBulkActions === void 0 ? void 0 : onBulkActions(newSelected);
}
else {
setDataSelected([]);
setFilteredItems(list);
onBulkActions === null || onBulkActions === void 0 ? void 0 : onBulkActions([]);
}
};
// khi click nút hành động
const handleBulkActions = () => {
onBulkActions === null || onBulkActions === void 0 ? void 0 : onBulkActions(dataSelected);
};
// luôn sync ra ngoài khi dataSelected thay đổi (kể cả chọn riêng lẻ bên ngoài)
useEffect(() => {
onBulkActions === null || onBulkActions === void 0 ? void 0 : onBulkActions(dataSelected);
}, [dataSelected]);
const allSelected = list.length > 0 && dataSelected.length === list.length;
const isIndeterminate = dataSelected.length > 0 && !allSelected;
return (React.createElement("div", { className: 'flex flex-1 items-center gap-x-2 text-xs' },
React.createElement(PHXCheckbox, { checked: allSelected, type: allSelected ? 'default' : isIndeterminate ? 'not-all' : 'default', onChange: (e) => handleSelectAll(e.target.checked) }),
dataSelected.length === 0 ? (React.createElement("span", { className: 'cursor-pointer leading-7', onClick: () => handleSelectAll(true) }, "Ch\u1ECDn danh s\u00E1ch")) : (React.createElement(PHXButton, { secondary: true, size: 'micro', onClick: handleBulkActions }, content))));
}
export default BulkAction;
//# sourceMappingURL=bulkAction.js.map