import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
import ToggleButton from './common/ToggleButton'
import EventList from './EventLog/EventList'

export class PureEventLog extends Component {

    static propTypes = {
        filters: PropTypes.object.isRequired,
        events: PropTypes.array.isRequired,
        toggleFilter: PropTypes.func.isRequired,
        close: PropTypes.func.isRequired,
        defaultHeight: PropTypes.number,
    }

    static defaultProps = {
        defaultHeight: 200,
    }

    constructor(props, context) {
        super(props, context)

        this.state = { height: this.props.defaultHeight }

        this.onDragStart = this.onDragStart.bind(this)
        this.onDragMove = this.onDragMove.bind(this)
        this.onDragStop = this.onDragStop.bind(this)
    }

    onDragStart(event) {
        event.preventDefault()
        this.dragStart = this.state.height + event.pageY
        window.addEventListener('mousemove', this.onDragMove)
        window.addEventListener('mouseup', this.onDragStop)
        window.addEventListener('dragend', this.onDragStop)
    }

    onDragMove(event) {
        event.preventDefault()
        this.setState({ height: this.dragStart - event.pageY })
    }

    onDragStop(event) {
        event.preventDefault()
        window.removeEventListener('mousemove', this.onDragMove)
    }

    render() {
        const { height } = this.state
        const { filters, events, toggleFilter, close } = this.props

        return (
            <div className="eventlog" style={{ height }}>
                <div onMouseDown={this.onDragStart}>
                    Eventlog
                    <div className="pull-right">
                        {['debug', 'info', 'web', 'warn', 'error'].map(type => (
                            <ToggleButton key={type} text={type} checked={filters[type]} onToggle={() => toggleFilter(type)}/>
                        ))}
                        <i onClick={close} className="fa fa-close"></i>
                    </div>
                </div>
                <EventList events={events} />
            </div>
        )
    }
}

export default connect(
    state => ({
        filters: state.eventLog.filters,
        events: state.eventLog.view,
    }),
    {
        close: toggleVisibility,
        toggleFilter: toggleFilter,
    }
)(PureEventLog)
'qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/cgit/xen/xen/tree/?h=staging&amp;id=7737ecb20c5babff45445d27fff91894b43a2d28'>root</a>/<a href='/cgit/xen/xen/tree/tools?h=staging&amp;id=7737ecb20c5babff45445d27fff91894b43a2d28'>tools</a>/<a href='/cgit/xen/xen/tree/tools/libfsimage?h=staging&amp;id=7737ecb20c5babff45445d27fff91894b43a2d28'>libfsimage</a>/<a href='/cgit/xen/xen/tree/tools/libfsimage/Rules.mk?h=staging&amp;id=7737ecb20c5babff45445d27fff91894b43a2d28'>Rules.mk</a></div><div class='content'>blob: 8a236552f7df30efe11f5d8903072e19f60a7bd5 (<a href='/cgit/xen/xen/plain/tools/libfsimage/Rules.mk?h=staging&amp;id=7737ecb20c5babff45445d27fff91894b43a2d28'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
</pre></td>
<td class='lines'><pre><code>