import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import classnames from 'classnames'

export default class Splitter extends Component {

    static defaultProps = { axis: 'x' }

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

        this.state = { applied: false, startX: false, startY: false }

        this.onMouseMove = this.onMouseMove.bind(this)
        this.onMouseDown = this.onMouseDown.bind(this)
        this.onMouseUp = this.onMouseUp.bind(this)
        this.onDragEnd = this.onDragEnd.bind(this)
    }

    onMouseDown(e) {
        this.setState({ startX: e.pageX, startY: e.pageY })

        window.addEventListener('mousemove', this.onMouseMove)
        window.addEventListener('mouseup', this.onMouseUp)
        // Occasionally, only a dragEnd event is triggered, but no mouseUp.
        window.addEventListener('dragend', this.onDragEnd)
    }

    onDragEnd() {
        ReactDOM.findDOMNode(this).style.transform = ''

        window.removeEventListener('dragend', this.onDragEnd)
        window.removeEventListener('mouseup', this.onMouseUp)
        window.removeEventListener('mousemove', this.onMouseMove)
    }

    onMouseUp(e) {
        this.onDragEnd()

        const node = ReactDOM.findDOMNode(this)
        const prev = node.previousElementSibling

        let flexBasis = prev.offsetHeight + e.pageY - this.state.startY

        if (this.props.axis === 'x') {
            flexBasis = prev.offsetWidth + e.pageX - this.state.startX
        }

        prev.style.flex = `0 0 ${Math.max(0, flexBasis)}px`
        node.nextElementSibling.style.flex = '1 1 auto'

        this.setState({ applied: true })
        this.onResize()
    }

    onMouseMove(e) {
        let dX = 0
        let dY = 0
        if (this.props.axis === 'x') {
            dX = e.pageX - this.state.startX
        } else {
            dY = e.pageY - this.state.startY
        }
        ReactDOM.findDOMNode(this).style.transform = `translate(${dX}px, ${dY}px)`
    }

    onResize() {
        // Trigger a global resize event. This notifies components that employ virtual scrolling
        // that their viewport may have changed.
        window.setTimeout(() => window.dispatchEvent(new CustomEvent('resize')), 1)
    }

    reset(willUnmount) {
        if (!this.state.applied) {
            return
        }

        const node = ReactDOM.findDOMNode(this)

        node.previousElementSibling.style.flex = ''
        node.nextElementSibling.style.flex = ''

        if (!willUnmount) {
            this.setState({ applied: false })
        }
        this.onResize()
    }

    componentWillUnmount() {
        this.reset(true)
    }

    render() {
        return (
            <div className={classnames('splitter', this.props.axis === 'x' ? 'splitter-x' : 'splitter-y')}>
                <div onMouseDown={this.onMouseDown} draggable="true"></div>
            </div>
        )
    }
}
ame='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.cgi/openwrt/upstream/tree/?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>root</a>/<a href='/cgit.cgi/openwrt/upstream/tree/target?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>target</a>/<a href='/cgit.cgi/openwrt/upstream/tree/target/linux?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>linux</a>/<a href='/cgit.cgi/openwrt/upstream/tree/target/linux/brcm63xx?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>brcm63xx</a>/<a href='/cgit.cgi/openwrt/upstream/tree/target/linux/brcm63xx/profiles?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>profiles</a>/<a href='/cgit.cgi/openwrt/upstream/tree/target/linux/brcm63xx/profiles/200-GW6X00.mk?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>200-GW6X00.mk</a></div><div class='content'>blob: 0657a822299ec0d1ec1804adc4e6b0d60fd4ea67 (<a href='/cgit.cgi/openwrt/upstream/plain/target/linux/brcm63xx/profiles/200-GW6X00.mk?h=v21.02.1&amp;id=075a46c0662c3dcb10de6edda898e4fb73319471'>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>
</pre></td>
<td class='lines'><pre><code>