chore: 完善 Modal、Popup 指令调用

packages/zarm/src/__tests__/index.test.ts

@@ -260,6 +260,7 @@ describe('index', () => {
         "Modal": Object {
           "$$typeof": Symbol(react.forward_ref),
           "alert": [Function],
+          "clear": [Function],
           "confirm": [Function],
           "defaultProps": Object {
             "actions": Array [],
@@ -273,6 +274,7 @@ describe('index', () => {
             "width": "70%",
           },
           "render": [Function],
+          "show": [Function],
         },
         "NavBar": Object {
           "$$typeof": Symbol(react.forward_ref),
@@ -336,6 +338,7 @@ describe('index', () => {
         },
         "Popup": Object {
           "$$typeof": Symbol(react.forward_ref),
+          "clear": [Function],
           "defaultProps": Object {
             "destroy": true,
             "direction": "bottom",
@@ -344,6 +347,7 @@ describe('index', () => {
             "visible": false,
           },
           "render": [Function],
+          "show": [Function],
         },
         "Progress": Object {
           "$$typeof": Symbol(react.forward_ref),

packages/zarm/src/config-provider/locale/en_US.ts

@@ -1,25 +1,23 @@
 import ActionSheet from '../../action-sheet/locale/en_US';
-import Alert from '../../alert/locale/en_US';
-import Confirm from '../../confirm/locale/en_US';
-import DatePicker from '../../date-picker/locale/en_US';
+import Calendar from '../../calendar/locale/en_US';
+import CascaderView from '../../cascader-view/locale/en_US';
+import Cascader from '../../cascader/locale/en_US';
 import DatePickerView from '../../date-picker-view/locale/en_US';
+import DatePicker from '../../date-picker/locale/en_US';
 import DateSelect from '../../date-select/locale/en_US';
+import ImagePreview from '../../image-preview/locale/en_US';
+import Image from '../../image/locale/en_US';
+import Keyboard from '../../keyboard/locale/en_US';
+import Modal from '../../modal/locale/en_US';
 import Picker from '../../picker/locale/en_US';
-import Cascader from '../../cascader/locale/en_US';
-import CascaderView from '../../cascader-view/locale/en_US';
 import Pull from '../../pull/locale/en_US';
 import SearchBar from '../../search-bar/locale/en_US';
 import Select from '../../select/locale/en_US';
-import Keyboard from '../../keyboard/locale/en_US';
-import ImagePreview from '../../image-preview/locale/en_US';
-import Image from '../../image/locale/en_US';
-import Calendar from '../../calendar/locale/en_US';
 
 export default {
   locale: 'en-US',
   ActionSheet,
-  Alert,
-  Confirm,
+  Modal,
   DatePicker,
   DatePickerView,
   DateSelect,

packages/zarm/src/config-provider/locale/zh_CN.ts

@@ -1,25 +1,23 @@
 import ActionSheet from '../../action-sheet/locale/zh_CN';
-import Alert from '../../alert/locale/zh_CN';
-import Confirm from '../../confirm/locale/zh_CN';
-import DatePicker from '../../date-picker/locale/zh_CN';
+import Calendar from '../../calendar/locale/zh_CN';
+import CascaderView from '../../cascader-view/locale/zh_CN';
+import Cascader from '../../cascader/locale/zh_CN';
 import DatePickerView from '../../date-picker-view/locale/zh_CN';
+import DatePicker from '../../date-picker/locale/zh_CN';
 import DateSelect from '../../date-select/locale/zh_CN';
+import ImagePreview from '../../image-preview/locale/zh_CN';
+import Image from '../../image/locale/zh_CN';
+import Keyboard from '../../keyboard/locale/zh_CN';
+import Modal from '../../modal/locale/zh_CN';
 import Picker from '../../picker/locale/zh_CN';
-import Cascader from '../../cascader/locale/zh_CN';
-import CascaderView from '../../cascader-view/locale/zh_CN';
 import Pull from '../../pull/locale/zh_CN';
 import SearchBar from '../../search-bar/locale/zh_CN';
 import Select from '../../select/locale/zh_CN';
-import Keyboard from '../../keyboard/locale/zh_CN';
-import ImagePreview from '../../image-preview/locale/zh_CN';
-import Image from '../../image/locale/zh_CN';
-import Calendar from '../../calendar/locale/zh_CN';
 
 export default {
   locale: 'zh-CN',
   ActionSheet,
-  Alert,
-  Confirm,
+  Modal,
   DatePicker,
   DatePickerView,
   DateSelect,

packages/zarm/src/index.ts

@@ -2,8 +2,6 @@ export { default as ActionSheet } from './action-sheet';
 export type { ActionSheetCssVars, ActionSheetItemProps, ActionSheetProps } from './action-sheet';
 export { default as Affix } from './affix';
 export type { AffixCssVars, AffixProps } from './affix';
-// export { default as Alert } from './alert';
-export type { AlertProps } from './alert';
 export { default as BackTop } from './back-top';
 export type { BackTopCssVars, BackTopProps } from './back-top';
 export { default as Badge } from './badge';
@@ -30,13 +28,11 @@ export { default as Collapse } from './collapse';
 export type { CollapseItemProps, CollapseProps } from './collapse';
 export { default as ConfigProvider } from './config-provider';
 export type { ConfigProviderProps } from './config-provider';
-export type { ConfirmProps } from './confirm';
 export { default as CustomInput } from './custom-input';
 export type { CustomInputCssVars, CustomInputProps } from './custom-input';
 export { default as DatePicker } from './date-picker';
 export type { DatePickerProps } from './date-picker';
 export { default as DatePickerView } from './date-picker-view';
-// export { default as Confirm } from './confirm';
 export type { DatePickerViewProps } from './date-picker-view';
 export { default as DateSelect } from './date-select';
 export type { DateSelectProps } from './date-select';
@@ -66,7 +62,7 @@ export type { MaskCssVars, MaskProps } from './mask';
 export { default as Message } from './message';
 export type { MessageCssVars, MessageProps } from './message';
 export { default as Modal } from './modal';
-export type { ModalCssVars, ModalProps } from './modal';
+export type { ModalCssVars, ModalProps, ModalShowProps, ModalAlertProps, ModalConfirmProps } from './modal';
 export { default as NavBar } from './nav-bar';
 export type { NavBarCssVars, NavBarProps } from './nav-bar';
 export { default as NoticeBar } from './notice-bar';
@@ -81,7 +77,7 @@ export { default as PinchZoom } from './pinch-zoom';
 export type { PinchZoomProps } from './pinch-zoom';
 export { default as Popper } from './popper';
 export { default as Popup } from './popup';
-export type { PopupProps } from './popup';
+export type { PopupProps, PopupShowProps } from './popup';
 export { default as Progress } from './progress';
 export type { ProgressCssVars, ProgressProps } from './progress';
 export { default as Pull } from './pull';

packages/zarm/src/modal/Alert.tsx

@@ -1,21 +1,34 @@
+import { createBEM } from '@zarm-design/bem';
 import * as React from 'react';
-import type { AlertProps } from '../alert';
-import Alert from '../alert';
-import { renderImperatively } from '../utils/dom';
+import { getRuntimeConfig } from '../config-provider';
+import { ModalShowProps, show } from './methods';
 
-const alert = (props: Omit<AlertProps, 'visible'>) => {
+export interface ModalAlertProps extends Omit<ModalShowProps, 'actions'> {
+  confirmText?: React.ReactNode;
+  onConfirm?: () => boolean | void | Promise<boolean | void>;
+}
+
+export const alert = (props: ModalAlertProps) => {
+  const { className, animationType = 'zoom', confirmText, onConfirm, ...rest } = props;
+  const { prefixCls, locale } = getRuntimeConfig();
+  const bem = createBEM('alert', { prefixCls });
   return new Promise((resolve) => {
-    const { close } = renderImperatively(
-      <Alert
-        {...props}
-        onConfirm={async () => {
-          const result = await props.onConfirm?.();
-          if (result === false) return;
-          close();
-          resolve(null);
-        }}
-      />,
-    );
+    const { close } = show({
+      ...rest,
+      className: bem([className]),
+      animationType,
+      actions: [
+        {
+          text: confirmText || locale?.Modal.confirmText,
+          onClick: async () => {
+            const result = await props.onConfirm?.();
+            if (result === false) return;
+            close();
+            resolve(null);
+          },
+        },
+      ],
+    });
   });
 };