anchor-ui - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

admin-badge/index.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -24,2 +28,6 @@
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _getStyles = require('./get-styles');
@@ -29,2 +37,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,7 +69,5 @@
           style = _props.style,
-          custom = _objectWithoutProperties(_props, ['text', 'inverted', 'style']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['text', 'inverted', 'style', 'color']);
 
-      var color = this.context.color;
-
-
       return _react2.default.createElement(
@@ -81,3 +91,4 @@ 'span',
   /** Inverts color */
-  inverted: _propTypes2.default.bool
+  inverted: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
@@ -92,3 +103,7 @@ AdminBadge.defaultProps = {
 };
-exports.default = (0, _radium2.default)(AdminBadge);
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(AdminBadge);
 module.exports = exports['default'];

app-header/index.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _getStyles = require('./get-styles');
@@ -30,2 +34,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,5 +44,3 @@
 /** Your app's header */
-function AppHeader(_ref, _ref2) {
-  var color = _ref2.color;
-
+function AppHeader(_ref) {
   var text = _ref.text,
@@ -49,3 +55,4 @@ icon = _ref.icon,
       leftButtonStyle = _ref.leftButtonStyle,
-      custom = _objectWithoutProperties(_ref, ['text', 'icon', 'rightButton', 'style', 'iconStyle', 'textStyle', 'rightButtonStyle', 'leftButton', 'leftButtonStyle']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['text', 'icon', 'rightButton', 'style', 'iconStyle', 'textStyle', 'rightButtonStyle', 'leftButton', 'leftButtonStyle', 'color']);
 
@@ -98,3 +105,4 @@ return _react2.default.createElement(
   /** Override the styles of the left button */
-  leftButtonStyle: _propTypes2.default.instanceOf(Object)
+  leftButtonStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -114,7 +122,5 @@
 
-AppHeader.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(AppHeader));
+exports.default = enhance(AppHeader);
 module.exports = exports['default'];

badge/index.js

@@ -9,4 +9,2 @@ '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');
@@ -20,5 +18,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _pure = require('recompose/pure');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _pure2 = _interopRequireDefault(_pure);
 
@@ -29,2 +27,6 @@ var _radium = require('radium');
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _badges = require('../style/badges');
@@ -42,2 +44,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,8 +53,2 @@
 
-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; }
-
 function getStyle(themeColor, inverted, overrideStyle) {
@@ -68,48 +68,25 @@ var color = themeColor || _colors2.default.theme;
 /** Used for displaying a (notification) counter */
+var Badge = function Badge(_ref) {
+  var value = _ref.value,
+      maxValue = _ref.maxValue,
+      inverted = _ref.inverted,
+      style = _ref.style,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['value', 'maxValue', 'inverted', 'style', 'color']);
 
-var Badge = function (_Component) {
-  _inherits(Badge, _Component);
+  var content = value;
 
-  function Badge() {
-    _classCallCheck(this, Badge);
-
-    return _possibleConstructorReturn(this, (Badge.__proto__ || Object.getPrototypeOf(Badge)).apply(this, arguments));
+  if (value > maxValue) {
+    content = maxValue + '+';
   }
 
-  _createClass(Badge, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          value = _props.value,
-          maxValue = _props.maxValue,
-          inverted = _props.inverted,
-          style = _props.style,
-          custom = _objectWithoutProperties(_props, ['value', 'maxValue', 'inverted', 'style']);
+  return _react2.default.createElement(
+    'span',
+    _extends({ style: getStyle(color, inverted, style) }, custom),
+    content
+  );
+};
 
-      var color = this.context.color;
+Badge.displayName = 'Badge';
 
-
-      var content = value;
-
-      if (value > maxValue) {
-        content = maxValue + '+';
-      }
-
-      return _react2.default.createElement(
-        'span',
-        _extends({ style: getStyle(color, inverted, style) }, custom),
-        content
-      );
-    }
-  }]);
-
-  return Badge;
-}(_react.Component);
-
-Badge.displayName = 'Badge';
 Badge.propTypes = {
@@ -124,4 +101,6 @@ /** The badge's value */
    * This will result in `${maxValue}+` if value exceeds maxValue */
-  maxValue: _propTypes2.default.number.isRequired
+  maxValue: _propTypes2.default.number.isRequired,
+  color: _propTypes2.default.string.isRequired
 };
+
 Badge.defaultProps = {
@@ -131,6 +110,6 @@ style: {},
 };
-Badge.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(Badge);
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(Badge);
 module.exports = exports['default'];

button/index.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -30,2 +30,6 @@ var _radium = require('radium');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,5 +40,3 @@
 /** General purpose button with three types */
-function Button(_ref, _ref2) {
-  var color = _ref2.color;
-
+var Button = function Button(_ref) {
   var children = _ref.children,
@@ -47,3 +49,4 @@ onClick = _ref.onClick,
       flatButton = _ref.flatButton,
-      custom = _objectWithoutProperties(_ref, ['children', 'onClick', 'iconButton', 'inverted', 'style', 'disabled', 'flatButton']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['children', 'onClick', 'iconButton', 'inverted', 'style', 'disabled', 'flatButton', 'color']);
 
@@ -53,3 +56,2 @@ return _react2.default.createElement(
     _extends({
-      key: 'button',
       onClick: onClick,
@@ -61,10 +63,6 @@ style: _getStyles2.default.root(color, inverted, iconButton, disabled, flatButton, style),
   );
-}
+};
 
 Button.displayName = 'Button';
 
-Button.contextTypes = {
-  color: _propTypes2.default.string
-};
-
 Button.propTypes = {
@@ -84,3 +82,4 @@ /** Content of the button */
   /** Toggle FlatButton type */
-  flatButton: _propTypes2.default.bool
+  flatButton: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
@@ -97,3 +96,5 @@
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(Button));
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(Button);
 module.exports = exports['default'];

checkbox/index.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -22,2 +26,6 @@
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _colors = require('../settings/colors');
@@ -39,2 +47,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,5 +57,3 @@
 /** A checkbox is used to verify which options you want selected from a group. */
-function Checkbox(_ref, _ref2) {
-  var color = _ref2.color;
-
+function Checkbox(_ref) {
   var onChange = _ref.onChange,
@@ -58,3 +68,4 @@ label = _ref.label,
       value = _ref.value,
-      custom = _objectWithoutProperties(_ref, ['onChange', 'label', 'checked', 'name', 'style', 'inputStyle', 'iconStyle', 'labelStyle', 'value']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['onChange', 'label', 'checked', 'name', 'style', 'inputStyle', 'iconStyle', 'labelStyle', 'value', 'color']);
 
@@ -105,3 +116,4 @@ return _react2.default.createElement(
   /** The checkbox' value */
-  value: _propTypes2.default.string.isRequired
+  value: _propTypes2.default.string.isRequired,
+  color: _propTypes2.default.string.isRequired
 };
@@ -117,7 +129,5 @@
 
-Checkbox.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _radium2.default)(Checkbox);
+exports.default = enhance(Checkbox);
 module.exports = exports['default'];

dialog/index.js

@@ -9,4 +9,2 @@ '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');
@@ -20,5 +18,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _pure = require('recompose/pure');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _pure2 = _interopRequireDefault(_pure);
 
@@ -29,2 +27,6 @@ var _radium = require('radium');
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _styles = require('./styles');
@@ -54,2 +56,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,71 +65,43 @@
 
-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; }
-
 /** General purpose dialog */
-var Dialog = function (_Component) {
-  _inherits(Dialog, _Component);
+var Dialog = function Dialog(_ref) {
+  var header = _ref.header,
+      hideDialog = _ref.hideDialog,
+      style = _ref.style,
+      overlayStyle = _ref.overlayStyle,
+      headerStyle = _ref.headerStyle,
+      children = _ref.children,
+      iconColor = _ref.iconColor,
+      open = _ref.open,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['header', 'hideDialog', 'style', 'overlayStyle', 'headerStyle', 'children', 'iconColor', 'open', 'color']);
 
-  function Dialog() {
-    _classCallCheck(this, Dialog);
-
-    return _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).apply(this, arguments));
+  if (!open) {
+    return null;
   }
 
-  _createClass(Dialog, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          header = _props.header,
-          hideDialog = _props.hideDialog,
-          style = _props.style,
-          overlayStyle = _props.overlayStyle,
-          headerStyle = _props.headerStyle,
-          children = _props.children,
-          iconColor = _props.iconColor,
-          open = _props.open,
-          custom = _objectWithoutProperties(_props, ['header', 'hideDialog', 'style', 'overlayStyle', 'headerStyle', 'children', 'iconColor', 'open']);
+  return _react2.default.createElement(
+    _overlay2.default,
+    { style: overlayStyle },
+    _react2.default.createElement('section', { style: _styles2.default.clickAway, onClick: hideDialog }),
+    _react2.default.createElement(
+      'section',
+      _extends({ style: _getStyles2.default.root(color, style) }, custom),
+      _react2.default.createElement(
+        _button2.default,
+        { style: _styles2.default.closeButton, onClick: hideDialog, iconButton: true },
+        _react2.default.createElement(_iconClose2.default, { color: iconColor })
+      ),
+      header ? _react2.default.createElement(
+        'h1',
+        { style: _getStyles2.default.header(headerStyle) },
+        header
+      ) : null,
+      children
+    )
+  );
+};
 
-      var color = this.context.color;
+Dialog.displayName = 'Dialog';
 
-
-      if (!open) {
-        return null;
-      }
-
-      return _react2.default.createElement(
-        _overlay2.default,
-        { style: overlayStyle },
-        _react2.default.createElement('section', { style: _styles2.default.clickAway, onClick: hideDialog }),
-        _react2.default.createElement(
-          'section',
-          _extends({ style: _getStyles2.default.root(color, style) }, custom),
-          _react2.default.createElement(
-            _button2.default,
-            { style: _styles2.default.closeButton, onClick: hideDialog, iconButton: true },
-            _react2.default.createElement(_iconClose2.default, { color: iconColor })
-          ),
-          header ? _react2.default.createElement(
-            'h1',
-            { style: _getStyles2.default.header(headerStyle) },
-            header
-          ) : null,
-          children
-        )
-      );
-    }
-  }]);
-
-  return Dialog;
-}(_react.Component);
-
-Dialog.displayName = 'Dialog';
 Dialog.propTypes = {
@@ -145,4 +123,6 @@ /** Header text */
   /** Toggle the Dialogs visibility */
-  open: _propTypes2.default.bool
+  open: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
+
 Dialog.defaultProps = {
@@ -157,6 +137,6 @@ style: {},
 };
-Dialog.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(Dialog);
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(Dialog);
 module.exports = exports['default'];

emoji-menu/index.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -32,2 +36,6 @@
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _emoji = require('./emoji');
@@ -53,6 +61,2 @@
 
-var _colors = require('../settings/colors');
-
-var _colors2 = _interopRequireDefault(_colors);
-
 var _styles = require('./styles');
@@ -66,2 +70,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -145,3 +153,2 @@
           category = _state.category;
-      var color = this.context.color;
 
@@ -158,6 +165,5 @@ var _props = this.props,
           svgSprites = _props.svgSprites,
-          custom = _objectWithoutProperties(_props, ['style', 'headerStyle', 'modifierStyle', 'categoryStyle', 'emojiStyle', 'footerStyle', 'iconStyle', 'sendEmoji', 'svgSprites']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['style', 'headerStyle', 'modifierStyle', 'categoryStyle', 'emojiStyle', 'footerStyle', 'iconStyle', 'sendEmoji', 'svgSprites', 'color']);
 
-      var activeColor = color || _colors2.default.theme;
-
       var modifiers = _lodash2.default.filter(_emoji2.default, { category: 'modifier' });
@@ -200,3 +206,3 @@
           category: category,
-          activeColor: activeColor,
+          activeColor: color,
           recent: storedEmojis.length > 0,
@@ -232,3 +238,4 @@ style: footerStyle,
   /** Override the styles of the footer icons */
-  iconStyle: _propTypes2.default.instanceOf(Object)
+  iconStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -245,6 +252,7 @@ EmojiMenu.defaultProps = {
 };
-EmojiMenu.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(EmojiMenu);
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(EmojiMenu);
 module.exports = exports['default'];

index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.WithTheme = exports.settings = exports.icons = exports.TableColumn = exports.TableRow = exports.TableBody = exports.TableHeaderColumn = exports.TableHeader = exports.Table = exports.Overlay = exports.AdminBadge = exports.Slider = exports.Profile = exports.Checkbox = exports.CardContent = exports.CardHeader = exports.Card = exports.Menu = exports.Modal = exports.Tab = exports.Tabs = exports.Paper = exports.EmojiMenu = exports.RadioButtonGroup = exports.RadioButton = exports.Select = exports.Switch = exports.Divider = exports.IconMenu = exports.Banner = exports.MenuItem = exports.PopOver = exports.SearchBox = exports.Dialog = exports.Loader = exports.EmptyState = exports.ProfileCard = exports.MessageList = exports.MessageInput = exports.Message = exports.Input = exports.ListItem = exports.List = exports.ChannelHeader = exports.Button = exports.Badge = exports.AppHeader = exports.Avatar = exports.Alert = undefined;
+exports.WithTheme = exports.settings = exports.icons = exports.themeable = exports.TableColumn = exports.TableRow = exports.TableBody = exports.TableHeaderColumn = exports.TableHeader = exports.Table = exports.Overlay = exports.AdminBadge = exports.Slider = exports.Profile = exports.Checkbox = exports.CardContent = exports.CardHeader = exports.Card = exports.Menu = exports.Modal = exports.Tab = exports.Tabs = exports.Paper = exports.EmojiMenu = exports.RadioButtonGroup = exports.RadioButton = exports.Select = exports.Switch = exports.Divider = exports.IconMenu = exports.Banner = exports.MenuItem = exports.PopOver = exports.SearchBox = exports.Dialog = exports.Loader = exports.EmptyState = exports.ProfileCard = exports.MessageList = exports.MessageInput = exports.Message = exports.Input = exports.ListItem = exports.List = exports.ChannelHeader = exports.Button = exports.Badge = exports.AppHeader = exports.Avatar = exports.Alert = undefined;
 
@@ -193,2 +193,6 @@ var _alert = require('./alert');
 
+var _themeable2 = require('./themeable');
+
+var _themeable3 = _interopRequireDefault(_themeable2);
+
 var _icons2 = require('./icons');
@@ -254,4 +258,5 @@
 exports.TableColumn = _tableColumn2.default;
+exports.themeable = _themeable3.default;
 exports.icons = _icons3.default;
 exports.settings = _settings3.default;
 exports.WithTheme = _withTheme2.default;

list-item/index.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -64,2 +64,6 @@ var _styles = require('./styles');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -111,7 +115,2 @@
   }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext) || _radium2.default.getState(this.state, 'listItem', ':hover') !== _radium2.default.getState(nextState, 'listItem', ':hover') || _radium2.default.getState(this.state, 'listItem', ':active') !== _radium2.default.getState(nextState, 'listItem', ':active') || !(0, _shallowEqual2.default)(this.state, nextState);
-    }
-  }, {
     key: 'toggleNestedList',
@@ -145,7 +144,5 @@ value: function toggleNestedList() {
           onNestedListToggle = _props.onNestedListToggle,
-          custom = _objectWithoutProperties(_props, ['primaryText', 'secondaryText', 'textBadge', 'onClick', 'active', 'rightButton', 'avatar', 'badge', 'style', 'primaryTextStyle', 'secondaryTextStyle', 'muted', 'blocked', 'children', 'open', 'onNestedListToggle']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['primaryText', 'secondaryText', 'textBadge', 'onClick', 'active', 'rightButton', 'avatar', 'badge', 'style', 'primaryTextStyle', 'secondaryTextStyle', 'muted', 'blocked', 'children', 'open', 'onNestedListToggle', 'color']);
 
-      var color = this.context.color;
-
-
       var nestedList = null;
@@ -192,3 +189,3 @@
           ),
-          secondaryText ? _react2.default.createElement(
+          secondaryText || textBadge ? _react2.default.createElement(
             'h2',
@@ -259,3 +256,4 @@ {
   /** Callback function fired when the ListItem toggles its nested list */
-  onNestedListToggle: _propTypes2.default.func
+  onNestedListToggle: _propTypes2.default.func,
+  color: _propTypes2.default.string.isRequired
 };
@@ -282,3 +280,7 @@ ListItem.defaultProps = {
 };
-exports.default = (0, _radium2.default)(ListItem);
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(ListItem);
 module.exports = exports['default'];

loader/loader.js

@@ -9,4 +9,2 @@ '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');
@@ -24,5 +22,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -41,2 +39,6 @@ var _loaders = require('../style/loaders');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,11 +48,8 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function getStyle() {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _colors2.default.theme;
+  var inverted = arguments[1];
+  var index = arguments[2];
+  var overrideStyle = arguments[3];
 
-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; }
-
-function getStyle(themeColor, inverted, index, overrideStyle) {
-  var color = themeColor || _colors2.default.theme;
-
   var style = (0, _combineStyles2.default)(_loaders2.default.dot, { backgroundColor: color });
@@ -74,43 +73,20 @@
 /** Animated loader */
+var Loader = function Loader(_ref) {
+  var inverted = _ref.inverted,
+      style = _ref.style,
+      dotStyle = _ref.dotStyle,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['inverted', 'style', 'dotStyle', 'color']);
 
-var Loader = function (_Component) {
-  _inherits(Loader, _Component);
+  return _react2.default.createElement(
+    'div',
+    _extends({ style: (0, _combineStyles2.default)(_loaders2.default.loader, style) }, custom),
+    _react2.default.createElement('span', { style: getStyle(color, inverted, 0, dotStyle) }),
+    _react2.default.createElement('span', { style: getStyle(color, inverted, 1, dotStyle) }),
+    _react2.default.createElement('span', { style: getStyle(color, inverted, 2, dotStyle) })
+  );
+};
 
-  function Loader() {
-    _classCallCheck(this, Loader);
+Loader.displayName = 'Loader';
 
-    return _possibleConstructorReturn(this, (Loader.__proto__ || Object.getPrototypeOf(Loader)).apply(this, arguments));
-  }
-
-  _createClass(Loader, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          inverted = _props.inverted,
-          style = _props.style,
-          dotStyle = _props.dotStyle,
-          custom = _objectWithoutProperties(_props, ['inverted', 'style', 'dotStyle']);
-
-      var color = this.context.color;
-
-
-      return _react2.default.createElement(
-        'div',
-        _extends({ style: (0, _combineStyles2.default)(_loaders2.default.loader, style) }, custom),
-        _react2.default.createElement('span', { style: getStyle(color, inverted, 0, dotStyle) }),
-        _react2.default.createElement('span', { style: getStyle(color, inverted, 1, dotStyle) }),
-        _react2.default.createElement('span', { style: getStyle(color, inverted, 2, dotStyle) })
-      );
-    }
-  }]);
-
-  return Loader;
-}(_react.Component);
-
-Loader.displayName = 'Loader';
 Loader.propTypes = {
@@ -122,4 +98,6 @@ /** Override the styles of the root element */
   /** Inverts the color */
-  inverted: _propTypes2.default.bool
+  inverted: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
+
 Loader.defaultProps = {
@@ -130,6 +108,6 @@ style: {},
 };
-Loader.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(Loader);
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(Loader);
 module.exports = exports['default'];

menu-item/index.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -40,2 +40,6 @@ var _colors = require('../settings/colors');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -90,7 +94,5 @@
           onClick = _props2.onClick,
-          custom = _objectWithoutProperties(_props2, ['icon', 'text', 'style', 'textStyle', 'iconStyle', 'active', 'closeMenu', 'onClick']);
+          color = _props2.color,
+          custom = _objectWithoutProperties(_props2, ['icon', 'text', 'style', 'textStyle', 'iconStyle', 'active', 'closeMenu', 'onClick', 'color']);
 
-      var color = this.context.color;
-
-
       return _react2.default.createElement(
@@ -141,3 +143,4 @@ 'section',
   /** Closes IconMenu if MenuItem is child */
-  closeMenu: _propTypes2.default.func
+  closeMenu: _propTypes2.default.func,
+  color: _propTypes2.default.string.isRequired
 };
@@ -155,3 +158,7 @@ MenuItem.defaultProps = {
 };
-exports.default = (0, _pure2.default)((0, _radium2.default)(MenuItem));
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(MenuItem);
 module.exports = exports['default'];

menu/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _radium = require('radium');
@@ -72,13 +76,13 @@
   /** The Menu's content (MenuItem) */
-  children: _react.PropTypes.node.isRequired,
+  children: _propTypes2.default.node.isRequired,
   /** Menu open */
-  open: _react.PropTypes.bool,
+  open: _propTypes2.default.bool,
   /** Toggle the Menu's visibility */
-  toggleMenu: _react.PropTypes.func.isRequired,
+  toggleMenu: _propTypes2.default.func.isRequired,
   /** The Menu's header */
-  header: _react.PropTypes.node,
+  header: _propTypes2.default.node,
   /** Override the styles of the root element */
-  style: _react.PropTypes.instanceOf(Object),
+  style: _propTypes2.default.instanceOf(Object),
   /** Override the styles of the root element */
-  headerStyle: _react.PropTypes.instanceOf(Object)
+  headerStyle: _propTypes2.default.instanceOf(Object)
 };
@@ -85,0 +89,0 @@

message-input/index.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -40,6 +40,2 @@ var _messageInputs = require('../style/message-inputs');
 
-var _colors = require('../settings/colors');
-
-var _colors2 = _interopRequireDefault(_colors);
-
 var _combineStyles = require('../internal/combine-styles');
@@ -49,2 +45,6 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -92,7 +92,2 @@
   _createClass(MessageInput, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext) || _radium2.default.getState(this.state, 'input', ':focus') !== _radium2.default.getState(nextState, 'input', ':focus') || _radium2.default.getState(this.state, 'input', ':disabled') !== _radium2.default.getState(nextState, 'input', ':disabled');
-    }
-  }, {
     key: 'handleKeyDown',
@@ -121,8 +116,5 @@ value: function handleKeyDown(event) {
           inputStyle = _props.inputStyle,
-          custom = _objectWithoutProperties(_props, ['onChange', 'sendMessage', 'placeholder', 'value', 'maxLength', 'leftButton', 'inputRef', 'disabled', 'style', 'inputStyle']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['onChange', 'sendMessage', 'placeholder', 'value', 'maxLength', 'leftButton', 'inputRef', 'disabled', 'style', 'inputStyle', 'color']);
 
-      var color = this.context.color;
-
-      var iconColor = color || _colors2.default.theme;
-
       return _react2.default.createElement(
@@ -155,3 +147,3 @@ 'section',
           },
-          _react2.default.createElement(_iconSend2.default, { color: iconColor })
+          _react2.default.createElement(_iconSend2.default, { color: color })
         )
@@ -186,3 +178,4 @@ );
   /** Disables the input for the messageInput area */
-  disabled: _propTypes2.default.bool
+  disabled: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
@@ -196,6 +189,7 @@ MessageInput.defaultProps = {
 };
-MessageInput.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(MessageInput);
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(MessageInput);
 module.exports = exports['default'];

message/index.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -24,5 +28,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -53,2 +57,6 @@ var _iconMenu = require('../icon-menu');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,7 +87,2 @@
   _createClass(Message, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState) || !(0, _shallowEqual2.default)(this.context, nextContext);
-    }
-  }, {
     key: 'renderIconMenu',
@@ -118,7 +121,5 @@ value: function renderIconMenu() {
           enableLightbox = _props.enableLightbox,
-          custom = _objectWithoutProperties(_props, ['avatar', 'message', 'timeFormat', 'myMessage', 'style', 'messageHeaderStyle', 'messageBodyStyle', 'messageTimeStyle', 'compact', 'fontSize', 'emoji', 'enableLinks', 'menuItems', 'enableLightbox']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['avatar', 'message', 'timeFormat', 'myMessage', 'style', 'messageHeaderStyle', 'messageBodyStyle', 'messageTimeStyle', 'compact', 'fontSize', 'emoji', 'enableLinks', 'menuItems', 'enableLightbox', 'color']);
 
-      var color = this.context.color;
-
-
       var messageElement = _react2.default.createElement(_textMessage2.default, _extends({ color: color }, this.props));
@@ -184,3 +185,4 @@
   /** Enables Lighbox for image messages */
-  enableLightbox: _propTypes2.default.bool
+  enableLightbox: _propTypes2.default.bool,
+  color: _propTypes2.default.string.isRequired
 };
@@ -202,6 +204,7 @@ Message.defaultProps = {
 };
-Message.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(Message);
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(Message);
 module.exports = exports['default'];

modal/index.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -22,5 +26,5 @@
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -35,2 +39,6 @@ var _getStyles = require('./get-styles');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,5 +49,3 @@
 /** A dialog that can only be closed by selecting one of the actions. */
-function Modal(_ref, _ref2) {
-  var color = _ref2.color;
-
+function Modal(_ref) {
   var children = _ref.children,
@@ -52,3 +58,4 @@ actions = _ref.actions,
       overlayStyle = _ref.overlayStyle,
-      custom = _objectWithoutProperties(_ref, ['children', 'actions', 'style', 'contentStyle', 'footerStyle', 'open', 'overlayStyle']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['children', 'actions', 'style', 'contentStyle', 'footerStyle', 'open', 'overlayStyle', 'color']);
 
@@ -93,3 +100,4 @@ if (!open) {
   /** Override the styles of the overlay element */
-  overlayStyle: _propTypes2.default.instanceOf(Object)
+  overlayStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -107,7 +115,5 @@
 
-Modal.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(Modal));
+exports.default = enhance(Modal);
 module.exports = exports['default'];

package.json

 {
   "name": "anchor-ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "React Component UI Kit",
@@ -78,3 +78,3 @@ "main": "dist/index.js",
     "lodash": "^4.17.4",
-    "radium": "^0.18.1",
+    "radium": "^0.19.0",
     "react-measure": "^1.4.5",
@@ -81,0 +81,0 @@ "recompose": "^0.22.0",

profile-card/index.js

@@ -9,4 +9,2 @@ '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');
@@ -20,2 +18,6 @@
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -25,5 +27,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -50,2 +52,6 @@ var _avatar = require('../avatar');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,61 +61,33 @@
 
-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; }
-
 /** Card containing the user's profile data */
-var ProfileCard = function (_Component) {
-  _inherits(ProfileCard, _Component);
+var ProfileCard = function ProfileCard(_ref) {
+  var username = _ref.username,
+      avatar = _ref.avatar,
+      style = _ref.style,
+      usernameStyle = _ref.usernameStyle,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['username', 'avatar', 'style', 'usernameStyle', 'color']);
 
-  function ProfileCard() {
-    _classCallCheck(this, ProfileCard);
+  var avatarStyle = {
+    float: 'left',
+    width: '80px',
+    height: '80px',
+    border: '3px solid ' + _colors2.default.white,
+    marginRight: '15px'
+  };
 
-    return _possibleConstructorReturn(this, (ProfileCard.__proto__ || Object.getPrototypeOf(ProfileCard)).apply(this, arguments));
-  }
+  return _react2.default.createElement(
+    'section',
+    _extends({ style: _getStyles2.default.root(color, avatar, style) }, custom),
+    avatar ? _react2.default.createElement(_avatar2.default, { image: avatar, style: avatarStyle }) : null,
+    _react2.default.createElement(
+      'h1',
+      { style: (0, _combineStyles2.default)(_styles2.default.username, usernameStyle) },
+      username
+    )
+  );
+};
 
-  _createClass(ProfileCard, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          username = _props.username,
-          avatar = _props.avatar,
-          style = _props.style,
-          usernameStyle = _props.usernameStyle,
-          custom = _objectWithoutProperties(_props, ['username', 'avatar', 'style', 'usernameStyle']);
+ProfileCard.displayName = 'ProfileCard';
 
-      var color = this.context.color;
-
-
-      var avatarStyle = {
-        float: 'left',
-        width: '80px',
-        height: '80px',
-        border: '3px solid ' + _colors2.default.white,
-        marginRight: '15px'
-      };
-
-      return _react2.default.createElement(
-        'section',
-        _extends({ style: _getStyles2.default.root(color, avatar, style) }, custom),
-        avatar ? _react2.default.createElement(_avatar2.default, { image: avatar, style: avatarStyle }) : null,
-        _react2.default.createElement(
-          'h1',
-          { style: (0, _combineStyles2.default)(_styles2.default.username, usernameStyle) },
-          username
-        )
-      );
-    }
-  }]);
-
-  return ProfileCard;
-}(_react.Component);
-
-ProfileCard.displayName = 'ProfileCard';
 ProfileCard.propTypes = {
@@ -123,4 +101,6 @@ /** Path to the user's profile image */
   /** Override the styles of the username element */
-  usernameStyle: _propTypes2.default.instanceOf(Object)
+  usernameStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
+
 ProfileCard.defaultProps = {
@@ -131,6 +111,6 @@ avatar: '',
 };
-ProfileCard.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(ProfileCard);
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
+
+exports.default = enhance(ProfileCard);
 module.exports = exports['default'];

radio-button/index.js

@@ -9,4 +9,2 @@ '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');
@@ -24,5 +22,5 @@
 
-var _shallowEqual = require('recompose/shallowEqual');
+var _compose = require('recompose/compose');
 
-var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -45,2 +43,6 @@ var _colors = require('../settings/colors');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,8 +52,2 @@
 
-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; }
-
 function getStyle() {
@@ -68,62 +64,41 @@ var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _colors2.default.theme;
 
-var RadioButton = function (_Component) {
-  _inherits(RadioButton, _Component);
+/** Radio buttons are switches used for selection from multiple options */
+var RadioButton = function RadioButton(_ref) {
+  var value = _ref.value,
+      label = _ref.label,
+      style = _ref.style,
+      inputStyle = _ref.inputStyle,
+      iconStyle = _ref.iconStyle,
+      labelStyle = _ref.labelStyle,
+      onChange = _ref.onChange,
+      checked = _ref.checked,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['value', 'label', 'style', 'inputStyle', 'iconStyle', 'labelStyle', 'onChange', 'checked', 'color']);
 
-  function RadioButton() {
-    _classCallCheck(this, RadioButton);
+  return _react2.default.createElement(
+    'label',
+    { key: 'radio', htmlFor: value, style: getStyle(color, style) },
+    _react2.default.createElement('input', _extends({
+      type: 'radio',
+      value: value,
+      id: value,
+      onChange: onChange,
+      checked: checked,
+      style: (0, _combineStyles2.default)(_styles2.default.input, inputStyle)
+    }, custom)),
+    _react2.default.createElement(
+      'div',
+      { style: (0, _combineStyles2.default)(_styles2.default.icon, iconStyle) },
+      _react2.default.createElement(_iconRadio2.default, { color: checked ? color || _colors2.default.theme : _colors2.default.icons })
+    ),
+    _react2.default.createElement(
+      'span',
+      { style: (0, _combineStyles2.default)(_styles2.default.label, labelStyle) },
+      label
+    )
+  );
+};
 
-    return _possibleConstructorReturn(this, (RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).apply(this, arguments));
-  }
+RadioButton.displayName = 'RadioButton';
 
-  _createClass(RadioButton, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
-      return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.context, nextContext) || _radium2.default.getState(this.state, 'radio', ':hover') !== _radium2.default.getState(nextState, 'radio', ':hover') || _radium2.default.getState(this.state, 'radio', ':focus') !== _radium2.default.getState(nextState, 'radio', ':focus');
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          value = _props.value,
-          label = _props.label,
-          style = _props.style,
-          inputStyle = _props.inputStyle,
-          iconStyle = _props.iconStyle,
-          labelStyle = _props.labelStyle,
-          onChange = _props.onChange,
-          checked = _props.checked,
-          custom = _objectWithoutProperties(_props, ['value', 'label', 'style', 'inputStyle', 'iconStyle', 'labelStyle', 'onChange', 'checked']);
-
-      var color = this.context.color;
-
-
-      return _react2.default.createElement(
-        'label',
-        { key: 'radio', htmlFor: value, style: getStyle(color, style) },
-        _react2.default.createElement('input', _extends({
-          type: 'radio',
-          value: value,
-          id: value,
-          onChange: onChange,
-          checked: checked,
-          style: (0, _combineStyles2.default)(_styles2.default.input, inputStyle)
-        }, custom)),
-        _react2.default.createElement(
-          'div',
-          { style: (0, _combineStyles2.default)(_styles2.default.icon, iconStyle) },
-          _react2.default.createElement(_iconRadio2.default, { color: checked ? color || _colors2.default.theme : _colors2.default.icons })
-        ),
-        _react2.default.createElement(
-          'span',
-          { style: (0, _combineStyles2.default)(_styles2.default.label, labelStyle) },
-          label
-        )
-      );
-    }
-  }]);
-
-  return RadioButton;
-}(_react.Component);
-
-RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -145,4 +120,6 @@ /** The input's value */
   /** Override the styles of the label element */
