66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
|
|
import { CardApplications, SectionKeys } from '../../model/types';
|
|
import SlideDown from 'react-slidedown';
|
|
import 'react-slidedown/lib/slidedown.css';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export interface CardSectionProps {
|
|
type: SectionKeys;
|
|
title?: string;
|
|
cardApplications?: Array<CardApplications>
|
|
openChild: SectionKeys | null;
|
|
setOpenChild: (openChild: SectionKeys | null) => void;
|
|
};
|
|
|
|
export const CardSection = ({
|
|
type,
|
|
title,
|
|
cardApplications,
|
|
openChild,
|
|
setOpenChild
|
|
}: CardSectionProps) => {
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
|
|
const opeSection = () => {
|
|
const staus = !isOpen;
|
|
setIsOpen(staus);
|
|
if(!!staus){
|
|
setOpenChild(type);
|
|
}
|
|
else {
|
|
setOpenChild(null)
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(!!openChild && openChild !== type){
|
|
setIsOpen(false);
|
|
}
|
|
}, [openChild]);
|
|
|
|
return (
|
|
<>
|
|
<div className="section">
|
|
<div className="section-title"
|
|
onClick={ () => opeSection() }
|
|
>
|
|
{ title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
|
|
</div>
|
|
<SlideDown className={'my-dropdown-slidedown'}>
|
|
{ isOpen &&
|
|
<ul className="kv-list">
|
|
{ cardApplications?.map((value, index) => (
|
|
<li className="kv-row">
|
|
<span className="k">{ value.cardCompanyName }</span>
|
|
<span className="v">{ `${value.partnerServiceName}(${value.statusName})` }</span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
}
|
|
</SlideDown>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |