chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
172 lines (169 loc) • 6.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../../react-chayns-button/component/Button"));
var _Input = _interopRequireDefault(require("../../react-chayns-input/component/Input"));
var _regex = require("../constants/regex");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* A component to take in an RFID signal.
*/
class RfidInput extends _react.Component {
static pretifyRfid(rfid) {
return rfid ? rfid.match(_regex.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 (!_regex.RFID_CONTENT.test(newValue)) {
return;
}
onInput(newValue);
};
this.onScan = rfid => {
this.endScan();
if (_regex.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 = (0, _clsx.default)(className, 'cc__rfid-input', enableScan && 'cc__rfid-input--enable-scan');
const disabled = !_regex.VALID_RFID.test(value);
return /*#__PURE__*/_react.default.createElement("div", {
className: classNames,
style: style
}, /*#__PURE__*/_react.default.createElement("div", {
className: "cc__rfid-input__wrapper"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
className: "cc__rfid-input__input",
placeholder: placeholder,
onChange: this.onInput,
value: RfidInput.pretifyRfid(value),
autoCorrect: "off",
autoCapitalize: "off",
spellCheck: "false"
}), enableScan && !value && /*#__PURE__*/_react.default.createElement(_Button.default, {
secondary: true,
onClick: isScanning ? this.endScan : this.startScan,
className: "cc__rfid-input__scan"
}, scanText), (!enableScan || value) && /*#__PURE__*/_react.default.createElement(_Button.default, {
secondary: true,
onClick: this.onConfirm,
disabled: disabled,
className: "cc__rfid-input__confirm"
}, confirmNode)));
}
}
exports.default = RfidInput;
RfidInput.propTypes = {
/**
* A classname string that will be applied to the container element.
*/
className: _propTypes.default.string,
/**
* A React style object that will be applied to the container element.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* A string that will be shown as the placeholder.
*/
placeholder: _propTypes.default.string,
/**
* A string or `ReactNode` that will be the content of the confirm button.
*/
confirmNode: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
/**
* Wether to enable the scan-button for scanning a card.
*/
enableScan: _propTypes.default.bool,
/**
* A string that will be the content of the scan-button.
*/
scanText: _propTypes.default.string,
/**
* The input value.
*/
value: _propTypes.default.string.isRequired,
/**
* A callback for when the `<input>`-elements content changes.
*/
onInput: _propTypes.default.func.isRequired,
/**
* This will be called when the RFID input is completed and validated.
*/
onConfirm: _propTypes.default.func.isRequired
};
RfidInput.defaultProps = {
className: null,
style: null,
placeholder: 'Kartennummer',
confirmNode: 'OK',
enableScan: false,
scanText: 'Scannen'
};
RfidInput.displayName = 'RfidInput';
//# sourceMappingURL=RfidInput.js.map