Files
AFFiNE-Mirror/packages/frontend/apps/mobile/src/app.tsx
T
CatsJuice 11b453f4d8 feat(mobile): swipe to open menu for explorer (#8953)
close AF-1803

- bump theme
- extract `SwipeHelper` and add `speed`, `direction` detection support
- new mobile `SwipeMenu` component
- integrate `SwipeMenu` to open a menu in Explorer
- New `Haptics` module for mobile, implemented in `ios` and `mobile`(`navigator.vibrate()`)

![CleanShot 2024-11-28 at 12.25.14.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/cba36660-f38a-473b-b85c-33540a406835.gif)
2024-12-02 03:27:01 +00:00

103 lines
3.4 KiB
TypeScript

import { AffineContext } from '@affine/core/components/context';
import { AppFallback } from '@affine/core/mobile/components/app-fallback';
import { configureMobileModules } from '@affine/core/mobile/modules';
import { HapticProvider } from '@affine/core/mobile/modules/haptics';
import { router } from '@affine/core/mobile/router';
import { configureCommonModules } from '@affine/core/modules';
import { I18nProvider } from '@affine/core/modules/i18n';
import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
import { PopupWindowProvider } from '@affine/core/modules/url';
import { configureIndexedDBUserspaceStorageProvider } from '@affine/core/modules/userspace';
import { configureBrowserWorkbenchModule } from '@affine/core/modules/workbench';
import {
configureBrowserWorkspaceFlavours,
configureIndexedDBWorkspaceEngineStorageProvider,
} from '@affine/core/modules/workspace-engine';
import {
Framework,
FrameworkRoot,
getCurrentStore,
LifecycleService,
} from '@toeverything/infra';
import { Suspense } from 'react';
import { RouterProvider } from 'react-router-dom';
const future = {
v7_startTransition: true,
} as const;
const framework = new Framework();
configureCommonModules(framework);
configureBrowserWorkbenchModule(framework);
configureLocalStorageStateStorageImpls(framework);
configureBrowserWorkspaceFlavours(framework);
configureIndexedDBWorkspaceEngineStorageProvider(framework);
configureIndexedDBUserspaceStorageProvider(framework);
configureMobileModules(framework);
framework.impl(PopupWindowProvider, {
open: (target: string) => {
const targetUrl = new URL(target);
let url: string;
// safe to open directly if in the same origin
if (targetUrl.origin === location.origin) {
url = target;
} else {
const redirectProxy = location.origin + '/redirect-proxy';
const search = new URLSearchParams({
redirect_uri: target,
});
url = `${redirectProxy}?${search.toString()}`;
}
window.open(url, '_blank', 'noreferrer noopener');
},
});
framework.impl(HapticProvider, {
impact: options => {
return new Promise(resolve => {
const style = options?.style ?? 'LIGHT';
const pattern = {
LIGHT: [10],
MEDIUM: [20],
HEAVY: [30],
}[style];
const result = navigator.vibrate?.(pattern);
if (!result) {
console.warn('vibrate not supported, or user not interacted');
}
resolve();
});
},
notification: () => Promise.reject('Not supported'),
vibrate: () => Promise.reject('Not supported'),
selectionStart: () => Promise.reject('Not supported'),
selectionChanged: () => Promise.reject('Not supported'),
selectionEnd: () => Promise.reject('Not supported'),
});
const frameworkProvider = framework.provider();
// setup application lifecycle events, and emit application start event
window.addEventListener('focus', () => {
frameworkProvider.get(LifecycleService).applicationFocus();
});
frameworkProvider.get(LifecycleService).applicationStart();
export function App() {
return (
<Suspense>
<FrameworkRoot framework={frameworkProvider}>
<I18nProvider>
<AffineContext store={getCurrentStore()}>
<RouterProvider
fallbackElement={<AppFallback />}
router={router}
future={future}
/>
</AffineContext>
</I18nProvider>
</FrameworkRoot>
</Suspense>
);
}