Typescript で Material UI の App Bar を使用した際のメモ書き

(2016.07.05 OS X El Capitan)

以前作成したテキストの文字数などを数えるウェブアプリに
Material UI を使用して、App Bar をつけてみる.

必要な npm パッケージのインストール

npm i material-ui react-tap-event-plugin --save-dev

型定義ファイルのインストール

typings i dt~material-ui --save --global
typings i dt~react-tap-event-plugin --save --global

App Bar

App Bar の作成. IconMenu を iconElementLeft に設定.

import * as React from 'react';
import {AppBar, IconButton, IconMenu, MenuItem} from 'material-ui';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

export default class AppBarIcon extends React.Component<any, any> {
    render () {
        return (
            <AppBar
                 title="Summarize Text Data"
                 titleStyle={{textAlign: "center"}}
                 iconElementLeft={
                     <IconMenu
                         iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                         anchorOrigin={{horizontal: 'left', vertical: 'top'}}
                         targetOrigin={{horizontal: 'left', vertical: 'top'}}
                     >
                         <MenuItem primaryText="Version 0.0.1" />
                         <MenuItem primaryText="Version 0.0.1" />
                     </IconMenu>
                 }
            />
        );
    }
}

App.tsx の編集

より

import * as React from 'react';
import AppBarIcon from './AppBarIcon';
import FileDropzoneContainer from '../containers/FileDropzoneContainer';
import TextAreaContainer from '../containers/TextAreaContainer';
import SummaryContainer from '../containers/SummaryContainer';

import * as injectTapEventPlugin from 'react-tap-event-plugin';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

injectTapEventPlugin();

const App = () => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        <div>
            <AppBarIcon />
            <FileDropzoneContainer />
            <TextAreaContainer />
            <SummaryContainer />
        </div>
    </MuiThemeProvider>
)

export default App

index.html の編集

<html>
<head>
    <title>Summarize Text Data</title>
</head>
<body>
    <div id="root"></div>
    <script src="build.js"></script>
</body>
</html>

その他

style でテキストエリアのマージンなどを調整した.