mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 10:42:00 +03:00
d412635f6b
new exports from `@affine/component`:
```ts
import { ConfirmModalProvider, useConfirmModal } from "@affine/component"
```
Open confirm modal with hook:
```ts
const Component = () => {
const { openConfirmModal } = useConformModal();
const open = () => {
openConfirmModal({
// props of ConfirmModal
/**
* will show loading state when confirm clicked, and close after onConfirm finished
*/
onConfirm: async () => {
await new Promise((r) => setTimeout(r, 2000));
},
});
}
return <Button onClick={open}>Open</Button>
}
```
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import './polyfill';
|
|
import '../src/theme/global.css';
|
|
import './preview.css';
|
|
import { ThemeProvider, useTheme } from 'next-themes';
|
|
import type { ComponentType } from 'react';
|
|
import { useEffect } from 'react';
|
|
import { useDarkMode } from 'storybook-dark-mode';
|
|
|
|
import type { Preview } from '@storybook/react';
|
|
import React from 'react';
|
|
import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';
|
|
|
|
export const parameters: Preview = {
|
|
argTypes: {
|
|
param: {
|
|
table: { category: 'Group' },
|
|
},
|
|
},
|
|
globalTypes: {
|
|
theme: {
|
|
description: 'Global theme for components',
|
|
defaultValue: 'light',
|
|
toolbar: {
|
|
title: 'Theme',
|
|
icon: 'circlehollow',
|
|
items: ['light', 'dark'],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const ThemeChange = () => {
|
|
const isDark = useDarkMode();
|
|
const theme = useTheme();
|
|
if (theme.resolvedTheme === 'dark' && !isDark) {
|
|
theme.setTheme('light');
|
|
} else if (theme.resolvedTheme === 'light' && isDark) {
|
|
theme.setTheme('dark');
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const Component = () => {
|
|
const isDark = useDarkMode();
|
|
const theme = useTheme();
|
|
useEffect(() => {
|
|
theme.setTheme(isDark ? 'dark' : 'light');
|
|
}, [isDark]);
|
|
return null;
|
|
};
|
|
|
|
export const decorators = [
|
|
(Story: ComponentType, context) => {
|
|
return (
|
|
<ThemeProvider themes={['dark', 'light']} enableSystem={true}>
|
|
<ConfirmModalProvider>
|
|
<ThemeChange />
|
|
<Component />
|
|
<Story {...context} />
|
|
</ConfirmModalProvider>
|
|
</ThemeProvider>
|
|
);
|
|
},
|
|
];
|