xcv58/CubeTimer

import React from 'react'
import { inject, observer } from 'mobx-react'
import Panel from './Panel'
import { getTimeObj } from '../libs/utils'

const getStyle = ({ min, lapse }) => {
  if (min === lapse) {
    return { color: 'black' }
  }
}

export const Record = ({ lapse, min, index }) => {
  const { minute, second, millisecond } = getTimeObj(lapse)
  const value = `${minute}:${second}:${millisecond}`
  return (
    <div className='timebar' style={getStyle({ min, lapse })}>
      <span style={{ float: 'left', width: 0 }}>{index}</span>
      {value}
    </div>
  )
}

@inject('recordsStore')
@observer
export default class Records extends React.Component {
  render () {
    const { records, min } = this.props.recordsStore
    const length = records.length
    const list = records.map((record, i) => (
      <Record key={record.timestamp} {...{ min, index: length - i }} {...record} />
    ))
    return (
      <div style={{
        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)'
      }}>
        <div style={{
          maxHeight: '50vh',
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column',
          borderTop: '1px solid #ededed',
          alignItems: 'center'
        }}>
          {list}
        </div>
        <Panel />
      </div>
    )
  }
}