Revision 7878a4a5
Added by Oleh Fedorenko about 1 month ago
webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js | ||
---|---|---|
|
||
const SelectAllCheckbox = ({
|
||
selectNone,
|
||
selectDefault,
|
||
selectPage,
|
||
selectedCount,
|
||
selectedDefaultCount,
|
||
pageRowCount,
|
||
totalCount,
|
||
areAllRowsOnPageSelected,
|
||
... | ... | |
} else {
|
||
selectAll(true);
|
||
}
|
||
} else {
|
||
} else if (selectDefault === null) {
|
||
selectNone();
|
||
} else {
|
||
selectDefault();
|
||
}
|
||
};
|
||
|
||
... | ... | |
setSelectionToggle(false);
|
||
selectNone();
|
||
};
|
||
const handleSelectDefault = () => {
|
||
setSelectAllDropdownOpen(false);
|
||
setSelectionToggle(false);
|
||
selectDefault();
|
||
};
|
||
|
||
useEffect(() => {
|
||
let newCheckedState = null; // null is partially-checked state
|
||
... | ... | |
}, [selectedCount, areAllRowsSelected]);
|
||
|
||
const selectAllDropdownItems = [
|
||
<DropdownItem
|
||
key="select-none"
|
||
ouiaId="select-none"
|
||
component="button"
|
||
isDisabled={selectedCount === 0}
|
||
onClick={handleSelectNone}
|
||
>
|
||
{`${__('Select none')} (0)`}
|
||
</DropdownItem>,
|
||
<DropdownItem
|
||
key="select-page"
|
||
ouiaId="select-page"
|
||
... | ... | |
{`${__('Select page')} (${pageRowCount})`}
|
||
</DropdownItem>,
|
||
];
|
||
if (selectDefault === null) {
|
||
selectAllDropdownItems.unshift(
|
||
<DropdownItem
|
||
key="select-none"
|
||
ouiaId="select-none"
|
||
component="button"
|
||
isDisabled={selectedCount === 0}
|
||
onClick={handleSelectNone}
|
||
>
|
||
{`${__('Select none')} (0)`}
|
||
</DropdownItem>
|
||
);
|
||
} else {
|
||
selectAllDropdownItems.unshift(
|
||
<DropdownItem
|
||
key="select-default"
|
||
ouiaId="select-default"
|
||
component="button"
|
||
isDisabled={totalCount === 0}
|
||
onClick={handleSelectDefault}
|
||
>
|
||
{`${__('Select default')} (${selectedDefaultCount})`}
|
||
</DropdownItem>
|
||
);
|
||
}
|
||
if (canSelectAll) {
|
||
selectAllDropdownItems.push(
|
||
<DropdownItem
|
||
... | ... | |
selectNone: PropTypes.func.isRequired,
|
||
selectPage: PropTypes.func.isRequired,
|
||
selectAll: PropTypes.func,
|
||
selectDefault: PropTypes.func,
|
||
selectedDefaultCount: PropTypes.number,
|
||
pageRowCount: PropTypes.number,
|
||
totalCount: PropTypes.number,
|
||
areAllRowsOnPageSelected: PropTypes.bool.isRequired,
|
||
... | ... | |
|
||
SelectAllCheckbox.defaultProps = {
|
||
selectAll: noop,
|
||
selectDefault: null,
|
||
pageRowCount: 0,
|
||
totalCount: 0,
|
||
selectedDefaultCount: 0,
|
||
};
|
||
|
||
export default SelectAllCheckbox;
|
webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/TableHooks.js | ||
---|---|---|
export const useSelectionSet = ({
|
||
results,
|
||
metadata,
|
||
defaultArry = [],
|
||
initialArry = [],
|
||
idColumn = 'id',
|
||
isSelectable = () => true,
|
||
... | ... | |
}
|
||
}
|
||
};
|
||
const selectDefault = () => {
|
||
selectNone();
|
||
selectionSet.addAll(defaultArry);
|
||
defaultArry.forEach(id => {
|
||
selectedResults.current[id] = results.find(
|
||
result => result[idColumn] === id
|
||
);
|
||
});
|
||
};
|
||
|
||
const selectedCount = selectionSet.size;
|
||
|
||
... | ... | |
areAllRowsSelected,
|
||
selectPage,
|
||
selectNone,
|
||
selectDefault,
|
||
isSelected,
|
||
isSelectable: canSelect,
|
||
selectionSet,
|
||
... | ... | |
results,
|
||
metadata,
|
||
initialArry = [],
|
||
initialExclusionArry = [],
|
||
defaultArry = [],
|
||
initialSearchQuery = '',
|
||
idColumn = 'id',
|
||
filtersQuery = '',
|
||
isSelectable,
|
||
initialSelectAllMode = false,
|
||
}) => {
|
||
const { selectionSet: inclusionSet, ...selectOptions } = useSelectionSet({
|
||
results,
|
||
metadata,
|
||
initialArry,
|
||
defaultArry,
|
||
idColumn,
|
||
isSelectable,
|
||
});
|
||
const exclusionSet = useSet([]);
|
||
const exclusionSet = useSet(initialExclusionArry);
|
||
const [searchQuery, updateSearchQuery] = useState(initialSearchQuery);
|
||
const [selectAllMode, setSelectAllMode] = useState(false);
|
||
const [selectAllMode, setSelectAllMode] = useState(initialSelectAllMode);
|
||
const selectedCount = selectAllMode
|
||
? Number(metadata.selectable || metadata.total) - exclusionSet.size
|
||
: selectOptions.selectedCount;
|
||
... | ... | |
}
|
||
};
|
||
|
||
const selectDefault = () => {
|
||
selectNone();
|
||
selectOptions.selectDefault();
|
||
};
|
||
|
||
const fetchBulkParams = ({
|
||
idColumnName = idColumn,
|
||
selectAllQuery = '',
|
||
... | ... | |
selectPage,
|
||
selectNone,
|
||
selectAll,
|
||
selectDefault,
|
||
selectAllMode,
|
||
isSelected,
|
||
selectedCount,
|
||
... | ... | |
selectOne,
|
||
areAllRowsOnPageSelected,
|
||
areAllRowsSelected,
|
||
inclusionSet,
|
||
exclusionSet,
|
||
};
|
||
};
|
||
|
Also available in: Unified diff
Fixes #37307 - Add more control over SelectAllCheckbox