anchor-ui - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/components/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');
@@ -16,6 +18,2 @@
 
-var _getClassNames = require('../get-class-names');
-
-var _getClassNames2 = _interopRequireDefault(_getClassNames);
-
 var _buttons = require('../style/buttons');
@@ -25,17 +23,53 @@
 
+var _getClassNames = require('../internal/get-class-names');
+
+var _getClassNames2 = _interopRequireDefault(_getClassNames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function Button(_ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      classes = _ref.sheet.classes,
-      style = _ref.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return _react2.default.createElement(
-    'button',
-    { onClick: onClick, className: (0, _getClassNames2.default)(classes, 'button', style) },
-    children
-  );
-}
+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 Button = function (_Component) {
+  _inherits(Button, _Component);
+
+  function Button(props) {
+    _classCallCheck(this, Button);
+
+    var _this = _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this, props));
+
+    var classes = props.sheet.classes,
+        style = props.style;
+
+    var className = (0, _getClassNames2.default)(classes, style, 'button', 'Button');
+
+    _this.state = {
+      className: className
+    };
+    return _this;
+  }
+
+  _createClass(Button, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onClick = _props.onClick;
+      var className = this.state.className;
+
+
+      return _react2.default.createElement(
+        'button',
+        { onClick: onClick, className: className },
+        children
+      );
+    }
+  }]);
+
+  return Button;
+}(_react.Component);
+
 Button.propTypes = {
@@ -49,8 +83,5 @@ children: _react.PropTypes.element.isRequired,
   }).isRequired,
-  style: _react.PropTypes.shape({
-    button: _react.PropTypes.object
-  })
+  style: _react.PropTypes.instanceOf(Object)
 };
-
 exports.default = (0, _reactJss2.default)(_buttons2.default)(Button);
 module.exports = exports['default'];

dist/components/channel-header.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,23 +14,81 @@
 
