pengx17
2024-06-05 09:33:18 +00:00
parent 928e133655
commit fa4e4c738a
12 changed files with 206 additions and 108 deletions
+2 -2
View File
@@ -3,8 +3,8 @@
"private": true,
"type": "module",
"devDependencies": {
"@blocksuite/global": "0.15.0-canary-202406041254-00772be",
"@blocksuite/store": "0.15.0-canary-202406041254-00772be",
"@blocksuite/global": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/store": "0.15.0-canary-202406050645-7721c3e",
"react": "18.3.1",
"react-dom": "18.3.1",
"vitest": "1.6.0"
+5 -5
View File
@@ -13,9 +13,9 @@
"@affine/debug": "workspace:*",
"@affine/env": "workspace:*",
"@affine/templates": "workspace:*",
"@blocksuite/blocks": "0.15.0-canary-202406041254-00772be",
"@blocksuite/global": "0.15.0-canary-202406041254-00772be",
"@blocksuite/store": "0.15.0-canary-202406041254-00772be",
"@blocksuite/blocks": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/global": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/store": "0.15.0-canary-202406050645-7721c3e",
"@datastructures-js/binary-search-tree": "^5.3.2",
"foxact": "^0.2.33",
"jotai": "^2.8.0",
@@ -30,8 +30,8 @@
"devDependencies": {
"@affine-test/fixtures": "workspace:*",
"@affine/templates": "workspace:*",
"@blocksuite/block-std": "0.15.0-canary-202406041254-00772be",
"@blocksuite/presets": "0.15.0-canary-202406041254-00772be",
"@blocksuite/block-std": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/presets": "0.15.0-canary-202406050645-7721c3e",
"@testing-library/react": "^15.0.0",
"async-call-rpc": "^6.4.0",
"react": "^18.2.0",
+5 -5
View File
@@ -75,12 +75,12 @@
"zod": "^3.22.4"
},
"devDependencies": {
"@blocksuite/block-std": "0.15.0-canary-202406041254-00772be",
"@blocksuite/blocks": "0.15.0-canary-202406041254-00772be",
"@blocksuite/global": "0.15.0-canary-202406041254-00772be",
"@blocksuite/block-std": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/blocks": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/global": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/icons": "2.1.52",
"@blocksuite/presets": "0.15.0-canary-202406041254-00772be",
"@blocksuite/store": "0.15.0-canary-202406041254-00772be",
"@blocksuite/presets": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/store": "0.15.0-canary-202406050645-7721c3e",
"@storybook/addon-actions": "^7.6.17",
"@storybook/addon-essentials": "^7.6.17",
"@storybook/addon-interactions": "^7.6.17",
@@ -5,6 +5,7 @@ import {
ConfirmModal,
type ConfirmModalProps,
useConfirmModal,
usePromptModal,
} from './confirm-modal';
export default {
@@ -57,3 +58,20 @@ export const AutoClose = () => {
return <Button onClick={onConfirm}>Show confirm</Button>;
};
export const Prompt = () => {
const openPrompt = usePromptModal();
const showPrompt = async () => {
const value = await openPrompt({
placeholder: 'Enter your name',
title: 'Give me a string',
message: 'What is your name?',
});
if (value) {
alert('your name is ' + value);
}
};
return <Button onClick={showPrompt}>Show prompt</Button>;
};
@@ -1,10 +1,12 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { DialogTrigger } from '@radix-ui/react-dialog';
import clsx from 'clsx';
import type { PropsWithChildren } from 'react';
import type { PropsWithChildren, ReactNode } from 'react';
import { createContext, useCallback, useContext, useState } from 'react';
import type { ButtonProps } from '../button';
import { Button } from '../button';
import Input from '../input';
import type { ModalProps } from './modal';
import { Modal } from './modal';
import * as styles from './styles.css';
@@ -147,6 +149,7 @@ export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
</ConfirmModalContext.Provider>
);
};
export const useConfirmModal = () => {
const context = useContext(ConfirmModalContext);
if (!context) {
@@ -159,3 +162,53 @@ export const useConfirmModal = () => {
closeConfirmModal: context.closeConfirmModal,
};
};
export const usePromptModal = () => {
const { closeConfirmModal, openConfirmModal } = useConfirmModal();
const t = useAFFiNEI18N();
return useCallback(
(props: {
confirmText?: string;
cancelText?: string;
placeholder?: string;
message: ReactNode;
title: ReactNode;
abort?: AbortSignal;
}) => {
return new Promise<string | null>(resolve => {
let value = '';
const message = (
<div className={styles.promptModalContent}>
{props.message}
<Input
placeholder={props.placeholder}
onChange={e => (value = e)}
/>
</div>
);
openConfirmModal({
...props,
confirmButtonOptions: {
children: props.confirmText ?? t['Confirm'](),
type: 'primary',
},
cancelButtonOptions: {
children: props.cancelText ?? t['Cancel'](),
},
description: message,
onConfirm: () => {
resolve(value);
},
onCancel: () => {
resolve(null);
},
});
props.abort?.addEventListener('abort', () => {
resolve(null);
closeConfirmModal();
});
});
},
[closeConfirmModal, openConfirmModal, t]
);
};
@@ -91,3 +91,9 @@ globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
globalStyle(`[data-modal="false"] ${modalContent}`, {
pointerEvents: 'auto',
});
export const promptModalContent = style({
display: 'flex',
flexDirection: 'column',
gap: '12px',
});
+6 -6
View File
@@ -18,13 +18,13 @@
"@affine/graphql": "workspace:*",
"@affine/i18n": "workspace:*",
"@affine/templates": "workspace:*",
"@blocksuite/block-std": "0.15.0-canary-202406041254-00772be",
"@blocksuite/blocks": "0.15.0-canary-202406041254-00772be",
"@blocksuite/global": "0.15.0-canary-202406041254-00772be",
"@blocksuite/block-std": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/blocks": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/global": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/icons": "2.1.52",
"@blocksuite/inline": "0.15.0-canary-202406041254-00772be",
"@blocksuite/presets": "0.15.0-canary-202406041254-00772be",
"@blocksuite/store": "0.15.0-canary-202406041254-00772be",
"@blocksuite/inline": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/presets": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/store": "0.15.0-canary-202406050645-7721c3e",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
@@ -2,6 +2,7 @@ import {
createReactComponentFromLit,
useConfirmModal,
useLitPortalFactory,
usePromptModal,
} from '@affine/component';
import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
import { PeekViewService } from '@affine/core/modules/peek-view';
@@ -80,11 +81,12 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
}, [page.collection]);
const confirmModal = useConfirmModal();
const openPromptModal = usePromptModal();
const patchedSpecs = useMemo(() => {
let patched = patchReferenceRenderer(specs, reactToLit, referenceRenderer);
patched = patchNotificationService(
patchReferenceRenderer(patched, reactToLit, referenceRenderer),
confirmModal
{ ...confirmModal, prompt: openPromptModal }
);
if (!page.readonly && runtimeConfig.enablePeekView) {
patched = patchPeekViewService(patched, peekViewService);
@@ -92,6 +94,7 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
return patched;
}, [
confirmModal,
openPromptModal,
page.readonly,
peekViewService,
reactToLit,
@@ -5,6 +5,7 @@ import {
toast,
type ToastOptions,
type useConfirmModal,
type usePromptModal,
} from '@affine/component';
import type { PeekViewService } from '@affine/core/modules/peek-view';
import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view';
@@ -114,7 +115,13 @@ export function patchReferenceRenderer(
export function patchNotificationService(
specs: BlockSpec[],
{ closeConfirmModal, openConfirmModal }: ReturnType<typeof useConfirmModal>
{
closeConfirmModal,
openConfirmModal,
prompt,
}: ReturnType<typeof useConfirmModal> & {
prompt: ReturnType<typeof usePromptModal>;
}
) {
const rootSpec = specs.find(
spec => spec.schema.model.flavour === 'affine:page'
@@ -126,22 +133,10 @@ export function patchNotificationService(
patchSpecService(rootSpec, service => {
service.notificationService = {
confirm: async ({
title,
message,
confirmText,
cancelText,
abort,
}: {
title: string;
message: string | TemplateResult;
confirmText: string;
cancelText: string;
abort?: AbortSignal;
}) => {
confirm: async ({ title, message, confirmText, cancelText, abort }) => {
return new Promise<boolean>(resolve => {
openConfirmModal({
title,
title: toReactNode(title),
description: toReactNode(message),
confirmButtonOptions: {
children: confirmText,
@@ -161,6 +156,23 @@ export function patchNotificationService(
});
});
},
prompt: async ({
title,
message,
confirmText,
placeholder,
cancelText,
abort,
}) => {
return prompt({
message: toReactNode(message),
title: toReactNode(title),
confirmText,
cancelText,
placeholder,
abort,
});
},
toast: (message: string, options: ToastOptions) => {
return toast(message, options);
},
@@ -181,6 +193,12 @@ export function patchNotificationService(
{
title: toReactNode(notification.title),
message: toReactNode(notification.message),
action: notification.action?.onClick
? {
label: toReactNode(notification.action?.label),
onClick: notification.action.onClick,
}
: undefined,
},
{
duration: notification.duration || 0,
+4 -4
View File
@@ -29,10 +29,10 @@
"@affine/env": "workspace:*",
"@affine/i18n": "workspace:*",
"@affine/native": "workspace:*",
"@blocksuite/block-std": "0.15.0-canary-202406041254-00772be",
"@blocksuite/blocks": "0.15.0-canary-202406041254-00772be",
"@blocksuite/presets": "0.15.0-canary-202406041254-00772be",
"@blocksuite/store": "0.15.0-canary-202406041254-00772be",
"@blocksuite/block-std": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/blocks": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/presets": "0.15.0-canary-202406050645-7721c3e",
"@blocksuite/store": "0.15.0-canary-202406050645-7721c3e",
"@electron-forge/cli": "^7.3.0",
"@electron-forge/core": "^7.3.0",
"@electron-forge/core-utils": "^7.3.0",