96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
// - 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/svg-icons/navigation/close'
|
|
import FlatButton from 'material-ui/FlatButton'
|
|
import Divider from 'material-ui/Divider'
|
|
|
|
|
|
|
|
/**
|
|
* Create component class
|
|
*/
|
|
export default class DialogTitle extends Component {
|
|
|
|
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
|
|
}
|
|
|
|
/**
|
|
* Component constructor
|
|
* @param {object} props is an object properties of component
|
|
*/
|
|
constructor(props) {
|
|
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 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'
|
|
}
|
|
}
|
|
|
|
const { buttonLabel, disabledButton, onClickButton, onRequestClose, title } = this.props
|
|
|
|
return (
|
|
<div className='g__dialog-title'>
|
|
<div style={styles.contain}>
|
|
<div style={{ paddingRight: '10px' }}>
|
|
<SvgClose onClick={onRequestClose} hoverColor={grey400} style={{ cursor: 'pointer' }} />
|
|
</div>
|
|
<div style={styles.title}>
|
|
{title || ''}
|
|
</div>
|
|
{ buttonLabel ? (<div style={{ marginTop: '-9px' }}>
|
|
<FlatButton label={buttonLabel || ''} primary={true} disabled={disabledButton ? disabledButton : false} onClick={onClickButton || (() => _)} />
|
|
</div>) : ''}
|
|
</div>
|
|
<Divider />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|