zcloud-gbs-bi-react/src/pages/Container/Map/components/Content/index.js

import { useMount } from "ahooks";
import { useContext, useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import collapseMenu from "~/assets/images/map_bi/content/collapse_menu.png";
import collapseMenuBg from "~/assets/images/map_bi/content/collapse_menu_bg.png";
import FengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import IndexInfo from "~/pages/Container/Map/components/Content/port/IndexInfo";
import MenJin from "~/pages/Container/Map/components/Content/port/MenJin";
import PortIndex from "~/pages/Container/Map/components/Content/port/PortIndex";
import QiXiang from "~/pages/Container/Map/components/Content/port/QiXiang";
import RenYuan from "~/pages/Container/Map/components/Content/port/RenYuan";
import WeiXian from "~/pages/Container/Map/components/Content/port/WeiXian";
import XiaoFang from "~/pages/Container/Map/components/Content/port/XiaoFang";
import ZhongDian from "~/pages/Container/Map/components/Content/port/ZhongDian";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import { changeContentAnimationKeyMittKey } from "~/pages/Container/Map/js/mittKey";
import "./index.less";

function Content() {
  const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);

  const [animationKey, setAnimationKey] = useState(0);
  const [collapse, setCollapse] = useState(false);

  useMount(() => {
    setAnimationKey(Math.random());

    mitt.on(changeContentAnimationKeyMittKey, () => {
      setAnimationKey(Math.random());
      setCollapse(false);
    });
  });

  const onChangeCollapse = () => {
    setAnimationKey(Math.random());
    setCollapse(!collapse);
  };

  const renderPortContent = () => {
    if (!currentBranchOffice) {
      if (bottomUtilsCurrentIndex === -1 || bottomUtilsCurrentIndex === 5)
        return <PortIndex />;
      if (bottomUtilsCurrentIndex === 0)
        return <MenJin />;
      if (bottomUtilsCurrentIndex === 1)
        return <XiaoFang />;
      if (bottomUtilsCurrentIndex === 2)
        return <WeiXian />;
      if (bottomUtilsCurrentIndex === 3)
        return <QiXiang />;
      if (bottomUtilsCurrentIndex === 4)
        return <RenYuan />;
      if (bottomUtilsCurrentIndex === 6)
        return <ZhongDian />;
      if (bottomUtilsCurrentIndex === 7)
        return <FengBi />;
    }
  };

  const renderContent = () => {
    if (pureMap || collapse)
      return <div></div>;

    return (
      <div className="map_content_container__content">
        {!currentPort && <IndexInfo />}
        {currentPort === "00003" && renderPortContent()}
      </div>
    );
  };

  return (
    <div className="map_content_container">
      <SwitchTransition>
        <CSSTransition
          timeout={500}
          classNames={{
            enter: "animate__animated animate__faster",
            enterActive: "animate__animated animate__faster animate__fadeInLeft",
            exit: "animate__animated animate__faster",
            exitActive: "animate__animated animate__faster animate__fadeOutLeft",
          }}
          unmountOnExit
          key={animationKey}
        >
          <div>
            {renderContent()}
            {(!pureMap && currentPort) && (
              <div
                className={`collapse_menu ${collapse ? "active" : ""}`}
                style={{ backgroundImage: `url(${collapseMenuBg})` }}
                onClick={onChangeCollapse}
              >
                <img src={collapseMenu} alt="" />
              </div>
            )}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default Content;