deep-c · deep-c · Jan 21, 2018 · Jan 21, 2018 · Jan 21, 2018 · Jan 21, 2018
diff --git a/README.md b/README.md
@@ -95,6 +95,7 @@ There are a number of options that can be used to change the look and behaviour
 | transitionDurations | `object` | `{ enter : 160, leave: 400 }` |  | React CSS Transition Group timeout values for enter and leave events. If you change the transition classes then you can use these to change the timeout values for your animation.
 | position | `string` | 'TopRight' | `'TopRight', 'BottomRight', 'BottomLeft', 'TopLeft'` | Default options for where the Notify container will be positioned to render you components. Again this can be extended/customised through your own classes and this prop.
 | 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.
 
 #### 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.
@@ -147,8 +148,7 @@ The default notification component has the following configuration options which
 | canDismiss | `boolean` | true | Yes | Whether the notification allows the user to close the notification.
 | duration | `number` | 2000 | Yes | Duration until the notification automatically closes.
 | icon | `node` |  | Yes | A node to be rendered as the notification icon.
-| styles | `object` | CSSModules created mapping (see below)  | Yes | The default styles created and mapped through CSSModules for the component.
-| customStyles | `object` |  | Yes | A custom styles object that gets merged into the default styles and allows for the overriding or creation of individual styles using your own classes.
+| customStyles | `object` |  | Yes | A custom styles object that can be used to replace default styles.
 | customComponent | `element` |   | Yes | A custom component that will be used as the Notification. It will get passed all these props as well as any custom object properties you choose to add to the notification configuration object.
 | acceptBtn, denyBtn | `object` : `{` <br/> `handler: function(event, object),` <br> `icon: node,`<br> `title: node` <br> `}` |   | Yes | **`handler`** must be a function, it gets passed the `event` as well as an `object` containing all these notification props.<br> **`icon`** is optional and if passed as a `string` will be used as the button's icon's className else if type is anything else it will get rendered as is.<br> **`title`** is rendered as is.<br>note: `canDismiss` must be false in order for the accept and deny options to be rendered.
 | isFirst | `boolean` | false | No | Indicates whether the notification is the first.

diff --git a/examples/index.html b/examples/index.html
@@ -1,37 +1,42 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://use.fontawesome.com/13f77c8bf7.js"></script>
-    <link rel="stylesheet" href="../dist/ReactReduxNotify.css"/>
-    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+    <link rel="stylesheet" href="../dist/ReactReduxNotify.css" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
+        crossorigin="anonymous">
     <title>React Redux Notify</title>
     <style>
-    .customContent {
-        background: pink;
-    }
-    .containerTopCenter {
-        z-index: 1;
-        position: fixed;
-        overflow-y: auto;
-        max-height: 100vh;
-        left: 50%;
-        transform: translate3d(-50%, 0, 0);
-        flex-direction: column;
-        top: 0;         
-    }
-    .containerTopCenter::-webkit-scrollbar {
-        display: none;
-    }     
+        .customContent {
+            background: pink;
+        }
+
+        .containerTopCenter {
+            z-index: 1;
+            position: fixed;
+            overflow-y: auto;
+            max-height: 100vh;
+            left: 50%;
+            transform: translate3d(-50%, 0, 0);
+            flex-direction: column;
+            top: 0;
+        }
+
+        .containerTopCenter::-webkit-scrollbar {
+            display: none;
+        }
     </style>
-  </head>
-  <body>
+</head>
+
+<body>
     <div id="root"></div>
-    <script src="../node_modules/react/dist/react-with-addons.js"></script>
-    <script src="../node_modules/react-dom/dist/react-dom.js"></script>
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <script src="../node_modules/redux/dist/redux.js"></script>
-    <script src="../node_modules/react-redux/dist/react-redux.js"></script>    
+    <script src="../node_modules/react-redux/dist/react-redux.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-sham.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
     <script src="../dist/ReactReduxNotify.js"></script>
@@ -104,7 +109,13 @@
                         },
                         title: 'Deny',
                         icon: 'fa fa-thumbs-down'
