From 96d670658f78233d19834c1320ceecfd0771cb8f Mon Sep 17 00:00:00 2001 From: Benjamin Klotz Date: Fri, 29 Dec 2023 12:28:24 +0100 Subject: [PATCH 1/3] react-js Removed redundant code from App.tsx EPIC-4063 --- react-js/src/App.tsx | 277 ++++++++++++++----------------------------- 1 file changed, 86 insertions(+), 191 deletions(-) diff --git a/react-js/src/App.tsx b/react-js/src/App.tsx index 74b9289..6a15b00 100644 --- a/react-js/src/App.tsx +++ b/react-js/src/App.tsx @@ -33,6 +33,16 @@ import { IBarcodePolygonHandle, IBarcodePolygonLabelHandle } from "scanbot-web-s import VINScannerComponent from "./rtu-ui/vin-scanner-component"; export default class App extends React.Component { + private scannerComponents = { + [RoutePath.DocumentScanner]: React.createRef(), + [RoutePath.BarcodeScanner]: React.createRef(), + [RoutePath.BarcodeScannerWithOverlay]: React.createRef(), + [RoutePath.MrzScanner]: React.createRef(), + [RoutePath.TextDataScanner]: React.createRef(), + [RoutePath.VINScanner]: React.createRef(), + [RoutePath.ScanAndCount]: React.createRef(), + } + constructor(props: any) { super(props); this.state = { @@ -42,12 +52,69 @@ export default class App extends React.Component { error: { message: undefined, }, + renderedScannerComponents: undefined }; } + renderScannerComponents() { + return <> + + + { + // You can override onBarcodeFound and create your own implementation for custom styling, e.g. + // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below: + if (code.format === "QR_CODE") { + polygon.style({fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow"}) + } + } + }, + // When dealing with AR overlay, let's hide the finder and have the whole area be detectable + showFinder: false + }} + onBarcodesDetected={this.onBarcodesDetected.bind(this)} + /> + + + + { + // Handle results as you please + }} + /> + ; + } + async componentDidMount() { const sdk = await ScanbotSdkService.instance.initialize(); - this.setState({ sdk: sdk }); + this.setState({ + sdk: sdk, + renderedScannerComponents: this.renderScannerComponents() + }); RoutingService.instance.observeChanges(() => { this.forceUpdate(); @@ -57,27 +124,13 @@ export default class App extends React.Component { RoutingService.instance.reset(); - this.setState({ error: { message: error } }); - if (this._documentScanner?.isVisible()) { - this._documentScanner?.pop(); - } - if (this._barcodeScanner?.isVisible()) { - this._barcodeScanner?.pop(); - } - if (this._barcodeScannerWithOverlay?.isVisible()) { - this._barcodeScannerWithOverlay?.pop(); - } - if (this._mrzScanner?.isVisible()) { - this._mrzScanner?.pop(); - } - if (this._textDataScanner?.isVisible()) { - this._textDataScanner?.pop(); - } - if (this._scanAndCounter?.isVisible()) { - this._scanAndCounter?.pop(); + this.setState({error: {message: error}}); + for (const componentRef of Object.values(this.scannerComponents)) { + if (componentRef.current?.isVisible()) { + componentRef.current?.pop(); + } } }); - } onBackPress() { @@ -100,156 +153,25 @@ export default class App extends React.Component { render() { return (
- {this.documentScanner()} - {this.barcodeScanner()} - {this.barcodeScannerWithOverlay()} - {this.mrzScanner()} - {this.textDataScanner()} - {this.vinScanner()} - {this.scanAndCounter()} - - this.setState({ alert: undefined })} /> - - (this.navigation = ref)} style={{ zIndex: 19 }}> - this.onBackPress()} /> + {this.state.renderedScannerComponents} + + this.setState({alert: undefined})}/> + + (this.navigation = ref)} style={{zIndex: 19}}> + this.onBackPress()}/> -
+
{this.decideContent()}
); } - _documentScannerHtmlComponent: any; - _documentScanner?: DocumentScannerComponent | null; - documentScanner() { - if (!this._documentScannerHtmlComponent) { - this._documentScannerHtmlComponent = ( - (this._documentScanner = ref)} - sdk={this.state.sdk} - onDocumentDetected={this.onDocumentDetected.bind(this)} - /> - ); - } - return this._documentScannerHtmlComponent; - } - - _barcodeScannerHtmlComponent: any; - _barcodeScanner?: BarcodeScannerComponent | null; - barcodeScanner() { - if (!this._barcodeScannerHtmlComponent) { - this._barcodeScannerHtmlComponent = ( - (this._barcodeScanner = ref)} - sdk={this.state.sdk} - onBarcodesDetected={this.onBarcodesDetected.bind(this)} - /> - ); - } - return this._barcodeScannerHtmlComponent; - } - - _barcodeScannerWithOverlayHtmlComponent: any; - _barcodeScannerWithOverlay?: BarcodeScannerComponent | null; - barcodeScannerWithOverlay() { - if (!this._barcodeScannerWithOverlayHtmlComponent) { - this._barcodeScannerWithOverlayHtmlComponent = ( - (this._barcodeScannerWithOverlay = ref)} - sdk={this.state.sdk} - additionalConfig={{ - overlay: { - visible: true, - onBarcodeFound: (code: Barcode, polygon: IBarcodePolygonHandle, label: IBarcodePolygonLabelHandle) => { - // You can override onBarcodeFound and create your own implementation for custom styling, e.g. - // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below: - if (code.format === "QR_CODE") { - polygon.style({ fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow" }) - } - } - }, - // When dealing with AR overlay, let's hide the finder and have the whole area be detectable - showFinder: false - }} - onBarcodesDetected={this.onBarcodesDetected.bind(this)} - /> - ); - } - return this._barcodeScannerWithOverlayHtmlComponent; - } - - _mrzScannerHtmlComponent: any; - _mrzScanner?: MrzScannerComponent | null; - mrzScanner() { - if (!this._mrzScannerHtmlComponent) { - this._mrzScannerHtmlComponent = ( - (this._mrzScanner = ref)} - sdk={this.state.sdk} - onMrzsDetected={this.onMrzDetected.bind(this)} - /> - ); - } - return this._mrzScannerHtmlComponent; - } - - _textDataScannerHtmlComponent: any; - _textDataScanner?: TextDataScannerComponent | null; - textDataScanner() { - if (!this._textDataScannerHtmlComponent) { - this._textDataScannerHtmlComponent = ( - (this._textDataScanner = ref)} - sdk={this.state.sdk} - onTextDataDetected={this.onTextDataDetected.bind(this)} - /> - ); - } - return this._textDataScannerHtmlComponent; - } - - _vinScannerHtmlComponent: any; - _vinScanner?: VINScannerComponent | null; - vinScanner() { - if (!this._vinScannerHtmlComponent) { - this._vinScannerHtmlComponent = ( - (this._vinScanner = ref)} - sdk={this.state.sdk} - onVINDetected={this.onVINDetected.bind(this)} - /> - ); - } - return this._vinScannerHtmlComponent; - } - - _scanAndCounterHtmlComponent: any; - _scanAndCounter?: BarcodeScannerComponent | null; - scanAndCounter() { - if (!this._scanAndCounterHtmlComponent) { - this._scanAndCounterHtmlComponent = ( - (this._scanAndCounter = ref)} - sdk={this.state.sdk} - // To enable scan-and-count feature, add the additional config of scanAndCount: {} - additionalConfig={{ scanAndCount: { enabled: true }, showFinder: false }} - hideCameraSwapButtons={true} - showBottomActionBar={false} - onBarcodesDetected={(barcodes: Barcode[]) => { - // Handle results as you please - }} - /> - ); - } - return this._scanAndCounterHtmlComponent; - } - decideContent() { const route = NavigationUtils.findRoute(); @@ -477,36 +399,9 @@ export default class App extends React.Component { return; } - if (feature.id === RoutePath.DocumentScanner) { - this._documentScanner?.push(AnimationType.PushRight); - return; - } - if (feature.id === RoutePath.BarcodeScanner) { - this._barcodeScanner?.push(AnimationType.PushBottom); - return; - } - if (feature.id === RoutePath.BarcodeScannerWithOverlay) { - this._barcodeScannerWithOverlay?.push(AnimationType.PushBottom); - return; - } - if (feature.id === RoutePath.MrzScanner) { - this._mrzScanner?.push(AnimationType.PushRight); - return; - } - if (feature.id === RoutePath.TextDataScanner) { - this._textDataScanner?.push(AnimationType.PushRight); - return; - } - if (feature.id === RoutePath.TextDataScanner) { - this._textDataScanner?.push(AnimationType.PushRight); - return; - } - if (feature.id === RoutePath.VINScanner) { - this._vinScanner?.push(AnimationType.PushRight); - return; - } - if (feature.id === RoutePath.ScanAndCount) { - this._scanAndCounter?.push(AnimationType.PushRight); + if (Object.keys(this.scannerComponents).includes(feature.id)) { + const feature_id = feature.id as keyof typeof App.prototype.scannerComponents; + this.scannerComponents[feature_id].current?.push(AnimationType.PushRight); return; } From 5a2da413689bb5ad94cba8b22c1685b2b4194d21 Mon Sep 17 00:00:00 2001 From: Benjamin Klotz Date: Fri, 29 Dec 2023 17:23:53 +0100 Subject: [PATCH 2/3] react-js Refactoring Moved the logic that makes sure that the DOM element to which we bind the websdk-scanner stays the same during rerendering from App.tsx to BaseScannerComponent. This makes the scanner components easier to use. EPIC-4063 --- react-js/src/App.tsx | 169 +++++++++--------- .../src/rtu-ui/barcode-scanner-component.tsx | 44 ++--- .../rtu-ui/common/base-scanner-component.tsx | 65 ++++--- .../src/rtu-ui/document-scanner-component.tsx | 42 ++--- react-js/src/rtu-ui/mrz-scanner-component.tsx | 42 ++--- .../rtu-ui/text-data-scanner-component.tsx | 42 ++--- react-js/src/rtu-ui/vin-scanner-component.tsx | 37 ++-- react-js/src/subviews/bottom-bar.tsx | 2 +- 8 files changed, 200 insertions(+), 243 deletions(-) diff --git a/react-js/src/App.tsx b/react-js/src/App.tsx index 6a15b00..60f4e07 100644 --- a/react-js/src/App.tsx +++ b/react-js/src/App.tsx @@ -21,7 +21,6 @@ import { ImageUtils } from "./utils/image-utils"; import { NavigationUtils } from "./utils/navigation-utils"; import { MiscUtils } from "./utils/misc-utils"; import DocumentScannerComponent from "./rtu-ui/document-scanner-component"; -import { AnimationType } from "./rtu-ui/enum/animation-type"; import BarcodeScannerComponent from "./rtu-ui/barcode-scanner-component"; import Barcodes from "./model/barcodes"; import ErrorLabel from "./subviews/error-label"; @@ -33,15 +32,6 @@ import { IBarcodePolygonHandle, IBarcodePolygonLabelHandle } from "scanbot-web-s import VINScannerComponent from "./rtu-ui/vin-scanner-component"; export default class App extends React.Component { - private scannerComponents = { - [RoutePath.DocumentScanner]: React.createRef(), - [RoutePath.BarcodeScanner]: React.createRef(), - [RoutePath.BarcodeScannerWithOverlay]: React.createRef(), - [RoutePath.MrzScanner]: React.createRef(), - [RoutePath.TextDataScanner]: React.createRef(), - [RoutePath.VINScanner]: React.createRef(), - [RoutePath.ScanAndCount]: React.createRef(), - } constructor(props: any) { super(props); @@ -51,69 +41,82 @@ export default class App extends React.Component { sdk: undefined, error: { message: undefined, - }, - renderedScannerComponents: undefined + } }; } - renderScannerComponents() { - return <> - - - { - // You can override onBarcodeFound and create your own implementation for custom styling, e.g. - // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below: - if (code.format === "QR_CODE") { - polygon.style({fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow"}) - } - } - }, - // When dealing with AR overlay, let's hide the finder and have the whole area be detectable - showFinder: false - }} - onBarcodesDetected={this.onBarcodesDetected.bind(this)} - /> - - - - { - // Handle results as you please - }} - /> - ; + renderScannerComponents() { + if (!this.state.sdk) { + return null; + } + + return this.scannerComponentFromRoute(NavigationUtils.findRoute() ?? ''); + } + + scannerComponentFromRoute(route: string) { + const onClose = () => { + RoutingService.instance.reset(); } + switch (route) { + case RoutePath.DocumentScanner: + return ; + case RoutePath.BarcodeScanner: + return ; + case RoutePath.BarcodeScannerWithOverlay: + return { + // You can override onBarcodeFound and create your own implementation for custom styling, e.g. + // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below: + if (code.format === "QR_CODE") { + polygon.style({fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow"}) + } + } + }, + // When dealing with AR overlay, let's hide the finder and have the whole area be detectable + showFinder: false + }} + onBarcodesDetected={this.onBarcodesDetected.bind(this)} + /> + case RoutePath.MrzScanner: + return ; + case RoutePath.TextDataScanner: + return ; + case RoutePath.VINScanner: + return ; + case RoutePath.ScanAndCount: + return { + // Handle results as you please + }} + />; + default: + return null; + } + } + async componentDidMount() { const sdk = await ScanbotSdkService.instance.initialize(); this.setState({ - sdk: sdk, - renderedScannerComponents: this.renderScannerComponents() + sdk: sdk }); RoutingService.instance.observeChanges(() => { @@ -121,15 +124,8 @@ export default class App extends React.Component { }); await ScanbotSdkService.instance.setLicenseFailureHandler((error: any) => { - RoutingService.instance.reset(); - - this.setState({error: {message: error}}); - for (const componentRef of Object.values(this.scannerComponents)) { - if (componentRef.current?.isVisible()) { - componentRef.current?.pop(); - } - } + this.setState({error: {message: error}}); }); } @@ -153,14 +149,15 @@ export default class App extends React.Component { render() { return (
- {this.state.renderedScannerComponents} + {this.renderScannerComponents()} - this.setState({alert: undefined})}/> + this.setState({alert: undefined})}/> - (this.navigation = ref)} style={{zIndex: 19}}> - this.onBackPress()}/> + (this.navigation = ref)} style={{zIndex: 19}}> + this.onBackPress()}/> -
+
{this.decideContent()}
{ decideContent() { const route = NavigationUtils.findRoute(); - if ( - NavigationUtils.isAtRoot() || - route === RoutePath.DocumentScanner || - route === RoutePath.BarcodeScanner - ) { + if (NavigationUtils.isAtRoot() || this.isRouteAtScannerComponent()) { return (
@@ -399,12 +392,6 @@ export default class App extends React.Component { return; } - if (Object.keys(this.scannerComponents).includes(feature.id)) { - const feature_id = feature.id as keyof typeof App.prototype.scannerComponents; - this.scannerComponents[feature_id].current?.push(AnimationType.PushRight); - return; - } - if (feature.route) { RoutingService.instance.route(feature.route); return; @@ -461,4 +448,8 @@ export default class App extends React.Component { } } } + + private isRouteAtScannerComponent() { + return !!this.scannerComponentFromRoute(NavigationUtils.findRoute() ?? ''); + } } diff --git a/react-js/src/rtu-ui/barcode-scanner-component.tsx b/react-js/src/rtu-ui/barcode-scanner-component.tsx index 9b0fb4d..fcad4fd 100644 --- a/react-js/src/rtu-ui/barcode-scanner-component.tsx +++ b/react-js/src/rtu-ui/barcode-scanner-component.tsx @@ -1,14 +1,16 @@ import { ScanbotSdkService } from "../service/scanbot-sdk-service"; import { BarcodeResult } from "scanbot-web-sdk/@types"; import BaseScannerComponent from "./common/base-scanner-component"; -import { AnimationType } from "./enum/animation-type"; import Barcodes from "../model/barcodes"; export default class BarcodeScannerComponent extends BaseScannerComponent { + constructor(props: any) { + super(props, ScanbotSdkService.BARCODE_SCANNER_CONTAINER); + } + render() { return this.controller( - ScanbotSdkService.BARCODE_SCANNER_CONTAINER, "Barcode Scanner", this.labelText(), () => { @@ -28,36 +30,24 @@ export default class BarcodeScannerComponent extends BaseScannerComponent { } } - onBarcodeScannerError(e: Error) { - console.log(e.name + ': ' + e.message); - alert(e.name + ': ' + e.message); - } - labelText() { return Barcodes.instance.count() + " Barcodes"; } - async push(type: AnimationType) { - super.push(type); - this.pushType = type; - this.updateAnimationType(type, async () => { - try { - await ScanbotSdkService.instance.createBarcodeScanner( - this.onBarcodesDetected.bind(this), - this.onBarcodeScannerError.bind(this), - this.props.additionalConfig ?? {} - ); - } catch (e: any) { - this.onBarcodeScannerError(e); - this.pop() - } - }); + async componentDidMount() { + super.componentDidMount(); + try { + await ScanbotSdkService.instance.createBarcodeScanner( + this.onBarcodesDetected.bind(this), + this.onScannerError.bind(this), + this.props.additionalConfig ?? {} + ); + } catch (e: any) { + this.onScannerError(e); + } } - pop() { - super.pop(); - this.updateAnimationType(AnimationType.Pop, () => { - ScanbotSdkService.instance.disposeBarcodeScanner(); - }); + async componentWillUnmount() { + ScanbotSdkService.instance.disposeBarcodeScanner(); } } diff --git a/react-js/src/rtu-ui/common/base-scanner-component.tsx b/react-js/src/rtu-ui/common/base-scanner-component.tsx index 717d8a7..0763f39 100644 --- a/react-js/src/rtu-ui/common/base-scanner-component.tsx +++ b/react-js/src/rtu-ui/common/base-scanner-component.tsx @@ -7,14 +7,34 @@ import { Constants } from "../model/constants"; import { IScannerCommon } from "scanbot-web-sdk/@types/interfaces/i-scanner-common-handle"; export default class BaseScannerComponent extends React.Component { - constructor(props: any) { + // We need to make sure that the DOM element in which the scanner is rendered stays the same, even after re-rendering. + // We do this by manually appending the scannerDiv to the current version of the scannerDivContainer after every render. + private scannerDiv = (() => { + const div = document.createElement("div"); + div.style.width = "100%"; + div.style.height = "100%"; + return div; + })(); + + private scannerDivContainer = React.createRef(); + + constructor(props: any, scannerId: string) { super(props); this.state = { animation: { - type: AnimationType.None, - }, + type: AnimationType.PushRight, + } }; + this.scannerDiv.id = scannerId; + } + + componentDidMount() { + this.scannerDivContainer.current?.appendChild(this.scannerDiv); + } + + componentDidUpdate() { + this.scannerDivContainer.current?.appendChild(this.scannerDiv); } containerHeight() { @@ -54,10 +74,7 @@ export default class BaseScannerComponent extends React.Component { } } - controller(scannerId: string, title: string, labelText: string, onCameraSwap?: Function, onCameraSwitch?: Function) { - if (this.state.animation.type === AnimationType.None) { - return null; - } + controller(title: string, labelText: string, onCameraSwap?: Function, onCameraSwitch?: Function) { const Animation = this.animation(this.state.animation.type); const destination = this.to(this.state.animation.type); this.previousDestination = destination; @@ -65,51 +82,45 @@ export default class BaseScannerComponent extends React.Component { return ( { - this.pop(); + this.close(); }} onCameraSwap={this.props.hideCameraSwapButtons ? undefined : onCameraSwap} onCameraSwitch={this.props.hideCameraSwapButtons ? undefined : onCameraSwitch} />
-
-
+ style={{height: this.containerHeight(), backgroundColor: "black"}} + ref={this.scannerDivContainer} + /> {this.props.showBottomActionBar && } ); } onDonePress() { - this.pop(); + this.close(); } - private _isVisible: boolean = false; - isVisible() { - return this._isVisible; - } - push(type: AnimationType) { - this._isVisible = true; + onScannerError(e: Error) { + console.log(e.name + ': ' + e.message); + alert(e.name + ': ' + e.message); + this.close(); } - pop() { - this._isVisible = false; + close() { + this.updateAnimationType(AnimationType.Pop); } - onAnimationStart() { } - onAnimationEnd() { if (this.state.animation.type === AnimationType.Pop) { - this.updateAnimationType(AnimationType.None); + this.props.onClose(); } } diff --git a/react-js/src/rtu-ui/document-scanner-component.tsx b/react-js/src/rtu-ui/document-scanner-component.tsx index 41ea85d..4f01c8e 100644 --- a/react-js/src/rtu-ui/document-scanner-component.tsx +++ b/react-js/src/rtu-ui/document-scanner-component.tsx @@ -1,13 +1,15 @@ import { ScanbotSdkService } from "../service/scanbot-sdk-service"; import { DocumentDetectionResult } from "scanbot-web-sdk/@types"; import BaseScannerComponent from "./common/base-scanner-component"; -import { AnimationType } from "./enum/animation-type"; import Pages from "../model/pages"; export default class DocumentScannerComponent extends BaseScannerComponent { + constructor(props: any) { + super(props, ScanbotSdkService.DOCUMENT_SCANNER_CONTAINER); + } + render() { return this.controller( - ScanbotSdkService.DOCUMENT_SCANNER_CONTAINER, "Document Scanner", this.labelText(), () => { @@ -29,35 +31,23 @@ export default class DocumentScannerComponent extends BaseScannerComponent { } - onDocumentScannerError(e: Error) { - console.log(e.name + ': ' + e.message); - alert(e.name + ': ' + e.message); - } - labelText() { return Pages.instance.count() + " Pages"; } - async push(type: AnimationType) { - super.push(type); - this.pushType = type; - this.updateAnimationType(type, async () => { - try { - await ScanbotSdkService.instance.createDocumentScanner( - this.onDocumentDetected.bind(this), - this.onDocumentScannerError.bind(this), - ); - } catch (e) { - this.onDocumentScannerError(e); - this.pop() - } - }); + async componentDidMount() { + super.componentDidMount(); + try { + await ScanbotSdkService.instance.createDocumentScanner( + this.onDocumentDetected.bind(this), + this.onScannerError.bind(this), + ); + } catch (e: any) { + this.onScannerError(e); + } } - pop() { - super.pop(); - this.updateAnimationType(AnimationType.Pop, () => { - ScanbotSdkService.instance.disposeDocumentScanner(); - }); + componentWillUnmount() { + ScanbotSdkService.instance.disposeDocumentScanner(); } } diff --git a/react-js/src/rtu-ui/mrz-scanner-component.tsx b/react-js/src/rtu-ui/mrz-scanner-component.tsx index 2622ba2..eca582d 100644 --- a/react-js/src/rtu-ui/mrz-scanner-component.tsx +++ b/react-js/src/rtu-ui/mrz-scanner-component.tsx @@ -1,12 +1,14 @@ import { MrzResult } from "scanbot-web-sdk/@types/model/mrz/mrz-result"; import { ScanbotSdkService } from "../service/scanbot-sdk-service"; import BaseScannerComponent from "./common/base-scanner-component"; -import { AnimationType } from "./enum/animation-type"; export default class MrzScannerComponent extends BaseScannerComponent { + constructor(props: any) { + super(props, ScanbotSdkService.MRZ_SCANNER_CONTAINER); + } + render() { return this.controller( - ScanbotSdkService.MRZ_SCANNER_CONTAINER, "Mrz Scanner", "", () => { @@ -22,31 +24,19 @@ export default class MrzScannerComponent extends BaseScannerComponent { this.props.onMrzsDetected(result); } - onMrzScannerError(e: Error) { - console.log(e.name + ': ' + e.message); - alert(e.name + ': ' + e.message); - } - - async push(type: AnimationType) { - super.push(type); - this.pushType = type; - this.updateAnimationType(type, async () => { - try { - await ScanbotSdkService.instance.createMrzScanner( - this.onMrzsDetected.bind(this), - this.onMrzScannerError.bind(this) - ); - } catch (e) { - this.onMrzScannerError(e); - this.pop() - } - }); + async componentDidMount() { + super.componentDidMount(); + try { + await ScanbotSdkService.instance.createMrzScanner( + this.onMrzsDetected.bind(this), + this.onScannerError.bind(this) + ); + } catch (e: any) { + this.onScannerError(e); + } } - pop() { - super.pop(); - this.updateAnimationType(AnimationType.Pop, () => { - ScanbotSdkService.instance.disposeMrzScanner(); - }); + componentWillUnmount() { + ScanbotSdkService.instance.disposeMrzScanner(); } } diff --git a/react-js/src/rtu-ui/text-data-scanner-component.tsx b/react-js/src/rtu-ui/text-data-scanner-component.tsx index dc8bb69..9f9a623 100644 --- a/react-js/src/rtu-ui/text-data-scanner-component.tsx +++ b/react-js/src/rtu-ui/text-data-scanner-component.tsx @@ -1,12 +1,14 @@ import { TextDataScannerResult } from "scanbot-web-sdk/@types"; import { ScanbotSdkService } from "../service/scanbot-sdk-service"; import BaseScannerComponent from "./common/base-scanner-component"; -import { AnimationType } from "./enum/animation-type"; export default class TextDataScannerComponent extends BaseScannerComponent { + constructor(props: any) { + super(props, ScanbotSdkService.TEXTDATA_SCANNER_CONTAINER); + } + render() { return this.controller( - ScanbotSdkService.TEXTDATA_SCANNER_CONTAINER, "Text Data Scanner", "", () => { @@ -22,31 +24,19 @@ export default class TextDataScannerComponent extends BaseScannerComponent { this.props.onTextDataDetected(result); } - onTextDataScannerError(e: Error) { - console.log(e.name + ': ' + e.message); - alert(e.name + ': ' + e.message); - } - - async push(type: AnimationType) { - super.push(type); - this.pushType = type; - this.updateAnimationType(type, async () => { - try { - await ScanbotSdkService.instance.createTextDataScanner( - this.onTextDataDetected.bind(this), - this.onTextDataScannerError.bind(this) - ); - } catch (e: any) { - this.onTextDataScannerError(e); - this.pop() - } - }); + async componentDidMount() { + super.componentDidMount(); + try { + await ScanbotSdkService.instance.createTextDataScanner( + this.onTextDataDetected.bind(this), + this.onScannerError.bind(this) + ); + } catch (e: any) { + this.onScannerError(e); + } } - pop() { - super.pop(); - this.updateAnimationType(AnimationType.Pop, () => { - ScanbotSdkService.instance.disposeTextDataScanner(); - }); + componentWillUnmount() { + ScanbotSdkService.instance.disposeTextDataScanner(); } } diff --git a/react-js/src/rtu-ui/vin-scanner-component.tsx b/react-js/src/rtu-ui/vin-scanner-component.tsx index 71c175e..3849466 100644 --- a/react-js/src/rtu-ui/vin-scanner-component.tsx +++ b/react-js/src/rtu-ui/vin-scanner-component.tsx @@ -1,12 +1,14 @@ import { TextDataScannerResult } from "scanbot-web-sdk/@types"; import { ScanbotSdkService } from "../service/scanbot-sdk-service"; import BaseScannerComponent from "./common/base-scanner-component"; -import { AnimationType } from "./enum/animation-type"; export default class VINScannerComponent extends BaseScannerComponent { + constructor(props: any) { + super(props, ScanbotSdkService.VIN_SCANNER_CONTAINER); + } + render() { return this.controller( - ScanbotSdkService.VIN_SCANNER_CONTAINER, "VIN Scanner", "", () => { @@ -27,26 +29,19 @@ export default class VINScannerComponent extends BaseScannerComponent { alert(e.name + ': ' + e.message); } - async push(type: AnimationType) { - super.push(type); - this.pushType = type; - this.updateAnimationType(type, async () => { - try { - await ScanbotSdkService.instance.createVINScanner( - this.onVINDetected.bind(this), - this.onVINScannerError.bind(this) - ); - } catch (e: any) { - this.onVINScannerError(e); - this.pop() - } - }); + async componentDidMount() { + super.componentDidMount(); + try { + await ScanbotSdkService.instance.createVINScanner( + this.onVINDetected.bind(this), + this.onScannerError.bind(this) + ); + } catch (e: any) { + this.onScannerError(e); + } } - pop() { - super.pop(); - this.updateAnimationType(AnimationType.Pop, () => { - ScanbotSdkService.instance.disposeVINScanner(); - }); + componentWillUnmount() { + ScanbotSdkService.instance.disposeVINScanner(); } } diff --git a/react-js/src/subviews/bottom-bar.tsx b/react-js/src/subviews/bottom-bar.tsx index 8cebb2e..dca80fe 100644 --- a/react-js/src/subviews/bottom-bar.tsx +++ b/react-js/src/subviews/bottom-bar.tsx @@ -3,7 +3,7 @@ import { Styles } from "../model/styles"; export class BottomBar extends React.Component { render() { - if (this.props.hidden) { + if (this.props.hidden || !this.props.buttons) { return null; } return ( From e6e5edab47d8d28a5525a9c3b06323c51d3a1654 Mon Sep 17 00:00:00 2001 From: Benjamin Klotz Date: Mon, 8 Jan 2024 10:20:19 +0100 Subject: [PATCH 3/3] Formatting EPIC-4063 --- react-js/src/App.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react-js/src/App.tsx b/react-js/src/App.tsx index 60f4e07..8907629 100644 --- a/react-js/src/App.tsx +++ b/react-js/src/App.tsx @@ -73,7 +73,7 @@ export default class App extends React.Component { // You can override onBarcodeFound and create your own implementation for custom styling, e.g. // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below: if (code.format === "QR_CODE") { - polygon.style({fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow"}) + polygon.style({ fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow" }) } } }, @@ -101,7 +101,7 @@ export default class App extends React.Component { return { @@ -125,7 +125,7 @@ export default class App extends React.Component { await ScanbotSdkService.instance.setLicenseFailureHandler((error: any) => { RoutingService.instance.reset(); - this.setState({error: {message: error}}); + this.setState({ error: { message: error } }); }); } @@ -151,13 +151,13 @@ export default class App extends React.Component {
{this.renderScannerComponents()} - this.setState({alert: undefined})}/> + this.setState({ alert: undefined })}/> - (this.navigation = ref)} style={{zIndex: 19}}> + (this.navigation = ref)} style={{ zIndex: 19 }}> this.onBackPress()}/> -
+
{this.decideContent()}