@skbkontur/ui-kit
Version:
112 lines • 4.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var polyfillPlaceholder_1 = tslib_1.__importDefault(require("../../lib/polyfillPlaceholder"));
var InputView_1 = require("./InputView");
var Input = /** @class */ (function (_super) {
tslib_1.__extends(Input, _super);
function Input() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
polyfillPlaceholder: false,
blinking: false
};
_this.blinkTimeout = 0;
_this.input = null;
_this.refInput = function (ref) {
_this.input = ref;
};
_this.handleChange = function (event) {
if (polyfillPlaceholder_1.default) {
var fieldIsEmpty = event.target.value === '';
if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
_this.setState({ polyfillPlaceholder: fieldIsEmpty });
}
}
if (_this.props.onChange) {
_this.props.onChange(event, event.target.value);
}
};
return _this;
}
Input.prototype.componentDidMount = function () {
if (polyfillPlaceholder_1.default) {
this.setState({ polyfillPlaceholder: true });
}
};
Input.prototype.componentWillUnmount = function () {
if (this.blinkTimeout) {
clearTimeout(this.blinkTimeout);
}
};
Input.prototype.componentWillReceiveProps = function (nextProps) {
if (polyfillPlaceholder_1.default && !nextProps.value) {
this.setState({ polyfillPlaceholder: true });
}
};
Input.prototype.focus = function () {
if (this.input) {
this.input.focus();
}
};
Input.prototype.blur = function () {
if (this.input) {
this.input.blur();
}
};
Input.prototype.blink = function () {
var _this = this;
this.setState({ blinking: true }, function () {
_this.blinkTimeout = window.setTimeout(function () { return _this.setState({ blinking: false }); }, 150);
});
};
Input.prototype.setSelectionRange = function (start, end) {
var input = this.input;
if (!input) {
throw new Error('Cannot call "setSelectionRange" on unmounted Input');
}
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(start, end);
// tslint:disable-next-line:no-any
}
else if (input.createTextRange) {
// tslint:disable-next-line:no-any
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
};
Input.prototype.render = function () {
var _a = this.props, width = _a.width, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, align = _a.align, onChange = _a.onChange, rest = tslib_1.__rest(_a, ["width", "leftIcon", "rightIcon", "align", "onChange"]);
var hasLeftIcon = !!leftIcon;
var hasRightIcon = !!rightIcon;
return (React.createElement(InputView_1.InputWrapper, { style: { width: this.props.width } },
React.createElement(InputView_1.InputStyledView, tslib_1.__assign({}, rest, { refInput: this.refInput, hasLeftIcon: hasLeftIcon, hasRightIcon: hasRightIcon, style: {
textAlign: align
}, onChange: this.handleChange })),
this.renderPlaceholder(),
hasLeftIcon && React.createElement(InputView_1.InputLeftIcon, null, this.renderIcon(leftIcon)),
hasRightIcon && React.createElement(InputView_1.InputRightIcon, null, this.renderIcon(rightIcon))));
};
Input.prototype.renderIcon = function (icon) {
return icon || null;
};
Input.prototype.renderPlaceholder = function () {
var placeholder = null;
if (this.state.polyfillPlaceholder && this.props.placeholder && !this.props.value) {
placeholder = (React.createElement("div", { style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder));
}
return placeholder;
};
Input.defaultProps = {
size: 'small',
width: 250
};
return Input;
}(React.Component));
exports.default = Input;
//# sourceMappingURL=Input.js.map