[improvement] Widget components #1475 - QR scanner widget (#1489)

* new implementation/image

* Revert "new implementation/image"

This reverts commit 637bd83108.

* new implementation/qr-scanner
This commit is contained in:
Arpit 2021-12-14 16:46:44 +05:30 committed by GitHub
parent d46ea97ae9
commit c550836497
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,9 +1,8 @@
import React, { useState } from 'react';
import QrReader from 'react-qr-reader';
import ErrorModal from './ErrorModal';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
export const QrScanner = function QrScanner({ component, onEvent, onComponentOptionChanged, currentState }) {
export const QrScanner = function QrScanner({ styles, fireEvent, setExposedVariable }) {
const handleError = async (errorMessage) => {
console.log(errorMessage);
await setErrorOccured(true);
@ -11,29 +10,17 @@ export const QrScanner = function QrScanner({ component, onEvent, onComponentOpt
const handleScan = async (data) => {
if (data !== null || data !== undefined) {
await onEvent('onDetect', { component, data: data });
await onComponentOptionChanged(component, 'lastDetectedValue', data);
await fireEvent('onDetect');
await setExposedVariable('lastDetectedValue', data);
}
};
let [errorOccured, setErrorOccured] = useState(false);
const [errorOccured, setErrorOccured] = useState(false);
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
let parsedWidgetVisibility = widgetVisibility;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
const { visibility, disabledState } = styles;
return (
<div data-disabled={parsedDisabledState} style={{ display: parsedWidgetVisibility ? '' : 'none' }}>
<div data-disabled={disabledState} style={{ display: visibility ? '' : 'none' }}>
{errorOccured ? <ErrorModal /> : <QrReader onError={handleError} onScan={handleScan} />}
</div>
);