Горизонтальные кнопки прокрутки ⇐ Javascript

[Anonymous]

У меня есть диалог с плюсом, который позволяет мне создавать новый столбец. Я могу создавать новые столбцы, пока не достигну этого равенства allbomdocumentids.length === styleoptions.length . В этот момент я отключаю кнопку.

Код: Выделить всё

const [currentView, setCurrentView] = useState(0)

;

Код: Выделить всё

const columnsPerView = 4

;

Код: Выделить всё

const totalViews = Math.ceil(allBomDocumentIds.length / columnsPerView)

;
Мне нужно показать следующую вещь:
Если общий nº из столбцов составляет> = 4, мы всегда отображаем последние 4 столбца
Пример: < /p>

[*] Если у нас есть 4 столбца, и мы добавляем новый, мы отображаем столбцы 2, 3, 4, 5 и столбец 2 имеют англелефтон
Если у нас есть 5 столбцов, и мы добавляем новый, мы отображаем столбцы 3, 4, 5, 6 и столбца 3, есть англелефектон < /li>
Если у нас есть 6 столбцов и и Мы добавляем новый, мы отображаем столбцы 4, 5, 6, 7 и столбец 4 имеют англелефтону < /li>
< /ul>
Затем, как только я создал столбцы и вернуться к Предыдущая страница мне нужно отобразить каждые 4 столбца. до 4, второй от 5 до 8, а третий - от 7 до 10 < /li>
< /ul>
, чтобы первый столбец вышел из просмотра после нажатия кнопки, чтобы стать кнопкой. первый столбец.
Вы создаете 1 столбец по 1 Но вы показываете 4 на 4.

Код: Выделить всё

const handleNextView = (): void => {setCurrentView((prev) => Math.min(prev + 1, totalViews - 1));}

;

Код: Выделить всё

const handlePrevView = (): void => {setCurrentView((prev) => Math.max(prev - 1, 0));}

;
И это использование, чтобы показать последний столбец каждый раз, когда мы добавляем один:

Код: Выделить всё

 useEffect(() => {
if (allBomDocumentIds.length > columnsPerView) {
setCurrentView(totalViews - 1);
}
}, [allBomDocumentIds.length, totalViews]);
< /code>
В возвращении у меня есть эти два метода: < /p>
allBomDocumentIds
.slice(currentView * columnsPerView,
(currentView + 1) * columnsPerView)
.map((bomDocumentId, index) => {
const totalSelectedOptions = getTotalSelectedOptionsForColumn(bomDocumentId);
const areAllOptionsSelected = totalSelectedOptions === styleOptions.length;

Как я могу получить поведение, которое я ищу?

Подробнее здесь: https://stackoverflow.com/questions/794 ... ll-buttons