第3回 海外サッカー賭け OSS Rader Scopeのソースコード解説 （2/3）

２）ランキングコンポーネント

ランキングコンポーネントはCSS3 によるアニメーションをつけるために、少々トリッキーな作りとしていますが、仕組みはカレンダーコンポーネントと大して変わりません。

var OssList = 海外サッカー賭け.createClass({
  _lists: function() {
    var _this = this;
    var ranks = {};
    this.props.dotPosition.forEach(function(pos, i) {
      ranks[pos.product.id] = {
        rank: i + 1,
        color: pos.color,
        top: i * 20
      };
    });
 
    return this.props.dotPosition.map(function(position, i) {
      var 海外サッカー賭け = position.product;
      var style = {
        position: 'absolute',
        color: ranks[海外サッカー賭け.id].color,
        width: '100%',
        transition: 'top 1s',
        top: ranks[海外サッカー賭け.id].top + 'px'
      };
      if (_this.props.selectedOssId === 海外サッカー賭け.id) style.backgroundColor = '#f2dede';
      var label = ranks[海外サッカー賭け.id].rank + '. ' + 海外サッカー賭け.name;
      var url = "http://radar.海外サッカー賭けscsk.info/product/" + 海外サッカー賭け.id + "/summary/" + _this.props.yearMonth;
      return <li ref={海外サッカー賭け.id} key={'海外サッカー賭け-' + 海外サッカー賭け.id} style={style} data-ossid={海外サッカー賭け.id}>
        <a href={url}>{label}</a>
      </li>
    });
  },
  render: function() {
    var listStyle = {
      position: 'relative'
    };
    return (
      <div key="海外サッカー賭け" className="list-container">
        <div key="海外サッカー賭け-container" className="海外サッカー賭け-container">
          <h3 key="海外サッカー賭け-title">対象の海外サッカー賭け</h3>
          <ul ref="listContainer" key="海外サッカー賭け-list" className="海外サッカー賭け-list" style={listStyle}>
            { this._lists() }
          </ul>
        </div>
      </div>
    );
  },

renderメソッドではリストで海外サッカー賭けの一覧を配置しています。月やカテゴリが変わった時にアニメーションをするために、要素のpositionはabsoluteとしています。cssのtopプロパティを変更すると、要素の出現順番を変えずに表示順番を変更することができます。topの値はランキングの順位*20pxで計算します。また、transition: top 1sとし、topの値が変わった時に1秒間かけて移動するアニメーションを実現しています。