fix custom keys with defaultValue, and remove hot reload from production bundle

Author: stratos-vetsos

.babelrc

@@ -4,7 +4,10 @@
     "stage-2",
     "react"
   ],
-  "plugins": [
-    "react-hot-loader/babel"
-  ]
+  "env": {
+    "development": {
+      "plugins": [ "react-hot-loader/babel" ]
+    },
+    "production": {}
+  }
 }

dist/index.js

@@ -36,27 +36,27 @@ export default class PlayGround extends React.Component {
 
 		let options = [
 			{
-				key: 'a10',
+				value: 'a10',
 				label: 'Option A 10'
 			},
 			{
-				key: 'b10',
+				value: 'b10',
 				label: 'Option B'
 			},
 			{
-				key: 'c',
+				value: 'c',
 				label: 'Option C'
 			},
 			{
-				key: 'd',
+				value: 'd',
 				label: 'Option D'
 			},
 			{
-				key: 'e',
+				value: 'e',
 				label: 'Option E'
 			},
 			{
-				key: 'f',
+				value: 'f',
 				label: 'Option F'
 			}
 		];
@@ -93,7 +93,8 @@ export default class PlayGround extends React.Component {
 					checkBoxes={ false }
 					materialize={ true }
 					isDropDown={ false }
-					// customKeys={ { key: 'url', label: 'title' } }
+					// defaultValue={ [ 'b10', 'c', 'f' ] }
+					customKeys={ { key: 'value', label: 'label' } }
 					// ajax={{
 					// 	url: 'https://newsapi.org/v2/everything?apiKey=9342a9a707ca49c4b2da34e9ea238ea6',
 					// 	fetchOnSearch: true,

src/PlayGround.js

@@ -90,9 +90,6 @@ export const setupInstance = ( props, update = false ) => {
 	return ( dispatch, getState ) => {
 
 		const state = getState();
-		let { selected, selectedIndex } = props.defaultValue
-		? normalizeSelected( props.defaultValue, [ ... props.options ] )
-		: { selected: state.selected, selectedIndex: state.selectedIndex };
 
 		let customKeys = {},
 			options = [ ... props.options ];
@@ -138,6 +135,10 @@ export const setupInstance = ( props, update = false ) => {
 			} ).filter( x => x );
 		}
 
+		let { selected, selectedIndex } = props.defaultValue
+		? normalizeSelected( props.defaultValue, [ ... options ] )
+		: { selected: state.selected, selectedIndex: state.selectedIndex };
+
 		if( props.ajax && props.ajax.hasOwnProperty( 'url' ) && props.ajax.url !== '' ) {
 
 			options = selected = selectedIndex = [];

src/actions/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
-import ReduxStore from 'store/';
+import ReduxStore from 'store/devStore';
 import configureStore from 'store/configureStore';
 
 const elRoot = document.getElementById( 'root' );

src/development.js

@@ -1,2 +1,2 @@
-import ReduxStore from 'store/';
+import ReduxStore from 'store/productionStore';
 export default ReduxStore;

src/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import PlayGround from 'PlayGround';
+
+const ReduxStore = ownProps => {
+	const store = ownProps.store;
+	return(
+		<Provider store={ store }>
+			<PlayGround />
+		</Provider>
+	);
+}
+
+export default ReduxStore;

src/store/devStore.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import App from 'components/';
+import { createStore, applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import reducer from 'reducers';
+
+const ReduxStore = ownProps => {
+	const store = createStore( reducer, applyMiddleware( thunkMiddleware ) );
+	return(
+		<Provider store={ store }>
+			<App { ...ownProps } />
+		</Provider>
+	);
+}
+
+export default ReduxStore;