react-application-core
Version:
A react-based application core for the business applications.
135 lines • 6.02 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Keyboard = void 0;
var React = require("react");
var ReactDOM = require("react-dom");
var R = require("ramda");
var util_1 = require("../../util");
var generic_component_1 = require("../base/generic.component");
var keyboard_interface_1 = require("./keyboard.interface");
var key_1 = require("./key");
var flex_1 = require("../layout/flex");
var definition_1 = require("../../definition");
var Keyboard = /** @class */ (function (_super) {
__extends(Keyboard, _super);
/**
* @stable [03.09.2018]
* @param {IKeyboardProps} props
*/
function Keyboard(props) {
var _this = _super.call(this, props) || this;
_this.onSelect = _this.onSelect.bind(_this);
_this.state = { position: _this.fieldValue.length, mode: 0, useUppercase: false };
return _this;
}
/**
* @stable [08.05.2018]
* @returns {React.ReactNode}
*/
Keyboard.prototype.render = function () {
var _this = this;
var props = this.props;
var state = this.state;
var keys = props.layout[state.mode];
var el = (React.createElement("div", { ref: this.actualRef, className: util_1.joinClassName(definition_1.KeyboardClassNamesEnum.KEYBOARD, 'rac-no-user-select', !this.isInline && 'rac-keyboard-portal', util_1.calc(props.className)) },
util_1.orNull(!this.isInline, function () { return _this.uiFactory.makeIcon({
type: definition_1.IconsEnum.TIMES,
className: 'rac-keyboard-close',
onClick: props.onClose,
}); }),
keys.map(function (row, index) { return (React.createElement(flex_1.FlexLayout, { key: "keyboard-row-" + index, full: false, row: true, justifyContentCenter: true, alignItemsCenter: true }, row.map(function (key, index2) { return (React.createElement(key_1.KeyboardKey, __assign({}, props.keyboardKeyConfiguration, { key: "keyboard-row-column-" + index + "-" + index2, value: key, useUppercase: state.useUppercase, onSelect: _this.onSelect }))); }))); })));
return this.isInline ? el : ReactDOM.createPortal(el, this.domAccessor.documentBody); // TODO Dialog
};
/**
* @stable [08.05.2018]
* @param {KeyboardKeyValueT} key
*/
Keyboard.prototype.onSelect = function (key) {
var nextValue;
var props = this.props;
var state = this.state;
var fieldValue = this.fieldValue;
var position = fieldValue.length;
var chars = fieldValue.split('');
var keyAsString = key;
var keyAsObject = key;
if (util_1.TypeUtils.isString(keyAsString) || keyAsObject.type === definition_1.KeyboardKeysEnum.SPACE) {
var keyValue = util_1.TypeUtils.isString(keyAsString) ? keyAsString : keyAsObject.value;
nextValue = R.insert(position, state.useUppercase ? keyValue.toUpperCase() : keyValue, chars);
props.onChange(nextValue.join(''));
this.setState({ position: position + 1 });
}
else {
switch (keyAsObject.type) {
case definition_1.KeyboardKeysEnum.UPPERCASE:
this.setState({ useUppercase: !state.useUppercase });
break;
case definition_1.KeyboardKeysEnum.CHANGE_LAYOUT:
this.setState({ mode: this.state.mode === props.layout.length - 1 ? 0 : this.state.mode + 1 });
break;
case definition_1.KeyboardKeysEnum.BACKSPACE:
if (position > 0) {
nextValue = R.remove(position - 1, 1, chars).join('');
props.onChange(nextValue);
this.setState({ position: position - 1 });
}
break;
case definition_1.KeyboardKeysEnum.CLOSE:
props.onClose();
break;
}
}
};
Object.defineProperty(Keyboard.prototype, "isInline", {
/**
* @stable [21.08.2020]
*/
get: function () {
return this.originalProps.inline;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Keyboard.prototype, "fieldValue", {
/**
* @stable [27.09.2019]
* @returns {string}
*/
get: function () {
return String(util_1.nvl(this.props.field.value, ''));
},
enumerable: false,
configurable: true
});
Keyboard.defaultProps = {
inline: false,
layout: [keyboard_interface_1.KEYBOARD_QWERTY_LAYOUT, keyboard_interface_1.KEYBOARD_QWERTY_DIGITAL_LAYOUT],
};
return Keyboard;
}(generic_component_1.GenericComponent));
exports.Keyboard = Keyboard;
//# sourceMappingURL=keyboard.component.js.map