给弹窗添加水印

继上一篇 https://www.cnblogs.com/wangwenhui/p/16130394.html

// src\components\public\Hoc\HocWatermark.js

import React, {useEffect, useState} from "react";
import Watermark from "@/components/public/Watermark/Watermark";
import {getCurrentUser} from "@/utils/headers";

export default function HocWatermark(ChildComponent) {
    return function WatermarkWrap(props) {
        const [userInfo, setUserInfo] = useState({});
        useEffect(() => {
            const currentUserInfo = getCurrentUser() || {};
            setUserInfo(currentUserInfo);
        }, []);

        if (props.children) {
            return (
                <ChildComponent {...props}>
                    {props.children}
                    {userInfo.name && <Watermark text={`${userInfo.name} ${userInfo.englishName} - ${userInfo.originId}`}/>}
                </ChildComponent>
            );
        } else {
            return (
                <React.Fragment>
                    <ChildComponent {...props}/>
                    {userInfo.name && <Watermark text={`${userInfo.name} ${userInfo.englishName} - ${userInfo.originId}`}/>}
                </React.Fragment>
            );
        }
    };
}

// src\components\AntdX\WatermarkComponent.js

import {Drawer, Modal, Collapse} from "antd";
import HocWatermark from "@/components/public/Hoc/HocWatermark";
const Panel = Collapse.Panel;

export const WatermarkDrawer = HocWatermark(Drawer);
export const WatermarkModal = HocWatermark(Modal);
export const WatermarkPanel = HocWatermark(Panel);

// index.tsx

import React from "react";
import Watermark from "@/components/public/Watermark/Watermark";
import {WatermarkModal} from "@/components/AntdX/WatermarkComponent";

interface IUserInfo {
  name: string;
  englishName: string;
  originId: number;
}

export interface IProps {
  userInfo: IUserInfo;
}

const Index: React.FC<IProps> = (props) => {
  const { userInfo } = props;
  return (
    <div>
      <div>我是内容</div>
      <WatermarkModal
         {...defaultModelProps}
          {...modelFetchParms}
          width={650}
          onCancel={()=>this.modelCancel(modelParms.typeModel)}
          onOk={() => this.handelPlanModelOK()}
        >
          {modelParms && modelParms.typeModel === 'detail' ?
            <PlanDetail findCurPlan= {findCurPlan} /> :
            <AddPlanWorkbench key={position_key} onRef={ref => { this.advancedSearchRef = ref }} getPLanData={getPLanData}/>}
        </WatermarkModal>
      {userInfo.name && (
        <Watermark
          text={`${userInfo.name} ${userInfo.englishName} - ${userInfo.originId}`}
        />
      )}
    </div>
  );
};

export default Index;