@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
122 lines • 7.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib-commonjs/Utilities");
var useFloatingSuggestionItems_1 = require("../../../UnifiedPicker/hooks/useFloatingSuggestionItems");
var styles = require("./DefaultEditingItem.scss");
/**
* Wrapper around an item in a selection well that renders an item with a context menu for
* replacing that item with another item.
*/
exports.DefaultEditingItemInner = function (props) {
var _a, _b;
var editingInput = React.useRef();
var editingFloatingPicker = React.createRef();
var _c = React.useState([]), editingSuggestions = _c[0], setEditingSuggestions = _c[1];
var _d = React.useState(''), inputValue = _d[0], setInputValue = _d[1];
var item = props.item, onEditingComplete = props.onEditingComplete, getSuggestions = props.getSuggestions, onRemoveItem = props.onRemoveItem, createGenericItem = props.createGenericItem, getEditingItemText = props.getEditingItemText, pickerSuggestionsProps = props.pickerSuggestionsProps;
var _e = useFloatingSuggestionItems_1.useFloatingSuggestionItems(editingSuggestions, (_a = pickerSuggestionsProps) === null || _a === void 0 ? void 0 : _a.footerItemsProps, (_b = pickerSuggestionsProps) === null || _b === void 0 ? void 0 : _b.headerItemsProps), focusItemIndex = _e.focusItemIndex, setFocusItemIndex = _e.setFocusItemIndex, suggestionItems = _e.suggestionItems, footerItemIndex = _e.footerItemIndex, footerItems = _e.footerItems, headerItemIndex = _e.headerItemIndex, headerItems = _e.headerItems, selectPreviousSuggestion = _e.selectPreviousSuggestion, selectNextSuggestion = _e.selectNextSuggestion;
React.useEffect(function () {
var itemText = getEditingItemText(props.item);
setEditingSuggestions(getSuggestions(itemText));
if (editingInput.current) {
editingInput.current.value = itemText;
setInputValue(itemText);
editingInput.current.focus();
}
setFocusItemIndex(0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // We only want to run this once
var _renderEditingSuggestions = function () {
var FloatingPicker = props.onRenderFloatingPicker;
if (!FloatingPicker) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(FloatingPicker, { componentRef: editingFloatingPicker, onSuggestionSelected: _onSuggestionSelected, targetElement: editingInput.current, onRemoveSuggestion: _onRemoveItem, onFloatingSuggestionsDismiss: props.onDismiss, suggestions: suggestionItems, selectedSuggestionIndex: focusItemIndex, selectedHeaderIndex: headerItemIndex, selectedFooterIndex: footerItemIndex, pickerSuggestionsProps: pickerSuggestionsProps }));
};
var _onInputBlur = React.useCallback(function (ev) {
if (editingFloatingPicker.current) {
var target = ev.relatedTarget;
// We don't want to exit out if the user has clicked on a dropdown suggestion
if (target === null || target.className.indexOf('ms-FloatingSuggestionsItem-itemButton') === -1) {
if (focusItemIndex >= 0) {
_onSuggestionSelected(ev, suggestionItems[focusItemIndex]);
}
else if (createGenericItem) {
onEditingComplete(item, createGenericItem(inputValue));
}
// else, we come out of editing mode
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps -- these are the only dependencies which matter
[suggestionItems, focusItemIndex, item, createGenericItem, inputValue, onEditingComplete, editingFloatingPicker]);
var _onInputChange = React.useCallback(function (ev) {
var value = ev.target.value;
setInputValue(value);
if (value === '') {
if (onRemoveItem) {
onRemoveItem(item);
}
}
else {
setEditingSuggestions(getSuggestions(value));
}
}, [onRemoveItem, getSuggestions, item]);
var _onInputKeyDown = React.useCallback(function (ev) {
var keyCode = ev.which;
switch (keyCode) {
case Utilities_1.KeyCodes.backspace:
case Utilities_1.KeyCodes.del:
ev.stopPropagation();
break;
case Utilities_1.KeyCodes.enter:
case Utilities_1.KeyCodes.tab:
if (!ev.shiftKey && !ev.ctrlKey && (focusItemIndex >= 0 || footerItemIndex >= 0 || headerItemIndex >= 0)) {
ev.preventDefault();
ev.stopPropagation();
if (focusItemIndex >= 0) {
// Get the focused element and add it to selectedItemsList
_onSuggestionSelected(ev, suggestionItems[focusItemIndex]);
}
else if (footerItemIndex >= 0) {
// execute the footer action
footerItems[footerItemIndex].onExecute();
}
else if (headerItemIndex >= 0) {
// execute the header action
headerItems[headerItemIndex].onExecute();
}
}
break;
case Utilities_1.KeyCodes.up:
ev.preventDefault();
ev.stopPropagation();
selectPreviousSuggestion();
break;
case Utilities_1.KeyCodes.down:
ev.preventDefault();
ev.stopPropagation();
selectNextSuggestion();
break;
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps -- these are the only dependencies which matter
[suggestionItems, focusItemIndex, footerItems, footerItemIndex, headerItems, headerItemIndex]);
var _onSuggestionSelected = React.useCallback(function (ev, itemProps) {
onEditingComplete(item, itemProps.item);
}, [onEditingComplete, item]);
var _onRemoveItem = React.useCallback(function (ev, itemProps) {
if (onRemoveItem) {
onRemoveItem(itemProps.item);
}
}, [onRemoveItem]);
var itemId = Utilities_1.getId();
var nativeProps = Utilities_1.getNativeProps(props, Utilities_1.inputProperties);
return (React.createElement("span", { "aria-labelledby": 'editingItemPersona-' + itemId, className: Utilities_1.css('ms-EditingItem', styles.editingContainer) },
React.createElement("input", tslib_1.__assign({}, nativeProps, { ref: editingInput, autoCapitalize: 'off', autoComplete: 'off', onChange: _onInputChange, onKeyDown: _onInputKeyDown, onBlur: _onInputBlur, "data-lpignore": true, className: styles.editingInput, id: itemId })),
_renderEditingSuggestions()));
};
exports.DefaultEditingItem = function (outerProps) { return function (innerProps) { return React.createElement(exports.DefaultEditingItemInner, tslib_1.__assign({}, outerProps, innerProps)); }; };
//# sourceMappingURL=DefaultEditingItem.js.map