Started working on sandbox

2026-08-13 13:51:37 +08:00 · 2016-06-20 06:53:04 +02:00
parent 308544c0dd
commit d6f1ed59ad
17 changed files with 1511 additions and 871 deletions
@@ -0,0 +1,108 @@
+import React from 'react';
+import AppBar from 'material-ui/AppBar';
+import Drawer from 'material-ui/Drawer';
+import MenuItem from 'material-ui/MenuItem';
+import Paper from 'material-ui/Paper';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import {Card, CardTitle, CardText} from 'material-ui/Card';
+
+import Scanner from './Scanner';
+import ScanIcon from './ScanIcon';
+
+export default class App extends React.Component {
+    state = {
+        drawerOpen: false,
+        scanning: false,
+        scannedCodes: [{
+            codeResult: {
+                code: "FANAVF1461710",
+                format: "code_128"
+            },
+            timestamp: new Date()
+        }]
+    };
+
+    _handleClose = () => this.setState({drawerOpen: false});
+    _handleOpen = () => this.setState({drawerOpen: true});
+    _handleOpenChange = () => (drawerOpen) => this.setState({drawerOpen});
+
+    _startScanning = (e) => {
+        e.preventDefault();
+        if (!this.state.scanning) {
+            this.setState({scanning: true});
+        }
+    };
+
+    _stopScanning = () => {
+        this.setState({scanning: false});
+    };
+
+    _handleResult = (result) => {
+        this._stopScanning();
+        this.setState({
+            scannedCodes: [{...result, timestamp: new Date()}]
+            .concat(this.state.scannedCodes)});
+    }
+
+    render() {
+        return (
+            <div>
+                <Drawer
+                    docked={false}
+                    width={200}
+                    open={this.state.drawerOpen}
+                    onRequestChange={this._handleOpenChange}
+                >
+                    <MenuItem onTouchTap={this._handleClose}>Menu Item</MenuItem>
+                    <MenuItem onTouchTap={this._handleClose}>Menu Item 2</MenuItem>
+                </Drawer>
+                <AppBar
+                    style={{position: 'fixed', top: '0px'}}
+                    title="QuaggaJS"
+                    iconClassNameRight="muidocs-icon-navigation-expand-more"
+                    onLeftIconButtonTouchTap={this._handleOpen}
+                    />
+                <FloatingActionButton
+                    secondary={true}
+                    onMouseDown={this._startScanning}
+                    style={{position: 'fixed', right: 0, bottom: 0, margin: '0 1em 1em 0'}}
+                >
+                    <ScanIcon />
+                </FloatingActionButton>
+                <Dialog
+                    style={{paddingTop: '0px'}}
+                    bodyStyle={{padding: '0.5rem'}}
+                    repositionOnUpdate={false}
+                    actions={[
+                        <FlatButton
+                            label="Cancel"
+                            primary={true}
+                            onTouchTap={this._stopScanning}/>
+                    ]}
+                    modal={true}
+                    contentStyle={{width: '95%', maxWidth: '95%', height: '95%', maxHeight: '95%'}}
+                    open={this.state.scanning}
+                >
+                    <Scanner onDetected={this._handleResult} onCancel={this._stopScanning} />
+                </Dialog>
+                <div style={{paddingTop: '64px'}}>
+                    {this.state.scannedCodes.map((scannedCode, i) => (
+                        <Card key={i} style={{margin: '0.5em 0.25em 0em'}}>
+                            <CardTitle
+                                titleStyle={{textOverflow: 'ellipsis', overflow: 'hidden'}}
+                                title={scannedCode.codeResult.code}
+                                subtitle={scannedCode.codeResult.format}
+                            />
+                            <CardText>
+                                Scanned on {scannedCode.timestamp.toLocaleString()}
+                            </CardText>
+                        </Card>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
@@ -0,0 +1,15 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from 'material-ui/SvgIcon';
+
+let ActionScanBarcode = (props) => (
+  <SvgIcon {...props}>
+    <path d="M0 4h4v20h-4zM6 4h2v20h-2zM10 4h2v20h-2zM16 4h2v20h-2zM24 4h2v20h-2zM30 4h2v20h-2zM20 4h1v20h-1zM14 4h1v20h-1zM27 4h1v20h-1zM0 26h2v2h-2zM6 26h2v2h-2zM10 26h2v2h-2zM20 26h2v2h-2zM30 26h2v2h-2zM24 26h4v2h-4zM14 26h4v2h-4z"/>
+  </SvgIcon>
+);
+
+ActionScanBarcode = pure(ActionScanBarcode);
+ActionScanBarcode.displayName = 'ActionAccessibility';
+ActionScanBarcode.muiName = 'SvgIcon';
+
+export default ActionScanBarcode;
@@ -0,0 +1,47 @@
+import React from 'react';
+import Quagga from '../../../../dist/quagga';
+
+export default class Scanner extends React.Component {
+    constructor(props) {
+        super(props);
+        this._scanner = Quagga
+            .decoder({readers: ['code_128_reader']})
+            .locator({patchSize: 'medium'})
+            .throttle(500)
+            .fromSource({
+                target: '.overlay__content',
+                constraints: {
+                    width: 800,
+                    height: 600,
+                    facingMode: "environment"
+                }
+            });
+        this._onCancel = this._onCancel.bind(this);
+    }
+    _onCancel(e) {
+        e.preventDefault();
+        if (this._scanUntilResult) {
+            this._scanUntilResult.cancel();
+            this._scanUntilResult = null;
+        }
+    }
+    render() {
+        return (
+            <div className="overlay__content">
+                <div className="overlay__close" onClick={this._onCancel}>X</div>
+            </div>
+        );
+    }
+    componentDidMount() {
+        this._scanUntilResult = this._scanner.toPromise();
+        this._scanUntilResult.promise
+            .then(this.props.onDetected)
+            .catch(this.props.onCancel);
+    }
+
+    componentWillUnmount() {
+        this._scanner
+            .removeEventListener('detected', this.props.onDetected)
+            .stop();
+    }
+}
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+
+injectTapEventPlugin();
+
+ReactDOM.render(
+    <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <App />
+    </MuiThemeProvider>,
+  document.getElementById('react')
+);