@guardian/threads
Version:
50 lines • 1.91 kB
JavaScript
import { __extends } from "tslib";
import React, { createRef, } from 'react';
import styles from '../InputSupper.module.css';
import { Chip } from './abstract/Chip';
export var selectKeyDownHandler = function (e, props) {
if (e.key === 'Enter') {
props.focusElement(props.index + 1, false);
}
else if (e.key === 'ArrowLeft') {
e.preventDefault();
props.focusElement(props.index - 1, true);
}
else if (e.key === 'ArrowRight') {
e.preventDefault();
props.focusElement(props.index + 1, false);
}
else if (e.key === 'Delete' || e.key === 'Backspace') {
e.preventDefault();
props.deleteChip(props.index);
}
};
var SelectChip = /** @class */ (function (_super) {
__extends(SelectChip, _super);
function SelectChip() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.selectRef = createRef();
_this.state = {
currentValue: null,
};
_this.focus = function () {
if (_this.selectRef.current) {
_this.selectRef.current.focus();
}
};
_this.select = _this.focus;
_this.onKeyDown = function (e) {
return selectKeyDownHandler(e, _this.props);
};
_this.onChange = function (e) {
_this.props.onUpdate(_this.props.index, e.target.value);
};
return _this;
}
SelectChip.prototype.render = function () {
return (React.createElement("select", { ref: this.selectRef, value: this.props.value, onChange: this.onChange, className: styles.inlineInputChip, onKeyDown: this.onKeyDown }, this.props.options.map(function (pair) { return (React.createElement("option", { key: pair.value, value: pair.value }, pair.label)); })));
};
return SelectChip;
}(Chip));
export { SelectChip };
//# sourceMappingURL=SelectChip.js.map