refactor(ui): clean code

ui/src/components/certificate/CertificateDetail.tsx

@@ -8,10 +8,12 @@ import { type CertificateModel } from "@/domain/certificate";
 import { saveFiles2Zip } from "@/utils/file";
 
 type CertificateDetailProps = {
+  className?: string;
+  style?: React.CSSProperties;
   data: CertificateModel;
 };
 
-const CertificateDetail = ({ data }: CertificateDetailProps) => {
+const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
   const { t } = useTranslation();
 
   const [messageApi, MessageContextHolder] = message.useMessage();
@@ -33,7 +35,7 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
   };
 
   return (
-    <div>
+    <div {...props}>
       {MessageContextHolder}
 
       <Form layout="vertical">

ui/src/components/certificate/CertificateDetailDrawer.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { cloneElement, useEffect, useMemo, useState } from "react";
+import { useControllableValue } from "ahooks";
 import { Drawer } from "antd";
 
 import { type CertificateModel } from "@/domain/certificate";
@@ -7,19 +8,44 @@ import CertificateDetail from "./CertificateDetail";
 type CertificateDetailDrawerProps = {
   data?: CertificateModel;
   open?: boolean;
-  onClose?: () => void;
+  trigger?: React.ReactElement;
+  onOpenChange?: (open: boolean) => void;
 };
 
-const CertificateDetailDrawer = ({ data, open, onClose }: CertificateDetailDrawerProps) => {
+const CertificateDetailDrawer = ({ data, trigger, ...props }: CertificateDetailDrawerProps) => {
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
   const [loading, setLoading] = useState(true);
   useEffect(() => {
     setLoading(data == null);
   }, [data]);
 
+  const triggerDom = useMemo(() => {
+    if (!trigger) {
+      return null;
+    }
+
+    return cloneElement(trigger, {
+      ...trigger.props,
+      onClick: () => {
+        setOpen(true);
+        trigger.props?.onClick?.();
+      },
+    });
+  }, [trigger, setOpen]);
+
   return (
-    <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={onClose}>
-      {data ? <CertificateDetail data={data} /> : <></>}
-    </Drawer>
+    <>
+      {triggerDom}
+
+      <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={() => setOpen(false)}>
+        {data ? <CertificateDetail data={data} /> : <></>}
+      </Drawer>
+    </>
   );
 };