-  labelStyle: _propTypes2.default.instanceOf(Object)
+  labelStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
+
 RadioButton.defaultProps = {
@@ -156,6 +133,6 @@ style: {},
 };
-RadioButton.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _radium2.default)(RadioButton);
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(RadioButton);
 module.exports = exports['default'];

select/index.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -60,2 +60,6 @@ var _find = require('lodash/find');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -162,7 +166,5 @@
           errorStyle = _props.errorStyle,
-          custom = _objectWithoutProperties(_props, ['children', 'value', 'onChange', 'label', 'style', 'headerStyle', 'labelStyle', 'contentStyle', 'placeholder', 'error', 'errorStyle']);
+          color = _props.color,
+          custom = _objectWithoutProperties(_props, ['children', 'value', 'onChange', 'label', 'style', 'headerStyle', 'labelStyle', 'contentStyle', 'placeholder', 'error', 'errorStyle', 'color']);
 
-      var color = this.context.color;
-
-
       var childrenWithProps = _react2.default.Children.map(children, function (child) {
@@ -261,3 +263,4 @@ return _react2.default.cloneElement(child, {
   /** Override the styles of the error element */
-  errorStyle: _propTypes2.default.instanceOf(Object)
+  errorStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -275,6 +278,7 @@ Select.defaultProps = {
 };
-Select.contextTypes = {
-  color: _propTypes2.default.string
-};
-exports.default = (0, _pure2.default)((0, _radium2.default)(Select));
+
+
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default);
+
+exports.default = enhance(Select);
 module.exports = exports['default'];

select/styles.js

@@ -40,2 +40,3 @@ 'use strict';
     lineHeight: '24px',
+    transition: 'background .3s ease-in-out',
     boxShadow: _styles2.default.depthShadows[0],
@@ -42,0 +43,0 @@ ':hover': {

slider/index.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -22,5 +26,5 @@
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -43,2 +47,6 @@ var _styles = require('./styles');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,5 +57,3 @@
 /** General purpose form slider */
-function Slider(_ref, _ref2) {
-  var color = _ref2.color;
-
+function Slider(_ref) {
   var name = _ref.name,
@@ -65,3 +71,4 @@ label = _ref.label,
       labelStyle = _ref.labelStyle,
-      custom = _objectWithoutProperties(_ref, ['name', 'label', 'onChange', 'value', 'max', 'min', 'step', 'disabled', 'errorStyle', 'error', 'style', 'labelStyle']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['name', 'label', 'onChange', 'value', 'max', 'min', 'step', 'disabled', 'errorStyle', 'error', 'style', 'labelStyle', 'color']);
 
@@ -134,3 +141,4 @@ var percentage = (0, _getPercentage2.default)(value, min, max);
   /** Override the styles of the label element */
-  labelStyle: _propTypes2.default.instanceOf(Object)
+  labelStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -150,7 +158,5 @@
 
-Slider.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(Slider));
+exports.default = enhance(Slider);
 module.exports = exports['default'];

switch/index.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -22,5 +26,5 @@
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -39,2 +43,6 @@ var _switch = require('../style/switch');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -74,5 +82,3 @@
 
-function Switch(_ref, _ref2) {
-  var color = _ref2.color;
-
+function Switch(_ref) {
   var active = _ref.active,
@@ -85,3 +91,4 @@ label = _ref.label,
       labelStyle = _ref.labelStyle,
-      custom = _objectWithoutProperties(_ref, ['active', 'label', 'toggleSwitch', 'style', 'trackStyle', 'knobStyle', 'labelStyle']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['active', 'label', 'toggleSwitch', 'style', 'trackStyle', 'knobStyle', 'labelStyle', 'color']);
 
@@ -121,3 +128,4 @@ return _react2.default.createElement(
   /** Override the styles of the label element */
-  labelStyle: _propTypes2.default.instanceOf(Object)
+  labelStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -134,7 +142,5 @@
 
-Switch.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(Switch));
+exports.default = enhance(Switch);
 module.exports = exports['default'];

tab/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -16,2 +18,6 @@
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -21,5 +27,5 @@
 
-var _pure = require('recompose/pure');
+var _compose = require('recompose/compose');
 
-var _pure2 = _interopRequireDefault(_pure);
+var _compose2 = _interopRequireDefault(_compose);
 
@@ -30,2 +36,6 @@ var _getStyles = require('./get-styles');
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,5 +45,3 @@
 
-function Tab(_ref, _ref2) {
-  var color = _ref2.color;
-
+function Tab(_ref) {
   var onClick = _ref.onClick,
@@ -50,7 +58,11 @@ icon = _ref.icon,
       activeLabelStyle = _ref.activeLabelStyle,
-      custom = _objectWithoutProperties(_ref, ['onClick', 'icon', 'label', 'selected', 'style', 'iconStyle', 'labelStyle', 'badge', 'badgeStyle', 'activeStyle', 'activeLabelStyle']);
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['onClick', 'icon', 'label', 'selected', 'style', 'iconStyle', 'labelStyle', 'badge', 'badgeStyle', 'activeStyle', 'activeLabelStyle', 'color']);
 
   return _react2.default.createElement(
     'section',
-    { style: _getStyles2.default.root(color, selected, style, activeStyle), onClick: onClick },
+    _extends({
+      style: _getStyles2.default.root(color, selected, style, activeStyle),
+      onClick: onClick
+    }, custom),
     icon ? _react2.default.createElement(
@@ -98,3 +110,4 @@ 'div',
   /** Overide the styles of an active label element. */
-  activeLabelStyle: _propTypes2.default.instanceOf(Object)
+  activeLabelStyle: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -114,7 +127,5 @@
 
-Tab.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _pure2.default)((0, _radium2.default)(Tab));
+exports.default = enhance(Tab);
 module.exports = exports['default'];

table-header/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -16,2 +18,6 @@
 
+var _pure = require('recompose/pure');
+
+var _pure2 = _interopRequireDefault(_pure);
+
 var _radium = require('radium');
@@ -21,2 +27,6 @@
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 var _getStyles = require('./get-styles');
@@ -26,12 +36,20 @@
 
+var _themeable = require('../themeable');
+
+var _themeable2 = _interopRequireDefault(_themeable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 /** TableHeaders are used to display data. */
-var TableHeader = function TableHeader(_ref, _ref2) {
+var TableHeader = function TableHeader(_ref) {
   var children = _ref.children,
-      style = _ref.style;
-  var color = _ref2.color;
+      style = _ref.style,
+      color = _ref.color,
+      custom = _objectWithoutProperties(_ref, ['children', 'style', 'color']);
+
   return _react2.default.createElement(
     'thead',
-    { style: _getStyles2.default.root(color, style) },
+    _extends({ style: _getStyles2.default.root(color, style) }, custom),
     children
@@ -47,3 +65,4 @@ );
   /** Override the styles of the root element */
-  style: _propTypes2.default.instanceOf(Object)
+  style: _propTypes2.default.instanceOf(Object),
+  color: _propTypes2.default.string.isRequired
 };
@@ -55,7 +74,5 @@
 
-TableHeader.contextTypes = {
-  color: _propTypes2.default.string
-};
+var enhance = (0, _compose2.default)((0, _themeable2.default)(), _radium2.default, _pure2.default);
 
-exports.default = (0, _radium2.default)(TableHeader);
+exports.default = enhance(TableHeader);
 module.exports = exports['default'];

with-theme/index.js

@@ -42,5 +42,13 @@ 'use strict';
     key: 'getChildContext',
+
+
+    // Allow backwards compatibility (sort of)
     value: function getChildContext() {
       return {
-        color: this.props.color
+        theme: {
+          color: this.props.color,
+          subscribe: function subscribe() {
+            return function () {};
+          }
+        }
       };
@@ -69,5 +77,7 @@ }
 WithTheme.childContextTypes = {
-  color: _propTypes2.default.string.isRequired
+  theme: _propTypes2.default.shape({
+    color: _propTypes2.default.string
+  })
 };
 exports.default = (0, _pure2.default)(WithTheme);
 module.exports = exports['default'];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

857350

increased by0.19%

Number of package files

220

increased by0.92%

Lines of code

18834

increased by0.54%

Dependency changes

• + Addedradium@0.19.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedfs.realpath@1.0.0(transitive)

• - Removedglob@7.2.3(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedradium@0.18.4(transitive)

• - Removedrimraf@2.7.1(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedradium@^0.19.0