Merge branch 'feature/rfid-scan-button'

Author: michael-braun

examples/react-chayns-rfid_input/Example.jsx

@@ -23,18 +23,27 @@ export default class Example extends React.Component {
     };
 
     render() {
-        return(
+        const { rfid, rfidInput } = this.state;
+
+        return (
             <ExampleContainer headline="RFID Input">
                 <h3>RFID-Live</h3>
-                <p>{this.state.rfidInput || '-'}</p>
+                <p>{rfidInput || '-'}</p>
                 <h3>RFID</h3>
-                <p>{this.state.rfid || '-'}</p>
+                <p>{rfid || '-'}</p>
+
+                <RfidInput
+                    onConfirm={this.onConfirm}
+                    onInput={this.onInput}
+                    value={rfidInput}
+                    enableScan={RfidInput.isNfcAvailable()}
+                />
 
                 <RfidInput
                     onConfirm={this.onConfirm}
                     onInput={this.onInput}
-                    value={this.state.rfidInput}
-                    enableScan={chayns.env.isApp && chayns.env.isAndroid}
+                    value={rfidInput}
+                    enableScan
                 />
             </ExampleContainer>
         );

src/react-chayns-rfid_input/README.md

@@ -29,6 +29,9 @@ You can use the input like this:
 ## RfidInput.pretifyRfid
 A static function to set a space after every second character. 
 
+## RfidInput.isNfcAvailable
+A static function which checks with a whitelist, whether the current app could support nfc-scans. 
+
 ## Props
 The following properties can be set on the RfidInput-Component
 

src/react-chayns-rfid_input/component/RfidInput.jsx

@@ -33,6 +33,11 @@ export default class RfidInput extends React.Component {
         scanText: 'Scannen',
     };
 
+    static isNfcAvailable() {
+        return (chayns.env.isMyChaynsApp && (chayns.env.isAndroid || (chayns.env.isIOS && chayns.env.appVersion >= 5764)))
+            || (chayns.env.isApp && (chayns.env.isAndroid));
+    }
+
     state = {
         isScanning: false,
     };
@@ -90,8 +95,12 @@ export default class RfidInput extends React.Component {
             value,
         } = this.props;
         const { isScanning } = this.state;
-        const classNames = classnames(className, 'cc__rfid-input');
+
+        const classNames = classnames(className, 'cc__rfid-input', {
+            'cc__rfid-input--enable-scan': enableScan,
+        });
         const disabled = !VALID_RFID.test(value);
+
         return(
             <div className={classNames}>
                 <div className="cc__rfid-input__wrapper">
@@ -104,24 +113,24 @@ export default class RfidInput extends React.Component {
                         autoCapitalize="off"
                         spellCheck="false"
                     />
-                    <ChooseButton
-                        onClick={this.onConfirm}
-                        disabled={disabled}
-                        className="cc__rfid-input__confirm"
-                    >
-                        {confirmNode}
-                    </ChooseButton>
-                </div>
-                {enableScan && (
-                    <div className="cc__rfid-input__control">
+                    {enableScan && !value && (
                         <ChooseButton
                             onClick={isScanning ? this.endScan : this.startScan}
                             className="cc__rfid-input__scan"
                         >
                             {scanText}
                         </ChooseButton>
-                    </div>
-                )}
+                    )}
+                    {(!enableScan || value) && (
+                        <ChooseButton
+                            onClick={this.onConfirm}
+                            disabled={disabled}
+                            className="cc__rfid-input__confirm"
+                        >
+                            {confirmNode}
+                        </ChooseButton>
+                    )}
+                </div>
             </div>
         );
     }

src/react-chayns-rfid_input/index.scss

@@ -11,4 +11,11 @@
     text-align: center;
     margin: 15px 0;
   }
+
+  &--enable-scan {
+    .cc__rfid-input__scan, .cc__rfid-input__confirm {
+      width: 52px;
+      box-sizing: content-box;
+    }
+  }
 }