material-ui使ってみた。 #16 - ゆるふわ技術日誌

今日やったこと

matrial-uiを使ってみた

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

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

www.material-ui.com

で、今回作ったのは

CountDownTimerコンポーネントを自作
スタートボタンがあってpropsで渡された秒数カウントダウンする
残り秒数はプログレスバーで表示

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

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;