调整api

asurance · Jun 30, 2024 · ad99681 · ad99681
1 parent 7f4e7ec
commit ad99681
Show file tree

Hide file tree

Showing 19 changed files with 1,929 additions and 1,488 deletions.
diff --git a/demos/ant-design.tsx b/demos/ant-design.tsx
@@ -1,55 +1,46 @@
 import React from 'react';
 import { OpenableProps, openify } from 'openify';
-import { Button, Drawer, Modal, Space } from 'antd';
+import { Button, Drawer, DrawerProps, Modal, ModalProps, Space } from 'antd';
 
-type MyModalProps = OpenableProps<void> & {
-  title: string;
-};
+type OpenModalProps = OpenableProps<void> &
+  Omit<ModalProps, 'open' | 'onOk' | 'onCancel' | 'afterClose'>;
 
-const MyModal = openify(
-  ({ visible, onClose, afterClose, title }: MyModalProps) => {
-    return (
-      <Modal
-        title={title}
-        open={visible}
-        onOk={onClose}
-        onCancel={onClose}
-        afterClose={afterClose}
-      >
-        弹窗内容
-      </Modal>
-    );
+const openModal = openify<void, OpenModalProps, ModalProps>(Modal, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      open: visible,
+      onOk: onClose,
+      onCancel: onClose,
+      afterClose,
+    };
   },
-);
+});
 
-type MyDrawerProps = OpenableProps<void> & {
-  title: string;
-};
+type OpenDrawerProps = OpenableProps<void> &
+  Omit<DrawerProps, 'open' | 'onClose' | 'afterOpenChange'>;
 
-const MyDrawer = openify(
-  ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
-    return (
-      <Drawer
-        title={title}
-        open={visible}
-        onClose={onClose}
-        afterOpenChange={open => {
-          if (!open) {
-            afterClose();
-          }
-        }}
-      >
-        抽屉内容
-      </Drawer>
-    );
+const openDrawer = openify<void, OpenDrawerProps, DrawerProps>(Drawer, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      open: visible,
+      onClose,
+      afterOpenChange: open => {
+        if (!open) {
+          afterClose();
+        }
+      },
+    };
   },
-);
+});
+
 export default () => (
   <Space>
-    <Button onClick={() => MyModal.open({ title: '自定义弹窗' })}>
+    <Button onClick={() => openModal({ title: '自定义弹窗' })}>
       自定义弹窗
     </Button>
-    <Button onClick={() => MyDrawer.open({ title: '自定义抽屉' })}>
+    <Button onClick={() => openDrawer({ title: '自定义抽屉' })}>
       自定义抽屉
     </Button>
   </Space>

diff --git a/demos/arco-design.tsx b/demos/arco-design.tsx
@@ -1,54 +1,52 @@
 import React from 'react';
-import { Button, Drawer, Modal, Space } from '@arco-design/web-react';
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  Modal,
+  ModalProps,
+  Space,
+} from '@arco-design/web-react';
 import { OpenableProps, openify } from 'openify';
 
 import '@arco-design/web-react/dist/css/arco.css';
 
-type MyModalProps = OpenableProps<void> & {
-  title: string;
-};
+type OpenModalProps = OpenableProps<void> &
+  Omit<ModalProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
 
-const MyModal = openify(
-  ({ visible, onClose, afterClose, title }: MyModalProps) => {
-    return (
-      <Modal
-        title={title}
-        visible={visible}
-        onOk={onClose}
-        onCancel={onClose}
-        afterClose={afterClose}
-      >
-        弹窗内容
-      </Modal>
-    );
+const openModal = openify<void, OpenModalProps, ModalProps>(Modal, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      visible,
+      onOk: onClose,
+      onCancel: onClose,
+      afterClose,
+    };
   },
-);
+});
 
-type MyDrawerProps = OpenableProps<void> & {
-  title: string;
-};
+type OpenDrawerProps = OpenableProps<void> &
+  Omit<DrawerProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
 
-const MyDrawer = openify(
-  ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
-    return (
-      <Drawer
-        title={title}
-        visible={visible}
-        onOk={onClose}
-        onCancel={onClose}
-        afterClose={afterClose}
-      >
-        抽屉内容
-      </Drawer>
-    );
+const openDrawer = openify<void, OpenDrawerProps, DrawerProps>(Drawer, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      visible,
+      onOk: onClose,
+      onCancel: onClose,
+      afterClose,
+    };
   },
