chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
165 lines (162 loc) • 4.51 kB
JavaScript
/**
* @component
*/
import classnames from 'clsx';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Button from '../../react-chayns-button/component/Button';
import Input from '../../react-chayns-input/component/Input';
import { RFID_CONTENT, SPLIT_RFID, VALID_RFID } from '../constants/regex';
/**
* A component to take in an RFID signal.
*/
export default class RfidInput extends Component {
static pretifyRfid(rfid) {
return rfid ? rfid.match(SPLIT_RFID).join(' ') : '';
}
static isNfcAvailable() {
return chayns.env.isMyChaynsApp && (chayns.env.isAndroid || chayns.env.isIOS && chayns.env.myChaynsAppVersion >= 5764) || chayns.env.isApp && chayns.env.isAndroid;
}
constructor(props) {
super(props);
this.onConfirm = () => {
const {
onConfirm,
value
} = this.props;
onConfirm(value);
};
this.onInput = newRfid => {
const {
onInput
} = this.props;
const newValue = newRfid.toUpperCase().replace(/\s/g, '');
if (!RFID_CONTENT.test(newValue)) {
return;
}
onInput(newValue);
};
this.onScan = rfid => {
this.endScan();
if (VALID_RFID.test(rfid)) {
const newRfid = rfid.toUpperCase();
const {
onConfirm,
onInput
} = this.props;
onInput(newRfid);
onConfirm(newRfid);
}
};
this.startScan = () => {
this.setState({
isScanning: true
});
chayns.addNfcListener(this.onScan);
chayns.showWaitCursor();
};
this.endScan = () => {
const {
isScanning
} = this.state;
if (!isScanning) {
return;
}
chayns.removeNfcListener();
chayns.hideWaitCursor();
this.setState({
isScanning: false
});
};
this.state = {
isScanning: false
};
}
render() {
const {
className,
style,
placeholder,
confirmNode,
enableScan,
scanText,
value
} = this.props;
const {
isScanning
} = this.state;
const classNames = classnames(className, 'cc__rfid-input', enableScan && 'cc__rfid-input--enable-scan');
const disabled = !VALID_RFID.test(value);
return /*#__PURE__*/React.createElement("div", {
className: classNames,
style: style
}, /*#__PURE__*/React.createElement("div", {
className: "cc__rfid-input__wrapper"
}, /*#__PURE__*/React.createElement(Input, {
className: "cc__rfid-input__input",
placeholder: placeholder,
onChange: this.onInput,
value: RfidInput.pretifyRfid(value),
autoCorrect: "off",
autoCapitalize: "off",
spellCheck: "false"
}), enableScan && !value && /*#__PURE__*/React.createElement(Button, {
secondary: true,
onClick: isScanning ? this.endScan : this.startScan,
className: "cc__rfid-input__scan"
}, scanText), (!enableScan || value) && /*#__PURE__*/React.createElement(Button, {
secondary: true,
onClick: this.onConfirm,
disabled: disabled,
className: "cc__rfid-input__confirm"
}, confirmNode)));
}
}
RfidInput.propTypes = {
/**
* A classname string that will be applied to the container element.
*/
className: PropTypes.string,
/**
* A React style object that will be applied to the container element.
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
/**
* A string that will be shown as the placeholder.
*/
placeholder: PropTypes.string,
/**
* A string or `ReactNode` that will be the content of the confirm button.
*/
confirmNode: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/**
* Wether to enable the scan-button for scanning a card.
*/
enableScan: PropTypes.bool,
/**
* A string that will be the content of the scan-button.
*/
scanText: PropTypes.string,
/**
* The input value.
*/
value: PropTypes.string.isRequired,
/**
* A callback for when the `<input>`-elements content changes.
*/
onInput: PropTypes.func.isRequired,
/**
* This will be called when the RFID input is completed and validated.
*/
onConfirm: PropTypes.func.isRequired
};
RfidInput.defaultProps = {
className: null,
style: null,
placeholder: 'Kartennummer',
confirmNode: 'OK',
enableScan: false,
scanText: 'Scannen'
};
RfidInput.displayName = 'RfidInput';
//# sourceMappingURL=RfidInput.js.map