react-notification - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

dist/defaultPropTypes.js

@@ -21,3 +21,4 @@ 'use strict';
   activeClassName: _react.PropTypes.string.isRequired,
-  isActive: _react.PropTypes.bool
+  isActive: _react.PropTypes.bool,
+  title: _react.PropTypes.string
 };

dist/notification.js

@@ -35,2 +35,3 @@ 'use strict';
     _this.getActionStyle = _this.getActionStyle.bind(_this);
+    _this.getTitleStyle = _this.getTitleStyle.bind(_this);
     _this.handleClick = _this.handleClick.bind(_this);
@@ -123,2 +124,17 @@ return _this;
     /*
+     * @function getTitleStyle
+     * @description Dynamically get the styles for the title.
+     * @returns {object} result The style.
+     */
+
+  }, {
+    key: 'getTitleStyle',
+    value: function getTitleStyle() {
+      return this.props.style !== false ? Object.assign({}, {
+        fontWeight: '700',
+        marginRight: '.5rem'
+      }, this.props.titleStyle) : {};
+    }
+
+    /*
      * @function handleClick
@@ -149,2 +165,11 @@ * @description Handle click events on the action button.
           { className: 'notification-bar-wrapper' },
+          this.props.title ? _react2.default.createElement(
+            'span',
+            {
+              ref: 'title',
+              className: 'notification-bar-title',
+              style: this.getTitleStyle()
+            },
+            this.props.title
+          ) : null,
           _react2.default.createElement(
@@ -151,0 +176,0 @@ 'span',

examples/single-notification/index.js

@@ -33,2 +33,3 @@ import React, { Component } from 'react';
           action="Dismiss"
+          title="Title!"
           onDismiss={this.toggleNotification.bind(this)}
@@ -35,0 +36,0 @@ />

package.json

 {
   "name": "react-notification",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Snackbar style notification component for React.",
@@ -35,3 +35,3 @@ "main": "dist/index.js",
     "babel-core": "^6.7.2",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.0",
     "babel-loader": "^6.2.4",
@@ -44,4 +44,4 @@ "babel-preset-es2015": "^6.6.0",
     "enzyme": "^2.1.0",
-    "eslint": "^2.4.0",
-    "eslint-config-airbnb": "^6.1.0",
+    "eslint": "^2.5.1",
+    "eslint-config-airbnb": "^6.2.0",
     "eslint-plugin-react": "^4.2.3",
@@ -48,0 +48,0 @@ "express": "^4.13.4",

README.md

@@ -71,2 +71,3 @@ # react-notification
 | message         | string or React element | The message or component for the notification               | true      |                            |
+| title           | string                  | The title for the notification                              |           |                            |
 | action          | string                  | The name of the action, e.g., "close" or "undo"             |           |                            |
@@ -128,36 +129,5 @@ | style           | boolean                 | Setting this prop to `false` will disable all inline styles |           |                            |
 
-```js
-getNotificationStyles() {
-  let bar = {
-    background: '#263238'
-  };
-
-  let active = {
-    left: '3rem'
-  };
-
-  let action = {
-    color: '#FFCCBC'
-  };
-
-  return { bar, active, action };
-},
-
-render() {
-  return (
-    <div>
-      <Notification
-        ref="notification"
-        message={this.state.message}
-        action={this.state.action}
-        style={this.getNotificationStyles()}
-      />
-    </div>
-  );
-}
-```
-
 ---
 Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).
 
-Copyright 2015 Patrick Burtchaell. Licensed MIT.
+Copyright 2016 Patrick Burtchaell. Licensed MIT.

test/mockNotification.js

@@ -6,2 +6,3 @@ export default {
   dismissAfter: 100,
+  title: 'Title',
   onClick: function handleClick() {
@@ -8,0 +9,0 @@ return;

test/notification.js

@@ -8,2 +8,3 @@ import { Notification, NotificationStack } from '../src/index';
   const actionClassName = '.notification-bar-action';
+  const titleClassName = '.notification-bar-title';
 
@@ -19,2 +20,3 @@ let component = shallow(
       dismissAfter={mockNotification.dismissAfter}
+      title={mockNotification.title}
     />
@@ -26,2 +28,3 @@ );
   const action = wrapper.find(actionClassName);
+  const title = wrapper.find(titleClassName);
 
@@ -32,3 +35,2 @@ it('has the className `notification-bar`', () => {
 
-
   it('should render message element', () => {
@@ -68,2 +70,10 @@ expect(wrapper).to.have.descendants(messageClassName);
 
+  it('should render title element', () => {
+    expect(wrapper).to.have.descendants(titleClassName);
+  });
+
+  it('should render custom title text', () => {
+    expect(title).to.have.text(mockNotification.title);
+  });
+
   it('should use custom bar styles', () => {
@@ -70,0 +80,0 @@ expect(component).to.have.style('background', 'rgb(2, 2, 2)');

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

354924

increased by0.25%

Lines of code

618

increased by6%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

132

decreased by-18.52%

No dependency changes