@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
100 lines • 6.28 kB
JavaScript
"use strict";
var _this = this;
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 Persona_1 = require("office-ui-fabric-react/lib-commonjs/Persona");
var SelectedPersona_styles_1 = require("./SelectedPersona.styles");
var Button_1 = require("office-ui-fabric-react/lib-commonjs/Button");
var react_hooks_1 = require("@uifabric/react-hooks");
var getClassNames = Utilities_1.classNamesFunction();
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
/**
* A selected persona with support for item removal and expansion.
*
* To use the removal / expansion, bind isValid / canExpand / getExpandedItems
* when passing the onRenderItem to your SelectedItemsList
*/
var SelectedPersonaInner = React.memo(function (props) {
var item = props.item, onRemoveItem = props.onRemoveItem, onItemChange = props.onItemChange, removeButtonAriaLabel = props.removeButtonAriaLabel, index = props.index, selected = props.selected, isValid = props.isValid, canExpand = props.canExpand, getExpandedItems = props.getExpandedItems, styles = props.styles, theme = props.theme, dragDropHelper = props.dragDropHelper, dragDropEvents = props.dragDropEvents, eventsToRegister = props.eventsToRegister;
var itemId = react_hooks_1.useId();
var _a = React.useState(false), isDropping = _a[0], setIsDropping = _a[1];
var _b = React.useState(''), droppingClassNames = _b[0], setDroppingClassNames = _b[1];
var rootRef = React.useRef(null);
React.useEffect(function () {
var _a;
var _updateDroppingState = function (newValue, event) {
if (!newValue) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(item, event);
}
}
else if (dragDropEvents.onDragEnter) {
setDroppingClassNames(dragDropEvents.onDragEnter(item, event));
}
if (isDropping !== newValue) {
setIsDropping(newValue);
}
};
var dragDropOptions = tslib_1.__assign(tslib_1.__assign({ eventMap: eventsToRegister, selectionIndex: index, context: { data: item, index: index } }, dragDropEvents), { updateDropState: _updateDroppingState });
var events = new Utilities_1.EventGroup(_this);
var subscription = (_a = dragDropHelper) === null || _a === void 0 ? void 0 : _a.subscribe(rootRef.current, events, dragDropOptions);
return function () {
var _a;
(_a = subscription) === null || _a === void 0 ? void 0 : _a.dispose();
events.dispose();
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps -- this is the only dependency which matters
[dragDropHelper]);
var isDraggable = React.useMemo(function () { return (dragDropEvents && dragDropEvents.canDrag ? !!dragDropEvents.canDrag() : undefined); }, [dragDropEvents]);
var droppingClassName = React.useMemo(function () { return (isDropping ? droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : ''); }, [isDropping, droppingClassNames]);
var onExpandClicked = React.useCallback(function (ev) {
ev.stopPropagation();
ev.preventDefault();
if (onItemChange && getExpandedItems) {
getExpandedItems(item)
.then(function (value) {
onItemChange(value, index);
})
.catch(function (error) {
// No op
});
}
}, [onItemChange, getExpandedItems, item, index]);
var onRemoveClicked = React.useCallback(function (ev) {
ev.stopPropagation();
ev.preventDefault();
onRemoveItem && onRemoveItem();
}, [onRemoveItem]);
var classNames = React.useMemo(function () {
return getClassNames(styles, {
isSelected: selected || false,
isValid: isValid ? isValid(item) : true,
theme: theme,
droppingClassName: droppingClassName,
});
},
// TODO: evaluate whether to add deps on `item` and `styles`
// eslint-disable-next-line react-hooks/exhaustive-deps
[selected, isValid, theme]);
var coinProps = {};
return (React.createElement("div", tslib_1.__assign({ ref: rootRef }, (typeof isDraggable === 'boolean'
? {
'data-is-draggable': isDraggable,
draggable: isDraggable,
}
: {}), { onContextMenu: props.onContextMenu, onClick: props.onClick, className: Utilities_1.css('ms-PickerPersona-container', classNames.personaContainer), "data-is-focusable": true, "data-is-sub-focuszone": true, "data-selection-index": index, role: 'listitem', "aria-labelledby": 'selectedItemPersona-' + itemId }),
React.createElement("div", { hidden: !canExpand || !canExpand(item) || !getExpandedItems },
React.createElement(Button_1.IconButton, { onClick: onExpandClicked, iconProps: { iconName: 'Add', style: { fontSize: '14px' } }, className: Utilities_1.css('ms-PickerItem-removeButton', classNames.expandButton), styles: classNames.subComponentStyles.actionButtonStyles(), ariaLabel: removeButtonAriaLabel })),
React.createElement("div", { className: Utilities_1.css(classNames.personaWrapper) },
React.createElement("div", { className: Utilities_1.css('ms-PickerItem-content', classNames.itemContentWrapper), id: 'selectedItemPersona-' + itemId },
React.createElement(Persona_1.Persona, tslib_1.__assign({}, item, { size: Persona_1.PersonaSize.size32, styles: classNames.subComponentStyles.personaStyles, coinProps: coinProps }))),
React.createElement(Button_1.IconButton, { onClick: onRemoveClicked, iconProps: { iconName: 'Cancel', style: { fontSize: '14px' } }, className: Utilities_1.css('ms-PickerItem-removeButton', classNames.removeButton), styles: classNames.subComponentStyles.actionButtonStyles(), ariaLabel: removeButtonAriaLabel }))));
});
// export casting back to typeof inner to preserve generics.
exports.SelectedPersona = Utilities_1.styled(SelectedPersonaInner, SelectedPersona_styles_1.getStyles, undefined, {
scope: 'SelectedPersona',
});
//# sourceMappingURL=SelectedPersona.js.map