phx-react
Version:
PHX REACT
37 lines • 2.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Checkbox_1 = require("../../Checkbox");
const Button_1 = require("../../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)
(0, react_1.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_1.default.createElement("div", { className: 'flex flex-1 items-center gap-x-2 text-xs' },
react_1.default.createElement(Checkbox_1.PHXCheckbox, { checked: allSelected, type: allSelected ? 'default' : isIndeterminate ? 'not-all' : 'default', onChange: (e) => handleSelectAll(e.target.checked) }),
dataSelected.length === 0 ? (react_1.default.createElement("span", { className: 'cursor-pointer leading-7', onClick: () => handleSelectAll(true) }, "Ch\u1ECDn danh s\u00E1ch")) : (react_1.default.createElement(Button_1.PHXButton, { secondary: true, size: 'micro', onClick: handleBulkActions }, content))));
}
exports.default = BulkAction;
//# sourceMappingURL=bulkAction.js.map