= {
- enhancedAction?: ModalEnhancedAction;
-} & T;
-
-type TriggerType = React.ReactNode;
-type ContentType =
- | React.ReactNode
- // eslint-disable-next-line @typescript-eslint/ban-types
- | ((props: PropsWithModalEnhanced
) => React.ReactNode);
-
-export interface UseModalEnhancedProps {
- defaultOpen?: boolean;
- onClick?: (e: React.MouseEvent, action: ModalEnhancedAction) => void;
- actionRef?: React.RefObject;
- content?: ContentType;
- trigger?: TriggerType;
- children?: ContentType | TriggerType;
-}
-
-export interface ModalEnhancedAction {
- close: () => void;
- open: () => void;
-}
-
-function useModalEnhanced(props: UseModalEnhancedProps = {}) {
- const { onClick, actionRef: actionRefProp, defaultOpen } = props;
-
- const [visible, { setTrue: open, setFalse: close }] = useBoolean(defaultOpen);
- const actionRef = React.useRef({ open, close });
- const { triggerProps, contentProps } = useEasyAntdModal();
-
- const mergedTrigger = props[triggerProps!] as TriggerType;
- const mergedContent = props[contentProps!] as ContentType;
-
- React.useImperativeHandle(actionRefProp, () => actionRef.current);
-
- const handleClick = (event: React.MouseEvent) => {
- if (onClick) return onClick(event, actionRef.current);
- return open();
- };
-
- // ======================== Trigger ========================
- let trigger = mergedTrigger;
- if (React.isValidElement(mergedTrigger))
- trigger = React.cloneElement(mergedTrigger, { onClick: handleClick });
-
- // ======================== Content ========================
- let contentNode: React.ReactNode = mergedContent as React.ReactNode;
- if (isElement>(contentNode) && !isDOMTypeElement(contentNode)) {
- contentNode = React.cloneElement>(contentNode, {
- enhancedAction: actionRef.current,
- });
- } else if (typeof mergedContent === 'function') {
- contentNode = (mergedContent as AnyFunction)({
- enhancedAction: actionRef.current,
- });
- }
-
- const contextHolder = { trigger, content: contentNode };
- const action = { open, close };
- const resetProps = omit(props, [
- 'defaultOpen',
- 'onClick',
- 'actionRef',
- 'content',
- 'trigger',
- 'children',
- ]);
-
- return [visible, action, contextHolder, resetProps] as const;
-}
-
-export default useModalEnhanced;
diff --git a/src/hooks/usePrefixCls.ts b/src/hooks/usePrefixCls.ts
deleted file mode 100644
index 0bb5915..0000000
--- a/src/hooks/usePrefixCls.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ConfigProvider as AntdConfigProvider, version } from 'antd';
-import * as React from 'react';
-
-/** @@Internal 仅仅用于内部组件开发 */
-function usePrefixCls(suffixCls: string, customPrefixCls?: string): string {
- const { getPrefixCls } = React.useContext(AntdConfigProvider.ConfigContext);
-
- if (customPrefixCls) {
- return customPrefixCls;
- }
-
- /**
- * 5.x 版本的 antd 会自动加上 easy- 前缀， 可以和 antd 的样式区分开。
- * 4.x 使用的是 less，不是很好处理，直接复用 antd 的样式即可。可以在稳定后直接删除对 4.x 的支持。
- * 二次开发约定 xxx-(antd 的组件 cls 逻辑)， 所以处理 4.x 时可以直接 pop() 获取最后一个即可。
- */
- const _prefixCls = version.startsWith('5') ? 'easy-' : '';
- let _suffixCls = version.startsWith('5') ? suffixCls : suffixCls.split('-').pop() ?? '';
-
- return `${_prefixCls}${getPrefixCls()}-${_suffixCls}`;
-}
-
-export default usePrefixCls;
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index f5c0ba7..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { EasyAntdModalProvider, useEasyAntdModal } from './context';
-import DragModal from './drag-modal';
-import Drawer from './drawer';
-import Modal from './modal';
-
-export * from './hooks';
-export * from './types';
-export * from './util';
-
-export * from './drag-modal';
-export * from './drawer';
-export * from './modal';
-
-export {
- DragModal,
- Drawer,
- EasyAntdModalProvider,
- Modal,
- // ====== Hooks ======
- useEasyAntdModal,
-};
-
-export default Modal;
-
-export * as AntdMobile from './mobile';
-export const Antd = {
- Modal,
- Drawer,
-};
diff --git a/src/mobile/Dialog.tsx b/src/mobile/Dialog.tsx
deleted file mode 100644
index 546b5a4..0000000
--- a/src/mobile/Dialog.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Dialog as AntdMDialog, type DialogProps as AntdMDialogProps } from 'antd-mobile';
-import { useModalEnhanced, type UseModalEnhancedProps } from '../hooks';
-
-export type DialogProps = Omit & UseModalEnhancedProps;
-
-function Modal(props: DialogProps) {
- const [visible, { close }, { trigger, content }, restProps] = useModalEnhanced(props);
-
- const handleClose: AntdMDialogProps['onClose'] = () => {
- props?.onClose?.();
- close();
- };
-
- return (
- <>
- {trigger}
-
- {content}
-
-
- );
-}
-
-export default Mask;
diff --git a/src/mobile/Modal.tsx b/src/mobile/Modal.tsx
deleted file mode 100644
index c57b97e..0000000
--- a/src/mobile/Modal.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Modal as AntdMModal, type ModalProps as AntdMModalProps } from 'antd-mobile';
-import { useModalEnhanced, type UseModalEnhancedProps } from '../hooks';
-
-export type ModalProps = Omit & UseModalEnhancedProps;
-
-function Modal(props: ModalProps) {
- const [visible, { close }, { trigger, content }, restProps] = useModalEnhanced(props);
-
- const handleClose: AntdMModalProps['onClose'] = () => {
- props?.onClose?.();
- close();
- };
-
- return (
- <>
- {trigger}
- &
- UseModalEnhancedProps & {
- popupClick?: AntdMPopupProps['onClick']; // antd-mobile Popup onClick
- };
-
-function Popup(props: PopupProps) {
- const { popupClick, ...rawProps } = props;
- const [visible, { close }, { trigger, content }, restProps] = useModalEnhanced(rawProps);
-
- const handleClose: AntdMPopupProps['onClose'] = () => {
- props?.onClose?.();
- close();
- };
-
- return (
- <>
- {trigger}
-
- {content}
-
-
- );
-}
-
-export default Popup;
diff --git a/src/mobile/index.tsx b/src/mobile/index.tsx
deleted file mode 100644
index dfc6a3c..0000000
--- a/src/mobile/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export { default as Modal } from './Modal';
-export type { ModalProps } from './Modal';
-
-export { default as Mask } from './Mask';
-export type { MaskProps } from './Mask';
-
-export { default as Popup } from './Popup';
-export type { PopupProps } from './Popup';
-
-export { default as Dialog } from './Dialog';
-export type { DialogProps } from './Dialog';
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
deleted file mode 100644
index 957f8c7..0000000
--- a/src/modal/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { ModalProps as AntdModalProps } from 'antd';
-import { Modal as AntdModal } from 'antd';
-import { UseModalEnhancedProps, useModalEnhanced } from '../hooks';
-import usePrefixCls from '../hooks/usePrefixCls';
-
-export type ModalProps = Omit & UseModalEnhancedProps;
-
-const Modal = (props: ModalProps) => {
- const prefixCls = usePrefixCls('modal', props.prefixCls);
-
- const [visible, { close }, { trigger, content }, restProps] = useModalEnhanced(props);
-
- const handleModalOk: ModalProps['onOk'] = (event) => {
- props.onOk?.(event);
- close();
- };
-
- const handleModalCancel: ModalProps['onCancel'] = (event) => {
- props.onCancel?.(event);
- close();
- };
-
- return (
- <>
- {trigger}
-
- {content}
-
-
- );
-};
-
-/**
- * Antd 的一些静态方法（不推荐使用，为什么：https://ant.design/docs/blog/why-not-static-cn)
- */
-type _InternalModalType = typeof AntdModal;
-let initialized: boolean = false;
-
-if (!initialized) {
- for (const key in AntdModal) {
- if (Object.prototype.hasOwnProperty.call(AntdModal, key)) {
- (Modal as any)[key] = (AntdModal as any)[key];
- }
- }
- initialized = true;
-}
-
-// fixme: 类型体操太累了
-export default Modal as typeof Modal & Omit<_InternalModalType, keyof AntdModalProps>;
diff --git a/src/types/any.ts b/src/types/any.ts
deleted file mode 100644
index 17755eb..0000000
--- a/src/types/any.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type AnyFunction = (...args: any[]) => any;
-export type AnyObj = Record;
diff --git a/src/types/index.ts b/src/types/index.ts
deleted file mode 100644
index 1efbaf8..0000000
--- a/src/types/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './any';
-export * from './require-key';
diff --git a/src/types/require-key.ts b/src/types/require-key.ts
deleted file mode 100644
index bdac3e6..0000000
--- a/src/types/require-key.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type RequireKeys = Required> & Omit;
diff --git a/src/util/index.ts b/src/util/index.ts
deleted file mode 100644
index 7a535b7..0000000
--- a/src/util/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './omit';
-export * from './react-is';
diff --git a/src/util/omit.ts b/src/util/omit.ts
deleted file mode 100644
index c2efd26..0000000
--- a/src/util/omit.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// copied from https://github.com/react-component/util/blob/306aff37660b5d48fcb34e34ef12f76711a55c2b/src/omit.ts
-export function omit(
- obj: T,
- fields: K[] | readonly K[],
-): Omit {
- const clone = { ...obj };
-
- if (Array.isArray(fields)) {
- fields.forEach((key) => {
- delete clone[key];
- });
- }
-
- return clone;
-}
diff --git a/src/util/react-is.ts b/src/util/react-is.ts
deleted file mode 100644
index 4f88f47..0000000
--- a/src/util/react-is.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { DOMElement, HTMLAttributes, ReactElement, SVGAttributes } from 'react';
-import { isValidElement } from 'react';
-
-export function isElement(element: any): element is ReactElement
{
- return isValidElement(element);
-}
-
-export function isDOMTypeElement
| SVGAttributes, T extends Element>(
- element: any,
-): element is DOMElement {
- return isElement(element) && typeof element.type === 'string';
-}
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
deleted file mode 100644
index 7364a32..0000000
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ /dev/null
@@ -1,465 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`renders advanced-content/ContentForm.tsx correctly 1`] = `
-
-`;
-
-exports[`renders advanced-content/drawer.tsx correctly 1`] = `
-
-
-
- Open Form Drawer
-
-
-
-`;
-
-exports[`renders advanced-content/modal.tsx correctly 1`] = `
-
-
-
- Open Form Modal
-
-
-
-`;
-
-exports[`renders drag-modal/basic.tsx correctly 1`] = `
-
-
-
- Open Drag Modal
-
-
-
-
- To pick up a draggable item, press the space bar.
- While dragging, use the arrow keys to move the item.
- Press space again to drop the item in its new position, or press escape to cancel.
-
-
-
-
-
-
- Open Drawer
-
-
-
-`;
-
-exports[`renders mobile-dialog/basic.tsx correctly 1`] = `
-
-
-
- Open Dialog
-
-
-
-`;
-
-exports[`renders mobile-mask/basic.tsx correctly 1`] = `
-
-
-
- Open Mask
-
-
-
-`;
-
-exports[`renders mobile-modal/basic.tsx correctly 1`] = `
-
-
-
- Open Modal
-
-
-
-`;
-
-exports[`renders mobile-popup/basic.tsx correctly 1`] = `
-
-
-
- Open Popup
-
-
-
-`;
-
-exports[`renders modal/action-ref.tsx correctly 1`] = `
-
-
-
- Open Modal
-
-
-
-`;
-
-exports[`renders modal/trigger-event.tsx correctly 1`] = `
-
-
-
- Open Modal
-
-
-
-`;
-
-exports[`renders provider-demo/case01.tsx correctly 1`] = `
-
-
-
- Open Modal
-
-
-
-`;
-
-exports[`renders provider-demo/case02.tsx correctly 1`] = `
-
-
-
- Open Modal
-
-
-
-`;
diff --git a/tests/__snapshots__/drag-modal.test.tsx.snap b/tests/__snapshots__/drag-modal.test.tsx.snap
deleted file mode 100644
index 4ebbe8d..0000000
--- a/tests/__snapshots__/drag-modal.test.tsx.snap
+++ /dev/null
@@ -1,104 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DragModal > DragModal 组件可以正常渲染 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I ❤️ antd
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I ❤️ antd
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I ❤️ antd
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I ❤️ antd
-
-
-
-
-
- mask content
-
-`;
diff --git a/tests/antd-mobile/dialog.test.tsx b/tests/antd-mobile/dialog.test.tsx
deleted file mode 100644
index 32cdc21..0000000
--- a/tests/antd-mobile/dialog.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Dialog } from 'easy-antd-modal/mobile';
-import { fireEvent, render, screen, waitFakeTimer } from '../utils';
-
-describe('Mobile Dialog', () => {
- it('默认正常工作', async () => {
- const { getByRole } = render(
- open}>content ,
- );
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
- await waitFakeTimer();
- expect(screen.getByText('content')).toBeInTheDocument();
- });
-
- it('defaultOpen 正常工作', async () => {
- const onClean = vi.fn();
- const { rerender } = render(
-
- content
- ,
- );
- expect(screen.getByText('content')).toBeInTheDocument();
- const mask = document.querySelector('.adm-center-popup-mask');
- expect(mask).toBeTruthy();
- fireEvent.click(mask!); // 默认点击不会关闭
- await waitFakeTimer();
- expect(onClean).not.toHaveBeenCalled();
- expect(screen.queryByText('content')).toBeInTheDocument();
-
- rerender(
-
- content
- ,
- );
- fireEvent.click(mask!); // 点击关闭
- await waitFakeTimer();
- expect(onClean).toHaveBeenCalled();
- expect(screen.queryByText('content')).not.toBeInTheDocument();
- });
-});
diff --git a/tests/antd-mobile/index.test.tsx b/tests/antd-mobile/index.test.tsx
deleted file mode 100644
index 3026a94..0000000
--- a/tests/antd-mobile/index.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AntdMobile } from 'easy-antd-modal';
-
-import { Dialog, Mask, Modal, Popup } from 'easy-antd-modal/mobile';
-
-describe('antd Mobile', () => {
- it('导出正常', () => {
- expect(AntdMobile).toBeDefined();
- ['Dialog', 'Mask', 'Modal', 'Popup'].forEach((key) => {
- expect(AntdMobile[key as keyof typeof AntdMobile]).toBeDefined();
- });
- });
-
- it('./mobile 导出正常', () => {
- expect(Dialog).toBeDefined();
- expect(Mask).toBeDefined();
- expect(Modal).toBeDefined();
- expect(Popup).toBeDefined();
- });
-});
diff --git a/tests/antd-mobile/mask.test.tsx b/tests/antd-mobile/mask.test.tsx
deleted file mode 100644
index b616311..0000000
--- a/tests/antd-mobile/mask.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Mask } from 'easy-antd-modal/mobile';
-import { fireEvent, render, waitFakeTimer, waitFor } from '../utils';
-
-describe('Mobile Mask', () => {
- it('默认正常工作', async () => {
- const { getByRole } = render(
- open}>mask content ,
- );
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
-
- await waitFor(
- () => {
- expect(document.querySelector('.adm-mask-content')).toBeVisible();
- },
- { timeout: 1000 },
- );
- });
-
- it('defaultOpen 正常工作', async () => {
- render(
- open}>
- mask content
- ,
- );
- await waitFakeTimer();
- expect(document.querySelector('.adm-mask-content')).toMatchSnapshot();
- });
-
- it('mobile onMaskClick 正常工作', async () => {
- const onMaskClick = vi.fn();
- render(
- open} onMaskClick={onMaskClick}>
- mask content
- ,
- );
- const mask = document.querySelector('.adm-mask');
- expect(mask).toBeVisible();
- fireEvent.click(mask!);
-
- expect(onMaskClick).toBeCalledTimes(1);
- // event 参数
- expect(onMaskClick.mock.calls[0][0]).toBeDefined();
-
- // 不会关闭 mask
- expect(document.querySelector('.adm-mask-content')).toBeVisible();
- });
-
- it('mobile afterClose 正常工作', async () => {
- const afterClose = vi.fn();
- const { getByRole } = render(
- open} afterClose={afterClose}>
- mask content
- ,
- );
-
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
- await waitFakeTimer();
-
- const mask = document.querySelector('.adm-mask');
- expect(mask).toBeVisible();
- fireEvent.click(mask!);
- await waitFakeTimer();
-
- expect(afterClose).toBeCalledTimes(1);
- expect(document.querySelector('.adm-mask-content')).not.toBeVisible();
- });
-});
diff --git a/tests/antd-mobile/modal.test.tsx b/tests/antd-mobile/modal.test.tsx
deleted file mode 100644
index efd4bb1..0000000
--- a/tests/antd-mobile/modal.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Modal } from 'easy-antd-modal/mobile';
-import { fireEvent, render, screen, waitFakeTimer } from '../utils';
-
-describe('Mobile Modal', () => {
- it('默认正常工作', async () => {
- const { getByRole } = render(
- open}>content ,
- );
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
- await waitFakeTimer();
- expect(screen.getByText('content')).toBeInTheDocument();
- });
-
- it('defaultOpen 正常工作', async () => {
- const onClean = vi.fn();
- const { rerender } = render(
-
- content
- ,
- );
- expect(screen.getByText('content')).toBeInTheDocument();
- const mask = document.querySelector('.adm-center-popup-mask');
- expect(mask).toBeTruthy();
- fireEvent.click(mask!); // 默认点击不会关闭
- await waitFakeTimer();
- expect(onClean).not.toHaveBeenCalled();
- expect(screen.queryByText('content')).toBeInTheDocument();
-
- rerender(
-
- content
- ,
- );
- fireEvent.click(mask!); // 点击关闭
- await waitFakeTimer();
- expect(onClean).toHaveBeenCalled();
- expect(screen.queryByText('content')).not.toBeInTheDocument();
- });
-});
diff --git a/tests/antd-mobile/popup.test.tsx b/tests/antd-mobile/popup.test.tsx
deleted file mode 100644
index b9ddd22..0000000
--- a/tests/antd-mobile/popup.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Popup } from 'easy-antd-modal/mobile';
-import { fireEvent, render, screen, waitFakeTimer } from '../utils';
-
-describe('Mobile Popup', () => {
- it('默认正常工作', async () => {
- const { getByRole } = render(
- open}>content ,
- );
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
- await waitFakeTimer();
- expect(screen.getByText('content')).toBeInTheDocument();
- });
-
- it('defaultOpen 正常工作', async () => {
- const onClean = vi.fn();
- const { rerender } = render(
-
- content
- ,
- );
- expect(screen.getByText('content')).toBeInTheDocument();
- const mask = document.querySelector('.adm-mask');
- expect(mask).toBeTruthy();
- fireEvent.click(mask!); // 默认点击不会关闭
- await waitFakeTimer();
- expect(onClean).not.toHaveBeenCalled();
- expect(screen.queryByText('content')).toBeInTheDocument();
-
- rerender(
-
- content
- ,
- );
- fireEvent.click(mask!); // 点击关闭
- await waitFakeTimer();
- expect(onClean).toHaveBeenCalled();
- expect(screen.queryByText('content')).not.toBeInTheDocument();
- });
-});
diff --git a/tests/demo.test.tsx b/tests/demo.test.tsx
index b5f1d4b..b0b4be8 100644
--- a/tests/demo.test.tsx
+++ b/tests/demo.test.tsx
@@ -25,7 +25,7 @@ const allExamples = fg.globSync('**/[!_]*.tsx', {
});
allExamples.forEach((file) => {
- it(`renders ${file} correctly`, async () => {
+ it.skip(`renders ${file} correctly`, async () => {
const Demo = await import(path.join(examplePath, file));
// console.log(`测试组件${dir} DEMO:${demoName}`);
diff --git a/tests/drag-modal.test.tsx b/tests/drag-modal.test.tsx
deleted file mode 100644
index 81f07ac..0000000
--- a/tests/drag-modal.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DragModal } from 'easy-antd-modal';
-import { fireEvent, render, waitFakeTimer } from './utils';
-
-describe('DragModal', () => {
- beforeEach(() => {
- vi.useFakeTimers();
- });
-
- afterEach(() => {
- vi.useRealTimers();
- });
-
- it('导出 DragModal 组件', () => {
- expect(DragModal).toBeDefined();
- });
-
- it('DragModal 组件可以正常渲染', () => {
- const { getByRole } = render(open}
- afterOpenChange={afterOpenChange}
- />,
- );
-
- const button = getByRole('button');
- expect(button).toHaveTextContent('open');
- fireEvent.click(button);
- await waitFakeTimer();
-
- expect(afterOpenChange).toHaveBeenCalledWith(true);
- expect(getByRole('dialog')).toBeVisible();
- });
-
- // TODO: 拖拽操作的用例好难写，有没有大佬救救我
-});
diff --git a/tests/drawer.test.tsx b/tests/drawer.test.tsx
deleted file mode 100644
index 499311f..0000000
--- a/tests/drawer.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Button } from 'antd';
-import { Drawer, PropsWithModalEnhanced } from 'easy-antd-modal';
-import React from 'react';
-import { fireEvent, render, screen, waitFakeTimer } from './utils';
-
-describe('Drawer', () => {
- it('导出 Drawer', () => {
- expect(Drawer).toBeDefined();
- });
-
- it('Drawer content 中会被传入 ModalEnhancedAction', async () => {
- const propsEnhancer = vi.fn();
- const onClose = vi.fn();
- const unMount = vi.fn();
- const Content: React.FC = (props) => {
- React.useEffect(() => {
- propsEnhancer(props);
-
- return unMount;
- }, []);
- return props.enhancedAction?.close()}>Close Modal ;
- };
-
- render(
-
- ,
- );
-
- expect(propsEnhancer).toHaveBeenCalled();
- // props 中包含 enhancedAction
- expect(propsEnhancer.mock.calls[0][0]).toEqual(
- expect.objectContaining({
- enhancedAction: expect.objectContaining({
- open: expect.any(Function),
- close: expect.any(Function),
- }),
- }),
- );
-
- const content = screen.getByText('Close Modal');
- expect(content).toBeInTheDocument();
- fireEvent.click(content!);
- await waitFakeTimer();
-
- // 弹窗 content 内调用 enhancedAction.close() 会关闭弹窗，但不会触发 onCancel
- expect(onClose).not.toHaveBeenCalled();
- expect(unMount).toHaveBeenCalled();
- });
-
- it('通过蒙层可以关闭，并且触发 onClose 方法', async () => {
- const onClose = vi.fn();
-
- render(
-
- I ❤️ antd
- ,
- );
-
- const mask = document.querySelector('.easy-ant-drawer-mask');
- expect(mask).toBeTruthy();
- fireEvent.click(mask!);
- await waitFakeTimer();
-
- expect(onClose).toHaveBeenCalled();
- });
-
- describe('props.prefixCls', () => {
- it('默认', () => {
- const { getByRole } = render(I ❤️ antd );
-
- expect(document.querySelector('.easy-ant-drawer')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
-
- it('支持自定义', () => {
- const { getByRole } = render(
-
- I ❤️ antd
- ,
- );
-
- expect(document.querySelector('.test-prefix')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
- });
-});
diff --git a/tests/hooks/useBoolean.test.tsx b/tests/hooks/useBoolean.test.tsx
deleted file mode 100644
index 479173d..0000000
--- a/tests/hooks/useBoolean.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// copied from: https://github.com/alibaba/hooks/blob/86ec5968c75df595432a45ddc8d224d008f41f3d/packages/hooks/src/useBoolean/__tests__/index.test.ts
-import { useBoolean } from 'easy-antd-modal';
-import { act, renderHook } from '../utils';
-
-const setUp = (defaultValue?: boolean) => renderHook(() => useBoolean(defaultValue));
-
-describe('useBoolean', () => {
- it('test on methods', async () => {
- const { result } = setUp();
- expect(result.current[0]).toBe(false);
- act(() => {
- result.current[1].setTrue();
- });
- expect(result.current[0]).toBe(true);
- act(() => {
- result.current[1].setFalse();
- });
- expect(result.current[0]).toBe(false);
- act(() => {
- result.current[1].toggle();
- });
- expect(result.current[0]).toBe(true);
- act(() => {
- result.current[1].toggle();
- });
- expect(result.current[0]).toBe(false);
- });
-
- it('test on default value', () => {
- const hook1 = setUp(true);
- expect(hook1.result.current[0]).toBe(true);
- const hook2 = setUp();
- expect(hook2.result.current[0]).toBe(false);
- // @ts-ignore
- const hook3 = setUp(0);
- expect(hook3.result.current[0]).toBe(false);
- // @ts-ignore
- const hook4 = setUp('');
- expect(hook4.result.current[0]).toBe(false);
- // @ts-ignore
- const hook5 = setUp('hello');
- expect(hook5.result.current[0]).toBe(true);
- });
-});
diff --git a/tests/hooks/usePrefixCls.test.tsx b/tests/hooks/usePrefixCls.test.tsx
deleted file mode 100644
index a0dfb1b..0000000
--- a/tests/hooks/usePrefixCls.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import usePrefixCls from 'easy-antd-modal/hooks/usePrefixCls';
-
-describe('usePrefixCls', () => {
- it('默认工作 antd5', () => {
- const { result } = renderHook(() => usePrefixCls('test'));
- expect(result.current).toBe('easy-ant-test');
- });
-
- it('第二个参数', () => {
- const { result } = renderHook(() => usePrefixCls('test', 'test2'));
- expect(result.current).toBe('test2');
- });
-});
diff --git a/tests/hooks/usePrefixCls.with_antd4.test.tsx b/tests/hooks/usePrefixCls.with_antd4.test.tsx
deleted file mode 100644
index ff657c3..0000000
--- a/tests/hooks/usePrefixCls.with_antd4.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import usePrefixCls from 'easy-antd-modal/hooks/usePrefixCls';
-import { afterAll } from 'vitest';
-
-vi.mock('antd', () => vi.importActual('antd4'));
-
-afterAll(() => {
- vi.resetAllMocks();
-});
-
-describe('usePrefixCls', () => {
- it('antd4-默认也不会添加前缀', async () => {
- const { result } = renderHook(() => usePrefixCls('test'));
- expect(result.current).toBe('ant-test');
- });
-
- it('antd4-第二个参数', async () => {
- const { result } = renderHook(() => usePrefixCls('test', 'test2'));
- expect(result.current).toBe('test2');
- });
-});
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
deleted file mode 100644
index 378142a..0000000
--- a/tests/index.test.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import { Button } from 'antd';
-import DefaultExportModal, {
- Antd,
- Drawer,
- Modal,
- ModalEnhancedAction,
- PropsWithModalEnhanced,
-} from 'easy-antd-modal';
-import React from 'react';
-import { fireEvent, render, screen, waitFakeTimer } from './utils';
-
-describe('Modal', () => {
- it('默认导出为 Modal', () => {
- expect(DefaultExportModal).toBeDefined();
- expect(Modal).toBeDefined();
- expect(DefaultExportModal).toBe(Modal);
- });
-
- it('导出了 antd namespace', () => {
- expect(Antd).toBeDefined();
- expect(Antd).toEqual({
- Modal,
- Drawer,
- // DragModal, // DragModal 不属于 antd，需要导出吗？
- });
- });
-
- it('README.md 中的基础示例正常工作', async () => {
- const { getByRole } = render(
- Click Me}>
- I ❤️ antd
- ,
- );
-
- const button = getByRole('button');
- expect(button).toHaveTextContent('Click Me');
- fireEvent.click(button);
- await waitFakeTimer();
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument();
- });
-
- it('defaultOpen 正常工作', async () => {
- const onClean = vi.fn();
- render(
-
- I ❤️ antd
- ,
- );
-
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument();
- const mask = document.querySelector('.easy-ant-modal-wrap');
- expect(mask).toBeTruthy();
- fireEvent.click(mask!);
- await waitFakeTimer();
- expect(onClean).toHaveBeenCalled();
- });
-
- it('trigger 传入任意可添加 onClick 事件的组件都可以正常工作', async () => {
- const { container } = render(
- }>
- I ❤️ antd
- ,
- );
-
- const triggerNode = container.querySelector('#trigger');
- expect(triggerNode).toBeTruthy();
- fireEvent.click(triggerNode!);
- await waitFakeTimer();
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument();
- });
-
- it('触发器的 onClick 事件会被劫持', async () => {
- const onClick = vi.fn();
- const { getByRole } = render(
- Click Me}>
- I ❤️ antd
- ,
- );
-
- const button = getByRole('button');
- expect(button).toBeTruthy();
- fireEvent.click(button!);
- await waitFakeTimer();
- expect(onClick).not.toHaveBeenCalled();
- });
-
- it('触发器的 onClick 事件被 Model.onClick 代替, 并且需要手动调用打开', async () => {
- const onClick = vi.fn();
- const { getByRole } = render(
- Click Me}>
- I ❤️ antd
- ,
- );
-
- const button = getByRole('button');
- expect(button).toBeTruthy();
- fireEvent.click(button!);
- await waitFakeTimer();
- expect(onClick).toHaveBeenCalled();
-
- // 弹窗不会自动打开
- expect(screen.queryByText('I ❤️ antd')).not.toBeInTheDocument();
-
- // onClick 第二个参数为 modalAction， 包含 open 和 close 方法
- expect(onClick.mock.calls[0][1]).toEqual({
- open: expect.any(Function),
- close: expect.any(Function),
- });
-
- // 通过 modalAction.open() 打开弹窗
- onClick.mockImplementation((_, modalAction) => {
- modalAction.open();
- });
-
- fireEvent.click(button!);
- expect(onClick).toHaveBeenCalledTimes(2);
- await waitFakeTimer();
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument(); // 弹窗已经打开
- });
-
- it('可以通过 actionRef 打开弹窗', async () => {
- const ref = React.createRef();
-
- render(
- Click Me}>
- I ❤️ antd
- ,
- );
-
- expect(ref.current?.open).toBeDefined();
- expect(ref.current?.close).toBeDefined();
- ref.current!.open();
- await waitFakeTimer();
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument();
- });
-
- it('Modal content 中会被传入 ModalEnhancedAction', async () => {
- const propsEnhancer = vi.fn();
- const onClean = vi.fn();
- const unMount = vi.fn();
- const Content: React.FC = (props) => {
- React.useEffect(() => {
- propsEnhancer(props);
-
- return unMount;
- }, []);
- return props.enhancedAction?.close()}>Close Modal ;
- };
-
- render(
-
- ,
- );
-
- expect(propsEnhancer).toHaveBeenCalled();
- // props 中包含 enhancedAction
- expect(propsEnhancer.mock.calls[0][0]).toEqual(
- expect.objectContaining({
- enhancedAction: expect.objectContaining({
- open: expect.any(Function),
- close: expect.any(Function),
- }),
- }),
- );
-
- const content = screen.getByText('Close Modal');
- expect(content).toBeInTheDocument();
- fireEvent.click(content!);
- await waitFakeTimer();
-
- // 弹窗 content 内调用 enhancedAction.close() 会关闭弹窗，但不会触发 onCancel
- expect(onClean).not.toHaveBeenCalled();
- expect(unMount).toHaveBeenCalled();
- });
-
- it('点击弹窗 footer 的 ok 按钮会触发 onOk， 并且关闭弹窗', async () => {
- const onOk = vi.fn();
- const { getByRole } = render(
-
- I ❤️ antd
- ,
- );
-
- const okButton = getByRole('button', { name: 'OK' });
- expect(okButton).toBeTruthy();
- fireEvent.click(okButton!);
- await waitFakeTimer();
- expect(onOk).toHaveBeenCalled();
- expect(screen.queryByText('I ❤️ antd')).not.toBeInTheDocument();
- });
-
- it('Modal content 支持回调函数，回调函数的第一个参数为 ModalEnhancedAction', async () => {
- const propsEnhancer = vi.fn();
-
- render(
-
- {
- ((props: PropsWithModalEnhanced) => {
- propsEnhancer(props);
- return props.enhancedAction?.close()}>Close Modal ;
- }) as any
- }
- ,
- );
-
- expect(propsEnhancer).toHaveBeenCalled();
- // props 中包含 enhancedAction
- expect(propsEnhancer.mock.calls[0][0]).toEqual(
- expect.objectContaining({
- enhancedAction: expect.objectContaining({
- open: expect.any(Function),
- close: expect.any(Function),
- }),
- }),
- );
-
- const closeModalButton = screen.getByText('Close Modal');
- expect(closeModalButton).toBeTruthy();
- fireEvent.click(closeModalButton!);
- await waitFakeTimer();
- expect(closeModalButton).not.toBeInTheDocument();
- });
-
- describe('props.prefixCls', () => {
- it('默认', () => {
- const { getByRole } = render(I ❤️ antd );
-
- expect(document.querySelector('.easy-ant-modal')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
-
- it('支持自定义', () => {
- const { getByRole } = render(
-
- I ❤️ antd
- ,
- );
-
- expect(document.querySelector('.test-prefix')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
- });
-});
diff --git a/tests/index.with_antd4.test.tsx b/tests/index.with_antd4.test.tsx
deleted file mode 100644
index a8b2277..0000000
--- a/tests/index.with_antd4.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Modal from 'easy-antd-modal';
-import { render } from './utils';
-
-vi.mock('antd', () => vi.importActual('antd4'));
-
-afterAll(() => {
- vi.resetAllMocks();
-});
-
-describe('Modal with antd4', () => {
- describe('props.prefixCls', () => {
- it('默认 atnd@4 不会添加 easy-', () => {
- const { getByRole } = render(I ❤️ antd );
-
- expect(document.querySelector('.ant-modal')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
-
- it('支持自定义', () => {
- const { getByRole } = render(
-
- I ❤️ antd
- ,
- );
-
- expect(document.querySelector('.test-prefix')).toBeTruthy();
- expect(getByRole('dialog')).toMatchSnapshot();
- });
- });
-});
diff --git a/tests/provider.test.tsx b/tests/provider.test.tsx
deleted file mode 100644
index aa7b16b..0000000
--- a/tests/provider.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button } from 'antd';
-import Modal, { EasyAntdModalProvider, useEasyAntdModal } from 'easy-antd-modal';
-import React from 'react';
-import { fireEvent, render, screen, waitFakeTimer } from './utils';
-
-describe('Provider', () => {
- it('triggerProps 和 contentProps 冲突会抛出错误', () => {
- expect(() => {
- render(
-
-
- Click Me
-
- ,
- );
-
- const button = getByRole('button');
- expect(button).toHaveTextContent('Click Me');
- fireEvent.click(button);
- await waitFakeTimer();
- expect(screen.getByText('I ❤️ antd')).toBeInTheDocument();
- });
-
- it('嵌套使用默认继承父级', () => {
- const ref1 = React.createRef();
- const ref2 = React.createRef();
- const Demo = React.forwardRef((_, ref) => {
- const context = useEasyAntdModal();
- React.useImperativeHandle(ref, () => context, [context]);
- return null;
- });
-
- render(
-
-
-
- ,
- );
-
- expect(ref1.current).toEqual({
- triggerProps: 'children',
- contentProps: 'content',
- });
-
- expect(ref2.current).toEqual({
- triggerProps: 'trigger',
- contentProps: 'content',
- });
- });
-});
diff --git a/tests/static-method.test.tsx b/tests/static-method.test.tsx
deleted file mode 100644
index 3e0632d..0000000
--- a/tests/static-method.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Modal as OriginModal } from 'antd';
-import { Modal } from 'easy-antd-modal';
-
-describe('Static Methods', () => {
- [
- 'info',
- 'success',
- 'error',
- 'warning',
- 'confirm',
- // 'warn' // deprecated
- 'config',
- 'useModal',
- 'destroyAll',
- ].forEach((method) => {
- it(`Modal.${method} 被定义`, async () => {
- expect((Modal as any)[method]).toBeDefined();
-
- // 和原始的 antd Modal 一致
- expect((Modal as any)[method]).toBe((OriginModal as any)[method]);
- });
- });
-});
diff --git a/tests/utils.test.tsx b/tests/utils.test.tsx
deleted file mode 100644
index 77ef532..0000000
--- a/tests/utils.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { omit } from 'easy-antd-modal';
-import React from 'react';
-
-describe('src/util', () => {
- // copied from https://github.com/react-component/util/blob/306aff37660b5d48fcb34e34ef12f76711a55c2b/tests/omit.test.ts
- describe('omit', () => {
- it('should work', () => {
- const ret = omit({ keep: 1, ignore: 2, anotherKeep: 3 }, ['ignore']);
- expect(ret).toEqual({ keep: 1, anotherKeep: 3 });
- });
-
- it('invalidate array', () => {
- // @ts-expect-error
- const ret = omit({ bamboo: 1 }, null);
- expect(ret).toEqual({ bamboo: 1 });
- });
-
- it('readonly array', () => {
- const ret = omit({ keep: 1, ignore: 2 }, ['ignore'] as const);
- expect(ret).toEqual({ keep: 1 });
- });
- });
-
- describe('react-is', () => {
- it('isElement', () => {
- expect(true).toBeTruthy();
- expect(
).toBeTruthy();
- expect(<>).toBeTruthy();
- expect(React.createElement('div')).toBeTruthy();
- expect(React.createElement(React.Fragment)).toBeTruthy();
- expect('string').toBeTruthy();
- expect(() => void 0).toBeTruthy();
- expect({}).toBeTruthy();
- // === false
- expect(0).toBeFalsy();
- expect(false).toBeFalsy();
- expect(null).toBeFalsy();
- expect(undefined).toBeFalsy();
- expect(NaN).toBeFalsy();
- });
- });
-
- it('isDOMTypeElement', () => {
- expect(true).toBeTruthy();
- expect(
).toBeTruthy();
- expect(<>).toBeTruthy();
- expect(React.createElement('div')).toBeTruthy();
- expect(React.createElement(React.Fragment)).toBeTruthy();
- expect('string').toBeTruthy();
- expect(() => void 0).toBeTruthy();
- expect({}).toBeTruthy();
- // === false
- expect(0).toBeFalsy();
- expect(false).toBeFalsy();
- expect(null).toBeFalsy();
- expect(undefined).toBeFalsy();
- expect(NaN).toBeFalsy();
- });
-});
diff --git a/tsconfig.json b/tsconfig.json
index 0a02b2a..bc8b30a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,13 @@
{
- "include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts", "docs"],
+ "include": [
+ "packages/*/src",
+ "tests",
+ ".dumi/**/*",
+ ".dumirc.ts",
+ "*.ts",
+ "docs",
+ "vitest.config.mts"
+ ],
"compilerOptions": {
"strict": true,
"declaration": true,
@@ -11,9 +19,9 @@
"types": ["vitest/globals"],
"paths": {
"@@/*": [".dumi/tmp/*"],
- "@/*": ["src"],
- "easy-antd-modal": ["src"],
- "easy-antd-modal/*": ["src/*", "*"]
+ "@test/*": ["tests"],
+ "antd-record-hotkey-input": ["packages/antd-record-hotkey-input/src"],
+ "react-use-record-hotkey": ["packages/react-use-record-hotkey/src"]
}
}
}
diff --git a/turbo.json b/turbo.json
new file mode 100644
index 0000000..7f7cc9d
--- /dev/null
+++ b/turbo.json
@@ -0,0 +1,21 @@
+{
+ "$schema": "https://turbo.build/schema.json",
+ "pipeline": {
+ "build": {
+ "outputs": ["dist/**", "es/**", "lib/**"],
+ "dependsOn": ["^build", "lint"]
+ },
+ "test": {
+ "outputs": ["coverage/**"],
+ "dependsOn": []
+ },
+ "lint": {
+ "outputs": [],
+ "dependsOn": []
+ },
+ "dev": {
+ "cache": false,
+ "persistent": true
+ }
+ }
+}
diff --git a/vitest.config.ts b/vitest.config.mts
similarity index 58%
rename from vitest.config.ts
rename to vitest.config.mts
index 90aacbf..91936ba 100644
--- a/vitest.config.ts
+++ b/vitest.config.mts
@@ -1,6 +1,5 @@
import { resolve } from 'path';
import { defineConfig } from 'vitest/config';
-import { name } from './package.json';
export default defineConfig({
test: {
@@ -9,11 +8,12 @@ export default defineConfig({
globals: true,
css: true,
alias: {
- [name]: resolve(__dirname, './src'),
+ 'antd-record-hotkey-input': resolve(__dirname, './packages/antd-record-hotkey-input/src'),
+ 'react-use-record-hotkey': resolve(__dirname, './packages/react-use-record-hotkey/src'),
},
coverage: {
reporter: ['text', 'text-summary', 'json', 'lcov'],
- include: ['src/**/*'],
+ include: ['packages/*/src/**/*'],
},
},
});