+var _reactJss = require('react-jss');
+
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _channelHeader = require('../style/channel-header');
+
+var _channelHeader2 = _interopRequireDefault(_channelHeader);
+
+var _getClassNames = require('../internal/get-class-names');
+
+var _getClassNames2 = _interopRequireDefault(_getClassNames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ChannelHeader(_ref) {
-  var name = _ref.name;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return _react2.default.createElement(
-    'header',
-    null,
-    _react2.default.createElement(
-      'h1',
-      null,
-      name
-    )
-  );
-}
+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 ChannelHeader = function (_Component) {
+  _inherits(ChannelHeader, _Component);
+
+  function ChannelHeader(props) {
+    _classCallCheck(this, ChannelHeader);
+
+    var _this = _possibleConstructorReturn(this, (ChannelHeader.__proto__ || Object.getPrototypeOf(ChannelHeader)).call(this, props));
+
+    var classes = props.sheet.classes,
+        style = props.style,
+        headerTextStyle = props.headerTextStyle;
+
+
+    var headerClassName = (0, _getClassNames2.default)(classes, style, 'header', 'ChannelHeader');
+    var textClassName = (0, _getClassNames2.default)(classes, headerTextStyle, 'headerText', 'ChannelHeader');
+
+    _this.state = {
+      textClassName: textClassName,
+      headerClassName: headerClassName
+    };
+    return _this;
+  }
+
+  _createClass(ChannelHeader, [{
+    key: 'render',
+    value: function render() {
+      var name = this.props.name;
+      var _state = this.state,
+          textClassName = _state.textClassName,
+          headerClassName = _state.headerClassName;
+
+
+      return _react2.default.createElement(
+        'header',
+        { className: headerClassName },
+        _react2.default.createElement(
+          'h1',
+          { className: textClassName },
+          name
+        )
+      );
+    }
+  }]);
+
+  return ChannelHeader;
+}(_react.Component);
+
 ChannelHeader.propTypes = {
-  name: _react.PropTypes.string.isRequired
+  name: _react.PropTypes.string.isRequired,
+  sheet: _react.PropTypes.shape({
+    classes: _react.PropTypes.shape({
+      header: _react.PropTypes.string.isRequired,
+      headerText: _react.PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired,
+  style: _react.PropTypes.instanceOf(_react.PropTypes.object),
+  headerTextStyle: _react.PropTypes.instanceOf(_react.PropTypes.object)
 };
-
-exports.default = ChannelHeader;
+exports.default = (0, _reactJss2.default)(_channelHeader2.default)(ChannelHeader);
 module.exports = exports['default'];

dist/components/list-item.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');
@@ -16,6 +18,2 @@
 
-var _getClassNames = require('../get-class-names');
-
-var _getClassNames2 = _interopRequireDefault(_getClassNames);
-
 var _lists = require('../style/lists');
@@ -25,27 +23,73 @@
 
+var _getClassNames = require('../internal/get-class-names');
+
+var _getClassNames2 = _interopRequireDefault(_getClassNames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ListItem(_ref) {
-  var primaryText = _ref.primaryText,
-      secondaryText = _ref.secondaryText,
-      onClick = _ref.onClick,
-      classes = _ref.sheet.classes,
-      style = _ref.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return _react2.default.createElement(
-    'li',
-    { onClick: onClick, className: (0, _getClassNames2.default)(classes, 'listItem', style) },
-    _react2.default.createElement(
-      'h1',
-      { className: (0, _getClassNames2.default)(classes, 'primaryText', style) },
-      primaryText
-    ),
-    secondaryText ? _react2.default.createElement(
-      'h2',
-      { className: (0, _getClassNames2.default)(classes, 'secondaryText', style) },
-      secondaryText
-    ) : null
-  );
-}
+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 ListItem = function (_Component) {
+  _inherits(ListItem, _Component);
+
+  function ListItem(props) {
+    _classCallCheck(this, ListItem);
+
+    var _this = _possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
+
+    var classes = props.sheet.classes,
+        style = props.style,
+        primaryTextStyle = props.primaryTextStyle,
+        secondaryTextStyle = props.secondaryTextStyle;
+
+
+    var className = (0, _getClassNames2.default)(classes, style, 'listItem', 'ListItem');
+    var primaryTextClassName = (0, _getClassNames2.default)(classes, primaryTextStyle, 'primaryText', 'ListItem');
+    var secondaryTextClassName = (0, _getClassNames2.default)(classes, secondaryTextStyle, 'secondaryText', 'ListItem');
+
+    _this.state = {
+      className: className,
+      primaryTextClassName: primaryTextClassName,
+      secondaryTextClassName: secondaryTextClassName
+    };
+    return _this;
+  }
+
+  _createClass(ListItem, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          primaryText = _props.primaryText,
+          secondaryText = _props.secondaryText,
+          onClick = _props.onClick;
+      var _state = this.state,
+          className = _state.className,
+          primaryTextClassName = _state.primaryTextClassName,
+          secondaryTextClassName = _state.secondaryTextClassName;
+
+
+      return _react2.default.createElement(
+        'li',
+        { onClick: onClick, className: className },
+        _react2.default.createElement(
+          'h1',
+          { className: primaryTextClassName },
+          primaryText
+        ),
+        secondaryText ? _react2.default.createElement(
+          'h2',
+          { className: secondaryTextClassName },
+          secondaryText
+        ) : null
+      );
+    }
+  }]);
+
+  return ListItem;
+}(_react.Component);
+
 ListItem.propTypes = {
@@ -56,12 +100,13 @@ primaryText: _react.PropTypes.string.isRequired,
     classes: _react.PropTypes.shape({
-      listItem: _react.PropTypes.string.isRequired
+      listItem: _react.PropTypes.string.isRequired,
+      primaryText: _react.PropTypes.string.isRequired,
+      secondaryText: _react.PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
-  style: _react.PropTypes.shape({
-    listItem: _react.PropTypes.object
-  }),
+  style: _react.PropTypes.instanceOf(_react.PropTypes.object),
+  primaryTextStyle: _react.PropTypes.instanceOf(_react.PropTypes.object),
+  secondaryTextStyle: _react.PropTypes.instanceOf(_react.PropTypes.object),
   onClick: _react.PropTypes.func
 };
-
 exports.default = (0, _reactJss2.default)(_lists2.default)(ListItem);
 module.exports = exports['default'];

dist/components/list.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');
@@ -16,6 +18,2 @@
 
-var _getClassNames = require('../get-class-names');
-
-var _getClassNames2 = _interopRequireDefault(_getClassNames);
-
 var _lists = require('../style/lists');
@@ -25,16 +23,51 @@
 
+var _getClassNames = require('../internal/get-class-names');
+
+var _getClassNames2 = _interopRequireDefault(_getClassNames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function List(_ref) {
-  var children = _ref.children,
-      classes = _ref.sheet.classes,
-      style = _ref.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return _react2.default.createElement(
-    'ul',
-    { className: (0, _getClassNames2.default)(classes, 'list', style) },
-    children
-  );
-}
+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 List = function (_Component) {
+  _inherits(List, _Component);
+
+  function List(props) {
+    _classCallCheck(this, List);
+
+    var _this = _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
+
+    var classes = props.sheet.classes,
+        style = props.style;
+
+    var className = (0, _getClassNames2.default)(classes, style, 'list', 'List');
+
+    _this.state = {
+      className: className
+    };
+    return _this;
+  }
+
+  _createClass(List, [{
+    key: 'render',
+    value: function render() {
+      var children = this.props.children;
+      var className = this.state.className;
+
+
+      return _react2.default.createElement(
+        'ul',
+        { className: className },
+        children
+      );
+    }
+  }]);
+
+  return List;
+}(_react.Component);
+
 List.propTypes = {
@@ -47,8 +80,5 @@ children: _react.PropTypes.node.isRequired,
   }).isRequired,
-  style: _react.PropTypes.shape({
-    list: _react.PropTypes.object
-  })
+  style: _react.PropTypes.instanceOf(Object)
 };
-
 exports.default = (0, _reactJss2.default)(_lists2.default)(List);
 module.exports = exports['default'];

dist/components/message-input.js

@@ -17,3 +17,3 @@ 'use strict';
 
-var _getClassNames = require('../get-class-names');
+var _getClassNames = require('../internal/get-class-names');
 
@@ -49,7 +49,19 @@ var _getClassNames2 = _interopRequireDefault(_getClassNames);
 
-  function MessageInput() {
+  function MessageInput(props) {
     _classCallCheck(this, MessageInput);
 
-    var _this = _possibleConstructorReturn(this, (MessageInput.__proto__ || Object.getPrototypeOf(MessageInput)).call(this));
+    var _this = _possibleConstructorReturn(this, (MessageInput.__proto__ || Object.getPrototypeOf(MessageInput)).call(this, props));
 
+    var classes = props.sheet.classes,
+        style = props.style,
+        inputStyle = props.inputStyle;
+
+    var inputClassName = (0, _getClassNames2.default)(classes, inputStyle, 'messageInput', 'MessageInput');
+    var className = (0, _getClassNames2.default)(classes, style, 'input', 'MessageInput');
+
+    _this.state = {
+      className: className,
+      inputClassName: inputClassName
+    };
+
     _this.handleKeyDown = _this.handleKeyDown.bind(_this);
@@ -76,12 +88,12 @@ return _this;
           placeholder = _props.placeholder,
-          value = _props.value,
-          classes = _props.sheet.classes,
-          style = _props.style;
+          value = _props.value;
+      var _state = this.state,
+          className = _state.className,
+          inputClassName = _state.inputClassName;
 
 
       var buttonStyle = {
-        button: {
-          position: 'absolute',
-          right: '0'
-        }
+        position: 'absolute',
+        right: '20px',
+        top: '4px'
       };
@@ -91,5 +103,5 @@
         'section',
-        null,
+        { className: className },
         _react2.default.createElement('input', {
-          className: (0, _getClassNames2.default)(classes, 'messageInput', style),
+          className: inputClassName,
           placeholder: placeholder,
@@ -123,7 +135,6 @@ onChange: onChange,
   placeholder: _react.PropTypes.string.isRequired,
-  style: _react.PropTypes.shape({
-    messageInput: _react.PropTypes.object
-  })
+  style: _react.PropTypes.instanceOf(Object),
+  inputStyle: _react.PropTypes.instanceOf(Object)
 };
 exports.default = (0, _reactJss2.default)(_inputs2.default)(MessageInput);
 module.exports = exports['default'];

dist/components/message.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');
@@ -24,4 +26,8 @@
 
-var _getClassNames = require('../get-class-names');
+var _avatar = require('./avatar');
 
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _getClassNames = require('../internal/get-class-names');
+
 var _getClassNames2 = _interopRequireDefault(_getClassNames);
@@ -37,35 +43,97 @@
 
-function Message(_ref) {
-  var message = _ref.message,
-      timeFormat = _ref.timeFormat,
-      myMessage = _ref.myMessage,
-      classes = _ref.sheet.classes,
-      style = _ref.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  var format = timeFormat || 'HH:mm';
+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; }
 
-  return _react2.default.createElement(
-    'section',
-    {
-      className: (0, _classnames2.default)((0, _getClassNames2.default)(classes, 'message', style), _defineProperty({}, classes.myMessage, myMessage))
-    },
-    _react2.default.createElement(
-      'header',
-      { className: (0, _getClassNames2.default)(classes, 'messageHeader', style) },
-      message.username
-    ),
-    _react2.default.createElement(
-      'p',
-      { className: (0, _getClassNames2.default)(classes, 'messageBody', style) },
-      message.body
-    ),
-    _react2.default.createElement(
-      'span',
-      { className: (0, _getClassNames2.default)(classes, 'messageTime', style) },
-      (0, _moment2.default)(message.createdAt).format(format)
-    )
-  );
-}
+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 Message = function (_Component) {
+  _inherits(Message, _Component);
+
+  function Message(props) {
+    _classCallCheck(this, Message);
+
+    var _this = _possibleConstructorReturn(this, (Message.__proto__ || Object.getPrototypeOf(Message)).call(this, props));
+
+    var classes = props.sheet.classes,
+        style = props.style,
+        messageHeaderStyle = props.messageHeaderStyle,
+        messageBodyStyle = props.messageBodyStyle,
+        messageTimeStyle = props.messageTimeStyle;
+
+
+    var className = (0, _getClassNames2.default)(classes, style, 'message', 'Message');
+    var messageHeaderClassName = (0, _getClassNames2.default)(classes, messageHeaderStyle, 'messageHeader', 'Message');
+    var messageBodyClassName = (0, _getClassNames2.default)(classes, messageBodyStyle, 'messageBody', 'Message');
+    var messageTimeClassName = (0, _getClassNames2.default)(classes, messageTimeStyle, 'messageTime', 'Message');
+
+    _this.state = {
+      className: className,
+      messageHeaderClassName: messageHeaderClassName,
+      messageBodyClassName: messageBodyClassName,
+      messageTimeClassName: messageTimeClassName
+    };
+    return _this;
+  }
+
+  _createClass(Message, [{
+    key: 'render',
+    value: function render() {
+      var _classNames;
+
+      var _props = this.props,
+          avatar = _props.avatar,
+          message = _props.message,
+          timeFormat = _props.timeFormat,
+          myMessage = _props.myMessage,
+          classes = _props.sheet.classes;
+      var _state = this.state,
+          className = _state.className,
+          messageHeaderClassName = _state.messageHeaderClassName,
+          messageBodyClassName = _state.messageBodyClassName,
+          messageTimeClassName = _state.messageTimeClassName;
+
+      var format = timeFormat || 'HH:mm';
+
+      var style = {
+        position: 'absolute',
+        left: '-60px',
+        top: '0'
+      };
+
+      if (myMessage) {
+        style.left = 'initial';
+        style.right = '-60px';
+      }
+
+      return _react2.default.createElement(
+        'section',
+        {
+          className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, classes.myMessage, myMessage), _defineProperty(_classNames, classes.avatar, avatar), _classNames))
+        },
+        avatar ? _react2.default.createElement(_avatar2.default, { image: avatar, style: style }) : null,
+        _react2.default.createElement(
+          'header',
+          { className: messageHeaderClassName },
+          message.username
+        ),
+        _react2.default.createElement(
+          'p',
+          { className: messageBodyClassName },
+          message.body
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: messageTimeClassName },
+          (0, _moment2.default)(message.createdAt).format(format)
+        )
+      );
+    }
+  }]);
+
+  return Message;
+}(_react.Component);
+
 Message.propTypes = {
+  avatar: _react.PropTypes.string,
   message: _react.PropTypes.shape({
@@ -82,9 +150,9 @@ body: _react.PropTypes.string.isRequired,
   }).isRequired,
-  style: _react.PropTypes.shape({
-    message: _react.PropTypes.object
-  }),
+  style: _react.PropTypes.instanceOf(Object),
+  messageHeaderStyle: _react.PropTypes.instanceOf(Object),
+  messageBodyStyle: _react.PropTypes.instanceOf(Object),
+  messageTimeStyle: _react.PropTypes.instanceOf(Object),
   myMessage: _react.PropTypes.bool
 };
-
 exports.default = (0, _reactJss2.default)(_messages2.default)(Message);
 module.exports = exports['default'];

dist/icons/icon-add-image.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-channel.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-channels.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-clock.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-conversation.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-edit.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-emoji.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-menu.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-people.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-person.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/icons/icon-send.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +21,3 @@
 
-  var fill = color || '#C4C4C4';
+  var fill = color || _colors2.default.icons;
 
@@ -20,0 +24,0 @@ return _react2.default.createElement(

dist/index.js

@@ -6,4 +6,12 @@ 'use strict';
 });
-exports.colors = exports.IconSend = exports.IconPerson = exports.IconPeople = exports.IconMenu = exports.IconEmoji = exports.IconEdit = exports.IconConversation = exports.IconClock = exports.IconChannels = exports.IconChannel = exports.IconAddImage = exports.MyProfileCard = exports.MessageInput = exports.Message = exports.ListItem = exports.List = exports.ChannelHeader = undefined;
+exports.colors = exports.IconSend = exports.IconPerson = exports.IconPeople = exports.IconMore = exports.IconMenu = exports.IconEmoji = exports.IconEdit = exports.IconConversation = exports.IconClose = exports.IconClock = exports.IconChevronLeft = exports.IconChevronRight = exports.IconChannels = exports.IconChannel = exports.IconAddImage = exports.ProfileCard = exports.MessageInput = exports.Message = exports.ListItem = exports.List = exports.ChannelHeader = exports.Badge = exports.Avatar = undefined;
 
+var _avatar = require('./components/avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _badge = require('./components/badge');
+
+var _badge2 = _interopRequireDefault(_badge);
+
 var _channelHeader = require('./components/channel-header');
@@ -29,5 +37,5 @@
 
-var _myProfileCard = require('./components/my-profile-card');
+var _profileCard = require('./components/profile-card');
 
-var _myProfileCard2 = _interopRequireDefault(_myProfileCard);
+var _profileCard2 = _interopRequireDefault(_profileCard);
 
@@ -46,2 +54,10 @@ var _iconAddImage = require('./icons/icon-add-image');
 
+var _iconChevronRight = require('./icons/icon-chevron-right');
+
+var _iconChevronRight2 = _interopRequireDefault(_iconChevronRight);
+
+var _iconChevronLeft = require('./icons/icon-chevron-left');
+
+var _iconChevronLeft2 = _interopRequireDefault(_iconChevronLeft);
+
 var _iconClock = require('./icons/icon-clock');
@@ -51,2 +67,6 @@
 
+var _iconClose = require('./icons/icon-close');
+
+var _iconClose2 = _interopRequireDefault(_iconClose);
+
 var _iconConversation = require('./icons/icon-conversation');
@@ -68,2 +88,6 @@
 
+var _iconMore = require('./icons/icon-more');
+
+var _iconMore2 = _interopRequireDefault(_iconMore);
+
 var _iconPeople = require('./icons/icon-people');
@@ -89,2 +113,4 @@
 // Components
+exports.Avatar = _avatar2.default;
+exports.Badge = _badge2.default;
 exports.ChannelHeader = _channelHeader2.default;
@@ -95,7 +121,10 @@ exports.List = _list2.default;
 exports.MessageInput = _messageInput2.default;
-exports.MyProfileCard = _myProfileCard2.default;
+exports.ProfileCard = _profileCard2.default;
 exports.IconAddImage = _iconAddImage2.default;
 exports.IconChannel = _iconChannel2.default;
 exports.IconChannels = _iconChannels2.default;
+exports.IconChevronRight = _iconChevronRight2.default;
+exports.IconChevronLeft = _iconChevronLeft2.default;
 exports.IconClock = _iconClock2.default;
+exports.IconClose = _iconClose2.default;
 exports.IconConversation = _iconConversation2.default;
@@ -105,2 +134,3 @@ exports.IconEdit = _iconEdit2.default;
 exports.IconMenu = _iconMenu2.default;
+exports.IconMore = _iconMore2.default;
 exports.IconPeople = _iconPeople2.default;
@@ -107,0 +137,0 @@ exports.IconPerson = _iconPerson2.default;

dist/style/buttons.js

@@ -11,9 +11,13 @@ 'use strict';
 
+var _darken = require('../internal/darken');
+
+var _darken2 = _interopRequireDefault(_darken);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var style = {
+var styleSheet = {
   button: {
-    width: '48px',
-    height: '48px',
-    padding: '12px',
+    width: '40px',
+    height: '40px',
+    padding: '8px',
     outline: 0,
@@ -24,7 +28,8 @@ background: 'none',
     transition: 'background-color .3s ease-in-out',
+    backgroundColor: _colors2.default.white,
     '&:hover': {
-      backgroundColor: _colors2.default.lightGrey
+      backgroundColor: (0, _darken2.default)(_colors2.default.white, 0.05)
     },
     '&:active': {
-      backgroundColor: _colors2.default.grey
+      backgroundColor: (0, _darken2.default)(_colors2.default.white, 0.15)
     }
@@ -34,3 +39,3 @@ }
 
-exports.default = style;
+exports.default = styleSheet;
 module.exports = exports['default'];

dist/style/colors.js

@@ -14,3 +14,4 @@ 'use strict';
   secondaryText: '#757F85',
-  background: '#F2F7F7'
+  background: '#F2F7F7',
+  icons: '#C4C4C4'
 };
@@ -17,0 +18,0 @@

dist/style/inputs.js

@@ -13,3 +13,9 @@ 'use strict';
 
-var style = {
+var styleSheet = {
+  input: {
+    position: 'relative',
+    padding: '16px',
+    paddingTop: '0',
+    background: _colors2.default.background
+  },
   messageInput: {
@@ -23,10 +29,10 @@ appearance: 'none',
     fontSize: '16px',
+    color: _colors2.default.primaryText,
     '&:focus': {
       outline: 'none'
-    },
-    color: _colors2.default.primaryText
+    }
   }
 };
 
-exports.default = style;
+exports.default = styleSheet;
 module.exports = exports['default'];

dist/style/lists.js

@@ -11,8 +11,14 @@ 'use strict';
 
+var _darken = require('../internal/darken');
+
+var _darken2 = _interopRequireDefault(_darken);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var style = {
+var styleSheet = {
   list: {
     'padding-left': '0',
-    margin: '0'
+    margin: '0',
+    boxSizing: 'border-box',
+    background: _colors2.default.white
   },
@@ -27,6 +33,6 @@ listItem: {
     '&:hover': {
-      backgroundColor: _colors2.default.lightGrey
+      backgroundColor: (0, _darken2.default)(_colors2.default.white, 0.05)
     },
     '&:active': {
-      backgroundColor: _colors2.default.grey
+      backgroundColor: (0, _darken2.default)(_colors2.default.white, 0.15)
     }
@@ -49,3 +55,3 @@ },
 
-exports.default = style;
+exports.default = styleSheet;
 module.exports = exports['default'];

dist/style/messages.js

@@ -13,3 +13,3 @@ 'use strict';
 
-var style = {
+var styleSheet = {
   message: {
@@ -26,6 +26,21 @@ maxWidth: '75%',
     clear: 'both',
+    marginLeft: '10px',
     '&:last-of-type': {
       marginBottom: '17px'
+    },
+    '&:before': {
+      content: '""',
+      width: '0',
+      height: '0',
+      borderTop: '5px solid transparent',
+      borderRight: '10px solid ' + _colors2.default.white,
+      borderBottom: '5px solid transparent',
+      position: 'absolute',
+      top: '15px',
+      left: '-10px'
     }
   },
+  avatar: {
+    marginLeft: '60px'
+  },
   myMessage: {
@@ -35,2 +50,4 @@ float: 'right',
     color: 'white',
+    marginRight: '10px',
+    marginLeft: '0',
     '& $messageHeader': {
@@ -44,2 +61,12 @@ textAlign: 'right',
       left: '0'
+    },
+    '&$avatar': {
+      marginLeft: '0',
+      marginRight: '60px'
+    },
+    '&:before': {
+      left: 'initial',
+      right: '-10px',
+      transform: 'rotate(180deg)',
+      borderRight: '10px solid ' + _colors2.default.green
     }
@@ -68,3 +95,3 @@ },
 
-exports.default = style;
+exports.default = styleSheet;
 module.exports = exports['default'];

dist/style/profile-cards.js

@@ -13,6 +13,7 @@ 'use strict';
 
-var style = {
-  myProfileCard: {
-    padding: '20px',
-    fontSize: '16px',
+var styleSheet = {
+  profileCard: {
+    padding: '15px',
+    fontSize: '18px',
+    lineHeight: '18px',
     backgroundColor: _colors2.default.green,
@@ -23,3 +24,3 @@ color: _colors2.default.white
 
-exports.default = style;
+exports.default = styleSheet;
 module.exports = exports['default'];

package.json

 {
   "name": "anchor-ui",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React Component UI Kit",
@@ -54,7 +54,10 @@ "main": "dist/index.js",
     "classnames": "^2.2.5",
-    "jss": "^6.1.0",
     "moment": "^2.13.0",
     "react": "^15.4.1",
     "react-jss": "^5.1.1"
+  },
+  "dependencies": {
+    "color": "^1.0.3",
+    "underscore": "^1.8.3"
   }
 }

README.md

 # Anchor UI
+
+UI kit for chat engines with React
+
+## Usage
+
+Install from npm
+
+[![NPM](https://nodei.co/npm/anchor-ui.png)](https://nodei.co/npm/anchor-ui/)
+
+### Components
+
+`<Avatar />` used for rendering a user's profile image.
+
+Props:
+
+| Name  | Type   | Required | Default | Description                             |
+|-------|--------|----------|---------|-----------------------------------------|
+| image | String | Yes      |         | Path to user's profile image            |
+| style | Object |          |         | Override the styles of the root element |
+
+---
+
+`<Badge />` used for notification counter.
+
+Props:
+
+| Name    | Type                 | Required | Default | Description                             |
+|---------|----------------------|----------|---------|-----------------------------------------|
+| content | String, Number, Node | Yes      |         | Content to be rendered                  |
+| style   | Object               |          |         | Override the styles of the root element |
+
+---
+
+`<Button />`
+
+Props:
+
+| Name     | Type    | Required | Default | Description                             |
+|----------|---------|----------|---------|-----------------------------------------|
+| children | Element | Yes      |         | Button content                          |
+| style    | Object  |          |         | Override the styles of the root element |
+
+---
+
+`<ChannelHeader />` a channel's header containing the channel name
+
+Props:
+
+| Name            | Type   | Required | Default | Description                             |
+|-----------------|--------|----------|---------|-----------------------------------------|
+| name            | String | Yes      |         | Button content                          |
+| style           | Object |          |         | Override the styles of the root element |
+| headerTextStyle | Object |          |         | Override the styles of the text element |
+
+---
+
+`<List />`
+
+Props:
+
+| Name     | Type   | Required | Default | Description                             |
+|----------|--------|----------|---------|-----------------------------------------|
+| children | Node   | Yes      |         | List content                            |
+| style    | Object |          |         | Override the styles of the root element |
+
+---
+
+`<ListItem />`
+
+Props:
+
+| Name               | Type     | Required | Default | Description                                      |
+|--------------------|----------|----------|---------|--------------------------------------------------|
+| primaryText        | String   | Yes      |         | The list items primary text                      |
+| secondaryText      | String   | Yes      |         | The list items secondary text                    |
+| onClick            | Function | Yes      |         | Click function for the root element              |
+| style              | Object   |          |         | Override the styles of the root element          |
+| primaryTextStyle   | Object   |          |         | Override the styles of the primaryText element   |
+| secondaryTextStyle | Object   |          |         | Override the styles of the secondaryText element |
+
+---
+
+`<Message />`
+
+Props:
+
+| Name               | Type           | Required | Default | Description                                                                                       |
+|--------------------|----------------|----------|---------|---------------------------------------------------------------------------------------------------|
+| message            | Object         | Yes      |         | Mesage object containing: body, createdAt, username                                               |
+| message.body       | String         | Yes      |         | The message's body text                                                                           |
+| message.createdAt  | String, Date   | Yes      |         | Time when the message was created                                                                 |
+| message.username   | String         | Yes      |         | The sender's username                                                                             |
+| timeFormat         | String         | Yes      |         | The [format](http://momentjs.com/docs/#/displaying/format/) in which to display message.createdAt |
+| avatar             | String         |          |         | Path to the user's profile image, will render <Avatar /> if supplied                              |
+| myMessage          | Boolean        |          |         | Is the message from the current user?                                                             |
+| style              | Object         |          |         | Override the styles of the root element                                                           |
+| messageBodyStyle   | Object         |          |         | Override the styles of the body element                                                           |
+| messageHeaderStyle | Object         |          |         | Override the styles of the header element                                                         |
+| messageTimeStyle   | Object         |          |         | Override the styles of the time element                                                           |
+
+---
+
+`<MessageInput />` text input for message
+
+Props:
+
+| Name        | Type     | Required | Default | Description                              |
+|-------------|----------|----------|---------|------------------------------------------|
+| value       | String   | Yes      |         | The list items primary text              |
+| placeholder | String   | Yes      |         | The list items primary text              |
+| onChange    | Function | Yes      |         | Change the input's value                 |
+| sendMessage | Function | Yes      |         | Send a message                           |
+| style       | Object   |          |         | Override the styles of the root element  |
+| inputStyle  | Object   |          |         | Override the styles of the input element |
+
+`<ProfileCard />` used for rendering a user's profile details.
+
+Props:
+
+| Name     | Type   | Required | Default | Description                             |
+|----------|--------|----------|---------|-----------------------------------------|
+| username | String | Yes      |         | The user's username                     |
+| style    | Object |          |         | Override the styles of the root element |
+
+## Installation
+
+### src
+
+Install `node_modules` used in `./src`:
+
+```bash
+$ npm i
+```
+
+Compile `./src` with Babel:
+
+```bash
+$ npm run compile
+```
+
+### examples
+
+Install `node_modules` used in `./examples`:
+
+```bash
+$ cd examples && npm i
+```
+
+## Development
+
+### src
+
+To watch for changes in `./src` run:
+
+```bash
+$ npm run watch
+```
+
+Babel will compile `./src` on changes.
+
+### examples
+
+To start the webpack server run:
+
+```bash
+$ cd examples && npm run start
+```
+
+Webpack wil compile on changes in `./examples/src`.
+
+## License
+
+This project is licensed under the terms of the [MIT license](https://github.com/anchorchat/anchor-ui/blob/master/LICENSE).

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

76180

increased by112.5%

Number of package files

41

increased by41.38%

Lines of code

1420

increased by70.26%

Number of lines in readme file

175

increased by8650%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedcolor@^1.0.3

• + Addedunderscore@^1.8.3

• + Addedcolor@1.0.3(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedunderscore@1.13.7(transitive)