-);
+});
+
 export default () => (
   <Space>
-    <Button onClick={() => MyModal.open({ title: '自定义弹窗' })}>
+    <Button onClick={() => openModal({ title: '自定义弹窗' })}>
       自定义弹窗
     </Button>
-    <Button onClick={() => MyDrawer.open({ title: '自定义抽屉' })}>
+    <Button onClick={() => openDrawer({ title: '自定义抽屉' })}>
       自定义抽屉
     </Button>
   </Space>

diff --git a/demos/close-by-ref.tsx b/demos/close-by-ref.tsx
@@ -1,4 +1,9 @@
-import React, { createRef, forwardRef, useImperativeHandle } from 'react';
+import React, {
+  RefAttributes,
+  createRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { Button, Modal, Space } from '@arco-design/web-react';
 import { OpenableProps, openify } from 'openify';
 
@@ -12,38 +17,42 @@ type MyModalRef = {
   close: () => void;
 };
 
-const MyModal = openify(
-  forwardRef<MyModalRef, MyModalProps>(
-    ({ visible, onClose, afterClose, title }: MyModalProps, ref) => {
-      useImperativeHandle(
-        ref,
-        () => ({
-          close() {
-            onClose();
-          },
-        }),
-        [],
-      );
-      return (
-        <Modal
-          title={title}
-          visible={visible}
-          afterClose={afterClose}
-          closable={false}
-        >
-          静态打开
-        </Modal>
-      );
-    },
-  ),
+const MyModal = forwardRef<MyModalRef, MyModalProps>(
+  ({ visible, onClose, afterClose, title }: MyModalProps, ref) => {
+    useImperativeHandle(
+      ref,
+      () => ({
+        close() {
+          onClose();
+        },
+      }),
+      [],
+    );
+    return (
+      <Modal
+        title={title}
+        visible={visible}
+        afterClose={afterClose}
+        closable={false}
+      >
+        静态打开
+      </Modal>
+    );
+  },
 );
 
+const openMyModal = openify<
+  void,
+  MyModalProps & RefAttributes<MyModalRef>,
+  MyModalProps
+>(MyModal);
+
 export default () => (
   <Space>
     <Button
       onClick={() => {
         const ref = createRef<MyModalRef>();
-        MyModal.open({ title: '标题', ref });
+        openMyModal({ title: '标题', ref });
         setTimeout(() => {
           ref.current?.close();
         }, 1000);

diff --git a/demos/context.tsx b/demos/context.tsx
@@ -10,37 +10,41 @@ type MyModalProps = OpenableProps<void> & {
   title: string;
 };
 
-const MyModal = openify(
-  ({ visible, onClose, afterClose, title }: MyModalProps) => {
-    const context = useContext(myContext);
-    return (
-      <Modal
-        title={title}
-        visible={visible}
-        onOk={onClose}
-        onCancel={onClose}
-        afterClose={afterClose}
-      >
-        {context}
-      </Modal>
-    );
-  },
-);
+const MyModal = ({ visible, onClose, afterClose, title }: MyModalProps) => {
+  const context = useContext(myContext);
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onOk={onClose}
+      onCancel={onClose}
+      afterClose={afterClose}
+    >
+      {context}
+    </Modal>
+  );
+};
+
+const openMyModalDefault = openify<void, MyModalProps, MyModalProps>(MyModal);
 
-const MyModalWithContext = openify(MyModal, {
-  bindToComponent: false,
-  renderHook: node => {
-    return (
-      <myContext.Provider value="context提供内容">{node}</myContext.Provider>
-    );
+const openMyModalWithRenderHook = openify<void, MyModalProps, MyModalProps>(
+  MyModal,
+  {
+    renderHook: node => {
+      return (
+        <myContext.Provider value="context提供内容">{node}</myContext.Provider>
+      );
+    },
   },
-});
+);
 
 export default () => (
   <myContext.Provider value="context提供内容">
     <Space>
-      <Button onClick={() => MyModal.open({ title: '弹窗' })}>打开弹窗</Button>
-      <Button onClick={() => MyModalWithContext.open({ title: '弹窗' })}>
+      <Button onClick={() => openMyModalDefault({ title: '弹窗' })}>
+        打开弹窗
+      </Button>
+      <Button onClick={() => openMyModalWithRenderHook({ title: '弹窗' })}>
         打开弹窗
       </Button>
     </Space>

diff --git a/demos/mydrawer.tsx b/demos/mydrawer.tsx
@@ -8,20 +8,22 @@ type MyDrawerProps = OpenableProps<void> & {
   title: string;
 };
 
-const MyDrawer = openify(
-  ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
-    return (
-      <Drawer
-        title={title}
-        visible={visible}
-        onOk={onClose}
-        onCancel={onClose}
-        afterClose={afterClose}
-      >
-        抽屉内容
-      </Drawer>
-    );
-  },
+const MyDrawer = ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
+  return (
+    <Drawer
+      title={title}
+      visible={visible}
+      onOk={onClose}
+      onCancel={onClose}
+      afterClose={afterClose}
+    >
+      抽屉内容
+    </Drawer>
+  );
+};
+
+export const openMyDrawer = openify<void, MyDrawerProps, MyDrawerProps>(
+  MyDrawer,
 );
 
 export default MyDrawer;