93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
// - Import react components
|
|
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { grey400 } from 'material-ui/styles/colors'
|
|
import SvgClose from 'material-ui-icons/close'
|
|
import Button from 'material-ui/Button'
|
|
import Divider from 'material-ui/Divider'
|
|
import { IDialogTitleComponentProps } from './IDialogTitleComponentProps'
|
|
import { IDialogTitleComponentState } from './IDialogTitleComponentState'
|
|
|
|
/**
|
|
* Create component class
|
|
*/
|
|
export default class DialogTitleComponent extends Component<IDialogTitleComponentProps,IDialogTitleComponentState> {
|
|
|
|
static propTypes = {
|
|
/**
|
|
* The label of right button
|
|
*/
|
|
buttonLabel: PropTypes.string,
|
|
/**
|
|
* If it's true button will be disabled
|
|
*/
|
|
disabledButton: PropTypes.bool,
|
|
/**
|
|
* Call the funtion the time is clicked on right button
|
|
*/
|
|
onClickButton: PropTypes.func,
|
|
/**
|
|
* The function will be called the time is clicked on close
|
|
*/
|
|
onRequestClose: PropTypes.func.isRequired,
|
|
/**
|
|
* The title of dialog box
|
|
*/
|
|
title: PropTypes.string
|
|
}
|
|
|
|
styles = {
|
|
contain: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between'
|
|
},
|
|
title: {
|
|
color: 'rgba(0,0,0,0.87)',
|
|
flex: '1 1',
|
|
font: '500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component constructor
|
|
* @param {object} props is an object properties of component
|
|
*/
|
|
constructor (props: IDialogTitleComponentProps) {
|
|
super(props)
|
|
|
|
// Defaul state
|
|
this.state = {
|
|
}
|
|
|
|
// Binding functions to `this`
|
|
|
|
}
|
|
|
|
/**
|
|
* Reneder component DOM
|
|
* @return {react element} return the DOM which rendered by component
|
|
*/
|
|
render () {
|
|
|
|
const { buttonLabel, disabledButton, onClickButton, onRequestClose, title } = this.props
|
|
|
|
return (
|
|
<div className='g__dialog-title'>
|
|
<div style={this.styles.contain as any}>
|
|
<div style={{ paddingRight: '10px' }}>
|
|
<SvgClose onClick={onRequestClose} hoverColor={grey400} style={{ cursor: 'pointer' }} />
|
|
</div>
|
|
<div style={this.styles.title}>
|
|
{title || ''}
|
|
</div>
|
|
{ buttonLabel ? (<div style={{ marginTop: '-9px' }}>
|
|
<Button label={buttonLabel || ''} color='primary' disabled={disabledButton ? disabledButton : false} onClick={onClickButton || (x => x)} />
|
|
</div>) : ''}
|
|
</div>
|
|
<Divider />
|
|
</div>
|
|
)
|
|
}
|
|
}
|