alarm-component/src/entry.jsx

import React, {
  useMemo,
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
} from "react";
import styles from "./entry.module.scss";
import "./style/global.less";
import Easy from "./pages/Alarm/components/easy";
import Complex from "./pages/Alarm/components/complex";
import { getAntdToken } from "./utils/theme";
import ThemeWrapper from "./utils/theme/ThemeWrapper";
import { ConfigProvider, App } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import "./utils/theme/customStyle.less";
import "dayjs/locale/zh-cn";
import dayjs from "dayjs";
dayjs.locale("zh-cn");

const EasyConfig = forwardRef((props, ref) => {
  const { editId = -1, onConfirm } = props;
  const compRef = useRef(null);

  const [themeName, setThemeName] = useState();

  const antdToken = useMemo(() => {
    if (themeName) {
      return getAntdToken(themeName);
    }
  }, [themeName]);

  useImperativeHandle(ref, () => {
    return {
      ok: compRef?.current?.ok,
    };
  });

  return (
    <ThemeWrapper setThemeName={setThemeName}>
      {themeName && (
        <ConfigProvider
          locale={zhCN}
          theme={antdToken}
          autoInsertSpaceInButton={false}
        >
          <App className={styles.App}>
            <Easy ref={compRef} alarmId={editId} onConfirm={onConfirm} />
          </App>
        </ConfigProvider>
      )}
    </ThemeWrapper>
  );
});

const ComplexConfig = forwardRef((props, ref) => {
  const { editId = -1, onConfirm } = props;
  const compRef = useRef(null);

  const [themeName, setThemeName] = useState();

  const antdToken = useMemo(() => {
    if (themeName) {
      return getAntdToken(themeName);
    }
  }, [themeName]);

  useImperativeHandle(ref, () => {
    return {
      ok: compRef?.current?.ok,
    };
  });

  console.log(compRef);

  return (
    <ThemeWrapper setThemeName={setThemeName}>
      {themeName && (
        <ConfigProvider
          locale={zhCN}
          theme={antdToken}
          autoInsertSpaceInButton={false}
        >
          <App className={styles.App}>
            <Complex ref={compRef} alarmId={editId} onConfirm={onConfirm} />
          </App>
        </ConfigProvider>
      )}
    </ThemeWrapper>
  );
});

export default {
  EasyConfig,
  ComplexConfig,
};