schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dashboard add none placeholder and arrow rotate animation

Browse Source
This commit is contained in:
moonrailgun 2023-12-20 13:46:48 +00:00
parent 73651b9679
commit 604e6ef454
1 changed files with 112 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/client/components/dashboard/AddButton.tsx
View File

@ -1,9 +1,10 @@
import { Button, Dropdown, MenuProps, Space } from 'antd'; import { Button, Dropdown, MenuProps, Space } from 'antd';
import React from 'react'; import React, { useState } from 'react';
import { trpc } from '../../api/trpc'; import { trpc } from '../../api/trpc';
import { useCurrentWorkspaceId } from '../../store/user'; import { useCurrentWorkspaceId } from '../../store/user';
import { useDashboardStore } from '../../store/dashboard'; import { useDashboardStore } from '../../store/dashboard';
import { DownOutlined } from '@ant-design/icons'; import { DownOutlined } from '@ant-design/icons';
import clsx from 'clsx';
export const DashboardItemAddButton: React.FC = React.memo(() => { export const DashboardItemAddButton: React.FC = React.memo(() => {
const workspaceId = useCurrentWorkspaceId(); const workspaceId = useCurrentWorkspaceId();
@ -16,6 +17,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
workspaceId, workspaceId,
}); });
const { addItem } = useDashboardStore(); const { addItem } = useDashboardStore();
const [open, setOpen] = useState(false);
const isLoading = isWebsiteLoading || isMonitorLoading; const isLoading = isWebsiteLoading || isMonitorLoading;
@ -24,7 +26,9 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
{ {
key: 'website', key: 'website',
label: 'Website', label: 'Website',
children: websites.map((website) => ({ children:
websites.length > 0
? websites.map((website) => ({
key: `website#${website.id}`, key: `website#${website.id}`,
label: website.name, label: website.name,
children: [ children: [
@ -51,12 +55,21 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
}, },
}, },
], ],
})), }))
: [
{
key: `website#none`,
label: '(None)',
disabled: true,
},
],
}, },
{ {
key: 'monitor', key: 'monitor',
label: 'Monitor', label: 'Monitor',
children: monitors.map((monitor) => ({ children:
monitors.length > 0
? monitors.map((monitor) => ({
key: `monitor#${monitor.id}`, key: `monitor#${monitor.id}`,
label: monitor.name, label: monitor.name,
children: [ children: [
@ -86,7 +99,11 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
key: `monitor#${monitor.id}#chart`, key: `monitor#${monitor.id}#chart`,
label: 'Chart', label: 'Chart',
onClick: () => { onClick: () => {
addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`); addItem(
'monitorChart',
monitor.id,
`${monitor.name}'s Chart`
);
}, },
}, },
{ {
@ -101,18 +118,36 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
}, },
}, },
], ],
})), }))
: [
{
key: `monitor#none`,
label: '(None)',
disabled: true,
},
],
}, },
], ],
}; };
return ( return (
<div> <div>
<Dropdown trigger={['click']} disabled={isLoading} menu={menu}> <Dropdown
trigger={['click']}
disabled={isLoading}
menu={menu}
open={open}
onOpenChange={setOpen}
>
<Button type="primary" size="large" className="w-32"> <Button type="primary" size="large" className="w-32">
<Space> <Space>
<span>Add</span> <span>Add</span>
<DownOutlined /> <DownOutlined
className={clsx(
'transition-transform scale-y-75',
open && 'rotate-180'
)}
/>
</Space> </Space>
</Button> </Button>
</Dropdown> </Dropdown>