github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added DialogButton to handle mobile.

Browse Source
This commit is contained in:
Mike Cao
2025-10-16 23:59:18 -07:00
parent 036748cdeb
commit 40492ec7c4
32 changed files with 2146 additions and 1807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/(main)/teams/[teamId]/TeamMemberEditButton.tsx
View File

@@ -1,7 +1,7 @@
import { useMessages, useModified } from '@/components/hooks';
import { Dialog, useToast } from '@umami/react-zen';
import { useToast } from '@umami/react-zen';
import { TeamMemberEditForm } from './TeamMemberEditForm';
import { ActionButton } from '@/components/input/ActionButton';
import { DialogButton } from '@/components/input/DialogButton';
import { Edit } from '@/components/icons';
export function TeamMemberEditButton({
@@ -26,18 +26,21 @@ export function TeamMemberEditButton({
};
return (
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
</Dialog>
</ActionButton>
<DialogButton
icon={<Edit />}
title={formatMessage(labels.editMember)}
variant="quiet"
width="400px"
>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
</DialogButton>
);
}

50
src/app/(main)/teams/[teamId]/TeamMemberRemoveButton.tsx
View File

@@ -2,8 +2,7 @@ import { ConfirmationForm } from '@/components/common/ConfirmationForm';
import { useDeleteQuery, useMessages, useModified } from '@/components/hooks';
import { messages } from '@/components/messages';
import { Trash } from '@/components/icons';
import { Dialog } from '@umami/react-zen';
import { ActionButton } from '@/components/input/ActionButton';
import { DialogButton } from '@/components/input/DialogButton';
export function TeamMemberRemoveButton({
teamId,
@@ -32,27 +31,30 @@ export function TeamMemberRemoveButton({
};
return (
<ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{userName}</b>,
}}
/>
}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
buttonVariant="danger"
/>
)}
</Dialog>
</ActionButton>
<DialogButton
icon={<Trash />}
title={formatMessage(labels.confirm)}
variant="quiet"
width="400px"
>
{({ close }) => (
<ConfirmationForm
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{userName}</b>,
}}
/>
}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
buttonVariant="danger"
/>
)}
</DialogButton>
);
}