BigScreen/src/components/Nav/new.js

import React, { useState, useEffect, useMemo } from "react";
import { Card, Table, Empty, Button } from "antd";
import { connect } from "dva";
import {
  GetTokenFromUrl,
  getToken,
  PageAction,
  UnityAction,
} from "@/utils/utils";
import Swiper from "react-id-swiper";
import router from "umi/router";
// import 'swiper/css/swiper.css';
import styles from "./indexNew.less";

const menuItemUrl = require("@/assets/menu/item-bg.png");
const menuSelectItemUrl = require("@/assets/menu/btnBg.png");

function AppMenu(props) {
  const [swiper, updateSwiper] = useState(null);
  const [current, setCurrent] = useState();

  const btnDisabled = useMemo(() => {
    if (waterMenuData.length <= 6) return true;
    return false;
  }, [waterMenuData.length]);
  const itemCount = 6;

  const swiperParams = useMemo(() => {
    let params = {
      slidesPerView: itemCount,
      spaceBetween: 0,
      observer: true,
      observeParents: true,
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
      containerClass: `${styles.content} ${styles["content-" + itemCount]}`,
    };
    if (!btnDisabled) {
      params.navigation = {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      };
    }
    return params;
  }, [itemCount]);

  return (
    <div className={styles.menuBg}>
      <div className={styles.unityMenu}>
        <div className={styles.leftContent}>
          <img
            className={styles.left}
            src={require("@/assets/menu/left-1.png")}
          />
        </div>
        <div className={styles.center} style={{ width: itemCount * 240 }}></div>
        <div className={styles.rightContent}>
          <img
            className={styles.right}
            src={require("@/assets/menu/right-1.png")}
          />
        </div>
        <div className={styles.swiper}>
          {waterMenuData.length > 0 && (
            <Swiper {...swiperParams} getSwiper={updateSwiper}>
              {waterMenuData.map((item) => (
                <div
                  onClick={() => onClickMenu(item)}
                  key={item.ID}
                  className={`${styles.item}`}
                >
                  <div
                    className={`${styles.menu} ${
                      item.active ? "" : styles.disabled
                    }`}
                  >
                    <div
                      style={
                        current == item.ID
                          ? { textShadow: " 2px 2px 4px #000" }
                          : null
                      }
                      className={styles.font}
                    >
                      {item.Name}
                    </div>
                    {current == item.ID && <img src={menuSelectItemUrl} />}
                    {current != item.ID && <img src={menuItemUrl} />}
                  </div>
                </div>
              ))}
            </Swiper>
          )}
        </div>
      </div>
    </div>
  );
}
export default AppMenu;