diff --git a/src/debugger.jsx b/src/debugger.jsx index ffc00ab..d86da85 100644 --- a/src/debugger.jsx +++ b/src/debugger.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import emitter from "./emitter"; import {canUseDOM} from 'fbjs/lib/ExecutionEnvironment'; @@ -72,48 +72,61 @@ if(process.env.NODE_ENV === "production" || !canUseDOM) { addCSSRule("#pushtell-debugger .pushtell-close:hover", "color: #FF0000"); addCSSRule("#pushtell-debugger .pushtell-close, #pushtell-debugger label", "transition: all .25s"); } + function removeStyleSheet() { - if(style !== null){ + if(style !== null) { document.head.removeChild(style); style = null; } } - const Debugger = React.createClass({ - displayName: "Pushtell.Debugger", - getInitialState(){ - return { - experiments: emitter.getActiveExperiments(), - visible: false - }; - }, + + class Debugger extends Component { + displayName = "Pushtell.Debugger"; + + state = { + experiments: emitter.getActiveExperiments(), + visible: false + }; + + constructor(props) { + super(props); + + this.toggleVisibility = this.toggleVisibility.bind(this); + } + toggleVisibility() { this.setState({ visible: !this.state.visible }); - }, - updateExperiments(){ + } + + updateExperiments() { this.setState({ experiments: emitter.getActiveExperiments() }); - }, + } + setActiveVariant(experimentName, variantName) { emitter.setActiveVariant(experimentName, variantName); - }, - componentWillMount(){ + } + + componentWillMount() { this.activeSubscription = emitter.addListener("active", this.updateExperiments); this.inactiveSubscription = emitter.addListener("inactive", this.updateExperiments); - }, - componentWillUnmount(){ + } + + componentWillUnmount() { this.activeSubscription.remove(); this.inactiveSubscription.remove(); - }, - render(){ - var experimentNames = Object.keys(this.state.experiments); + } + + render() { + const experimentNames = Object.keys(this.state.experiments); if(this.state.visible) { return