mirror of https://github.com/buster-so/buster.git
confirm modal update
This commit is contained in:
parent
9e4e8ca43c
commit
aa79943db5
|
@ -0,0 +1,57 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import { ConfirmModal, ConfirmProps } from './ConfirmModal';
|
||||||
|
import { Button } from '../buttons/Button';
|
||||||
|
import React from 'react';
|
||||||
|
import { fn } from '@storybook/test';
|
||||||
|
import { useBusterNotifications } from '../../../context/BusterNotifications';
|
||||||
|
|
||||||
|
const meta: Meta<typeof ConfirmModal> = {
|
||||||
|
title: 'UI/Modal/ConfirmModal',
|
||||||
|
component: ConfirmModal
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof ConfirmModal>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => {
|
||||||
|
const { openConfirmModal } = useBusterNotifications();
|
||||||
|
|
||||||
|
const props: ConfirmProps = {
|
||||||
|
title: 'Confirm',
|
||||||
|
content: 'Are you sure you want to confirm this action?',
|
||||||
|
onOk: async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||||
|
alert('onOk');
|
||||||
|
},
|
||||||
|
onCancel: async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||||
|
alert('onCancel');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={() => openConfirmModal(props)}>Open Confirm Modal</Button>
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
await openConfirmModal({
|
||||||
|
title: 'Confirm',
|
||||||
|
content: 'Are you sure you want to confirm this action?',
|
||||||
|
onOk: async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||||
|
alert('onOk');
|
||||||
|
},
|
||||||
|
onCancel: async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||||
|
alert('onCancel');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
alert('openConfirmModal promise resolved');
|
||||||
|
}}>
|
||||||
|
Open Confirm Modal with a promise
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
|
@ -50,7 +50,7 @@ const DialogContent = React.memo(
|
||||||
<DialogPrimitive.Close
|
<DialogPrimitive.Close
|
||||||
asChild
|
asChild
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none'
|
'absolute top-6 right-6 opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none'
|
||||||
)}>
|
)}>
|
||||||
<Button prefix={<Xmark />} variant="ghost" />
|
<Button prefix={<Xmark />} variant="ghost" />
|
||||||
</DialogPrimitive.Close>
|
</DialogPrimitive.Close>
|
||||||
|
|
|
@ -26,8 +26,6 @@ export const useChatLayout = ({ appSplitterRef }: UseChatSplitterProps) => {
|
||||||
} else if (side === 'both') {
|
} else if (side === 'both') {
|
||||||
const shouldAnimate = Number(leftSize) < 200 || parseInt(rightSize as string) < 340;
|
const shouldAnimate = Number(leftSize) < 200 || parseInt(rightSize as string) < 340;
|
||||||
|
|
||||||
console.log(shouldAnimate, leftSize, rightSize);
|
|
||||||
|
|
||||||
if (!shouldAnimate) return;
|
if (!shouldAnimate) return;
|
||||||
|
|
||||||
animateWidth(DEFAULT_CHAT_OPTION_SIDEBAR_SIZE, 'left');
|
animateWidth(DEFAULT_CHAT_OPTION_SIDEBAR_SIZE, 'left');
|
||||||
|
|
|
@ -50,8 +50,6 @@ export const useSelectedFileAndLayout = ({
|
||||||
|
|
||||||
const isSameAsCurrentFile = selectedFile?.id === fileId;
|
const isSameAsCurrentFile = selectedFile?.id === fileId;
|
||||||
|
|
||||||
console.log('onSetSelectedFile', isSameAsCurrentFile, file);
|
|
||||||
|
|
||||||
setRenderViewLayoutKey('both');
|
setRenderViewLayoutKey('both');
|
||||||
setSelectedFile(file);
|
setSelectedFile(file);
|
||||||
await onChangePage(route);
|
await onChangePage(route);
|
||||||
|
|
Loading…
Reference in New Issue