@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
134 lines • 5.89 kB
JavaScript
"use strict";
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 (b.hasOwnProperty(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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2019-2020 GoodData Corporation
var React = require("react");
var react_intl_1 = require("react-intl");
var noop = require("lodash/noop");
var set = require("lodash/set");
var cloneDeep = require("lodash/cloneDeep");
var classNames = require("classnames");
var DisabledBubbleMessage_1 = require("../DisabledBubbleMessage");
var translations_1 = require("../../utils/translations");
var MAX_NUMBER_LENGTH = 15;
var InputControl = /** @class */ (function (_super) {
__extends(InputControl, _super);
function InputControl(props) {
var _this = _super.call(this, props) || this;
_this.state = {
value: props.value,
lastSentValue: props.value,
};
_this.onValueChanged = _this.onValueChanged.bind(_this);
_this.onKeyPress = _this.onKeyPress.bind(_this);
_this.onBlur = _this.onBlur.bind(_this);
_this.triggerBlur = _this.triggerBlur.bind(_this);
return _this;
}
InputControl.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== this.state.value) {
this.setState({
value: newProps.value,
lastSentValue: newProps.value,
});
}
};
InputControl.prototype.render = function () {
var _this = this;
var _a = this.props, disabled = _a.disabled, labelText = _a.labelText, placeholder = _a.placeholder, showDisabledMessage = _a.showDisabledMessage, intl = _a.intl, type = _a.type;
return (React.createElement(DisabledBubbleMessage_1.default, { showDisabledMessage: showDisabledMessage },
React.createElement("label", { className: "adi-bucket-inputfield gd-input gd-input-small" },
React.createElement("span", { className: "input-label-text" }, translations_1.getTranslation(labelText, intl)),
React.createElement("input", { ref: function (input) { return (_this.inputRef = input); }, className: this.getInputClassNames(), value: this.state.value, placeholder: translations_1.getTranslation(placeholder, intl), disabled: disabled, onKeyPress: this.onKeyPress, onBlur: this.onBlur, onChange: this.onValueChanged, maxLength: type === "number" ? MAX_NUMBER_LENGTH : null }))));
};
InputControl.prototype.getInputClassNames = function () {
var _a = this.props, type = _a.type, hasWarning = _a.hasWarning;
return classNames("gd-input-field", "gd-input-field-small", {
"has-warning": hasWarning,
number: type === "number",
});
};
InputControl.prototype.isValid = function (type, value) {
if (type === "number") {
// allow only numbers, `-` and string doesn't starts with `.`
return !value.startsWith(".") && (!isNaN(Number(value)) || value === "-");
}
return true;
};
InputControl.prototype.onValueChanged = function (event) {
var type = this.props.type;
var value = event.target.value;
if (this.isValid(type, value)) {
this.setState({ value: value });
}
};
InputControl.prototype.triggerBlur = function () {
if (this.inputRef) {
this.inputRef.blur();
}
};
InputControl.prototype.modifyDataForSending = function (value) {
var type = this.props.type;
if (type === "number") {
return value.replace(/\.+$/, "");
}
return value;
};
InputControl.prototype.emitData = function () {
var _a = this.props, valuePath = _a.valuePath, properties = _a.properties, pushData = _a.pushData;
var value = this.state.value;
var modifiedData = this.modifyDataForSending(value);
var clonedProperties = cloneDeep(properties);
set(clonedProperties, "controls." + valuePath, modifiedData);
this.setState({ value: modifiedData });
pushData({ properties: clonedProperties });
return modifiedData;
};
InputControl.prototype.onBlur = function () {
var _a = this.state, value = _a.value, lastSentValue = _a.lastSentValue;
if (lastSentValue !== value) {
var validatedData = this.emitData();
this.setState({ lastSentValue: validatedData });
}
};
InputControl.prototype.onKeyPress = function (event) {
if (event.key === "Enter") {
var _a = this.state, value = _a.value, lastSentValue = _a.lastSentValue;
if (lastSentValue !== value) {
var validatedData = this.emitData();
this.setState({ lastSentValue: validatedData }, this.triggerBlur);
}
else {
this.triggerBlur();
}
}
};
InputControl.defaultProps = {
value: "",
type: "text",
disabled: false,
pushData: noop,
max: Number.MAX_SAFE_INTEGER,
min: Number.MIN_SAFE_INTEGER,
step: 1,
showDisabledMessage: false,
hasWarning: false,
validateAndPushDataCallback: noop,
};
return InputControl;
}(React.Component));
exports.InputControl = InputControl;
exports.default = react_intl_1.injectIntl(InputControl);
//# sourceMappingURL=InputControl.js.map