Я пытаюсь реализовать условный выбор и selectAll в react-bootstrap-table-next
. Это означает, что я хочу отключить элементы selectRow
, когда условие истинно.
Случай:
Пользователь загружает файл - file has an Upload DateTime
- Ему не должно быть разрешено удалить файл, если не прошло 15 минут.
Логика:
moment() >= moment(row.upload_date).add(15, 'minutes')
Реализация пользовательского интерфейса:
selectRow
определение:
const selectRow = {
mode: "checkbox",
selected: selectedFiles.id,
onSelect: (row, isSelect, rowIndex, e) => {
if ( moment() >= moment(row.upload_date).add(15, 'minutes')) {
handleOnSelect(row, isSelect);
} else {
return false;
}
},
onSelectAll:(rows, isSelected) => {
if(isSelected) {
for(let i = 0 ; i < rows.length ; i++){
if (moment() >= moment(rows[i].upload_date).add(15, 'minutes')){
handleOnSelectAll(rows[i], isSelected);
} else {
return false;
}
}
} else {
return false;
}
},
selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
<Form.Check
custom
type="checkbox"
label={(<></>)}
ref={ (input) => {
if (input) input.indeterminate = indeterminate;
} }
{ ...rest }
/>
),
selectionRenderer: ({ mode ,...rest }) => (
<Form.Check
custom
type="checkbox"
label={(<></>)}
type={ mode } { ...rest }
/>
)
};
handleOnSelect
реализация:
const handleOnSelect = (row, isSelect) => {
// Selected file
if (isSelect) {
if (
!selectedFiles.length ||
(selectedFiles.length && selectedFiles[0].id !== row.id)
) {
setSelectedFiles([...selectedFiles, row]);
}
}
// Deselected file
else {
setSelectedFiles(selectedFiles.filter((x) => x.id !== row.id));
}
};
handleOnSelect
работает нормально.
handleOnSelectAll
реализация:
const handleOnSelectAll = (isSelected, rows) => {
console.log(rows)
let files = rows.map((r) => r);
console.log(files)
// Selected all files
if (isSelected) {
setSelectedFiles(files);
}
// Deselected all files
else {
setSelectedFiles([]);
}
};
handleOnSelectAll
работает не так, как ожидалось.
Когда мы нажимаем «Выбрать все», он не должен проверять недавно загруженный файл. Я сослался на React-bootstrap-table-next API документации, но я не могу это реализовать.
Пожалуйста, направьте меня, спасибо