* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
32 lines
1 KiB
TypeScript
32 lines
1 KiB
TypeScript
import React from "react";
|
|
import {Tooltip} from "UI";
|
|
import {Button} from "antd";
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import AddCardSelectionModal from "Components/Dashboard/components/AddCardSelectionModal";
|
|
import {useStore} from "App/mstore";
|
|
|
|
const MAX_CARDS = 29;
|
|
|
|
function CreateCardButton() {
|
|
const [open, setOpen] = React.useState(false);
|
|
const {dashboardStore} = useStore();
|
|
const dashboard: any = dashboardStore.selectedDashboard;
|
|
const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
|
|
|
|
return <>
|
|
<Tooltip delay={0} disabled={canAddMore}
|
|
title="The number of cards in one dashboard is limited to 30.">
|
|
<Button
|
|
type="primary"
|
|
disabled={!canAddMore}
|
|
onClick={() => setOpen(true)}
|
|
icon={<PlusOutlined />}
|
|
>
|
|
Add Card
|
|
</Button>
|
|
</Tooltip>
|
|
<AddCardSelectionModal open={open} onClose={() => setOpen(false)}/>
|
|
</>;
|
|
}
|
|
|
|
export default CreateCardButton;
|