ゆるふわ技術日誌

ゆるくふわっと広く浅く。

material-ui使ってみた。 #16

今日やったこと

matrial-uiを使ってみた

material-uiはReactのコンポーネントキット?的なやつです。

名前の通り、あのGoogleさんのマテリアルデザイン準拠な感じ。公式サイトは以下。

www.material-ui.com

で、今回作ったのは

みたいな感じにしてみました。

github.com

リポジトリはこれ。CountDownTimerコンポーネントはこんな感じ。

import React, {Component} from 'react';

import RaisedButton from 'material-ui/RaisedButton';
import LinearProgress from 'material-ui/LinearProgress';

class CountDownTimer extends Component {
  constructor(props) {
    super(props);
    this.state = {remainSeconds: this.props.seconds}

    this.startTimer = this.startTimer.bind(this);
  }
  
  startTimer() {
    const timer = window.setInterval(() => {
      this.setState((prev) => {
        return {remainSeconds: prev.remainSeconds - 1}
      });
    },1000);
    
    this.setState(() => {
      return {interval: timer}
    });
  }

  render() {
    return (
      <div>
        <LinearProgress mode="determinate" max={this.props.seconds} value={this.state.remainSeconds} />
        <RaisedButton label="START" onTouchTap={this.startTimer}  />
      </div>
    );
  }
  
}

export default CountDownTimer;

これと言って難しいこととか何もしてないです。ついでに言えば、スタートボタン無効化したり、時間過ぎたときの処理とかなにもやってないです。

一点ハマったポイントとしては、startTimerメソッドの中でsetIntervalしてるのですが、そのコールバック関数の中でthis.setStateしてるわけですが、そのままだとundefinedとかで怒られちゃいます。

ググればすぐでてきますが、constructorの最終行でやってるbindを書かないとだめみたいです。スコープがコールバック関数には及ばないから…みたいな解説がありました。

最終的にこういう見た目に。

f:id:uutarou:20170530100027p:plain

コンポーネントはただの部品なので単純に積んでいくとこんな感じにマージンとかゼロですごいことになるのですが、こういうのは自分でCSS書くしかないのかな…?その辺がよくわからないので誰か教えてください。(Bootstrapみたいな感覚で使えるような気がしてたので)

雑談

タスクが溜まりまくっててやばい。

キューじゃなくてスタックで処理する癖があるのでやばい。