# All files / Dialog/components Title.tsx

0% Statements 0/20
0% Branches 0/2
0% Functions 0/2
0% Lines 0/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45

     import * as React from 'react'
    import * as PropTypes from 'prop-types'
    import { createUseStyles } from '@fluent-ui/styles'
    import { styles } from '../Dialog.styled'
    import { Theme } from '../../styles'
    import { DialogClassProps, DialogTitleProps } from '../Dialog.type'
    import { DialogContext } from '../Dialog'

    import Typography from '../../Typography'
    import IconButton from '../../IconButton'
    import { Cancel as CancelIcon } from '@fluent-ui/icons'

    export const name = 'DialogTitle'

    const useStyles = createUseStyles<Theme, DialogClassProps>(styles, { name })

    const Title: React.FC<DialogTitleProps> = (props): React.ReactElement => {
      const { children, ...rest } = props
      const classes = useStyles(props)
      const { onChange } = React.useContext(DialogContext)
      function handleClose(): void {
        onChange && onChange(false)
      }
      return (
        <div className={classes.title} {...rest}>
          <Typography variant="h6">{children}</Typography>
          <IconButton
            size="small"
            style={{ marginRight: '-10px', height: '100%' }}
            onClick={handleClose}
          >
            <CancelIcon />
          </IconButton>
        </div>
      )
    }

    Title.displayName = `F${name}`

    Title.propTypes = {
      children: PropTypes.any.isRequired
    }

    export default Title