-                    },                    
+                    },
+                    localization: {
+                        closeAllBtnText: "Close dem all",
+                        acceptBtnText: "Yes",
+                        denyBtnText: "No",                            
+                    },              
+                    customLocalization: false,                    
                     canDismiss: true,
                     globalCustomNotification: false,
                     position: NOTIFICATIONS_POS_TOP_RIGHT,
@@ -116,8 +127,40 @@
 
             _handleFieldChange(field){
                 return (e) => {
-                    if (field == 'canDismiss' || field == 'globalCustomNotification' || field == 'forceClose'){
-                        this.setState({[field]: e.target.checked});
+                    if (field == 'canDismiss' || field == 'globalCustomNotification' || field == 'forceClose' || field == 'customLocalization'){
+                        const fieldVal = e.target.checked
+                        if(field == 'customLocalization' && e.target.checked){
+                            return this.setState((prevState, props) => {
+                                return {
+                                    ...prevState,
+                                    acceptBtn: {
+                                        ...prevState.acceptBtn,
+                                        title: '',
+                                    },
+                                    denyBtn: {
+                                        ...prevState.denyBtn,
+                                        title: '',
+                                    },
+                                    [field]: fieldVal                                  
+                                }
+                            })
+                        } else if (field == 'customLocalization' && !e.target.checked){
+                            return this.setState((prevState, props) => {
+                                return {
+                                    ...prevState,
+                                    acceptBtn: {
+                                        ...prevState.acceptBtn,
+                                        title: 'Accept',
+                                    },
+                                    denyBtn: {
+                                        ...prevState.denyBtn,
+                                        title: 'Deny',
+                                    },
+                                    [field]: fieldVal                                
+                                }
+                            })
+                        }
+                        return this.setState({[field]: fieldVal});
                     } else if (field == 'customComponent') {
                         const componentToUse = (e.target.checked) ? MyCustomNotificationComponent: undefined
                         this.setState({[field]: componentToUse});
@@ -139,19 +182,26 @@
             _createNotification(e){
                 e.preventDefault();
                 const {createNotification} = this.props;
-                createNotification(this.state);
+                const nProps = Object.assign({}, this.state);
+                delete nProps['localization']
+                createNotification(nProps);
             }
 
             render(){
                 const NotificationComponentProp = this.state.globalCustomNotification ? MyCustomNotificationComponent:undefined;
-
+                let notifyProps = {
+                    notificationComponent: NotificationComponentProp,
+                    position: this.state.position,
+                    forceClose: this.state.forceClose,
+                    customStyles: customNotifyStyles,
+                    localization: this.state.customLocalization ? this.state.localization : undefined
+                }
+
                 return (
                     <div>
                         <Notify 
-                            notificationComponent={NotificationComponentProp}
-                            position={this.state.position}
-                            forceClose={this.state.forceClose} 
-                            customStyles={customNotifyStyles} />
+                            {...notifyProps}
+                        />
 
                         <form className="pure-form pure-form-stacked" style={
                             {width: '300px', height: '500px', top:'50%', left:'50%', position: 'relative', transform: 'translate3d(-50%, 50%, 0)', textAlign: 'center'}}>
@@ -169,7 +219,10 @@
                             <input type="radio" value={NOTIFICATION_TYPE_INFO} checked={this.state.type==NOTIFICATION_TYPE_INFO} onChange={this.handleFieldChange('type')} /> Info <br />
 
                             <label><strong>Can Dismiss: </strong></label>
-                            <input type="checkbox" defaultChecked={this.state.canDismiss} onChange={this.handleFieldChange('canDismiss')} />                            
+                            <input type="checkbox" defaultChecked={this.state.canDismiss} onChange={this.handleFieldChange('canDismiss')} />   
+
+                            <label><strong>Custom Localization Text: </strong></label>
+                            <input type="checkbox" defaultChecked={this.state.customLocalization} onChange={this.handleFieldChange('customLocalization')} />   
 
                             <label><strong>Custom Global Notification Component: </strong></label>
                             <input type="checkbox" defaultChecked={this.state.globalCustomNotification} onChange={this.handleFieldChange('globalCustomNotification')} />
@@ -238,6 +291,7 @@
             <App />,
             document.getElementById('root')
         );
-    </script>        
-  </body>
+    </script>
+</body>
+
 </html>