LSDF/src/components/AuthButton/index.tsx

import React, { ReactNode } from "react";
import { Button } from "antd";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

type Props = {
  children?: ReactNode;
  id: number;
  danger?: boolean; //设置危险按钮
  block?: boolean; //将按钮宽度调整为其父宽度的选项
  disabled?: boolean; //设置按钮失效状态
  ghost?: boolean; //ghost
  href?: string; //点击跳转的地址，指定此属性 button 的行为和 a 链接一致
  htmlType?: "button" | "submit" | "reset" | undefined; //设置 button 原生的 type 值，可选值请参考 HTML 标准
  icon?: ReactNode; //设置按钮的图标组件
  loading?: boolean; //设置按钮载入状态
  shape?: "default" | "circle" | "round"; //设置按钮形状
  size?: "large" | "middle" | "small"; //设置按钮大小
  target?: string; //相当于 a 链接的 target 属性，href 存在时生效
  type?: "primary" | "ghost" | "dashed" | "link" | "text" | "default"; //设置按钮类型
  onClick?: () => void; //点击按钮时的回调
};

// console.log('有权限的按钮集合',buttonArr);

function AuthButton({
  children,
  id,
  danger = false,
  block = false,
  disabled = false,
  ghost = false,
  href,
  htmlType = "button",
  icon,
  loading = false,
  shape = "default",
  size = "middle",
  target,
  type = "default",
  onClick,
}: Props) {
  const buttonArr = useSelector(
    (state: RootState) => state.loginStore.authButtonArr
  );

  return buttonArr.some((v: any) => v.id === id) || id === -1 ? (
    <Button
      danger={danger}
      block={block}
      disabled={disabled}
      ghost={ghost}
      href={href}
      htmlType={htmlType}
      icon={icon}
      loading={loading}
      shape={shape}
      size={size}
      target={target}
      type={type}
      onClick={onClick}
    >
      {children}
    </Button>
  ) : null;
}

const MemoAuthButton = React.memo(AuthButton);

export default MemoAuthButton;