init: the first public commit for AFFiNE

libs/components/ui/src/message/base.tsx

@@ -0,0 +1,48 @@
+import type { FC, ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { styled } from '../styled';
+
+import type { ContainerProps } from './types';
+
+interface ShowProps {
+    Container: FC<ContainerProps>;
+    /**
+     * 自动关闭延时，单位毫秒。设为 0 时，不自动关闭。默认 2000
+     */
+    duration?: number;
+    content: ReactNode;
+}
+
+export const show = ({ Container, duration = 2000, content }: ShowProps) => {
+    const root_element = document.createElement('div');
+    document.body.appendChild(root_element);
+
+    function close() {
+        document.body.removeChild(root_element);
+    }
+
+    const react_root = createRoot(root_element);
+
+    react_root.render(
+        <PortalContainer>
+            <Container content={content} duration={duration} close={close} />
+        </PortalContainer>
+    );
+
+    if (duration > 0) {
+        setTimeout(() => {
+            close();
+        }, duration);
+    }
+
+    return close;
+};
+
+const PortalContainer = styled('div')({
+    position: 'fixed',
+    top: '100px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: '#fff',
+    zIndex: 100,
+});

libs/components/ui/src/message/index.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+import { show } from './base';
+import { Success } from './success';
+
+interface SuccessProps {
+    /**
+     * 自动关闭延时，单位毫秒。默认2000
+     */
+    duration?: number;
+    content: ReactNode;
+}
+
+export const message = {
+    success({ duration, content }: SuccessProps) {
+        return show({ Container: Success, duration, content });
+    },
+};

libs/components/ui/src/message/success.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import { styled } from '../styled';
+import type { ContainerProps } from './types';
+
+export const Success: FC<ContainerProps> = ({ content }) => {
+    return <Container>{content}</Container>;
+};
+
+const Container = styled('div')({
+    maxWidth: '200px',
+    backgroundColor: 'rgba(64, 223, 155)',
+    borderRadius: '4px',
+    padding: '8px',
+});

libs/components/ui/src/message/types.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+export interface ContainerProps {
+    content: ReactNode;
+    duration: number;
+    close: () => void;
+}