mxw-public/barcodescantorch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed styling to include Mendix native styling. Default style is the same, but classes now can be used in Mendix.

Browse Source
This commit is contained in:
unknown
2020-10-28 23:28:25 +01:00
parent e1a84cf521
commit df4dcae011
5 changed files with 323 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/1.0.0/incentro.BarcodeScanTorch.mpk vendored
View File

Binary file not shown.

269
dist/tmp/widgets/incentro/barcodescantorch/BarcodeScanTorch.js vendored
View File

@@ -87,6 +87,141 @@ module.exports =
/************************************************************************/
/******/ ({
/***/ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js":
/*!*****************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/arrayLikeToArray.js ***!
\*****************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}module.exports=_arrayLikeToArray;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
/*!******************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
\******************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var arrayLikeToArray=__webpack_require__(/*! ./arrayLikeToArray */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");function _arrayWithoutHoles(arr){if(Array.isArray(arr))return arrayLikeToArray(arr);}module.exports=_arrayWithoutHoles;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/defineProperty.js":
/*!***************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***!
\***************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}module.exports=_defineProperty;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/extends.js":
/*!********************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/extends.js ***!
\********************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _extends(){module.exports=_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}module.exports=_extends;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js":
/*!**********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/interopRequireDefault.js ***!
\**********************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj};}module.exports=_interopRequireDefault;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/iterableToArray.js":
/*!****************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/iterableToArray.js ***!
\****************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&Symbol.iterator in Object(iter))return Array.from(iter);}module.exports=_iterableToArray;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js":
/*!******************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
\******************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}module.exports=_nonIterableSpread;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/toConsumableArray.js":
/*!******************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
\******************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var arrayWithoutHoles=__webpack_require__(/*! ./arrayWithoutHoles */ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");var iterableToArray=__webpack_require__(/*! ./iterableToArray */ "./node_modules/@babel/runtime/helpers/iterableToArray.js");var unsupportedIterableToArray=__webpack_require__(/*! ./unsupportedIterableToArray */ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");var nonIterableSpread=__webpack_require__(/*! ./nonIterableSpread */ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js");function _toConsumableArray(arr){return arrayWithoutHoles(arr)||iterableToArray(arr)||unsupportedIterableToArray(arr)||nonIterableSpread();}module.exports=_toConsumableArray;
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
/*!***************************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
\***************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var arrayLikeToArray=__webpack_require__(/*! ./arrayLikeToArray */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return arrayLikeToArray(o,minLen);}module.exports=_unsupportedIterableToArray;
/***/ }),
/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js":
/*!********************************************************************!*\
!*** ./node_modules/@mendix/pluggable-widgets-tools/dist/index.js ***!
\********************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){if(k2===undefined)k2=k;Object.defineProperty(o,k2,{enumerable:true,get:function get(){return m[k];}});}:function(o,m,k,k2){if(k2===undefined)k2=k;o[k2]=m[k];});var __exportStar=this&&this.__exportStar||function(m,exports){for(var p in m){if(p!=="default"&&!exports.hasOwnProperty(p))__createBinding(exports,m,p);}};Object.defineProperty(exports,"__esModule",{value:true});__exportStar(__webpack_require__(/*! ./native/common */ "./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js"),exports);__exportStar(__webpack_require__(/*! ./web/common */ "./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js"),exports);
/***/ }),
/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js":
/*!****************************************************************************!*\
!*** ./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js ***!
\****************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _interopRequireDefault=__webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");var _defineProperty2=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));var _extends3=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _toConsumableArray2=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));Object.defineProperty(exports,"__esModule",{value:true});exports.mergeNativeStyles=void 0;function mergeNativeStyles(defaultStyle,overrideStyles){var styles=[defaultStyle].concat((0,_toConsumableArray2.default)(overrideStyles.filter(function(object){return object!==undefined;})));return Object.keys(defaultStyle).reduce(function(flattened,currentKey){var styleItems=styles.map(function(object){return object[currentKey];});return(0,_extends3.default)((0,_extends3.default)({},flattened),(0,_defineProperty2.default)({},currentKey,flattenObjects(styleItems)));},{});}exports.mergeNativeStyles=mergeNativeStyles;function flattenObjects(objects){return objects.reduce(function(merged,object){return(0,_extends3.default)((0,_extends3.default)({},merged),object);},{});}
/***/ }),
/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js":
/*!*************************************************************************!*\
!*** ./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js ***!
\*************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports,"__esModule",{value:true});exports.parseInlineStyle=void 0;function parseInlineStyle(){var style=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"";try{return style.split(";").reduce(function(styleObject,line){var pair=line.split(":");if(pair.length===2){var name=pair[0].trim().replace(/(-.)/g,function(match){return match[1].toUpperCase();});styleObject[name]=pair[1].trim();}return styleObject;},{});}catch(_){return{};}}exports.parseInlineStyle=parseInlineStyle;
/***/ }),
/***/ "./src/BarcodeScanTorch.tsx":
/*!**********************************!*\
!*** ./src/BarcodeScanTorch.tsx ***!
@@ -103,74 +238,14 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_native__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react_native_camera__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-native-camera */ "react-native-camera");
/* harmony import */ var react_native_camera__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_native_camera__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mendix/pluggable-widgets-tools */ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js");
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__);
;
class BarcodeScanTorch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
constructor(props) {
super(props);
this.onBarCodeReadHandler = this.onBarCodeRead.bind(this);
this.manualBarcodeHandler = this.manualBarcode.bind(this);
this.toggleTorch = this.toggleTorch.bind(this);
this.toggleAutoDetect = this.toggleAutoDetect.bind(this);
this.state = {
torchON: false,
autoDetect: true,
textboxValue: '',
};
}
toggleTorch() {
this.setState({ torchON: !this.state.torchON });
}
toggleAutoDetect() {
this.setState({ autoDetect: !this.state.autoDetect });
}
render() {
return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.container },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"], { style: localStyle.preview, captureAudio: false, onBarCodeRead: this.onBarCodeReadHandler, flashMode: this.state.torchON ? react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.torch : react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.off }),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.bottom },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? localStyle.switchOn : localStyle.switchOff },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? localStyle.textOn : localStyle.textOff },
"\u21AF Lamp ",
this.state.torchON ? "aan" : "uit")),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleAutoDetect, style: this.state.autoDetect ? localStyle.switchOn : localStyle.switchOff },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.autoDetect ? localStyle.textOn : localStyle.textOff },
"\u2551\u2588\u2551 Detectie ",
this.state.autoDetect ? "aan" : "uit")),
this.state.autoDetect ? Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null) :
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.textBox },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: localStyle.textBarcode }, "Barcode: "),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: localStyle.textInput, placeholder: "Scan of vul handmatig", value: this.state.textboxValue, onChangeText: (text) => this.setState({ textboxValue: text }) }),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.manualBarcodeHandler, style: localStyle.switchOn },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: localStyle.textOn }, "Naar machine"))))));
}
onBarCodeRead(event) {
if (this.state.autoDetect) {
if (this.props.barcode.status !== "available" || event.data === this.props.barcode.value) {
return;
}
this.props.barcode.setValue(event.data);
if (this.props.onDetect && this.props.onDetect.canExecute) {
react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
this.props.onDetect.execute();
}
}
else {
if (this.state.textboxValue !== event.data) {
react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
this.setState({ textboxValue: event.data });
return;
}
}
}
manualBarcode() {
var _a;
this.props.barcode.setValue(this.state.textboxValue);
(_a = this.props.onDetect) === null || _a === void 0 ? void 0 : _a.execute();
}
}
const localStyle = react_native__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
const defaultStyle = {
container: {
flex: 1,
backgroundColor: 'black'
@@ -232,7 +307,71 @@ const localStyle = react_native__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].creat
fontSize: 16,
fontWeight: 'bold',
}
});
};
class BarcodeScanTorch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
constructor(props) {
super(props);
this.onBarCodeReadHandler = this.onBarCodeRead.bind(this);
this.manualBarcodeHandler = this.manualBarcode.bind(this);
this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style);
this.toggleTorch = this.toggleTorch.bind(this);
this.toggleAutoDetect = this.toggleAutoDetect.bind(this);
this.state = {
torchON: false,
autoDetect: true,
textboxValue: '',
};
}
toggleTorch() {
this.setState({ torchON: !this.state.torchON });
}
toggleAutoDetect() {
this.setState({ autoDetect: !this.state.autoDetect });
}
render() {
return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.container },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"], { style: this.styles.preview, captureAudio: false, onBarCodeRead: this.onBarCodeReadHandler, flashMode: this.state.torchON ? react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.torch : react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.off }),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.bottom },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? this.styles.switchOn : this.styles.switchOff },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? this.styles.textOn : this.styles.textOff },
"\u21AF Lamp ",
this.state.torchON ? "aan" : "uit")),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleAutoDetect, style: this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.autoDetect ? this.styles.textOn : this.styles.textOff },
"\u2551\u2588\u2551 Detectie ",
this.state.autoDetect ? "aan" : "uit")),
this.state.autoDetect ? Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null) :
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.textBox },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.styles.textBarcode }, "Barcode: "),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.textInput, placeholder: "Scan of vul handmatig", value: this.state.textboxValue, onChangeText: (text) => this.setState({ textboxValue: text }) }),
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.manualBarcodeHandler, style: this.styles.switchOn },
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.styles.textOn }, "Naar machine"))))));
}
onBarCodeRead(event) {
if (this.state.autoDetect) {
if (this.props.barcode.status !== "available" || event.data === this.props.barcode.value) {
return;
}
this.props.barcode.setValue(event.data);
if (this.props.onDetect && this.props.onDetect.canExecute) {
react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
this.props.onDetect.execute();
}
}
else {
if (this.state.textboxValue !== event.data) {
react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
this.setState({ textboxValue: event.data });
return;
}
}
}
manualBarcode() {
var _a;
this.props.barcode.setValue(this.state.textboxValue);
(_a = this.props.onDetect) === null || _a === void 0 ? void 0 : _a.execute();
}
}
/***/ }),

