Project

General

Profile

« Previous | Next » 

Revision 7878a4a5

Added by Oleh Fedorenko about 1 month ago

Fixes #37307 - Add more control over SelectAllCheckbox

View differences:

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