Fix update deprecated things

.babelrc

@@ -1,3 +1,4 @@
 {
-    "presets": ["es2015", "react", "stage-2"]
+  "presets": ["@babel/react", "@babel/env"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.eslintignore

@@ -1,2 +1,3 @@
-lib
-example
+lib/*.js
+example/*.js
+src/*.js

.eslintrc

@@ -1,6 +1,6 @@
 {
-    "extends": "gitbook",
-    "env": {
-        "mocha": true
-    }
+  "extends": "gitbook",
+  "env": {
+    "mocha": true
+  }
 }

.gitignore

@@ -36,9 +36,6 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 
-# Babel dist directory
-lib
-
 # Example build
 example/bundle.js
 example/main.css

.prettierignore

@@ -0,0 +1,2 @@
+lib/*.js
+example/*.js

example/main.js

@@ -1,23 +1,20 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
+const React = require("react");
+const ReactDOM = require("react-dom");
 
-const NPSInput = require('../src');
+const NPSInput = require("../src");
 
-const Example = React.createClass({
-    onSubmit({ score }) {
-        alert('Submitted ' + score);
-    },
+class Example extends React.Component {
+  onSubmitAll = ({ score, comment }) => {
+    alert("Submitted " + score + " " + comment);
+  };
 
-    render() {
-        return (
-            <div>
-                <NPSInput onSubmit={this.onSubmit}></NPSInput>
-            </div>
-        );
-    }
-});
+  render() {
+    return (
+      <div>
+        <NPSInput onSubmitAll={this.onSubmitAll} />
+      </div>
+    );
+  }
+}
 
-ReactDOM.render(
-    <Example />,
-    document.getElementById('example')
-);
+ReactDOM.render(<Example />, document.getElementById("example"));

lib/NPSInput.js

@@ -0,0 +1,197 @@
+// prettier-ignore
+"use strict";
+
+var PropTypes = require('prop-types');
+
+var React = require("react");
+var classNames = require("classnames");
+var NPSScale = require("./NPSScale");
+
+/**
+ * Promp the current user for its NPM score.
+ * @param {ReactClass}
+ */
+class NPSInput extends React.Component {
+  static displayName = "NPSInput";
+
+  static propTypes = {
+    animated: PropTypes.bool,
+    onSubmit: PropTypes.func.isRequired,
+    onSubmitComment: PropTypes.func.isRequired,
+    onSubmitAll: PropTypes.func.isRequired,
+    onDismissed: PropTypes.func.isRequired,
+    children: PropTypes.func
+  };
+
+  static defaultProps = {
+    animated: true,
+    onSubmit: function onSubmit() {},
+    onSubmitComment: function onSubmitComment() {},
+    onSubmitAll: function onSubmitAll() {},
+    onDismissed: function onDismissed() {},
+    children: function children() {
+      return React.createElement(
+        "p",
+        { className: "NPSInput-Label" },
+        "Ange ytterligare kommentarer (valfritt):"
+      );
+    }
+  };
+
+  state = {
+    dismissed: false,
+    score: null,
+    comment: null,
+    submitted: false
+  };
+
+  /**
+   * User clicked on a value.
+   */
+  onSubmit = (score) => {
+    this.setState({
+      score: score
+    });
+  };
+
+  /**
+   * User clicked on a value.
+   */
+  onSubmitComment = (event) => {
+    var _state = this.state,
+      score = _state.score,
+      comment = _state.comment;
+
+    this.submit(score, comment);
+    event.preventDefault();
+  };
+
+  submit = (score, comment) => {
+    var onSubmitAll = this.props.onSubmitAll;
+
+    this.setState(
+      {
+        score: score,
+        comment: comment,
+        submitted: true
+      },
+      function() {
+        onSubmitAll({ score: score, comment: comment });
+      }
+    );
+  };
+
+  onChangeComment = (event) => {
+    this.setState({
+      comment: event.target.value
+    });
+  };
+
+  /**
+   * User clicked to dismiss this form.
+   */
+  onDismiss = () => {
+    var onDismissed = this.props.onDismissed;
+    var score = this.state.score;
+
+    this.setState(
+      {
+        dismissed: true
+      },
+      function() {
+        onDismissed({ score: score });
+      }
+    );
+  };
+
+  render() {
+    var _props = this.props,
+      animated = _props.animated,
+      children = _props.children;
+    var _state2 = this.state,
+      dismissed = _state2.dismissed,
+      score = _state2.score,
+      submitted = _state2.submitted;
+
+    var message =
+      "Hur sannolikt är det att du skulle rekommendera tjänsten Mitt Fortum till en vän eller kollega?";
+
+    if (dismissed) {
+      return null;
+    }
+
+    return React.createElement(
+      "div",
+      { className: classNames("NPSInput", { animated: animated }) },
+      React.createElement(
+        "button",
+        { className: "NPSInput-Close", onClick: this.onDismiss },
+        "\u2715"
+      ),
+      submitted
+        ? React.createElement(
+            "div",
+            { className: "NPSInput-Inner" },
+            React.createElement(
+              "p",
+              { className: "NPSInput-Message" },
+              "Tack f\xF6r ditt svar!"
+            )
+          )
+        : score !== null
+        ? React.createElement(
+            "div",
+            null,
+            React.createElement(
+              "div",
+              { className: "NPSInput-Inner" },
+              children({
+                score: score,
+                dismiss: this.onDismiss
+              })
+            ),
+            React.createElement("label", { className: "NPSComment-Label" }),
+            React.createElement(
+              "form",
+              null,
+              React.createElement(
+                "div",
+                { className: classNames("NPSComment") },
+                React.createElement("input", {
+                  id: "comment",
+                  className: "NPSComment-Text",
+                  type: "text",
+                  placeholder: "",
+                  onChange: this.onChangeComment
+                })
+              ),
+              React.createElement(
+                "div",
+                { className: classNames("NPSComment") },
+                React.createElement(
+                  "button",
+                  {
+                    className: "NPSComment-Button",
+                    type: "button",
+                    onClick: this.onSubmitComment
+                  },
+                  "Skicka"
+                )
+              )
+            )
+          )
+        : React.createElement(
+            "div",
+            { className: "NPSInput-Inner" },
+            React.createElement(
+              "p",
+              { className: "NPSInput-Message" },
+              message
+            ),
+            React.createElement(NPSScale, { onSubmit: this.onSubmit })
+          )
+    );
+  }
+}
+
+module.exports = NPSInput;

lib/NPSScale.js

@@ -0,0 +1,108 @@
+// prettier-ignore
+"use strict";
+
+var PropTypes = require('prop-types');
+
+var React = require("react");
+var classNames = require("classnames");
+
+var MIN = 0;
+var MAX = 10;
+
+/**
+ * Scale to select NPS value.
+ * @param {ReactClass}
+ */
+class NPSScale extends React.Component {
+  static displayName = "NPSScale";
+
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    onSubmit: function onSubmit(value) {}
+  };
+
+  state = {
+    value: null
+  };
+
+  onMouseEnter = (value) => {
+    this.setState({
+      value: value
+    });
+  };
+
+  onMouseLeave = (value) => {
+    this.setState({
+      value: null
+    });
+  };
+
+  onSelect = (value) => {
+    var onSubmit = this.props.onSubmit;
+
+    onSubmit(value);
+  };
+
+  render() {
+    var _this = this;
+
+    var value = this.state.value;
+
+    return React.createElement(
+      "div",
+      { className: "NPSScale" },
+      React.createElement(
+        "div",
+        { className: "NPSScale-Values" },
+        range(MIN, MAX).map(function(i) {
+          return React.createElement(
+            "div",
+            {
+              key: i,
+              className: classNames("NPSScale-Value", {
+                selected: value !== null && value >= i
+              }),
+              onMouseEnter: function onMouseEnter() {
+                return _this.onMouseEnter(i);
+              },
+              onMouseLeave: function onMouseLeave() {
+                return _this.onMouseLeave(i);
+              },
+              onClick: function onClick() {
+                return _this.onSelect(i);
+              }
+            },
+            React.createElement("div", null, i)
+          );
+        })
+      ),
+      React.createElement(
+        "div",
+        { className: "NPSScale-Legend" },
+        React.createElement(
+          "div",
+          { className: "NPSScale-Label left" },
+          "Inte sannolikt"
+        ),
+        React.createElement(
+          "div",
+          { className: "NPSScale-Label right" },
+          "Mycket sannolikt"
+        )
+      )
+    );
+  }
+}
+
+function range(start, end) {
+  return Array(end - start + 1)
+    .fill()
+    .map(function(_, idx) {
+      return start + idx;
+    });
+}
+
+module.exports = NPSScale;

lib/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require('./NPSInput');