@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
30 lines • 2.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
// `extends unknown` to trick the parser into parsing as a type decl instead of a jsx tag
exports.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, tslib_1.__assign({}, selectedItemProps, { onTrigger: onTrigger, onClick: onItemClicked })));
});
};
//# sourceMappingURL=EditableItem.js.map