office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
198 lines (196 loc) • 7.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../../Utilities");
var SELECTION_FORWARD = 'forward';
var SELECTION_BACKWARD = 'backward';
var BaseAutoFill = (function (_super) {
tslib_1.__extends(BaseAutoFill, _super);
function BaseAutoFill(props) {
var _this = _super.call(this, props) || this;
_this._autoFillEnabled = true;
_this._value = '';
_this.state = {
displayValue: props.defaultVisibleValue === null ? '' : props.defaultVisibleValue
};
return _this;
}
Object.defineProperty(BaseAutoFill.prototype, "cursorLocation", {
get: function () {
if (this._inputElement) {
var inputElement = this._inputElement;
if (inputElement.selectionDirection !== SELECTION_FORWARD) {
return inputElement.selectionEnd;
}
else {
return inputElement.selectionStart;
}
}
else {
return -1;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseAutoFill.prototype, "isValueSelected", {
get: function () {
return this.inputElement.selectionStart !== this.inputElement.selectionEnd;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseAutoFill.prototype, "value", {
get: function () {
return this._value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseAutoFill.prototype, "selectionStart", {
get: function () {
return this._inputElement ? this._inputElement.selectionStart : -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseAutoFill.prototype, "selectionEnd", {
get: function () {
return this._inputElement ? this._inputElement.selectionEnd : -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseAutoFill.prototype, "inputElement", {
get: function () {
return this._inputElement;
},
enumerable: true,
configurable: true
});
BaseAutoFill.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.updateValueInWillReceiveProps) {
var newValue = this.props.updateValueInWillReceiveProps();
if (newValue !== null) {
this._value = newValue;
}
}
if (this._autoFillEnabled && this._doesTextStartWith(nextProps.suggestedDisplayValue, this._value)) {
this.setState({ displayValue: nextProps.suggestedDisplayValue });
}
};
BaseAutoFill.prototype.componentDidUpdate = function () {
var value = this._value;
var _a = this.props, defaultVisibleValue = _a.defaultVisibleValue, suggestedDisplayValue = _a.suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate = _a.shouldSelectFullInputValueInComponentDidUpdate;
var differenceIndex = 0;
if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) {
var shouldSelectFullRange = false;
if (shouldSelectFullInputValueInComponentDidUpdate) {
shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();
}
if (shouldSelectFullRange) {
this._inputElement.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
}
else {
while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {
differenceIndex++;
}
if (differenceIndex > 0) {
this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
}
}
}
};
BaseAutoFill.prototype.render = function () {
var displayValue = this.state.displayValue;
var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties);
return React.createElement("input", tslib_1.__assign({}, nativeProps, { ref: this._resolveRef('_inputElement'), value: displayValue, autoCapitalize: 'off', autoComplete: 'off', onChange: this._onChange, onKeyDown: this._onKeyDown, onClick: this.props.onClick ? this.props.onClick : this._onClick }));
};
BaseAutoFill.prototype.focus = function () {
this._inputElement.focus();
};
BaseAutoFill.prototype.clear = function () {
this._autoFillEnabled = true;
this._updateValue('');
this._inputElement.setSelectionRange(0, 0);
};
BaseAutoFill.prototype._onClick = function () {
if (this._value && this._value !== '' && this._autoFillEnabled) {
this._autoFillEnabled = false;
}
};
BaseAutoFill.prototype._onKeyDown = function (ev) {
if (this.props.onKeyDown) {
this.props.onKeyDown(ev);
}
switch (ev.which) {
case Utilities_1.KeyCodes.backspace:
this._autoFillEnabled = false;
break;
case Utilities_1.KeyCodes.left:
if (this._autoFillEnabled) {
this._autoFillEnabled = false;
}
break;
case Utilities_1.KeyCodes.right:
if (this._autoFillEnabled) {
this._autoFillEnabled = false;
}
break;
default:
if (!this._autoFillEnabled) {
if (this.props.enableAutoFillOnKeyPress.indexOf(ev.which) !== -1) {
this._autoFillEnabled = true;
}
}
break;
}
};
BaseAutoFill.prototype._onChange = function (ev) {
var value = ev.target.value;
if (value && ev.target.selectionStart === value.length && !this._autoFillEnabled && value.length > this._value.length) {
this._autoFillEnabled = true;
}
this._updateValue(value);
};
BaseAutoFill.prototype._notifyInputChange = function (newValue) {
if (this.props.onInputValueChange) {
this.props.onInputValueChange(newValue);
}
};
BaseAutoFill.prototype._updateValue = function (newValue) {
var _this = this;
this._value = newValue;
var displayValue = newValue;
if (this.props.suggestedDisplayValue &&
this._doesTextStartWith(this.props.suggestedDisplayValue, displayValue)
&& this._autoFillEnabled) {
displayValue = this.props.suggestedDisplayValue;
}
this.setState({
displayValue: newValue
}, function () { return _this._notifyInputChange(newValue); });
};
BaseAutoFill.prototype._doesTextStartWith = function (text, startWith) {
if (!text || !startWith) {
return false;
}
return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;
};
return BaseAutoFill;
}(Utilities_1.BaseComponent));
BaseAutoFill.defaultProps = {
enableAutoFillOnKeyPress: [Utilities_1.KeyCodes.down, Utilities_1.KeyCodes.up]
};
tslib_1.__decorate([
Utilities_1.autobind
], BaseAutoFill.prototype, "_onClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], BaseAutoFill.prototype, "_onKeyDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], BaseAutoFill.prototype, "_onChange", null);
exports.BaseAutoFill = BaseAutoFill;
//# sourceMappingURL=BaseAutoFill.js.map