diff --git a/example/sandbox/src/components/ConfigOption.js b/example/sandbox/src/components/ConfigOption.js
new file mode 100644
index 0000000..caedfe9
--- /dev/null
+++ b/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 (
+
+ );
+ }
+});
diff --git a/example/sandbox/src/components/ConfigView.js b/example/sandbox/src/components/ConfigView.js
index c71a1ec..48c75fc 100644
--- a/example/sandbox/src/components/ConfigView.js
+++ b/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 {
Constraints
{Object.keys(items).map(option => (
-
{items[option]}
-
+
))}
General
- } />
+ } />
-
- {[0, 1, 2, 4, 8]
- .map(numOfWorkers => )
- }
-
+ {Object.keys(generalItems).map(option => (
+
+ {generalItems[option]}
+
+ ))}
diff --git a/example/sandbox/src/components/Scanner.js b/example/sandbox/src/components/Scanner.js
index 9dafee6..67ede1a 100644
--- a/example/sandbox/src/components/Scanner.js
+++ b/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,
};