2
dist/tmp/widgets/incentro/barcodescantorch/BarcodeScanTorch.js.map vendored
View File

File diff suppressed because one or more lines are too long

217
src/BarcodeScanTorch.tsx
View File

@@ -1,111 +1,24 @@
import { Component, createElement } from "react";
import { View, StyleSheet, TouchableOpacity, Text, TextInput, Vibration } from "react-native";
import { View, TouchableOpacity, Text, TextInput, Vibration, ViewStyle, TextStyle } from "react-native";
import { RNCamera } from "react-native-camera";
import { ValueStatus } from "mendix";
import { Style } from "./utils/common";
import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
export interface BarcodeScanTorchStyle extends Style {
container: ViewStyle;
preview: ViewStyle;
bottom: ViewStyle;
textBox: ViewStyle;
textInput: TextStyle;
switchOn: ViewStyle;
switchOff: ViewStyle;
textOn: TextStyle;
textOff: TextStyle;
textBarcode: TextStyle;
};
import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
interface State {
torchON?: boolean;
autoDetect?: boolean;
textboxValue?: string;
}
export class BarcodeScanTorch extends Component<Props, State> {
onBarCodeReadHandler = this.onBarCodeRead.bind(this);
manualBarcodeHandler = this.manualBarcode.bind(this);
constructor(props: Props){
super(props)
this.toggleTorch = this.toggleTorch.bind(this)
this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
this.state = {
torchON: false,
autoDetect: true,
textboxValue: '',
}
}
toggleTorch(){
this.setState({torchON: !this.state.torchON})
}
toggleAutoDetect(){
this.setState({autoDetect: !this.state.autoDetect})
}
render(){
return (
<View style={localStyle.container}>
<RNCamera
style={localStyle.preview}
captureAudio={false}
onBarCodeRead={this.onBarCodeReadHandler}
flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
/>
<View style={localStyle.bottom}>
<TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? localStyle.switchOn : localStyle.switchOff}>
<Text style={this.state.torchON ? localStyle.textOn : localStyle.textOff}>↯ Lamp {this.state.torchON ? "aan" : "uit"}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? localStyle.switchOn : localStyle.switchOff}>
<Text style={this.state.autoDetect ? localStyle.textOn : localStyle.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
</TouchableOpacity>
{this.state.autoDetect ? <View></View> :
<View style={localStyle.textBox}>
<Text style={localStyle.textBarcode}>Barcode: </Text>
<TextInput style={localStyle.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
<TouchableOpacity onPress={this.manualBarcodeHandler} style={localStyle.switchOn}>
<Text style={localStyle.textOn}>Naar machine</Text>
</TouchableOpacity>
</View>
}
</View>
</View>
);
}
// Internal button for testing
//<View style={localStyle.bottom}>
//<TouchableOpacity onPress={this.toggleTorch} style={localStyle.switch}>
//<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
//</TouchableOpacity>
//</View>
//<Image style={localStyle.Image} source={this.state.torchOn ? flashon : flashoff} />
private onBarCodeRead(event: { data: string }): void {
if (this.state.autoDetect) {
if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
return;
}
this.props.barcode.setValue(event.data);
if (this.props.onDetect && this.props.onDetect.canExecute) {
Vibration.vibrate(400);
this.props.onDetect.execute();
}
}
else {
if (this.state.textboxValue !== event.data) {
Vibration.vibrate(400);
this.setState({textboxValue: event.data})
return;
}
}
}
private manualBarcode() {
this.props.barcode.setValue(this.state.textboxValue);
this.props.onDetect?.execute();
}
}
const localStyle = StyleSheet.create({
const defaultStyle: BarcodeScanTorchStyle = {
container: {
flex: 1,
backgroundColor: 'black'
@@ -167,4 +80,104 @@ const localStyle = StyleSheet.create({
fontSize: 16,
fontWeight: 'bold',
}
})
};
import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
interface State {
torchON?: boolean;
autoDetect?: boolean;
textboxValue?: string;
}
export class BarcodeScanTorch extends Component<Props, State> {
onBarCodeReadHandler = this.onBarCodeRead.bind(this);
manualBarcodeHandler = this.manualBarcode.bind(this);
constructor(props: Props){
super(props)
this.toggleTorch = this.toggleTorch.bind(this)
this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
this.state = {
torchON: false,
autoDetect: true,
textboxValue: '',
}
}
private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
toggleTorch(){
this.setState({torchON: !this.state.torchON})
}
toggleAutoDetect(){
this.setState({autoDetect: !this.state.autoDetect})
}
render(){
return (
<View style={this.styles.container}>
<RNCamera
style={this.styles.preview}
captureAudio={false}
onBarCodeRead={this.onBarCodeReadHandler}
flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
/>
<View style={this.styles.bottom}>
<TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? this.styles.switchOn : this.styles.switchOff}>
<Text style={this.state.torchON ? this.styles.textOn : this.styles.textOff}>↯ Lamp {this.state.torchON ? "aan" : "uit"}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff}>
<Text style={this.state.autoDetect ? this.styles.textOn : this.styles.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
</TouchableOpacity>
{this.state.autoDetect ? <View></View> :
<View style={this.styles.textBox}>
<Text style={this.styles.textBarcode}>Barcode: </Text>
<TextInput style={this.styles.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
<TouchableOpacity onPress={this.manualBarcodeHandler} style={this.styles.switchOn}>
<Text style={this.styles.textOn}>Naar machine</Text>
</TouchableOpacity>
</View>
}
</View>
</View>
);
}
// Internal button for testing
//<View style={this.styles.bottom}>
//<TouchableOpacity onPress={this.toggleTorch} style={this.styles.switch}>
//<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
//</TouchableOpacity>
//</View>
//<Image style={this.styles.Image} source={this.state.torchOn ? flashon : flashoff} />
private onBarCodeRead(event: { data: string }): void {
if (this.state.autoDetect) {
if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
return;
}
this.props.barcode.setValue(event.data);
if (this.props.onDetect && this.props.onDetect.canExecute) {
Vibration.vibrate(400);
this.props.onDetect.execute();
}
}
else {
if (this.state.textboxValue !== event.data) {
Vibration.vibrate(400);
this.setState({textboxValue: event.data})
return;
}
}
}
private manualBarcode() {
this.props.barcode.setValue(this.state.textboxValue);
this.props.onDetect?.execute();
}
}

28
src/utils/common.ts
View File

@@ -1,28 +0,0 @@
import { ImageStyle, TextStyle, ViewStyle } from "react-native";
interface CustomStyle {
[key: string]: string | number;
}
export interface Style {
[key: string]: CustomStyle | ViewStyle | TextStyle | ImageStyle;
}
export function flattenStyles<T extends Style>(defaultStyle: T, overrideStyles: Array<T | undefined>): T {
const styles = [defaultStyle, ...overrideStyles.filter((object): object is T => object !== undefined)];
return Object.keys(defaultStyle).reduce(
(flattened, currentKey) => {
const styleItems = styles.map(object => object[currentKey]);
return {
...flattened,
[currentKey]: flattenObjects(styleItems)
};
},
{} as T
);
}
function flattenObjects<T extends object>(objects: T[]): T {
return objects.reduce((merged, object) => ({ ...merged, ...object }), {} as T);
}