Cédric FAMIBELLE-PRONZOLA
84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import {useRef, useEffect} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import {
|
|
Button,
|
|
Box,
|
|
Typography,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle
|
|
} from '@mui/material'
|
|
|
|
import MizikBadjMeni from './mizik-badj-meni'
|
|
|
|
export default function AwtisBiyografi({alias, paroles, biographie, esByografiOuve, meteEsByografiOuve}) {
|
|
const handleClose = () => {
|
|
meteEsByografiOuve(false)
|
|
}
|
|
|
|
const descriptionElementRef = useRef(null)
|
|
useEffect(() => {
|
|
if (esByografiOuve) {
|
|
const {current: descriptionElement} = descriptionElementRef
|
|
if (descriptionElement !== null) {
|
|
descriptionElement.focus()
|
|
}
|
|
}
|
|
}, [esByografiOuve])
|
|
|
|
return (
|
|
<div>
|
|
<Dialog
|
|
scroll='paper'
|
|
open={esByografiOuve}
|
|
aria-labelledby='scroll-dialog-title'
|
|
aria-describedby='scroll-dialog-description'
|
|
onClose={handleClose}
|
|
>
|
|
<Box display='flex' justifyContent='center' alignItems='center'>
|
|
<DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
|
|
<MizikBadjMeni paroles={paroles} />
|
|
</Box>
|
|
<DialogContent dividers>
|
|
<DialogContentText
|
|
ref={descriptionElementRef}
|
|
align='justify'
|
|
id='scroll-dialog-description'
|
|
tabIndex={-1}
|
|
>
|
|
{biographie ? (
|
|
<Typography component='span'>
|
|
{biographie}
|
|
</Typography>
|
|
) : (
|
|
<Typography component='span'>
|
|
Pas de biobraphie disponible
|
|
</Typography>
|
|
)}
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions style={{margin: 'auto'}}>
|
|
<Button variant='outlined' color='primary' onClick={handleClose}>
|
|
Fermer
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
AwtisBiyografi.propTypes = {
|
|
alias: PropTypes.string.isRequired,
|
|
paroles: PropTypes.array.isRequired,
|
|
biographie: PropTypes.string,
|
|
esByografiOuve: PropTypes.bool.isRequired,
|
|
meteEsByografiOuve: PropTypes.func.isRequired
|
|
}
|
|
|
|
AwtisBiyografi.defaultProps = {
|
|
biographie: null
|
|
}
|