Added frequency option

example/sandbox/src/components/ConfigOption.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default (Component) => (class ConfigOption extends React.Component {
+    static propTypes = {
+        option: React.PropTypes.string.isRequired,
+        onChange: React.PropTypes.func,
+    };
+
+    _handleChange = (event, key, payload) => {
+        this.props.onChange(event, key, payload, this.props.option);
+    }
+
+    render() {
+        const {
+            option,
+            onChange,
+            ...rest,
+        } = this.props;
+        return (
+            <Component {...rest} onChange={this._handleChange} />
+        );
+    }
+});

example/sandbox/src/components/ConfigView.js

@@ -4,6 +4,7 @@ import Subheader from 'material-ui/Subheader';
 import Toggle from 'material-ui/Toggle';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
+import createConfigOption from './ConfigOption';
 
 function generateItems(keyValuePairs) {
     return keyValuePairs.map(([value, label]) => (
@@ -29,11 +30,22 @@ let configOptions = {
     deviceId: [],
 };
 
+const generalOptions = {
+    frequency: [[0, "full"], [1, "1Hz"], [2, "2Hz"], [5, "5Hz"],
+                [10, "10Hz"], [15, "15Hz"], [20, "20Hz"]],
+    numOfWorkers: [[0, "0"], [1, "1"], [2, "2"], [4, "4"], [8, "8"]],
+};
+
 let items = Object.keys(configOptions).reduce((result, option) => ({
     ...result,
     [option]: generateItems(configOptions[option]),
 }), {});
 
+let generalItems = Object.keys(generalOptions).reduce((result, option) => ({
+    ...result,
+    [option]: generateItems(generalOptions[option]),
+}), {});
+
 const selectStyle = {
 };
 const selectedItemStyle = {
@@ -42,16 +54,19 @@ const selectedItemStyle = {
     overflow: 'hidden',
 };
 
+const SelectConfigOption = createConfigOption(SelectField);
+
 export default class ConfigView extends React.Component {
     state = {
         devicesFetched: false,
         numOfWorkers: 2,
+        frequency: 0,
         ...Object
             .keys(configOptions)
             .reduce((result, option) => ({...result, [option]: (configOptions[option][0] || [null])[0]}), {}),
     };
 
-    handleChange = (category, event, index, value) => {
+    handleChange = (event, index, value, category) => {
         this.setState({[category]: value});
     }
 
@@ -82,31 +97,38 @@ export default class ConfigView extends React.Component {
             <Subheader>Constraints</Subheader>
             <div style={{paddingLeft: 16, paddingRight: 16}}>
             {Object.keys(items).map(option => (
-                <SelectField fullWidth={true} key={option} style={selectStyle}
+                <SelectConfigOption
+                    fullWidth={true}
+                    key={option}
+                    option={option}
+                    style={selectStyle}
                     labelStyle={selectedItemStyle}
                     value={this.state[option]}
-                    onChange={this.handleChange.bind(this, option)}
+                    onChange={this.handleChange}
                   floatingLabelText={option}
                 >
                   {items[option]}
-                </SelectField>
+                </SelectConfigOption>
             ))}
           </div>
           <List>
             <Subheader>General</Subheader>
-            <ListItem primaryText="locate" secondaryText="Automatically detect position" rightToggle={<Toggle />} />
+            <ListItem primaryText="locate" secondaryText="Detect Location" rightToggle={<Toggle />} />
             <div style={{paddingLeft: 16, paddingRight: 16}}>
-            <SelectField fullWidth={true} key={'numOfWorkers'}
+                {Object.keys(generalItems).map(option => (
+                    <SelectConfigOption
+                        fullWidth={true}
+                        key={option}
+                        option={option}
                         style={selectStyle}
                         labelStyle={selectedItemStyle}
-                value={this.state.numOfWorkers}
+                        value={this.state[option]}
-                onChange={this.handleChange.bind(this, 'numOfWorkers')}
+                        onChange={this.handleChange}
-              floatingLabelText='numOfWorkers'
+                      floatingLabelText={option}
                     >
-              {[0, 1, 2, 4, 8]
+                      {generalItems[option]}
-                  .map(numOfWorkers => <MenuItem key={numOfWorkers} value={numOfWorkers} primaryText={numOfWorkers} />)
+                    </SelectConfigOption>
-              }
+                ))}
-            </SelectField>
             </div>
           </List>
           <List>

example/sandbox/src/components/Scanner.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Quagga from '../../../../dist/quagga';
 
 export default class Scanner extends React.Component {
-    propTypes = {
+    static propTypes = {
         onDetected: React.PropTypes.func,
         onCancel: React.PropTypes.func,
     };