import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import { toggleFilter, toggleVisibility } from '../ducks/eventLog' import ToggleButton from './common/ToggleButton' import EventList from './EventLog/EventList' class EventLog extends Component { static propTypes = { filters: PropTypes.object.isRequired, events: PropTypes.array.isRequired, onToggleFilter: PropTypes.func.isRequired, onClose: 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, onToggleFilter, onClose } = this.props return (
Eventlog
{['debug', 'info', 'web'].map(type => ( onToggleFilter(type)}/> ))}
) } } export default connect( state => ({ filters: state.eventLog.filter, events: state.eventLog.filteredEvents, }), { onClose: toggleVisibility, onToggleFilter: toggleFilter, } )(EventLog)