Make hide close all button optional

README.md

@@ -99,6 +99,7 @@ There are a number of options that can be used to change the look and behaviour
 | forceClose | `boolean` | 'false' |  | If set to true will remove all notifications regardless of the notification's `canDismiss` value.
 | localization | `object` | `{ closeAllBtnText: 'Close All', acceptBtnText: 'Accept', denyBtnText: 'Deny' }` |  | Text that shows for the mentioned buttons.
 | node | `domNode` | `document.createElement('div')` appended to document.body |  | The portal node into which the notification component will get rendered into.
+| showCloseAllBtn | `boolean` | 'true' |  | If set to false the first notification wont ever show the 'Close All' btn.
 
 #### Notify Component Styles
 This is the default style mapping created. You can choose to override these with your own classes using the `customStyles` prop explained above. You can view what these CSS classes do by default in the `src/components/Notify/` folder for `react-redux-notify` in the `node_modules` directory.
@@ -157,6 +158,7 @@ The default notification component has the following configuration options which
 | isFirst | `boolean` | false | No | Indicates whether the notification is the first.
 | handleDismiss | `function` | bound to `removeNotification`  | No | A function bound to `removeNotification` that is used to dismiss a notification.
 | handleDismissAll | `function` | bound to `removeAllNotifications`  | No | A function bound to `removeAllNotifications` that is used to dismiss all notifications.
+| showCloseAllBtn | `boolean` | 'true' |  | If set to false this notification specifically wont ever show the 'Close All' btn.
 
 #### Notification Component Styles
 This is the default style mapping created. You can choose to override these with your own classes using the `customStyles` prop explained above. You can view what these CSS classes do by default in the `src/components/Notification/` folder for `react-redux-notify` in the `node_modules` directory.

examples/index.html

@@ -123,14 +123,15 @@
                     globalCustomNotification: false,
                     position: NOTIFICATIONS_POS_TOP_RIGHT,
                     forceClose: false,
