feat(core): add starAFFiNE and issueFeedback modal (#5718)

close TOV-482 https://github.com/toeverything/AFFiNE/assets/102217452/da1f74bc-4b8d-4d7f-987d-f53da98d92fe
2026-08-10 21:48:48 +08:00 · 2024-02-20 12:50:51 +00:00
parent 6fad241350
commit 4068e7aeff
28 changed files with 338 additions and 522 deletions
@@ -0,0 +1,102 @@
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { cssVar } from '@toeverything/theme';
+import { memo, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+
+import { Button, type ButtonProps } from '../button';
+import { Modal, type ModalProps } from './modal';
+import * as styles from './overlay-modal.css';
+
+const defaultContentOptions: ModalProps['contentOptions'] = {
+  style: {
+    padding: 0,
+    overflow: 'hidden',
+    boxShadow: cssVar('menuShadow'),
+  },
+};
+const defaultOverlayOptions: ModalProps['overlayOptions'] = {
+  style: {
+    background: cssVar('white80'),
+    backdropFilter: 'blur(2px)',
+  },
+};
+
+export interface OverlayModalProps extends ModalProps {
+  to?: string;
+  external?: boolean;
+  topImage?: React.ReactNode;
+  confirmText?: string;
+  confirmButtonOptions?: ButtonProps;
+  onConfirm?: () => void;
+  cancelText?: string;
+  cancelButtonOptions?: ButtonProps;
+  withoutCancelButton?: boolean;
+}
+
+export const OverlayModal = memo(function OverlayModal({
+  open,
+  topImage,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  to,
+  external,
+  confirmButtonOptions,
+  cancelButtonOptions,
+  withoutCancelButton,
+  contentOptions = defaultContentOptions,
+  overlayOptions = defaultOverlayOptions,
+  // FIXME: we need i18n
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  width = 400,
+}: OverlayModalProps) {
+  const handleConfirm = useCallback(() => {
+    onOpenChange?.(false);
+    onConfirm?.();
+  }, [onOpenChange, onConfirm]);
+
+  return (
+    <Modal
+      contentOptions={contentOptions}
+      overlayOptions={overlayOptions}
+      open={open}
+      width={width}
+      onOpenChange={onOpenChange}
+      withoutCloseButton
+    >
+      {topImage}
+      <div className={styles.title}>{title}</div>
+      <div className={styles.content}>{description}</div>
+      <div className={styles.footer}>
+        {!withoutCancelButton ? (
+          <DialogTrigger asChild>
+            <Button {...cancelButtonOptions}>{cancelText}</Button>
+          </DialogTrigger>
+        ) : null}
+
+        {to ? (
+          external ? (
+            //FIXME: we need a more standardized way to implement this link with other click events
+            <a href={to} target="_blank" rel="noreferrer">
+              <Button onClick={handleConfirm} {...confirmButtonOptions}>
+                {confirmText}
+              </Button>
+            </a>
+          ) : (
+            <Link to={to}>
+              <Button onClick={handleConfirm} {...confirmButtonOptions}>
+                {confirmText}
+              </Button>
+            </Link>
+          )
+        ) : (
+          <Button onClick={handleConfirm} {...confirmButtonOptions}>
+            {confirmText}
+          </Button>
+        )}
+      </div>
+    </Modal>
+  );
+});