import React from 'react'; import PropTypes from 'prop-types'; import { Droppable } from 'react-beautiful-dnd'; import { Typography, Paper } from '@material-ui/core'; import Slide from './slide'; import { useStyles } from './column.styles'; import { useCommonStyles } from '../../pages/common.styles'; const Column = ({ column }) => { const commonStyles = useCommonStyles(); const styles = useStyles(); const handleTitle = (title) => title === 'available' ? 'Активні' : 'Неактивні'; return ( <Paper elevation={3} className={styles.columnContainer}> <Typography variant='h3' style={{ padding: '10px' }}> {handleTitle(column.title)} </Typography> <Droppable droppableId={column.title} direction='horizontal'> {(provided, snapshot) => ( <div className={styles.taskListContainer} ref={provided.innerRef} {...provided.droppableProps} isDraggingOver={snapshot.isDraggingOver} > {column.items.length ? ( column.items.map((slide, index) => ( <Slide key={slide._id} slide={slide} index={index} /> )) ) : ( <div> <p className={commonStyles.noRecords}>Слайди відсутні</p> <p className={commonStyles.noRecords} style={{ fontSize: 'smaller' }} > Перетягніть сюди слайд з іншої колонки </p> </div> )} {provided.placeholder} </div> )} </Droppable> </Paper> ); }; const valueShape = PropTypes.shape({ description: PropTypes.arrayOf( PropTypes.shape({ lang: PropTypes.string, value: PropTypes.string }) ), images: PropTypes.shape({ thumbnail: PropTypes.string }), link: PropTypes.string, order: PropTypes.number, show: PropTypes.bool, title: PropTypes.arrayOf( PropTypes.shape({ lang: PropTypes.string, value: PropTypes.string }) ), _id: PropTypes.string }); Column.propTypes = { column: PropTypes.shape({ items: PropTypes.shape(valueShape), title: PropTypes.string }).isRequired }; export default Column;