@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
36 lines • 4.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Callout_1 = require("office-ui-fabric-react/lib-commonjs/Callout");
var React = require("react");
var FloatingSuggestions_styles_1 = require("./FloatingSuggestions.styles");
var Utilities_1 = require("../../Utilities");
var FloatingSuggestionsList_1 = require("./FloatingSuggestionsList/FloatingSuggestionsList");
exports.BaseFloatingSuggestions = function (props) {
var _a, _b, _c, _d;
var getClassNames = Utilities_1.classNamesFunction();
var classNames = getClassNames(FloatingSuggestions_styles_1.getStyles);
var componentRef = props.componentRef, suggestions = props.suggestions, isSuggestionsVisible = props.isSuggestionsVisible, onSuggestionSelected = props.onSuggestionSelected, onRemoveSuggestion = props.onRemoveSuggestion, onRenderSuggestion = props.onRenderSuggestion, onRenderHeader = props.onRenderHeader, onRenderFooter = props.onRenderFooter, onRenderNoResultFound = props.onRenderNoResultFound, noResultsFoundText = props.noResultsFoundText, maximumSuggestionsToShow = props.maximumSuggestionsToShow, showSuggestionRemoveButton = props.showSuggestionRemoveButton, removeItemButtonAriaLabel = props.removeItemButtonAriaLabel, suggestionsContainerAriaLabel = props.suggestionsContainerAriaLabel, selectedSuggestionIndex = props.selectedSuggestionIndex, suggestionsHeaderText = props.suggestionsHeaderText, onFloatingSuggestionsDismiss = props.onFloatingSuggestionsDismiss, targetElement = props.targetElement, calloutProps = props.calloutProps, pickerWidth = props.pickerWidth, onKeyDown = props.onKeyDown, pickerSuggestionsProps = props.pickerSuggestionsProps, selectedFooterIndex = props.selectedFooterIndex, selectedHeaderIndex = props.selectedHeaderIndex, onSuggestionsShown = props.onSuggestionsShown, onSuggestionsHidden = props.onSuggestionsHidden;
// Picker shown/hidden callback logic
// Ref gate to prevent the onHidden callback from being called the first time
var suggestionsCallbackGate = React.useRef(false);
React.useEffect(function () {
var _a, _b;
if (suggestionsCallbackGate.current || isSuggestionsVisible) {
if (isSuggestionsVisible) {
(_a = onSuggestionsShown) === null || _a === void 0 ? void 0 : _a();
}
else {
(_b = onSuggestionsHidden) === null || _b === void 0 ? void 0 : _b();
}
}
suggestionsCallbackGate.current = true;
}, [isSuggestionsVisible, onSuggestionsShown, onSuggestionsHidden]);
var hidePicker = React.useCallback(function (ev) {
var _a;
(_a = onFloatingSuggestionsDismiss) === null || _a === void 0 ? void 0 : _a(ev);
}, [onFloatingSuggestionsDismiss]);
return (React.createElement("div", { ref: componentRef, className: Utilities_1.css('ms-BasePicker ms-BaseFloatingPicker', classNames.root, props.className ? props.className : '') }, isSuggestionsVisible ? (React.createElement(Callout_1.Callout, tslib_1.__assign({ className: classNames.callout, isBeakVisible: false, gapSpace: 5, target: targetElement, onDismiss: hidePicker, onKeyDown: onKeyDown, directionalHint: Callout_1.DirectionalHint.bottomLeftEdge, directionalHintForRTL: Callout_1.DirectionalHint.bottomRightEdge }, calloutProps),
React.createElement(FloatingSuggestionsList_1.FloatingSuggestionsList, { suggestionItems: suggestions, onItemClick: onSuggestionSelected, onSuggestionRemove: onRemoveSuggestion, showSuggestionRemoveButton: showSuggestionRemoveButton, removeItemAriaLabel: removeItemButtonAriaLabel, onRenderItem: onRenderSuggestion, onRenderHeader: onRenderHeader, onRenderFooter: onRenderFooter, headerItemsProps: (_a = pickerSuggestionsProps) === null || _a === void 0 ? void 0 : _a.headerItemsProps, footerItemsProps: (_b = pickerSuggestionsProps) === null || _b === void 0 ? void 0 : _b.footerItemsProps, onRenderNoResultFound: onRenderNoResultFound, noResultsFoundText: noResultsFoundText, maximumSuggestionsToShow: maximumSuggestionsToShow, suggestionsContainerAriaLabel: suggestionsContainerAriaLabel, selectedSuggestionIndex: selectedSuggestionIndex, selectedFooterIndex: selectedFooterIndex, selectedHeaderIndex: selectedHeaderIndex, suggestionsHeaderText: suggestionsHeaderText, pickerWidth: pickerWidth, suggestionsHeaderContainerAriaLabel: (_c = pickerSuggestionsProps) === null || _c === void 0 ? void 0 : _c.suggestionsHeaderContainerAriaLabel, suggestionsFooterContainerAriaLabel: (_d = pickerSuggestionsProps) === null || _d === void 0 ? void 0 : _d.suggestionsFooterContainerAriaLabel }))) : null));
};
//# sourceMappingURL=FloatingSuggestions.js.map