refactor(ui): useTriggerElement

ui/src/hooks/index.ts

@@ -1,5 +1,6 @@
 import useAntdForm from "./useAntdForm";
 import useBrowserTheme from "./useBrowserTheme";
+import useTriggerElement from "./useTriggerElement";
 import useZustandShallowSelector from "./useZustandShallowSelector";
 
-export { useAntdForm, useBrowserTheme, useZustandShallowSelector };
+export { useAntdForm, useBrowserTheme, useTriggerElement, useZustandShallowSelector };

ui/src/hooks/useTriggerElement.ts

@@ -0,0 +1,32 @@
+import { cloneElement, createElement, Fragment, isValidElement, useMemo } from "react";
+
+export type UseTriggerElementOptions = {
+  onClick?: (e: MouseEvent) => void;
+};
+
+/**
+ * 获取一个触发器元素。通常为配合 Drawer、Modal 等组件使用。
+ * @param {React.ReactNode} trigger
+ * @param {UseTriggerElementOptions} [options]
+ * @returns {React.ReactElement}
+ */
+const useTriggerElement = (trigger: React.ReactNode, options?: UseTriggerElementOptions) => {
+  const onClick = options?.onClick;
+  const triggerDom = useMemo(() => {
+    if (!trigger) {
+      return null;
+    }
+
+    const temp = isValidElement(trigger) ? trigger : createElement(Fragment, null, trigger);
+    return cloneElement(temp, {
+      ...temp.props,
+      onClick: (e: MouseEvent) => {
+        onClick?.(e);
+        temp.props?.onClick?.(e);
+      },
+    });
+  }, [trigger, onClick]);
+  return triggerDom;
+};
+
+export default useTriggerElement;