+                    showCloseAllBtn: false
                 }
                 this.createNotification = this._createNotification.bind(this);
                 this.handleFieldChange =  this._handleFieldChange.bind(this);
             }
 
             _handleFieldChange(field){
                 return (e) => {
-                    if (field == 'canDismiss' || field == 'globalCustomNotification' || field == 'forceClose' || field == 'customLocalization'){
+                    if (field == 'canDismiss' || field == 'globalCustomNotification' || field == 'forceClose' || field == 'customLocalization' || field == 'showCloseAllBtn'){
                         const fieldVal = e.target.checked
                         if(field == 'customLocalization' && e.target.checked){
                             return this.setState((prevState, props) => {
@@ -187,6 +188,7 @@
                 const {createNotification} = this.props;
                 const nProps = Object.assign({}, this.state);
                 delete nProps['localization']
+                delete nProps['showCloseAllBtn']
                 createNotification(nProps);
             }
 
@@ -197,7 +199,8 @@
                     position: this.state.position,
                     forceClose: this.state.forceClose,
                     customStyles: customNotifyStyles,
-                    localization: this.state.customLocalization ? this.state.localization : undefined
+                    localization: this.state.customLocalization ? this.state.localization : undefined,
+                    showCloseAllBtn: this.state.showCloseAllBtn
                 }
 
                 return (
@@ -244,7 +247,10 @@
                             <input type="checkbox" defaultChecked={false} onChange={this.handleFieldChange('customStyles')} />
 
                             <label><strong>Force Close Notifications: </strong></label>
-                            <input type="checkbox" defaultChecked={this.state.forceClose} onChange={this.handleFieldChange('forceClose')} />                                                                                    
+                            <input type="checkbox" defaultChecked={this.state.forceClose} onChange={this.handleFieldChange('forceClose')} />   
+
+                            <label><strong>Show Close All Button: </strong></label>
+                            <input type="checkbox" defaultChecked={this.state.showCloseAllBtn} onChange={this.handleFieldChange('showCloseAllBtn')} />                               
 
 
                             <div style={{paddingTop:'10px'}}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-notify",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A simple notifications component built for use with React and Redux.",
   "main": "./lib/index.js",
   "files": [

src/components/Notification/__tests__/Notification.test.js

@@ -140,9 +140,9 @@ describe('Notification', () => {
     const acceptBtn = buttons.first();
     const denyBtn = buttons.last();
     acceptBtn.simulate('click');
-    expect(acceptBtnHandler).toBeCalledWith(undefined, tProps);
+    expect(acceptBtnHandler).toBeCalledWith(undefined, { ...tProps, showCloseAllBtn: true });
     denyBtn.simulate('click');
-    expect(denyBtnHandler).toBeCalledWith(undefined, tProps);
+    expect(denyBtnHandler).toBeCalledWith(undefined, { ...tProps, showCloseAllBtn: true });
   });
 
   it('calls handleDismiss onclick', () => {

src/components/Notification/index.js

@@ -30,12 +30,14 @@ export class Notification extends React.PureComponent {
       acceptBtnText: PropTypes.string.isRequired,
       denyBtnText: PropTypes.string.isRequired,
     }),
+    showCloseAllBtn: PropTypes.bool,
   };
 
   static defaultProps = {
     canDismiss: true,
     customStyles: {},
     duration: 0,
+    showCloseAllBtn: true,
   };
 
   componentDidMount() {
@@ -65,13 +67,14 @@ export class Notification extends React.PureComponent {
       customStyles,
       id,
       localization,
+      showCloseAllBtn,
     } = this.props;
     const cx = classNames.bind(Object.assign({}, styles, customStyles));
     const containerTypeClass = cx({
       'has-close': !isFirst && canDismiss,
       'no-close': !isFirst && !canDismiss,
-      'has-close-all': isFirst && canDismiss,
-      'has-close-all--noDismiss': isFirst && !canDismiss,
+      'has-close-all': isFirst && canDismiss && showCloseAllBtn,
+      'has-close-all--noDismiss': isFirst && !canDismiss && showCloseAllBtn,
       [`notification--${type.toLowerCase()}`]: true,
     });
 
@@ -129,7 +132,7 @@ export class Notification extends React.PureComponent {
         ) : (
           false
         )}
-        {isFirst && canDismiss ? (
+        {isFirst && canDismiss && showCloseAllBtn ? (
           <div
             className={this._getStyle('close-all')}
             onClick={() => handleDismissAll()}

src/components/Notify/__tests__/Notify.test.js

@@ -58,6 +58,28 @@ describe('Notify', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('renders first notification without closeAll if showCloseAllBtn is false', () => {
+    const tProps = {
+      ...props,
+      notifications: [notification1, notification2],
+      showCloseAllBtn: false,
+    };
+    const component = mount(<Notify {...tProps} />);
+    expect(component).toMatchSnapshot();
+    expect(component.find('.close-all')).toHaveLength(0);
+  });
+
+  it('renders first notification with closeAll if showCloseAllBtn is true', () => {
+    const tProps = {
+      ...props,
+      notifications: [notification1, notification2],
+      showCloseAllBtn: true,
+    };
+    const component = mount(<Notify {...tProps} />);
+    expect(component).toMatchSnapshot();
+    expect(component.find('.close-all')).toHaveLength(1);
+  });
+
   it('renders custom notifications', () => {
     const MyCustomNotificationComponent = ({
       message,

src/components/Notify/__tests__/__snapshots__/Notify.test.js.snap

@@ -28,6 +28,130 @@ exports[`Notify renders custom notifications 1`] = `
 </div>
 `;
 
+exports[`Notify renders first notification with closeAll if showCloseAllBtn is true 1`] = `
+<div
+  className="containerTopRight"
+>
+  <div
+    className="wrapper"
+  >
+    <div
+      className="has-close-all notification--success"
+    >
+      <span
+        className="icon"
+      >
+        <i
+          className="fa fa-check"
+        />
+      </span>
+      <div
+        className="content"
+      >
+        <div
+          className="item__message"
+        >
+          Notification 1!
+        </div>
+      </div>
+      <div
+        className="close"
+        onClick={[Function]}
+      />
+      <div
+        className="close-all"
+        onClick={[Function]}
+      >
+        Close All
+      </div>
+    </div>
+    <div
+      className="has-close notification--info"
+    >
+      <span
+        className="icon"
+      >
+        <i
+          className="fa fa-check"
+        />
+      </span>
+      <div
+        className="content"
+      >
+        <div
+          className="item__message"
+        >
+          Notification 2!
+        </div>
+      </div>
+      <div
+        className="close"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Notify renders first notification without closeAll if showCloseAllBtn is false 1`] = `
+<div
+  className="containerTopRight"
+>
+  <div
+    className="wrapper"
+  >
+    <div
+      className="notification--success"
+    >
+      <span
+        className="icon"
+      >
+        <i
+          className="fa fa-check"
+        />
+      </span>
+      <div
+        className="content"
+      >
+        <div
+          className="item__message"
+        >
+          Notification 1!
+        </div>
+      </div>
+      <div
+        className="close"
+        onClick={[Function]}
+      />
+    </div>
+    <div
+      className="has-close notification--info"
+    >
+      <span
+        className="icon"
+      >
+        <i
+          className="fa fa-check"
+        />
+      </span>
+      <div
+        className="content"
+      >
+        <div
+          className="item__message"
+        >
+          Notification 2!
+        </div>
+      </div>
+      <div
+        className="close"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Notify renders notifications 1`] = `
 <div
   className="containerTopRight"

src/components/Notify/index.js

@@ -31,6 +31,7 @@ export class Notify extends React.PureComponent {
       denyBtnText: PropTypes.string,
     }),
     node: PropTypes.any,
+    showCloseAllBtn: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -47,6 +48,7 @@ export class Notify extends React.PureComponent {
       acceptBtnText: 'Accept',
       denyBtnText: 'Deny',
     },
+    showCloseAllBtn: true,
   };
 
   constructor(props) {
@@ -84,6 +86,7 @@ export class Notify extends React.PureComponent {
       transitionDurations,
       position,
       localization,
+      showCloseAllBtn,
     } = this.props;
     const notificationsContainerClass = this._getStyle(`container${position}`);
 
@@ -106,6 +109,7 @@ export class Notify extends React.PureComponent {
               <NewNotification
                 key={notification.id}
                 localization={localization}
+                showCloseAllBtn={showCloseAllBtn}
                 {...notification}
                 isFirst={i === 0 && notifications.length > 1}
                 handleDismiss={this.handleDismiss}