feat: 改进 antd 依赖范围限制 (#22)

* fix: fix version range

* feat: 改进 4.x 依赖范围限制

* test: add unit test

* chore: update deps

* chore: move `antd-mobile` to optionalDep

* chore: update lock

* chore: 改进 TS 描述

* docs: update docs

docs/guide/typescript.md

@@ -0,0 +1,78 @@
+---
+title: 坚持使用 visible
+group:
+  title: Legacy
+  order: 99
+order: 2
+---
+
+### 受控请使用 `open`
+
+> 该库本意是通过 `trigger` 来控制 Modal, 但是在一些场景下, 我们需要自己受控方式（但其实不推荐使用这个库，直接用 antd 原生即可）
+
+如果需要使用受控方式, 请使用 `open` 属性来控制 Modal 的显示与隐藏。[usage#不推荐使用](./usage#不推荐使用)
+
+### 坚持使用 `visible`
+
+但其实你可以直接用 `visible` 来控制 Modal 的显示与隐藏。 例如:
+
+```tsx
+/**
+ * defaultShowCode: true
+ */
+import React from 'react';
+import { Button } from 'antd';
+import Modal from 'easy-antd-modal';
+
+export default () => {
+  const [visible, setVisible] = React.useState<boolean>(false);
+
+  const handleOpen = () => {
+    setVisible(true);
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button onClick={handleOpen} danger>
+        Visible (Not Recommended)
+      </Button>
+      <Modal
+        visible={visible} // <-- 这里还是支持 visible 的，请自己补充 TypeScript 类型
+        onCancel={handleClose}
+      >
+        I ❤️ antd
+      </Modal>
+    </>
+  );
+};
+```
+
+但是这里会有 TypeScript 的类型问题，因为 `visible` 是 antd 的属性，而 `easy-antd-modal` 将 `visible` 类型 Omit 了，所以你需要自己定义类型。
+
+```ts
+// 这段可以直接添加到你的任何 `.ts` 文件中，例如 `antd-modal.ts`
+// 也可以添加到一个 `.d.ts` 文件中。确保这个文件包含在项目的 `tsconfig.json` 中的 "file" 字段内。
+import 'easy-antd-modal';
+
+declare module 'easy-antd-modal' {
+  interface ModalProps {
+    /**
+     * `antd` 的 `Modal` 组件的 `visible` 属性
+     */
+    visible?: boolean;
+  }
+  interface DrawerProps {
+    /**
+     * `antd` 的 `Drawer` 组件的 `visible` 属性
+     */
+    visible?: boolean;
+  }
+}
+
+// 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
+export {};
+```

package.json

@@ -131,11 +131,13 @@
     "@dnd-kit/core": "^6",
     "@dnd-kit/modifiers": "^6",
     "@dnd-kit/utilities": "^3",
-    "antd": ">=4.23.0 || >=5.3.0",
-    "antd-mobile": "^5",
+    "antd": "^4.7.0 || ^5.3.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
+  "optionalDependencies": {
+    "antd-mobile": "^5"
+  },
   "packageManager": "pnpm@8.6.2",
   "publishConfig": {
     "access": "public",

src/drawer/index.tsx

@@ -2,13 +2,37 @@ import type { DrawerProps as AntdDrawerProps } from 'antd';
 import { Drawer as AntdDrawer } from 'antd';
 import type { PropsWithModalEnhanced, UseModalEnhancedProps } from '../hooks';
 import { useModalEnhanced } from '../hooks';
+import useMergeOpen from '../hooks/useMergeOpen';
 import usePrefixCls from '../hooks/usePrefixCls';
 import type { AnyObj } from '../types';
 
 /** @internal */
 type CloseCallback = Pick<AntdDrawerProps, 'onClose'>;
 
-export type DrawerProps = Omit<AntdDrawerProps, 'visible' | 'children'> & UseModalEnhancedProps;
+/**
+ * @description 方便用户自定义 `Modal` 的 `props`
+ * @see [easy-antd-modal/typescript](https://wxh16144.github.io/easy-antd-modal/typescript)
+ * @example
+ * ```tsx
+ * // 这段可以直接添加到你的任何 `.ts` 文件中，例如 `antd-modal.ts`
+ * // 也可以添加到一个 `.d.ts` 文件中。确保这个文件包含在项目的 `tsconfig.json` 中的 "file" 字段内。
+ * import 'easy-antd-modal'
+ *
+ * declare module 'easy-antd-modal' {
+ *  interface DrawerProps {
+ *    // `antd` 的 `Modal` 组件的 `visible` 属性
+ *    visible?: boolean
+ *  }
+ * }
+ *
+ * // 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
+ * export {}
+ * ```
+ */
+export interface DrawerProps
+  extends Omit<AntdDrawerProps, 'visible' | 'children' | 'onClick'>,
+    UseModalEnhancedProps {}
+
 /**
  * @description 方便用户自定义 `Modal` 的 `props`
  * @since 1.6.0
@@ -28,10 +52,15 @@ const Drawer = (props: DrawerProps) => {
     close('onClose', event);
   };
 
+  const openProp = useMergeOpen({
+    visible,
+    ...props,
+  });
+
   return (
     <>
       {trigger}
-      <AntdDrawer open={visible} {...restProps} onClose={handleModalCancel} prefixCls={prefixCls}>
+      <AntdDrawer {...openProp} {...restProps} onClose={handleModalCancel} prefixCls={prefixCls}>
         {content}
       </AntdDrawer>
     </>

src/hooks/useMergeOpen.ts

@@ -0,0 +1,29 @@
+import { version } from 'antd';
+
+interface UseMergeOpenProps {
+  visible?: boolean;
+  open?: boolean;
+}
+
+export const CAN_USE_OPEN = function canUseOpen() {
+  const [major, minor] = (typeof version === 'string' ? version : '0.0.0')
+    .split('.')
+    .map((v) => parseInt(v, 10));
+
+  return (
+    major >= 5 || // antd v5
+    (major === 4 && minor >= 23) // antd v4.23.0+
+  );
+};
+
+const useMergeOpen = (props: UseMergeOpenProps) => {
+  const { visible, open = visible } = props;
+
+  const key = CAN_USE_OPEN() ? 'open' : 'visible';
+
+  return {
+    [key]: open,
+  };
+};
+
+export default useMergeOpen;