jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): card create modal height

Browse source
This commit is contained in:
Shekar Siri 2024-07-01 13:32:19 +02:00
parent 69fb477ae1
commit d84ff1f7e0
1 changed files with 49 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
View file

@ -1,60 +1,61 @@
import React, {useEffect} from 'react';
import {Modal} from 'antd';
import React, { useEffect } from 'react';
import { Modal } from 'antd';
import SelectCard from './SelectCard';
import CreateCard from "Components/Dashboard/components/DashboardList/NewDashModal/CreateCard";
import colors from "tailwindcss/colors";
import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard';
import colors from 'tailwindcss/colors';
interface NewDashboardModalProps {
onClose: () => void;
open: boolean;
isAddingFromLibrary?: boolean;
onClose: () => void;
open: boolean;
isAddingFromLibrary?: boolean;
}
const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
onClose,
open,
isAddingFromLibrary = false,
onClose,
open,
isAddingFromLibrary = false
}) => {
const [step, setStep] = React.useState<number>(0);
const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
const [step, setStep] = React.useState<number>(0);
const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
useEffect(() => {
return () => {
setStep(0);
}
}, [open]);
useEffect(() => {
return () => {
setStep(0);
};
}, [open]);
return (
<>
<Modal
open={open}
onCancel={onClose}
width={900}
destroyOnClose={true}
footer={null}
closeIcon={false}
styles={{
content: {
backgroundColor: colors.gray[100],
}
}}
>
<div className="flex flex-col gap-4" style={{
height: 700,
overflowY: 'auto',
overflowX: 'hidden',
}}>
{step === 0 && <SelectCard onClose={onClose}
selected={selectedCategory}
setSelectedCategory={setSelectedCategory}
onCard={() => setStep(step + 1)}
isLibrary={isAddingFromLibrary}/>}
{step === 1 && <CreateCard onBack={() => setStep(0)}/>}
</div>
</Modal>
</>
)
;
return (
<>
<Modal
open={open}
onCancel={onClose}
width={900}
destroyOnClose={true}
footer={null}
closeIcon={false}
styles={{
content: {
backgroundColor: colors.gray[100]
}
}}
centered={true}
>
<div className="flex flex-col gap-4" style={{
height: 'calc(100vh - 100px)',
overflowY: 'auto',
overflowX: 'hidden'
}}>
{step === 0 && <SelectCard onClose={onClose}
selected={selectedCategory}
setSelectedCategory={setSelectedCategory}
onCard={() => setStep(step + 1)}
isLibrary={isAddingFromLibrary} />}
{step === 1 && <CreateCard onBack={() => setStep(0)} />}
</div>
</Modal>
</>
)
;
};
export default NewDashboardModal;