javascript - Horizontal scroll buttons - Stack Overflow

admin管理员组

文章数量:1289541

I have a dialog with a plusIconButton that allows me to create new column. I can create new columns till I reach this equality allBomDocumentIds.length === styleOptions.length. In that moment I disable the button.

I am defining this state and constant

const [currentView, setCurrentView] = useState(0);
const columnsPerView = 4;
const totalViews = Math.ceil(allBomDocumentIds.length / columnsPerView);

I need to show the following thing:

If the total nº of columns is >= 4, we always display the last 4 columns example:

• if we have 4 columns and we add a new one, we display columns 2, 3, 4, 5 and column 2 has the angleLeftIcon
• if we have 5 columns and we add a new one, we display columns 3, 4, 5, 6 and column 3 has the angleLeftIcon
• if we have 6 columns and we add a new one, we display columns 4, 5, 6, 7 and column 4 has the angleLeftIcon

Then, once I have created the columns and move back to the previous page I need to display every 4 columns. example.

• if I have a total of 10 columns, the first page goes from 1 to 4, the second from 5 to 8 and the third from 7 to 10

So that the first column OUT of view after clicking the button should become the first column IN view. You create 1 column by 1 but you show 4 by 4.

I have these fn to handle previous/next page:

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

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

And this useEffect to show the last column every time we add one:

useEffect(() => {
    if (allBomDocumentIds.length > columnsPerView) {
        setCurrentView(totalViews - 1);
    }
}, [allBomDocumentIds.length, totalViews]);

In the return I have these two methods:

allBomDocumentIds
  .slice(currentView * columnsPerView,
   (currentView + 1) * columnsPerView)
  .map((bomDocumentId, index) => {
   
    const totalSelectedOptions = getTotalSelectedOptionsForColumn(bomDocumentId);     
    const areAllOptionsSelected = totalSelectedOptions === styleOptions.length;

How can I obtain the behaviour I am looking for?

本文标签： javascriptHorizontal scroll buttonsStack Overflow