office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
77 lines • 4.03 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { BaseComponent, getId, getNativeProps, inputProperties, css, createRef } from '../../../../Utilities';
import * as stylesImport from './EditingItem.scss';
// tslint:disable-next-line:no-any
var styles = stylesImport;
var EditingItem = /** @class */ (function (_super) {
tslib_1.__extends(EditingItem, _super);
function EditingItem(props) {
var _this = _super.call(this, props) || this;
_this._editingFloatingPicker = createRef();
_this._renderEditingSuggestions = function () {
var onRenderFloatingPicker = _this._onRenderFloatingPicker;
return onRenderFloatingPicker(tslib_1.__assign({ componentRef: _this._editingFloatingPicker, onChange: _this._onSuggestionSelected, inputElement: _this._editingInput, selectedItems: [] }, _this._floatingPickerProps));
};
_this._resolveInputRef = function (ref) {
_this._editingInput = ref;
_this.forceUpdate(function () {
_this._editingInput.focus();
});
};
_this._onInputClick = function () {
_this._editingFloatingPicker.current && _this._editingFloatingPicker.current.showPicker(true /*updatevalue*/);
};
_this._onInputBlur = function (ev) {
if (_this._editingFloatingPicker.current && ev.relatedTarget !== null) {
var target = ev.relatedTarget;
if (target.className.indexOf('ms-Suggestions-itemButton') === -1 &&
target.className.indexOf('ms-Suggestions-sectionButton') === -1) {
_this._editingFloatingPicker.current.forceResolveSuggestion();
}
}
};
_this._onInputChange = function (ev) {
var value = ev.target.value;
if (value === '') {
if (_this.props.onRemoveItem) {
_this.props.onRemoveItem();
}
}
else {
_this._editingFloatingPicker.current && _this._editingFloatingPicker.current.onQueryStringChanged(value);
}
};
_this._onSuggestionSelected = function (item) {
_this.props.onEditingComplete(_this.props.item, item);
};
_this.state = { contextualMenuVisible: false };
_this._onRenderFloatingPicker = _this.props.onRenderFloatingPicker;
_this._floatingPickerProps = _this.props.floatingPickerProps;
return _this;
}
EditingItem.prototype.componentDidMount = function () {
var getEditingItemText = this.props.getEditingItemText;
var itemText = getEditingItemText(this.props.item);
this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText);
this._editingInput.value = itemText;
this._editingInput.focus();
};
EditingItem.prototype.render = function () {
var itemId = getId();
var nativeProps = getNativeProps(this.props, inputProperties);
return (React.createElement("div", { "aria-labelledby": 'editingItemPersona-' + itemId, className: css('ms-EditingItem', styles.editingContainer) },
React.createElement("input", tslib_1.__assign({}, nativeProps, { ref: this._resolveInputRef, autoCapitalize: 'off', autoComplete: 'off', onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onBlur: this._onInputBlur, onClick: this._onInputClick, "data-lpignore": true, className: styles.editingInput, id: itemId })),
this._renderEditingSuggestions()));
};
EditingItem.prototype._onInputKeyDown = function (ev) {
if (ev.which === 8 /* backspace */ || ev.which === 46 /* del */) {
ev.stopPropagation();
}
};
return EditingItem;
}(BaseComponent));
export { EditingItem };
//# sourceMappingURL=EditingItem.js.map