toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 18:21:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: hooks useConfirm (#998)

Browse Source
This commit is contained in:
Himself65 2023-02-14 18:49:18 -06:00 committed by GitHub
parent 3b9caadaac
commit 78c164463f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx
View File

@ -21,7 +21,7 @@ const PopoverContent = () => {
const { editor } = useAppState();
const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
const { changePageMode } = usePageHelper();
const { confirm } = useConfirm();
const confirm = useConfirm(store => store.confirm);
const { t } = useTranslation();
const {
mode = 'page',

2
apps/web/src/components/header/header-right-items/TrashButtonGroup.tsx
View File

@ -10,7 +10,7 @@ export const TrashButtonGroup = () => {
const { permanentlyDeletePage } = usePageHelper();
const { currentWorkspace } = useAppState();
const { toggleDeletePage } = usePageHelper();
const { confirm } = useConfirm();
const confirm = useConfirm(store => store.confirm);
const router = useRouter();
const { id = '' } = useCurrentPageMeta() || {};
const { t } = useTranslation();

4
apps/web/src/components/page-list/OperationCell.tsx
View File

@ -19,7 +19,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id, favorite } = pageMeta;
const { openPage } = usePageHelper();
const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
const { confirm } = useConfirm();
const confirm = useConfirm(store => store.confirm);
const { t } = useTranslation();
const OperationMenu = (
<>
@ -77,7 +77,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id } = pageMeta;
const { openPage, getPageMeta } = usePageHelper();
const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
const { confirm } = useConfirm();
const confirm = useConfirm(store => store.confirm);
const { t } = useTranslation();
return (
<FlexWrapper>

2
apps/web/src/components/workspace-setting/member/MembersPage.tsx
View File

@ -33,7 +33,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const { members, removeMember, loaded } = useMembers();
const { triggerEnableWorkspaceModal } = useModal();
const { t } = useTranslation();
const { confirm } = useConfirm();
const confirm = useConfirm(store => store.confirm);
if (workspace.provider === 'affine') {
return (

136
apps/web/src/providers/ConfirmProvider.tsx
View File

@ -1,62 +1,100 @@
import { createContext, useContext, useState, ReactNode } from 'react';
import { createContext, useContext, useMemo } from 'react';
import type { PropsWithChildren } from 'react';
import { Confirm, ConfirmProps } from '@affine/component';
import { createStore, useStore } from 'zustand';
import { combine, subscribeWithSelector } from 'zustand/middleware';
import { UseBoundStore } from 'zustand/react';
type ConfirmContextValue = {
type ConfirmActions = {
confirm: (props: ConfirmProps) => Promise<boolean>;
};
type ConfirmContextProps = PropsWithChildren<Record<string, unknown>>;
export const ConfirmContext = createContext<ConfirmContextValue>({
confirm: () => Promise.resolve(false),
});
type ConfirmState = {
record: Record<string, JSX.Element>;
};
export const useConfirm = () => useContext(ConfirmContext);
export const ConfirmProvider = ({
children,
}: PropsWithChildren<ConfirmContextProps>) => {
const [confirmRecord, setConfirmRecord] = useState<Record<string, ReactNode>>(
{}
);
return (
<ConfirmContext.Provider
value={{
confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
return new Promise(resolve => {
const confirmId = String(Date.now());
const closeHandler = () => {
delete confirmRecord[confirmId];
setConfirmRecord({ ...confirmRecord });
};
setConfirmRecord(oldConfirmRecord => {
return {
...oldConfirmRecord,
[confirmId]: (
<Confirm
{...props}
onCancel={() => {
closeHandler();
onCancel?.();
resolve(false);
}}
onConfirm={() => {
closeHandler();
onConfirm?.();
resolve(true);
}}
/>
),
};
});
});
const create = () =>
createStore(
subscribeWithSelector(
combine<ConfirmState, ConfirmActions>(
{
record: {},
},
}}
>
{children}
{Object.entries(confirmRecord).map(([confirmId, confirmNode]) => {
(set, get) => ({
confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
return new Promise(resolve => {
const confirmRecord = { ...get().record };
const confirmId = String(Date.now());
const closeHandler = () => {
delete confirmRecord[confirmId];
set({ record: { ...confirmRecord } });
};
set(({ record }) => {
return {
record: {
...record,
[confirmId]: (
<Confirm
{...props}
onCancel={() => {
closeHandler();
onCancel?.();
resolve(false);
}}
onConfirm={() => {
closeHandler();
onConfirm?.();
resolve(true);
}}
/>
),
},
};
});
});
},
})
)
)
);
type Store = ReturnType<typeof create>;
export const ConfirmContext = createContext<Store | null>(null);
export const useConfirmApi = () => {
const api = useContext(ConfirmContext);
if (!api) {
throw new Error('cannot find confirm context');
}
return api;
};
export const useConfirm: UseBoundStore<Store> = ((
selector: Parameters<UseBoundStore<Store>>[0],
equals: Parameters<UseBoundStore<Store>>[1]
) => {
const api = useConfirmApi();
return useStore(api, selector, equals);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
}) as any;
function Records() {
const conform = useConfirm(store => store.record);
return (
<>
{Object.entries(conform).map(([confirmId, confirmNode]) => {
return <div key={confirmId}>{confirmNode}</div>;
})}
</>
);
}
export const ConfirmProvider = ({ children }: PropsWithChildren) => {
return (
<ConfirmContext.Provider value={useMemo(() => create(), [])}>
{children}
<Records />
</ConfirmContext.Provider>
);
};