anchor-ui - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.withTheme = exports.settings = exports.icons = 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.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;
 
@@ -81,5 +81,5 @@ var _alert = require('./alert');
 
-var _withTheme2 = require('./with-theme');
+var _withTheme = require('./with-theme');
 
-var _withTheme3 = _interopRequireDefault(_withTheme2);
+var _withTheme2 = _interopRequireDefault(_withTheme);
 
@@ -106,2 +106,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 exports.settings = _settings3.default;
-exports.withTheme = _withTheme3.default;
+exports.WithTheme = _withTheme2.default;

list-item/index.js

@@ -33,2 +33,6 @@ 'use strict';
 
+var _iconMute = require('../icons/icon-mute');
+
+var _iconMute2 = _interopRequireDefault(_iconMute);
+
 var _combineStyles = require('../internal/combine-styles');
@@ -50,3 +54,3 @@
 
-function getStyle(themeColor, active, rightButton, avatar, overrideStyle) {
+function getStyle(themeColor, active, rightButton, avatar, muted, overrideStyle) {
   var style = _lists2.default.listItem;
@@ -74,2 +78,6 @@
 
+  if (muted) {
+    style = (0, _combineStyles2.default)(style, { opacity: '.5' });
+  }
+
   return (0, _combineStyles2.default)(style, overrideStyle);
@@ -119,3 +127,4 @@ }
           primaryTextStyle = _props.primaryTextStyle,
-          secondaryTextStyle = _props.secondaryTextStyle;
+          secondaryTextStyle = _props.secondaryTextStyle,
+          muted = _props.muted;
       var color = this.context.color;
@@ -126,6 +135,11 @@
         'li',
-        { key: 'listItem', onClick: onClick, style: getStyle(color, active, rightButton, avatar, style) },
+        { key: 'listItem', onClick: onClick, style: getStyle(color, active, rightButton, avatar, muted, style) },
         avatar ? _react2.default.createElement(
           'div',
           { style: _lists2.default.avatar },
+          muted ? _react2.default.createElement(
+            'div',
+            { style: _lists2.default.mutedIcon },
+            _react2.default.createElement(_iconMute2.default, { color: _settings.colors.white })
+          ) : null,
           badge ? _react2.default.createElement(
@@ -201,3 +215,7 @@ 'div',
    */
-  badge: _react.PropTypes.node
+  badge: _react.PropTypes.node,
+  /**
+   * Add muted styles to ListItem
+   */
+  muted: _react.PropTypes.bool
 };
@@ -213,3 +231,4 @@ ListItem.defaultProps = {
   avatar: '',
-  badge: null
+  badge: null,
+  muted: false
 };
@@ -216,0 +235,0 @@ ListItem.contextTypes = {

message/index.js

@@ -103,10 +103,42 @@ 'use strict';
 
-function getTextStyle(style, myMessage, overrideStyle) {
+function getTextStyle(style, myMessage, fontSize, overrideStyle) {
+  var combinedStyles = style;
+
   if (myMessage) {
-    return (0, _combineStyles2.default)(_extends({}, style, { color: _settings.colors.white }), overrideStyle);
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { color: _settings.colors.white }), overrideStyle);
   }
 
-  return (0, _combineStyles2.default)(style, overrideStyle);
+  if (fontSize === 'medium') {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { fontSize: '20px', lineHeight: '22px' }), overrideStyle);
+  }
+
+  if (fontSize === 'large') {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { fontSize: '24px', lineHeight: '26px' }), overrideStyle);
+  }
+
+  return (0, _combineStyles2.default)(combinedStyles, overrideStyle);
 }
 
