Migrate components to typescript

src/layouts/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>
+    )
+  }
+}

src/layouts/dialogTitle/IDialogTitleComponentProps.ts

@@ -0,0 +1,40 @@
+export interface IDialogTitleComponentProps {
+
+  /**
+   * Lable of the button
+   *
+   * @type {string}
+   * @memberof IDialogTitleComponentProps
+   */
+  buttonLabel?: string 
+
+  /**
+   * Dialog tile
+   *
+   * @type {string}
+   * @memberof IDialogTitleComponentProps
+   */
+  title: string
+
+  /**
+   * Button is disabled {true} or not {false}
+   *
+   * @type {boolean}
+   * @memberof IDialogTitleComponentProps
+   */
+  disabledButton?: boolean 
+
+  /**
+   * On click event
+   *
+   * @memberof IDialogTitleComponentProps
+   */
+  onClickButton?: (event: any) => void 
+
+  /**
+   * On request close event
+   *
+   * @memberof IDialogTitleComponentProps
+   */
+  onRequestClose: (event: any) => void
+}

src/layouts/dialogTitle/IDialogTitleComponentState.ts

@@ -0,0 +1,3 @@
+export interface IDialogTitleComponentState {
+
+}

src/layouts/dialogTitle/index.ts

@@ -0,0 +1,2 @@
+import DialogTitleComponent from './DialogTitleComponent'
+export default DialogTitleComponent

src/layouts/iconButtonElement/IconButtonElementComponent.tsx

@@ -0,0 +1,28 @@
+// - Import react components
+import React, { Component } from 'react'
+import IconButton from 'material-ui/IconButton'
+import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
+import { grey200, grey400, grey600 } from 'material-ui/styles/colors'
+
+/**
+ * DOM styles
+ *
+ *
+ * @memberof Post
+ */
+const styles = {
+  iconButton: {
+    width: 24,
+    height: 24
+  }
+}
+
+const IconButtonElementComponent = (
+      <IconButton style={styles.iconButton} iconStyle={styles.iconButton}
+        touch={true}
+      >
+        <MoreVertIcon color={grey400} viewBox='9 0 24 24' />
+      </IconButton>
+    )
+
+export default IconButtonElementComponent

src/layouts/iconButtonElement/index.ts

@@ -0,0 +1,2 @@
+import IconButtonElementComponent from './IconButtonElementComponent'
+export default IconButtonElementComponent