第3回 React OSS Rader Scopeのソースコード解説 （2/3）

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

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

var OssList = React.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 oss = position.product;
      var style = {
        position: 'absolute',
        color: ranks[oss.id].color,
        width: '100%',
        transition: 'top 1s',
        top: ranks[oss.id].top + 'px'
      };
      if (_this.props.selectedOssId === oss.id) style.backgroundColor = '#f2dede';
      var label = ranks[oss.id].rank + '. ' + oss.name;
      var url = "http://radar.oss.scsk.info/product/" + oss.id + "/summary/" + _this.props.yearMonth;
      return <li ref={oss.id} key={'oss-' + oss.id} style={style} data-ossid={oss.id}>
        <a href={url}>{label}</a>
      </li>
    });
  },
  render: function() {
    var listStyle = {
      position: 'relative'
    };
    return (
      <div key="oss" className="list-container">
        <div key="oss-container" className="oss-container">
          <h3 key="oss-title">対象のOSS</h3>
          <ul ref="listContainer" key="oss-list" className="oss-list" style={listStyle}>
            { this._lists() }
          </ul>
        </div>
      </div>
    );
  },

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