+function getHeaderStyle(style, myMessage, compact, fontSize, overrideStyle) {
+  var combinedStyles = style;
+
+  if (myMessage) {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { color: _settings.colors.white }), overrideStyle);
+  }
+
+  if (compact) {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { flexShrink: '0', marginRight: '10px' }), overrideStyle);
+  }
+
+  if (fontSize === 'medium') {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { fontSize: '16px', lineHeight: '16px' }), overrideStyle);
+  }
+
+  if (fontSize === 'large') {
+    combinedStyles = (0, _combineStyles2.default)(_extends({}, combinedStyles, { fontSize: '20px', lineHeight: '20px' }), overrideStyle);
+  }
+
+  return (0, _combineStyles2.default)(combinedStyles, overrideStyle);
+}
+
 function getHeaderStyle(style, myMessage, compact, overrideStyle) {
@@ -193,3 +225,4 @@ var combinedStyles = style;
           messageTimeStyle = _props.messageTimeStyle,
-          compact = _props.compact;
+          compact = _props.compact,
+          fontSize = _props.fontSize;
       var color = this.context.color;
@@ -220,3 +253,3 @@
             {
-              style: getHeaderStyle(_messages2.default.messageHeader, myMessage, compact, messageHeaderStyle)
+              style: getHeaderStyle(_messages2.default.messageHeader, myMessage, compact, fontSize, messageHeaderStyle)
             },
@@ -227,3 +260,3 @@ message.username
             'p',
-            { style: getTextStyle(_messages2.default.messageBody, myMessage, messageBodyStyle) },
+            { style: getTextStyle(_messages2.default.messageBody, myMessage, fontSize, messageBodyStyle) },
             emoji ? _react2.default.createElement('span', { dangerouslySetInnerHTML: this.createMarkup(message.body) }) : message.body,
@@ -288,2 +321,6 @@ _react2.default.createElement(
   /**
+   * The message size. One of the following: ["small", "medium", "large"]
+   */
+  fontSize: _react.PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
    * Flag used to change message styles.
@@ -313,2 +350,3 @@ * True if the message was sent by the current user
   messageTimeStyle: {},
+  fontSize: 'small',
   myMessage: false,
@@ -315,0 +353,0 @@ emoji: false,

package.json

 {
   "name": "anchor-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React Component UI Kit",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

style/lists.js

@@ -55,2 +55,14 @@ 'use strict';
   },
+  mutedIcon: {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '40px',
+    height: '40px',
+    padding: '8px',
+    boxSizing: 'border-box',
+    backgroundColor: _settings.colors.black,
+    borderRadius: '50%',
+    opacity: '.75'
+  },
   rightButton: {
@@ -57,0 +69,0 @@ paddingRight: '52px'

with-theme/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 _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; }; }();
@@ -26,40 +28,42 @@
 
-function withTheme(ChildComponent, color) {
-  var Theme = function (_Component) {
-    _inherits(Theme, _Component);
+var WithTheme = function (_Component) {
+  _inherits(WithTheme, _Component);
 
-    function Theme() {
-      _classCallCheck(this, Theme);
+  function WithTheme() {
+    _classCallCheck(this, WithTheme);
 
-      return _possibleConstructorReturn(this, (Theme.__proto__ || Object.getPrototypeOf(Theme)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (WithTheme.__proto__ || Object.getPrototypeOf(WithTheme)).apply(this, arguments));
+  }
+
+  _createClass(WithTheme, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        color: this.props.color
+      };
     }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.cloneElement(this.props.children, _extends({}, this.props));
+    }
+  }]);
 
-    _createClass(Theme, [{
-      key: 'getChildContext',
-      value: function getChildContext() {
-        return {
-          color: color || _colors2.default.theme
-        };
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(ChildComponent, this.props);
-      }
-    }]);
+  return WithTheme;
+}(_react.Component);
 
-    return Theme;
-  }(_react.Component);
-
-  Theme.childContextTypes = {
-    color: _react.PropTypes.string.isRequired
-  };
-
-
-  return Theme;
-}
-
-withTheme.displayName = 'withTheme';
-
-exports.default = withTheme;
+WithTheme.displayName = 'WithTheme';
+WithTheme.propTypes = {
+  /** Your theme's color */
+  color: _react.PropTypes.string,
+  /** Children to apply theme color to  */
+  children: _react.PropTypes.node.isRequired
+};
+WithTheme.defaultProps = {
+  color: _colors2.default.theme
+};
+WithTheme.childContextTypes = {
+  color: _react.PropTypes.string.isRequired
+};
+exports.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

210461

increased by1.31%

Lines of code

4062

increased by1.6%

No dependency changes