design-system-simplefi
Version:
Design System for SimpleFi Applications
65 lines • 3.38 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { isNotUndefined } from 'ramda-adjunct';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import usePortal from 'react-cool-portal';
import { useCalculatePortaPlacement } from './useCalculatePortalPlacement';
import { PortalPlacements } from './useCalculatePortalPlacements.enums';
import DropdownPane from './components/DropdownPane';
import { DSContext } from '../theme/DSProvider/DSProvider';
import { pxToRem } from '../utils';
var defaultTooltipPopupDimensions = { space: 0 };
export var useDropdown = function (parentRef, _a) {
var _b = _a.defaultIsPaneDisplayed, defaultIsPaneDisplayed = _b === void 0 ? false : _b, _c = _a.paneWidth, paneWidth = _c === void 0 ? 40 : _c, onClickOut = _a.onClickOut, onShow = _a.onShow, onHide = _a.onHide, _d = _a.placement, placement = _d === void 0 ? PortalPlacements.bottom : _d, _e = _a.isElevated, isElevated = _e === void 0 ? false : _e, _f = _a.hasInternalShowHide, hasInternalShowHide = _f === void 0 ? true : _f;
var portalsContainerId = useContext(DSContext).portalsContainerId;
var _g = usePortal({
defaultShow: defaultIsPaneDisplayed,
containerId: portalsContainerId,
autoRemoveContainer: false,
internalShowHide: hasInternalShowHide,
onShow: onShow,
onHide: onHide,
}), Portal = _g.Portal, isShow = _g.isShow, show = _g.show, hide = _g.hide, toggle = _g.toggle;
var _h = useState(__assign({ width: paneWidth, minWidth: 'max-content', zIndex: 20000 }, defaultTooltipPopupDimensions)), style = _h[0], setStyle = _h[1];
var getPlacementStyles = useCalculatePortaPlacement(parentRef, __assign({ placement: placement, width: paneWidth }, defaultTooltipPopupDimensions));
useEffect(function () {
if (isShow || defaultIsPaneDisplayed) {
setStyle(getPlacementStyles());
}
}, [getPlacementStyles, isShow, defaultIsPaneDisplayed]);
var handleOnClickOut = useCallback(function () {
if (isNotUndefined(onClickOut)) {
onClickOut();
}
hide();
}, [hide, onClickOut]);
return {
handleToggleDropdown: toggle,
handleShowDropdown: show,
handleHideDropdown: hide,
isPaneDisplayed: isShow,
Pane: function (_a) {
var children = _a.children;
var width = style.width, left = style.left, top = style.top, right = style.right, bottom = style.bottom, zIndex = style.zIndex;
return (React.createElement(Portal, null,
React.createElement(DropdownPane, { isElevated: isElevated, style: {
width: pxToRem(width),
left: pxToRem(left),
right: pxToRem(right),
top: pxToRem(top),
bottom: pxToRem(bottom),
zIndex: zIndex || 2000,
}, onClickOut: handleOnClickOut }, children)));
},
};
};
//# sourceMappingURL=useDropdown.js.map