@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
28 lines • 2.08 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
// `extends unknown` to trick the parser into parsing as a type decl instead of a jsx tag
export var EditableItem = function (editableItemProps) {
return React.memo(function (selectedItemProps) {
var getIsEditing = editableItemProps.getIsEditing, onEditingStarted = editableItemProps.onEditingStarted, onEditingCompleted = editableItemProps.onEditingCompleted, onEditingDismissed = editableItemProps.onEditingDismissed, onClick = editableItemProps.onClick;
var onItemChange = selectedItemProps.onItemChange, item = selectedItemProps.item, index = selectedItemProps.index;
var isEditing = getIsEditing(item, index);
var ItemComponent = editableItemProps.itemComponent;
var EditingItemComponent = editableItemProps.editingItemComponent;
var onTrigger = React.useCallback(function () { return onEditingStarted(item, index); }, [index, item, onEditingStarted]);
var onEditingComplete = React.useCallback(function (_oldItem, newItem) {
var _a;
(_a = onItemChange) === null || _a === void 0 ? void 0 : _a(newItem, index);
onEditingCompleted(item, index);
}, [index, item, onEditingCompleted, onItemChange]);
var onDismiss = React.useCallback(function () {
var _a;
(_a = onEditingDismissed) === null || _a === void 0 ? void 0 : _a(item, index);
}, [index, item, onEditingDismissed]);
var onItemClicked = React.useCallback(function (ev) {
var _a;
(_a = onClick) === null || _a === void 0 ? void 0 : _a(ev, item, index);
}, [index, item, onClick]);
return isEditing ? (React.createElement(EditingItemComponent, { item: selectedItemProps.item, onEditingComplete: onEditingComplete, onDismiss: onDismiss, createGenericItem: selectedItemProps.createGenericItem })) : (React.createElement(ItemComponent, __assign({}, selectedItemProps, { onTrigger: onTrigger, onClick: onItemClicked })));
});
};
//# sourceMappingURL=EditableItem.js.map