Тимур Городецкий
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import styles from './CollapseSection.module.scss';
|
|
import { Icon } from '../Icon/Icon';
|
|
import { IconName } from '../Icon/iconNames';
|
|
|
|
interface ICollapseSectionProps {
|
|
title: string;
|
|
icon: IconName;
|
|
defaultOpen?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/** Сворачиваемая секция формы: заголовок с иконкой и шевроном + тело. */
|
|
export const CollapseSection: React.FC<ICollapseSectionProps> = ({ title, icon, defaultOpen = true, children }) => {
|
|
const [open, setOpen] = useState<boolean>(defaultOpen);
|
|
|
|
return (
|
|
<div className={styles.section}>
|
|
<button type="button" className={styles.header} onClick={() => setOpen((prev) => !prev)}>
|
|
<span className={styles.title}>
|
|
<Icon name={icon} size="sm" />
|
|
{title}
|
|
</span>
|
|
<span className={[styles.chevron, open ? styles.open : ''].filter(Boolean).join(' ')}>
|
|
<Icon name="chevron-down" size="sm" />
|
|
</span>
|
|
</button>
|
|
{open && <div className={styles.body}>{children}</div>}
|
|
</div>
|
|
);
|
|
};
|