feat: add dialog.alert

packages/dialog/alert.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { DialogProps } from '@/dialog/dialog';
+import show from '@/dialog/show';
+
+export type DialogAlertProps = Omit<DialogProps, 'visible' | 'closeOnAction' | 'actions'> & {
+  confirmText?: React.ReactNode;
+  onConfirm?: () => void;
+};
+
+const alert = (props: DialogAlertProps) => {
+  const { confirmText = '确认' } = props;
+
+  return show({
+    ...props,
+    closeOnAction: true,
+    actions: [
+      {
+        key: 'confirm',
+        text: confirmText,
+        color: 'primary',
+      },
+    ],
+    onAction: props.onConfirm,
+    onClose: () => {
+      props.onClose?.();
+    },
+  });
+};
+
+export default alert;

packages/dialog/dialog-action-button.tsx

@@ -4,7 +4,7 @@ import Button from '@/button';
 export interface Action {
   key: string;
   text: React.ReactNode;
-  danger?: boolean;
+  color?: 'danger' | 'primary' | 'default';
   disabled?: boolean;
   onClick?: () => void | Promise<void>;
 }
@@ -14,15 +14,19 @@ interface DialogActionButtonProps {
   onAction: () => void | Promise<void>;
 }
 
+const classPrefix = 'ygm-dialog-button';
+
 const DialogActionButton: React.FC<DialogActionButtonProps> = (props) => {
   return (
     <Button
       key={props.action.key}
+      className={classPrefix}
       onClick={props.onAction}
-      color={props.action.danger ? 'danger' : 'primary'}
+      color={props.action.color}
       disabled={props.action.disabled}
       block
       shape="rectangular"
+      fill="none"
     >
       {props.action.text}
     </Button>

packages/dialog/dialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useSpring, animated } from '@react-spring/web';
 
-import Mask from '@/mask';
-import type { MaskProps } from '@/mask';
+import Mask, { MaskProps } from '@/mask';
+import DialogActionButton, { Action } from '@/dialog/dialog-action-button';
 
 import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
 
@@ -13,9 +13,18 @@ export interface DialogProps {
   title?: React.ReactNode;
   content?: React.ReactNode;
   visible?: boolean;
+  actions?: Action[];
   maskStyle?: MaskProps['style'];
+  /** 点击action后是否关闭 */
+  closeOnAction?: boolean;
   /** Dialog关闭时的回调 */
   onClose?: () => void;
+  /** 显示后回调 */
+  afterShow?: () => void;
+  /** 关闭后回调 */
+  afterClose?: () => void;
+  /** 点击action后回调 */
+  onAction?: (action: Action, index: number) => void | Promise<void>;
 }
 
 const classPrefix = 'ygm-dialog';
@@ -32,8 +41,13 @@ const Dialog: React.FC<DialogProps> = (props) => {
       friction: 25,
       clamp: true,
     },
-    onReset: () => {
+    onRest: () => {
       setActive(props.visible!);
+      if (props.visible) {
+        props.afterShow?.();
+      } else {
+        props.afterClose?.();
+      }
     },
   });
 
@@ -52,13 +66,32 @@ const Dialog: React.FC<DialogProps> = (props) => {
 
   const renderContent = () => {
     if (props.content) {
-      return <div className={`${classPrefix}-content`}>{props.content}</div>;
+      return (
+        <div className={`${classPrefix}-content`}>
+          <div>{props.content}</div>
+        </div>
+      );
     }
     return null;
   };
 
   const renderFooter = () => {
-    return <div className={`${classPrefix}-footer`}>footer</div>;
+    return (
+      <div className={`${classPrefix}-footer`}>
+        {props.actions!.map((action, index) => (
+          <DialogActionButton
+            key={action.key}
+            action={action}
+            onAction={async () => {
+              await Promise.all([action.onClick?.(), props.onAction?.(action, index)]);
+              if (props.closeOnAction) {
+                props.onClose?.();
+              }
+            }}
+          />
+        ))}
+      </div>
+    );
   };
 
   return (
@@ -79,6 +112,7 @@ const Dialog: React.FC<DialogProps> = (props) => {
 
 Dialog.defaultProps = {
   visible: false,
+  actions: [] as Action[],
 };
 
 Dialog.displayName = 'Dialog';

packages/dialog/index.tsx

@@ -0,0 +1,17 @@
+import InternalDialog from '@/dialog/dialog';
+import alert from '@/dialog/alert';
+
+export type { DialogProps } from '@/dialog/dialog';
+export type { DialogAlertProps } from '@/dialog/alert';
+
+type InternalDialogType = typeof InternalDialog;
+
+export interface DialogInterface extends InternalDialogType {
+  alert: typeof alert;
+}
+
+const Dialog = InternalDialog as DialogInterface;
+
+Dialog.alert = alert;
+
+export default Dialog;

packages/dialog/show.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Dialog, { DialogProps } from '@/dialog/dialog';
+import renderImperatively from '@/utils/render-imperatively';
+
+export type DialogShowProps = Omit<DialogProps, 'visible'>;
+
+function show(props: DialogShowProps) {
+  const handler = renderImperatively(<Dialog {...props} />);
+}
+
+export default show;

packages/dialog/styles/index.scss

@@ -24,6 +24,7 @@ $class-prefix-dialog: 'ygm-dialog';
   &-body {
     background-color: var(--background-color);
     border-radius: var(--border-radius);
+    overflow: hidden;
   }
 
   &-header {
@@ -35,12 +36,35 @@ $class-prefix-dialog: 'ygm-dialog';
   }
 
   &-content {
-    padding: 8px 12px 20px;
+    padding: 26px 12px;
     max-height: 70vh;
     overflow-x: hidden;
     overflow-y: auto;
     font-size: var(--ygm-font-size-m);
     line-height: 1.4;
     color: var(--ygm-color-text);
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &-footer {
+    user-select: none;
+    display: flex;
+    align-items: stretch;
+    border-top: 0.5px solid var(--ygm-color-border);
+
+    > .ygm-dialog-button {
+      flex: 1;
+      padding: 10px;
+      border-radius: 0;
+      font-size: var(--ygm-font-size-m);
+      border-right: solid 0.5px var(--ygm-color-border);
+      line-height: 25px;
+    }
+
+    &:last-child {
+      border-right: none;
+    }
   }
 }

packages/toast/toast.tsx

@@ -18,7 +18,6 @@ const Toast: React.FC<ToastProps> = React.memo(({ icon, duration, content, after
   const [_, setVisible] = React.useState<boolean>(true);
 
   const iconElement = React.useMemo(() => {
-    console.log(icon);
     if (icon === null || icon === undefined) return null;
     switch (icon) {
       case 'success':

packages/utils/render-imperatively.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { renderToBody } from '@/utils/render';
+
+export interface ElementProps {
+  visible?: boolean;
+  onClose?: () => void;
+  afterClose?: () => void;
+}
+
+const renderImperatively = (element: React.ReactElement<ElementProps>) => {
+  const Wraper = () => {
+    const [visible, setVisible] = React.useState(false);
+
+    const onClose = () => {
+      setVisible(false);
+    };
+
+    const afterClose = () => {
+      unmount();
+    };
+
+    React.useEffect(() => {
+      setVisible(true);
+    }, []);
+
+    return React.cloneElement(element, { ...element.props, visible, onClose, afterClose });
+  };
+
+  const unmount = renderToBody(<Wraper />);
+};
+
+export default renderImperatively;

packages/utils/render.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+export const render = (element: React.ReactElement, container: HTMLElement) => {
+  const root = ReactDOM.createRoot(container);
+  root.render(element);
+
+  const unmount = () => {
+    document.body.removeChild(container);
+    root.unmount();
+  };
+
+  return unmount;
+};
+
+export const renderToBody = (element: React.ReactElement) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  const unmount = render(element, container);
+
+  return unmount;
+};

stories/dialog/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 
-import Dialog from '@/dialog/dialog';
+import Dialog from '@/dialog';
 import Button from '@/button';
 
 import DemoWrap from '../../demos/demo-wrap';
@@ -18,12 +18,28 @@ export const Basic = () => {
   return (
     <DemoWrap>
       <DemoBlock title="基础用法" style={{ padding: 20 }}>
-        <Button onClick={() => setVisible1(true)}>显示遮罩</Button>
+        <Button onClick={() => Dialog.alert({ content: '请优雅的书写代码' })}>显示</Button>
+      </DemoBlock>
+
+      <DemoBlock title="基础用法" style={{ padding: 20 }}>
+        <Button onClick={() => setVisible1(true)}>显示</Button>
         <Dialog
           title="标题"
           content="代码是写出来给人看的，附带能在机器上运行"
           visible={visible1}
           onClose={() => setVisible1(false)}
+          closeOnAction
+          actions={[
+            {
+              key: 'cancel',
+              text: '取消',
+            },
+            {
+              key: 'confirm',
+              text: '确认',
+              color: 'primary',
+            },
+          ]}
         />
       </DemoBlock>
     </DemoWrap>