@planet/ui - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/button.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,57 +25,71 @@
 
-var Button = _react2.default.createClass({
-  displayName: 'Button',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    href: _react2.default.PropTypes.string,
-    isBorderless: _react2.default.PropTypes.bool,
-    isDisabled: _react2.default.PropTypes.bool,
-    isError: _react2.default.PropTypes.bool,
-    isFilled: _react2.default.PropTypes.bool,
-    isPrimary: _react2.default.PropTypes.bool,
-    isRounded: _react2.default.PropTypes.bool,
-    isSecondary: _react2.default.PropTypes.bool,
-    isSmall: _react2.default.PropTypes.bool,
-    onClick: _react2.default.PropTypes.func,
-    tabIndex: _react2.default.PropTypes.number,
-    target: _react2.default.PropTypes.string,
-    text: _react2.default.PropTypes.string,
-    type: _react2.default.PropTypes.string
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  getDefaultProps: function getDefaultProps() {
-    return { type: 'button' };
-  },
+var Button = function (_Component) {
+  _inherits(Button, _Component);
 
-  render: function render() {
-    var props = {
-      className: (0, _classnames2.default)('pl-button', this.props.className, {
-        'pl-borderless': this.props.isBorderless,
-        'pl-disabled': this.props.isDisabled,
-        'pl-error': this.props.isError,
-        'pl-filled': this.props.isFilled,
-        'pl-primary': this.props.isPrimary,
-        'pl-rounded': this.props.isRounded,
-        'pl-secondary': this.props.isSecondary,
-        'pl-small': this.props.isSmall
-      }),
-      disabled: this.props.isDisabled,
-      tabIndex: this.props.tabIndex
-    };
-    if (!this.props.isDisabled) {
-      if (this.props.href) {
-        props.href = this.props.href;
-        props.target = this.props.target;
-      } else {
-        props.onClick = this.props.onClick;
-        props.type = this.props.type;
+  function Button() {
+    _classCallCheck(this, Button);
+
+    return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
+  }
+
+  _createClass(Button, [{
+    key: 'render',
+    value: function render() {
+      var props = {
+        className: (0, _classnames2.default)('pl-button', this.props.className, {
+          'pl-borderless': this.props.isBorderless,
+          'pl-disabled': this.props.isDisabled,
+          'pl-error': this.props.isError,
+          'pl-filled': this.props.isFilled,
+          'pl-primary': this.props.isPrimary,
+          'pl-rounded': this.props.isRounded,
+          'pl-secondary': this.props.isSecondary,
+          'pl-small': this.props.isSmall
+        }),
+        disabled: this.props.isDisabled,
+        tabIndex: this.props.tabIndex
+      };
+      if (!this.props.isDisabled) {
+        if (this.props.href) {
+          props.href = this.props.href;
+          props.target = this.props.target;
+        } else {
+          props.onClick = this.props.onClick;
+          props.type = this.props.type;
+        }
       }
+      return _react2.default.createElement(this.props.href ? 'a' : 'button', props, this.props.children || this.props.text);
     }
-    return _react2.default.createElement(this.props.href ? 'a' : 'button', props, this.props.children || this.props.text);
-  }
-});
+  }]);
 
+  return Button;
+}(_react.Component);
+
+Button.propTypes = {
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.string,
+  href: _propTypes2.default.string,
+  isBorderless: _propTypes2.default.bool,
+  isDisabled: _propTypes2.default.bool,
+  isError: _propTypes2.default.bool,
+  isFilled: _propTypes2.default.bool,
+  isPrimary: _propTypes2.default.bool,
+  isRounded: _propTypes2.default.bool,
+  isSecondary: _propTypes2.default.bool,
+  isSmall: _propTypes2.default.bool,
+  onClick: _propTypes2.default.func,
+  tabIndex: _propTypes2.default.number,
+  target: _propTypes2.default.string,
+  text: _propTypes2.default.string,
+  type: _propTypes2.default.string
+};
+
+Button.defaultProps = { type: 'button' };
+
 exports.default = Button;

lib/checkbox.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -42,7 +46,7 @@
 Checkbox.propTypes = {
-  checked: _react.PropTypes.bool.isRequired,
-  label: _react.PropTypes.string.isRequired,
-  onClick: _react.PropTypes.func.isRequired
+  checked: _propTypes2.default.bool.isRequired,
+  label: _propTypes2.default.string.isRequired,
+  onClick: _propTypes2.default.func.isRequired
 };
 
 exports.default = Checkbox;

lib/dialog.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -14,2 +16,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -39,94 +45,116 @@
 
-var Dialog = _react2.default.createClass({
-  displayName: 'Dialog',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    buttons: _react2.default.PropTypes.array,
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    footer: _react2.default.PropTypes.node,
-    header: _react2.default.PropTypes.node,
-    isLarge: _react2.default.PropTypes.bool,
-    isSmall: _react2.default.PropTypes.bool,
-    onClose: _react2.default.PropTypes.func,
-    onScroll: _react2.default.PropTypes.func,
-    onSubmit: _react2.default.PropTypes.func,
-    title: _react2.default.PropTypes.string
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  getDefaultProps: function getDefaultProps() {
-    return { buttons: [] };
-  },
+var Dialog = function (_Component) {
+  _inherits(Dialog, _Component);
 
-  componentWillMount: function componentWillMount() {
-    window.addEventListener('keydown', this._onKeyDown, true);
-  },
+  function Dialog(props) {
+    _classCallCheck(this, Dialog);
 
-  componentWillUnmount: function componentWillUnmount(nextProps) {
-    window.removeEventListener('keydown', this._onKeyDown, true);
-  },
+    var _this = _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).call(this, props));
 
-  _onKeyDown: function _onKeyDown(event) {
-    if (this.props.onClose && event.keyCode === keys.ESC) {
-      event.stopPropagation();
-      this.props.onClose();
-    }
-  },
+    _this._onKeyDown = _this._onKeyDown.bind(_this);
+    _this._onSubmit = _this._onSubmit.bind(_this);
+    return _this;
+  }
 
-  _onSubmit: function _onSubmit(event) {
-    event.preventDefault();
-    if (this.props.onSubmit) {
-      this.props.onSubmit();
+  _createClass(Dialog, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      window.addEventListener('keydown', this._onKeyDown, true);
     }
-  },
-
-  render: function render() {
-    var dialogClassName = (0, _classnames2.default)('pl-dialog', this.props.className, {
-      'pl-large': this.props.isLarge,
-      'pl-small': this.props.isSmall
-    });
-    return _react2.default.createElement(
-      _overlay2.default,
-      { className: dialogClassName, onDimClick: this.props.onClose },
-      _react2.default.createElement(
-        'form',
-        { onSubmit: this._onSubmit },
-        this.props.title && _react2.default.createElement(
-          'div',
-          { className: 'pl-dialog-header' },
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount(nextProps) {
+      window.removeEventListener('keydown', this._onKeyDown, true);
+    }
+  }, {
+    key: '_onKeyDown',
+    value: function _onKeyDown(event) {
+      if (this.props.onClose && event.keyCode === keys.ESC) {
+        event.stopPropagation();
+        this.props.onClose();
+      }
+    }
+  }, {
+    key: '_onSubmit',
+    value: function _onSubmit(event) {
+      event.preventDefault();
+      if (this.props.onSubmit) {
+        this.props.onSubmit();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var dialogClassName = (0, _classnames2.default)('pl-dialog', this.props.className, {
+        'pl-large': this.props.isLarge,
+        'pl-small': this.props.isSmall
+      });
+      return _react2.default.createElement(
+        _overlay2.default,
+        { className: dialogClassName, onDimClick: this.props.onClose },
+        _react2.default.createElement(
+          'form',
+          { onSubmit: this._onSubmit },
+          this.props.title && _react2.default.createElement(
+            'div',
+            { className: 'pl-dialog-header' },
+            _react2.default.createElement(
+              'h4',
+              null,
+              this.props.title
+            ),
+            this.props.onClose && _react2.default.createElement(
+              'div',
+              { className: 'pl-dialog-header-close', onClick: this.props.onClose },
+              _react2.default.createElement(_icon2.default, { name: 'close' })
+            ),
+            this.props.header
+          ),
           _react2.default.createElement(
-            'h4',
-            null,
-            this.props.title
+            'div',
+            { className: 'pl-dialog-content',
+              onScroll: this.props.onScroll,
+              ref: 'content' },
+            this.props.children
           ),
-          this.props.onClose && _react2.default.createElement(
+          this.props.buttons.length > 0 && _react2.default.createElement(
             'div',
-            { className: 'pl-dialog-header-close', onClick: this.props.onClose },
-            _react2.default.createElement(_icon2.default, { name: 'close' })
-          ),
-          this.props.header
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'pl-dialog-content',
-            onScroll: this.props.onScroll,
-            ref: 'content' },
-          this.props.children
-        ),
-        this.props.buttons.length > 0 && _react2.default.createElement(
-          'div',
-          { className: 'pl-dialog-footer' },
-          this.props.footer,
-          this.props.buttons.map(function (button, index) {
-            return _react2.default.createElement(_button2.default, _extends({}, button, {
-              className: button.left ? 'pl-left' : null,
-              key: button.text }));
-          })
+            { className: 'pl-dialog-footer' },
+            this.props.footer,
+            this.props.buttons.map(function (button, index) {
+              return _react2.default.createElement(_button2.default, _extends({}, button, {
+                className: button.left ? 'pl-left' : null,
+                key: button.text }));
+            })
+          )
         )
-      )
-    );
-  }
-});
+      );
+    }
+  }]);
 
