70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { ButtonBlock } from '../../types/blocks';
|
|
import SquareButton from './SquareButton';
|
|
import styles from './GridButtonsBlock.module.css';
|
|
|
|
interface GridButtonsBlockProps {
|
|
block: ButtonBlock;
|
|
onAction?: (actionType: string, actionValue: string, blockId?: string, buttonId?: string) => void;
|
|
isInputVisible?: boolean;
|
|
}
|
|
|
|
const GridButtonsBlock: React.FC<GridButtonsBlockProps> = ({ block, onAction, isInputVisible }) => {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const { buttons, style } = block;
|
|
const {
|
|
gap = 12,
|
|
padding = 16,
|
|
buttonSize = 100,
|
|
columns = 3
|
|
} = style;
|
|
|
|
const visibleButtons = expanded ? buttons : buttons.slice(0, 6);
|
|
const hasMoreButtons = buttons.length > 6;
|
|
|
|
return (
|
|
<div
|
|
className={styles.container}
|
|
style={{ padding }}
|
|
>
|
|
<div className={styles.gridContainer}>
|
|
<div
|
|
className={`${styles.grid} ${expanded ? styles.expanded : ''}`}
|
|
style={{
|
|
gap,
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`
|
|
}}
|
|
>
|
|
{visibleButtons.map((button, index) => (
|
|
<div
|
|
key={button.id}
|
|
className={styles.buttonWrapper}
|
|
style={{ '--n': index + 1 } as React.CSSProperties}
|
|
>
|
|
<SquareButton
|
|
{...button}
|
|
size={buttonSize}
|
|
onClick={() => {
|
|
if (button.action && onAction) {
|
|
onAction(button.action.type, button.action.value, block.id, button.id);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{hasMoreButtons && (
|
|
<button
|
|
className={styles.showMoreButton}
|
|
onClick={() => setExpanded(!expanded)}
|
|
>
|
|
{expanded ? 'Свернуть' : 'Показать больше'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GridButtonsBlock;
|