[New Feature] Apply graph strategy

src/components/profile/dialogTitle/DialogTitleComponent.tsx

@@ -0,0 +1,92 @@
+// - 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'
+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' }}>
+            <FlatButton label={buttonLabel || ''} primary={true} disabled={disabledButton ? disabledButton : false} onClick={onClickButton || (x => x)} />
+          </div>) : ''}
+        </div>
+        <Divider />
+      </div>
+    )
+  }
+}