+  return Dialog;
+}(_react.Component);
+
+Dialog.propTypes = {
+  buttons: _propTypes2.default.array,
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.string,
+  footer: _propTypes2.default.node,
+  header: _propTypes2.default.node,
+  isLarge: _propTypes2.default.bool,
+  isSmall: _propTypes2.default.bool,
+  onClose: _propTypes2.default.func,
+  onScroll: _propTypes2.default.func,
+  onSubmit: _propTypes2.default.func,
+  title: _propTypes2.default.string
+};
+
+Dialog.defaultProps = { buttons: [] };
+
 exports.default = Dialog;

lib/dropdown-group.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -14,2 +16,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _dropdown = require('./dropdown');
@@ -21,32 +27,48 @@
 
-var propTypes = Object.assign({}, _dropdown2.default.propTypes);
-delete propTypes.isRight;
-propTypes.label = _react2.default.PropTypes.string.isRequired;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var DropdownGroup = _react2.default.createClass({
-  displayName: 'DropdownGroup',
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  propTypes: propTypes,
+var DropdownGroup = function (_Component) {
+  _inherits(DropdownGroup, _Component);
 
-  render: function render() {
-    var props = Object.assign({}, this.props);
-    delete props.label;
-    return _react2.default.createElement(
-      'div',
-      { className: 'pl-dropdown-group' },
-      _react2.default.createElement(
-        'label',
-        null,
-        this.props.label
-      ),
-      _react2.default.createElement(
+  function DropdownGroup() {
+    _classCallCheck(this, DropdownGroup);
+
+    return _possibleConstructorReturn(this, (DropdownGroup.__proto__ || Object.getPrototypeOf(DropdownGroup)).apply(this, arguments));
+  }
+
+  _createClass(DropdownGroup, [{
+    key: 'render',
+    value: function render() {
+      var props = Object.assign({}, this.props);
+      delete props.label;
+      return _react2.default.createElement(
         'div',
-        { className: 'pl-dropdown-group-wrapper' },
-        _react2.default.createElement(_dropdown2.default, _extends({}, props, { isRight: true }))
-      )
-    );
-  }
+        { className: 'pl-dropdown-group' },
+        _react2.default.createElement(
+          'label',
+          null,
+          this.props.label
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'pl-dropdown-group-wrapper' },
+          _react2.default.createElement(_dropdown2.default, _extends({}, props, { isRight: true }))
+        )
+      );
+    }
+  }]);
+
+  return DropdownGroup;
+}(_react.Component);
+
+DropdownGroup.propTypes = Object.assign({}, _dropdown2.default.propTypes, {
+  label: _propTypes2.default.string.isRequired
 });
 
+delete DropdownGroup.ropTypes.isRight;
+
 exports.default = DropdownGroup;

lib/dropdown.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDom = require('react-dom');
@@ -37,63 +43,72 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var MAX_KEY_DELTA = 1000;
 
-var propTypes = Object.assign({}, _button2.default.propTypes);
-delete propTypes.onClick;
-propTypes.children = _react2.default.PropTypes.node;
-propTypes.isRight = _react2.default.PropTypes.bool;
-propTypes.isTop = _react2.default.PropTypes.bool;
-propTypes.items = _react2.default.PropTypes.array.isRequired;
-propTypes.onChange = _react2.default.PropTypes.func.isRequired;
-propTypes.selectedIndex = _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)]);
+var Dropdown = function (_Component) {
+  _inherits(Dropdown, _Component);
 
-var Dropdown = _react2.default.createClass({
-  displayName: 'Dropdown',
+  function Dropdown(props) {
+    _classCallCheck(this, Dropdown);
 
+    var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));
 
-  _filter: '',
-  _lastKeyDown: new Date(),
+    _this._filter = '';
+    _this._lastKeyDown = new Date();
 
-  propTypes: propTypes,
-
-  getInitialState: function getInitialState() {
-    return {
+    _this.state = {
       isOpen: false
     };
-  },
 
-  componentWillUnmount: function componentWillUnmount() {
-    window.removeEventListener('keydown', this._onKeyDown);
-    document.body.removeEventListener('click', this._onBodyClick);
-  },
+    _this._onButtonClick = _this._onButtonClick.bind(_this);
+    _this._onKeyDown = _this._onKeyDown.bind(_this);
+    _this._onBodyClick = _this._onBodyClick.bind(_this);
+    _this._onItemClick = _this._onItemClick.bind(_this);
+    return _this;
+  }
 
-  _onButtonClick: function _onButtonClick() {
-    if (this.props.items.length > 1) {
-      this.setState({ isOpen: true });
-      window.addEventListener('keydown', this._onKeyDown);
-      document.body.addEventListener('click', this._onBodyClick);
+  _createClass(Dropdown, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('keydown', this._onKeyDown);
+      document.body.removeEventListener('click', this._onBodyClick);
     }
-  },
+  }, {
+    key: '_onButtonClick',
+    value: function _onButtonClick() {
+      if (this.props.items.length > 1) {
+        this.setState({ isOpen: true });
+        window.addEventListener('keydown', this._onKeyDown);
+        document.body.addEventListener('click', this._onBodyClick);
+      }
+    }
+  }, {
+    key: '_onKeyDown',
+    value: function _onKeyDown(event) {
+      if (event.keyCode === keys.ESC) {
+        event.stopPropagation();
+        this._close();
+      } else {
+        var char = String.fromCharCode(event.keyCode);
+        if (/[A-Z ]/.test(char)) {
+          var now = new Date();
+          var delta = now - this._lastKeyDown;
+          if (delta < MAX_KEY_DELTA) {
+            this._filter += char;
+          } else {
+            this._filter = char;
+          }
+          this._lastKeyDown = now;
 
-  _onKeyDown: function _onKeyDown(event) {
-    if (event.keyCode === keys.ESC) {
-      event.stopPropagation();
-      this._close();
-    } else {
-      var char = String.fromCharCode(event.keyCode);
-      if (/[A-Z ]/.test(char)) {
-        var now = new Date();
-        var delta = now - this._lastKeyDown;
-        if (delta < MAX_KEY_DELTA) {
-          this._filter += char;
-        } else {
-          this._filter = char;
-        }
-        this._lastKeyDown = now;
-
-        var items = this.refs.items.childNodes;
-        var itemsLength = items.length;
-        for (var i = 0; i < itemsLength; i++) {
-          if (items[i].textContent.toUpperCase().indexOf(this._filter) === 0) {
-            this.refs.items.scrollTop = items[i].offsetTop;
-            break;
+          var items = this.refs.items.childNodes;
+          var itemsLength = items.length;
+          for (var i = 0; i < itemsLength; i++) {
+            if (items[i].textContent.toUpperCase().indexOf(this._filter) === 0) {
+              this.refs.items.scrollTop = items[i].offsetTop;
+              break;
+            }
           }
@@ -103,67 +118,84 @@ }
     }
-  },
-
-  _onBodyClick: function _onBodyClick(event) {
-    if (!Array.isArray(this.props.selectedIndex) || !_reactDom2.default.findDOMNode(this).contains(event.target)) {
-      this._close();
+  }, {
+    key: '_onBodyClick',
+    value: function _onBodyClick(event) {
+      if (!Array.isArray(this.props.selectedIndex) || !_reactDom2.default.findDOMNode(this).contains(event.target)) {
+        this._close();
+      }
     }
-  },
-
-  _close: function _close() {
-    this.setState({ isOpen: false });
-    window.removeEventListener('keydown', this._onKeyDown);
-    document.body.removeEventListener('click', this._onBodyClick);
-  },
-
-  _onItemClick: function _onItemClick(index, item) {
-    this.props.onChange(index, item);
-  },
-
-  render: function render() {
-    var dropdownClassName = (0, _classnames2.default)('pl-dropdown', this.props.className, {
-      'pl-open': this.state.isOpen,
-      'pl-right': this.props.isRight,
-      'pl-top': this.props.isTop,
-      'pl-optionless': this.props.items.length === 1
-    });
-    return _react2.default.createElement(
-      'div',
-      { className: dropdownClassName },
-      _react2.default.createElement(
-        _button2.default,
-        { isPrimary: this.props.isPrimary,
-          isSecondary: this.props.isSecondary,
-          isSmall: this.props.isSmall,
-          onClick: this._onButtonClick },
+  }, {
+    key: '_close',
+    value: function _close() {
+      this.setState({ isOpen: false });
+      window.removeEventListener('keydown', this._onKeyDown);
+      document.body.removeEventListener('click', this._onBodyClick);
+    }
+  }, {
+    key: '_onItemClick',
+    value: function _onItemClick(index, item) {
+      this.props.onChange(index, item);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var dropdownClassName = (0, _classnames2.default)('pl-dropdown', this.props.className, {
+        'pl-open': this.state.isOpen,
+        'pl-right': this.props.isRight,
+        'pl-top': this.props.isTop,
+        'pl-optionless': this.props.items.length === 1
+      });
+      return _react2.default.createElement(
+        'div',
+        { className: dropdownClassName },
         _react2.default.createElement(
-          'span',
-          { className: 'pl-dropdown-button-wrapper' },
+          _button2.default,
+          { isPrimary: this.props.isPrimary,
+            isSecondary: this.props.isSecondary,
+            isSmall: this.props.isSmall,
+            onClick: this._onButtonClick },
           _react2.default.createElement(
             'span',
-            null,
-            this.props.children || this.props.items[this.props.selectedIndex]
-          ),
-          _react2.default.createElement(_icon2.default, { name: 'chevron' })
+            { className: 'pl-dropdown-button-wrapper' },
+            _react2.default.createElement(
+              'span',
+              null,
+              this.props.children || this.props.items[this.props.selectedIndex]
+            ),
+            _react2.default.createElement(_icon2.default, { name: 'chevron' })
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'pl-dropdown-items', ref: 'items' },
+          this.props.items.map(function (item, index) {
+            var itemClassName = (0, _classnames2.default)('pl-dropdown-item', {
+              'pl-selected': Array.isArray(this.props.selectedIndex) ? this.props.selectedIndex.indexOf(index) !== -1 : index === this.props.selectedIndex
+            });
+            return _react2.default.createElement(
+              'div',
+              { className: itemClassName,
+                key: index,
+                onClick: this._onItemClick.bind(null, index, item) },
+              item
+            );
+          }, this)
         )
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: 'pl-dropdown-items', ref: 'items' },
-        this.props.items.map(function (item, index) {
-          var itemClassName = (0, _classnames2.default)('pl-dropdown-item', {
-            'pl-selected': Array.isArray(this.props.selectedIndex) ? this.props.selectedIndex.indexOf(index) !== -1 : index === this.props.selectedIndex
-          });
-          return _react2.default.createElement(
-            'div',
-            { className: itemClassName,
-              key: index,
-              onClick: this._onItemClick.bind(null, index, item) },
-            item
-          );
-        }, this)
-      )
-    );
-  }
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(_react.Component);
+
+Dropdown.propTypes = Object.assign({}, _button2.default.propTypes, {
+  children: _propTypes2.default.node,
+  isRight: _propTypes2.default.bool,
+  isTop: _propTypes2.default.bool,
+  items: _propTypes2.default.array.isRequired,
+  onChange: _propTypes2.default.func.isRequired,
+  selectedIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)])
 });
 
+delete Dropdown.propTypes.onClick;
+
 exports.default = Dropdown;

lib/hint.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _icon = require('./icon');
@@ -23,32 +29,48 @@
 
-var Hint = _react2.default.createClass({
-  displayName: 'Hint',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    children: _react2.default.PropTypes.node,
-    onDismiss: _react2.default.PropTypes.func,
-    position: _react2.default.PropTypes.string
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  render: function render() {
-    return _react2.default.createElement(
-      _tooltip2.default,
-      { className: 'pl-hint', position: this.props.position },
-      _react2.default.createElement(
-        'div',
-        { className: 'pl-hint-wrapper' },
-        this.props.children,
-        _react2.default.createElement('span', { style: { paddingLeft: '25%' } }),
-        this.props.onDismiss && _react2.default.createElement(
+var Hint = function (_Component) {
+  _inherits(Hint, _Component);
+
+  function Hint() {
+    _classCallCheck(this, Hint);
+
+    return _possibleConstructorReturn(this, (Hint.__proto__ || Object.getPrototypeOf(Hint)).apply(this, arguments));
+  }
+
+  _createClass(Hint, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        _tooltip2.default,
+        { className: 'pl-hint', position: this.props.position },
+        _react2.default.createElement(
           'div',
-          { className: 'pl-hint-dismiss',
-            onClick: this.props.onDismiss },
-          _react2.default.createElement(_icon2.default, { name: 'check' })
+          { className: 'pl-hint-wrapper' },
+          this.props.children,
+          _react2.default.createElement('span', { style: { paddingLeft: '25%' } }),
+          this.props.onDismiss && _react2.default.createElement(
+            'div',
+            { className: 'pl-hint-dismiss',
+              onClick: this.props.onDismiss },
+            _react2.default.createElement(_icon2.default, { name: 'check' })
+          )
         )
-      )
-    );
-  }
-});
+      );
+    }
+  }]);
 
+  return Hint;
+}(_react.Component);
+
+Hint.propTypes = {
+  children: _propTypes2.default.node,
+  onDismiss: _propTypes2.default.func,
+  position: _propTypes2.default.string
+};
+
 exports.default = Hint;

lib/icon.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -23,48 +29,64 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var parser = new DOMParser();
 
-var Icon = _react2.default.createClass({
-  displayName: 'Icon',
+var Icon = function (_Component) {
+  _inherits(Icon, _Component);
 
+  function Icon() {
+    _classCallCheck(this, Icon);
 
-  propTypes: {
-    className: _react2.default.PropTypes.string,
-    name: _react2.default.PropTypes.string.isRequired,
-    style: _react2.default.PropTypes.object
-  },
+    return _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).apply(this, arguments));
+  }
 
-  render: function render() {
-    if (!_icons2.default[this.props.name]) {
-      return null;
-    }
+  _createClass(Icon, [{
+    key: 'render',
+    value: function render() {
+      if (!_icons2.default[this.props.name]) {
+        return null;
+      }
 
-    var shapes = [];
-    var icon = parser.parseFromString(_icons2.default[this.props.name], 'image/svg+xml').childNodes[0];
-    for (var i = 0; i < icon.childNodes.length; i++) {
-      var childNode = icon.childNodes.item(i);
-      if (childNode.nodeType === 1 && childNode.tagName !== 'title') {
-        var attributes = Array.prototype.slice.call(childNode.attributes, 0);
-        shapes.push({
-          tagName: childNode.tagName,
-          attributes: attributes.reduce(function (a, b) {
-            a[b.name] = b.value;
-            return a;
-          }, {})
-        });
+      var shapes = [];
+      var icon = parser.parseFromString(_icons2.default[this.props.name], 'image/svg+xml').childNodes[0];
+      for (var i = 0; i < icon.childNodes.length; i++) {
+        var childNode = icon.childNodes.item(i);
+        if (childNode.nodeType === 1 && childNode.tagName !== 'title') {
+          var attributes = Array.prototype.slice.call(childNode.attributes, 0);
+          shapes.push({
+            tagName: childNode.tagName,
+            attributes: attributes.reduce(function (a, b) {
+              a[b.name] = b.value;
+              return a;
+            }, {})
+          });
+        }
       }
+
+      return _react2.default.createElement(
+        'svg',
+        { className: (0, _classnames2.default)('pl-icon', this.props.className),
+          style: this.props.style,
+          viewBox: icon.attributes.viewBox.value,
+          xmlns: 'http://www.w3.org/2000/svg' },
+        shapes.map(function (shape, index) {
+          return _react2.default.createElement(shape.tagName, Object.assign({ key: index }, shape.attributes));
+        })
+      );
     }
+  }]);
 
-    return _react2.default.createElement(
-      'svg',
-      { className: (0, _classnames2.default)('pl-icon', this.props.className),
-        style: this.props.style,
-        viewBox: icon.attributes.viewBox.value,
-        xmlns: 'http://www.w3.org/2000/svg' },
-      shapes.map(function (shape, index) {
-        return _react2.default.createElement(shape.tagName, Object.assign({ key: index }, shape.attributes));
-      })
-    );
-  }
-});
+  return Icon;
+}(_react.Component);
 
+Icon.propTypes = {
+  className: _propTypes2.default.string,
+  name: _propTypes2.default.string.isRequired,
+  style: _propTypes2.default.object
+};
+
 exports.default = Icon;

lib/overlay.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,35 +25,51 @@
 
-var Overlay = _react2.default.createClass({
-  displayName: 'Overlay',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    children: _react2.default.PropTypes.node.isRequired,
-    className: _react2.default.PropTypes.string,
-    onDimClick: _react2.default.PropTypes.func,
-    onDragEnter: _react2.default.PropTypes.func,
-    onDragLeave: _react2.default.PropTypes.func,
-    onDragOver: _react2.default.PropTypes.func,
-    onDrop: _react2.default.PropTypes.func
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  render: function render() {
-    var overlayClassName = (0, _classnames2.default)('pl-overlay', this.props.className);
-    return _react2.default.createElement(
-      'div',
-      { className: overlayClassName,
-        onDragEnter: this.props.onDragEnter,
-        onDragLeave: this.props.onDragLeave,
-        onDragOver: this.props.onDragOver,
-        onDrop: this.props.onDrop },
-      _react2.default.createElement('div', { className: 'pl-overlay-dim', onClick: this.props.onDimClick }),
-      _react2.default.createElement(
-        'div',
-        { className: 'pl-overlay-content' },
-        this.props.children
-      )
-    );
+var Overlay = function (_Component) {
+  _inherits(Overlay, _Component);
+
+  function Overlay() {
+    _classCallCheck(this, Overlay);
+
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
-});
 
+  _createClass(Overlay, [{
+    key: 'render',
+    value: function render() {
+      var overlayClassName = (0, _classnames2.default)('pl-overlay', this.props.className);
+      return _react2.default.createElement(
+        'div',
+        { className: overlayClassName,
+          onDragEnter: this.props.onDragEnter,
+          onDragLeave: this.props.onDragLeave,
+          onDragOver: this.props.onDragOver,
+          onDrop: this.props.onDrop },
+        _react2.default.createElement('div', { className: 'pl-overlay-dim', onClick: this.props.onDimClick }),
+        _react2.default.createElement(
+          'div',
+          { className: 'pl-overlay-content' },
+          this.props.children
+        )
+      );
+    }
+  }]);
+
+  return Overlay;
+}(_react.Component);
+
+Overlay.propTypes = {
+  children: _propTypes2.default.node.isRequired,
+  className: _propTypes2.default.string,
+  onDimClick: _propTypes2.default.func,
+  onDragEnter: _propTypes2.default.func,
+  onDragLeave: _propTypes2.default.func,
+  onDragOver: _propTypes2.default.func,
+  onDrop: _propTypes2.default.func
+};
+
 exports.default = Overlay;

lib/progress-bar.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,28 +25,44 @@
 
-var ProgressDots = _react2.default.createClass({
-  displayName: 'ProgressDots',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    activeStage: _react2.default.PropTypes.number,
-    stages: _react2.default.PropTypes.number
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  render: function render() {
-    var markers = [];
-    for (var i = 1; i <= this.props.stages; i++) {
-      var markerClass = (0, _classnames2.default)('pl-progress-bar-marker', {
-        'pl-active': i === this.props.activeStage
-      });
-      markers.push(_react2.default.createElement('div', { className: markerClass, key: i }));
-    }
+var ProgressDots = function (_Component) {
+  _inherits(ProgressDots, _Component);
 
-    return _react2.default.createElement(
-      'div',
-      { className: 'pl-progress-bar' },
-      markers
-    );
+  function ProgressDots() {
+    _classCallCheck(this, ProgressDots);
+
+    return _possibleConstructorReturn(this, (ProgressDots.__proto__ || Object.getPrototypeOf(ProgressDots)).apply(this, arguments));
   }
-});
 
+  _createClass(ProgressDots, [{
+    key: 'render',
+    value: function render() {
+      var markers = [];
+      for (var i = 1; i <= this.props.stages; i++) {
+        var markerClass = (0, _classnames2.default)('pl-progress-bar-marker', {
+          'pl-active': i === this.props.activeStage
+        });
+        markers.push(_react2.default.createElement('div', { className: markerClass, key: i }));
+      }
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'pl-progress-bar' },
+        markers
+      );
+    }
+  }]);
+
+  return ProgressDots;
+}(_react.Component);
+
+ProgressDots.propTypes = {
+  activeStage: _propTypes2.default.number,
+  stages: _propTypes2.default.number
+};
+
 exports.default = ProgressDots;

lib/tab-menu.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,80 +25,99 @@
 
-var TabMenu = _react2.default.createClass({
-  displayName: 'TabMenu',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    activeIndex: _react2.default.PropTypes.number,
-    className: _react2.default.PropTypes.string,
-    onChange: _react2.default.PropTypes.func,
-    tabs: _react2.default.PropTypes.array
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  getInitialState: function getInitialState() {
-    return {
-      activeIndex: this.props.activeIndex || 0
+var TabMenu = function (_Component) {
+  _inherits(TabMenu, _Component);
+
+  function TabMenu(props) {
+    _classCallCheck(this, TabMenu);
+
+    var _this = _possibleConstructorReturn(this, (TabMenu.__proto__ || Object.getPrototypeOf(TabMenu)).call(this, props));
+
+    _this._onHeaderItemClick = _this._onHeaderItemClick.bind(_this);
+
+    _this.state = {
+      activeIndex: _this.props.activeIndex || 0
     };
-  },
+    return _this;
+  }
 
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.activeIndex !== this.props.activeIndex) {
-      this.setState({ activeIndex: nextProps.activeIndex });
+  _createClass(TabMenu, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.activeIndex !== this.props.activeIndex) {
+        this.setState({ activeIndex: nextProps.activeIndex });
+      }
     }
-  },
+  }, {
+    key: '_onHeaderItemClick',
+    value: function _onHeaderItemClick(index) {
+      this.setState({ activeIndex: index }, function () {
+        if (this.props.onChange) {
+          this.props.onChange(index);
+        }
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-  _onHeaderItemClick: function _onHeaderItemClick(index) {
-    this.setState({ activeIndex: index }, function () {
-      if (this.props.onChange) {
-        this.props.onChange(index);
-      }
-    });
-  },
-
-  render: function render() {
-    var _this = this;
-
-    return _react2.default.createElement(
-      'div',
-      { className: (0, _classnames2.default)('pl-tab-menu', this.props.className) },
-      _react2.default.createElement(
+      return _react2.default.createElement(
         'div',
-        { className: 'pl-tab-menu-header' },
-        this.props.tabs.map(function (tab, index, array) {
-          var headerItemClassName = (0, _classnames2.default)('pl-tab-menu-header-item', {
-            'pl-active': index === _this.state.activeIndex
-          });
-          return _react2.default.createElement(
-            'div',
-            { className: headerItemClassName,
-              key: tab.title,
-              onClick: _this._onHeaderItemClick.bind(null, index),
-              style: { zIndex: array.length - index } },
-            _react2.default.createElement(
-              'span',
-              null,
-              tab.title
-            )
-          );
-        })
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: 'pl-tab-menu-slides' },
+        { className: (0, _classnames2.default)('pl-tab-menu', this.props.className) },
         _react2.default.createElement(
           'div',
-          { className: 'pl-tab-menu-slider',
-            style: { transform: 'translateX(' + this.state.activeIndex * -100 + '%)' } },
-          this.props.tabs.map(function (tab, index) {
+          { className: 'pl-tab-menu-header' },
+          this.props.tabs.map(function (tab, index, array) {
+            var headerItemClassName = (0, _classnames2.default)('pl-tab-menu-header-item', {
+              'pl-active': index === _this2.state.activeIndex
+            });
             return _react2.default.createElement(
               'div',
-              { className: 'pl-tab-menu-slide', key: tab.title },
-              tab.content
+              { className: headerItemClassName,
+                key: tab.title,
+                onClick: _this2._onHeaderItemClick.bind(null, index),
+                style: { zIndex: array.length - index } },
+              _react2.default.createElement(
+                'span',
+                null,
+                tab.title
+              )
             );
           })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'pl-tab-menu-slides' },
+          _react2.default.createElement(
+            'div',
+            { className: 'pl-tab-menu-slider',
+              style: { transform: 'translateX(' + this.state.activeIndex * -100 + '%)' } },
+            this.props.tabs.map(function (tab, index) {
+              return _react2.default.createElement(
+                'div',
+                { className: 'pl-tab-menu-slide', key: tab.title },
+                tab.content
+              );
+            })
+          )
         )
-      )
-    );
-  }
-});
+      );
+    }
+  }]);
 
+  return TabMenu;
+}(_react.Component);
+
+TabMenu.propTypes = {
+  activeIndex: _propTypes2.default.number,
+  className: _propTypes2.default.string,
+  onChange: _propTypes2.default.func,
+  tabs: _propTypes2.default.array
+};
+
 exports.default = TabMenu;

lib/toggle.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,49 +25,69 @@
 
-var Toggle = _react2.default.createClass({
-  displayName: 'Toggle',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    className: _react2.default.PropTypes.string,
-    isActive: _react2.default.PropTypes.bool.isRequired,
-    isDisabled: _react2.default.PropTypes.bool,
-    label: _react2.default.PropTypes.string,
-    name: _react2.default.PropTypes.string,
-    onToggle: _react2.default.PropTypes.func
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  _onToggle: function _onToggle() {
-    if (!this.props.isDisabled && this.props.onToggle) {
-      this.props.onToggle(!this.props.isActive);
-    }
-  },
+var Toggle = function (_Component) {
+  _inherits(Toggle, _Component);
 
-  render: function render() {
-    var toggleClassName = (0, _classnames2.default)('pl-toggle', this.props.className, {
-      'pl-active': this.props.isActive,
-      'pl-disabled': this.props.isDisabled || !this.props.onToggle
-    });
-    return _react2.default.createElement(
-      'div',
-      { className: toggleClassName, onClick: this._onToggle },
-      _react2.default.createElement('input', { checked: this.props.isActive,
-        name: this.props.name,
-        readOnly: true,
-        type: 'checkbox' }),
-      _react2.default.createElement(
-        'div',
-        { className: 'pl-toggle-switch' },
-        _react2.default.createElement('div', { className: 'pl-toggle-switch-track' }),
-        _react2.default.createElement('div', { className: 'pl-toggle-switch-handle' })
-      ),
-      this.props.label && _react2.default.createElement(
-        'label',
-        null,
-        this.props.label
-      ),
-      _react2.default.createElement('div', { className: 'pl-clear' })
-    );
+  function Toggle(props) {
+    _classCallCheck(this, Toggle);
+
+    var _this = _possibleConstructorReturn(this, (Toggle.__proto__ || Object.getPrototypeOf(Toggle)).call(this, props));
+
+    _this._onToggle = _this._onToggle.bind(_this);
+    return _this;
   }
-});
 
+  _createClass(Toggle, [{
+    key: '_onToggle',
+    value: function _onToggle() {
+      if (!this.props.isDisabled && this.props.onToggle) {
+        this.props.onToggle(!this.props.isActive);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var toggleClassName = (0, _classnames2.default)('pl-toggle', this.props.className, {
+        'pl-active': this.props.isActive,
+        'pl-disabled': this.props.isDisabled || !this.props.onToggle
+      });
+      return _react2.default.createElement(
+        'div',
+        { className: toggleClassName, onClick: this._onToggle },
+        _react2.default.createElement('input', { checked: this.props.isActive,
+          name: this.props.name,
+          readOnly: true,
+          type: 'checkbox' }),
+        _react2.default.createElement(
+          'div',
+          { className: 'pl-toggle-switch' },
+          _react2.default.createElement('div', { className: 'pl-toggle-switch-track' }),
+          _react2.default.createElement('div', { className: 'pl-toggle-switch-handle' })
+        ),
+        this.props.label && _react2.default.createElement(
+          'label',
+          null,
+          this.props.label
+        ),
+        _react2.default.createElement('div', { className: 'pl-clear' })
+      );
+    }
+  }]);
+
+  return Toggle;
+}(_react.Component);
+
+Toggle.propTypes = {
+  className: _propTypes2.default.string,
+  isActive: _propTypes2.default.bool.isRequired,
+  isDisabled: _propTypes2.default.bool,
+  label: _propTypes2.default.string,
+  name: _propTypes2.default.string,
+  onToggle: _propTypes2.default.func
+};
+
 exports.default = Toggle;

lib/tooltip.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -19,38 +25,53 @@
 
-var Tooltip = _react2.default.createClass({
-  displayName: 'Tooltip',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    onClick: _react2.default.PropTypes.func,
-    position: _react2.default.PropTypes.string
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  render: function render() {
+var Tooltip = function (_Component) {
+  _inherits(Tooltip, _Component);
 
-    var tooltipClassName = (0, _classnames2.default)('pl-tooltip', this.props.className);
+  function Tooltip() {
+    _classCallCheck(this, Tooltip);
 
-    var position = this.props.position ? this.props.position.split(' ').slice(0, 2) : [];
-    var tooltipLabelClassName = (0, _classnames2.default)('pl-tooltip-label', {
-      'pl-top': position.indexOf('top') !== -1,
-      'pl-right': position.indexOf('right') !== -1,
-      'pl-bottom': position.indexOf('bottom') !== -1,
-      'pl-left': position.indexOf('left') !== -1
-    });
+    return _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).apply(this, arguments));
+  }
 
-    return _react2.default.createElement(
-      'div',
-      { className: tooltipClassName, onClick: this.props.onClick },
-      _react2.default.createElement('div', { className: 'pl-tooltip-target' }),
-      _react2.default.createElement(
+  _createClass(Tooltip, [{
+    key: 'render',
+    value: function render() {
+      var tooltipClassName = (0, _classnames2.default)('pl-tooltip', this.props.className);
+
+      var position = this.props.position ? this.props.position.split(' ').slice(0, 2) : [];
+      var tooltipLabelClassName = (0, _classnames2.default)('pl-tooltip-label', {
+        'pl-top': position.indexOf('top') !== -1,
+        'pl-right': position.indexOf('right') !== -1,
+        'pl-bottom': position.indexOf('bottom') !== -1,
+        'pl-left': position.indexOf('left') !== -1
+      });
+
+      return _react2.default.createElement(
         'div',
-        { className: tooltipLabelClassName },
-        this.props.children
-      )
-    );
-  }
-});
+        { className: tooltipClassName, onClick: this.props.onClick },
+        _react2.default.createElement('div', { className: 'pl-tooltip-target' }),
+        _react2.default.createElement(
+          'div',
+          { className: tooltipLabelClassName },
+          this.props.children
+        )
+      );
+    }
+  }]);
 
+  return Tooltip;
+}(_react.Component);
+
+Tooltip.propTypes = {
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.string,
+  onClick: _propTypes2.default.func,
+  position: _propTypes2.default.string
+};
+
 exports.default = Tooltip;

package.json

 {
   "name": "@planet/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Planet UI components built with React",
@@ -5,0 +5,0 @@ "author": "Planet",

No alert changes

Improved metrics

Total package byte prevSize

75292

increased by39.22%

Lines of code

1025

increased by25.46%

No dependency changes