small-program/src/component/layout/index.tsx

import AppContext from "@/context/appContext";
import BottomBarContext from "@/context/bottomBarContext";
import UserHelper from "@/helper/userHelper";
import useStore from "@/hooks/useRedux";
import RouteUtil from "@/utils/routeUtil";
import { FixedView } from "@taroify/core";
import { Image, View, ViewProps } from "@tarojs/components";
import { pxTransform } from "@tarojs/taro";
import classNames from "classnames";
import { PropsWithChildren, useContext } from "react";
import Flex from "../flex";
import Label from "../label";
import "./index.scss";

interface ILayoutProps extends ViewProps {
  safe?: boolean;
  bottomBarIndex?: number;
}

const BottomNavBar = () => {
  const appContext = useContext(AppContext);
  const bottomBarContext = useContext(BottomBarContext);
  const menu = useStore((p) => p.tabMenu);
  return (
    <FixedView
      style={{
        height: pxTransform(104),
        paddingBottom: appContext.padding.bottom,
        zIndex: 110,
        background: "#fff",
      }}
      className="bottom-nav"
      placeholder
      position="bottom"
    >
      <Flex
        style={{ height: pxTransform(104) }}
        direction="row"
        alignItem="center"
        justifyContent="center"
      >
        {menu.map((p) => {
          let _index = ["home", "official_account", "user_center"].findIndex(
            (sp) => sp === p.code
          );
          return (
            <Flex
              key={p.code}
              onClick={() => {
                UserHelper.afterLogin({
                  forceLogin: false,
                  callback: async () => {
                    if (
                      ["home", "official_account", "user_center"].includes(
                        p.code
                      )
                    ) {
                      bottomBarContext.switchTo(_index as number);
                    } else {
                      RouteUtil.toWebViewPage({
                        url: p.jumpTarget,
                      });
                    }
                  },
                });
                return;
              }}
              flex={1}
              alignItem="center"
              justifyContent="center"
            >
              <Image
                className="bottom-nav-icon"
                src={_index === bottomBarContext?.index ? p.iconActive : p.icon}
              />
              <Label
                size="sm"
                type={
                  _index === bottomBarContext?.index ? "active" : "secondary"
                }
              >
                {p.name}
              </Label>
            </Flex>
          );
        })}
      </Flex>
    </FixedView>
  );
};

const InternalLayout = (props: PropsWithChildren<ILayoutProps>) => {
  const { bottomBarIndex, safe = false, ...viewProps } = props;
  const appContext = useContext(AppContext);
  const bottomBarContext = useContext(BottomBarContext);
  const safeStyle: React.CSSProperties = {};
  if (safe) {
    safeStyle.paddingTop = appContext.padding.top;
    safeStyle.paddingBottom = appContext.padding.bottom; //(appContext.systemInfo?.screenHeight || 0) - (appContext.systemInfo?.safeArea?.bottom || 0);
  }
  return (
    <View
      className={classNames({
        "nav-bar-hide":
          (bottomBarIndex ?? false) === false
            ? false
            : bottomBarContext?.index !== bottomBarIndex,
      })}
    >
      <View
        {...viewProps}
        style={safeStyle}
        className={classNames({
          [viewProps.className || ""]: !!viewProps.className,
        })}
      >
        {props.children}
      </View>
      {props.bottomBarIndex !== undefined && <BottomNavBar />}
    </View>
  );
};

type InternalLayoutType = typeof InternalLayout;

interface LayoutInterface extends InternalLayoutType {}

const Layout = InternalLayout as LayoutInterface;

export default Layout;