react-dyn-tabs
Version:
React dynamic tabs with full API
40 lines • 1.52 kB
JavaScript
import React, { useLayoutEffect, useRef } from 'react';
import PropTypes from 'prop-types';
export default function Popper(getDeps, props) {
var _getDeps = getDeps(),
createPopper = _getDeps.createPopper,
getPopperMaxHeight = _getDeps.getPopperMaxHeight,
getClassName = _getDeps.getClassName,
clk = _getDeps.clk;
var TabsComponent = props.TabsComponent,
instance = props.instance,
hiddenTabIDs = props.hiddenTabIDs,
btnRef = props.btnRef;
var popperRef = useRef();
var ref = useRef();
ref.current = ref.current || {};
useLayoutEffect(function () {
popperRef.current.style.maxHeight = getPopperMaxHeight(btnRef.current, 15) + 'px';
var popperIns = createPopper(btnRef.current, popperRef.current);
ref.current.popperIns = popperIns;
return function () {
popperIns.destroy();
};
}, []);
useLayoutEffect(function () {
ref.current && ref.current.popperIns && ref.current.popperIns.update();
}, [hiddenTabIDs]);
var _instance$getData = instance.getData(),
selectedTabID = _instance$getData.selectedTabID;
var openedTabIDs = hiddenTabIDs ? hiddenTabIDs.split(',') : [];
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
onClick: clk,
ref: popperRef,
className: getClassName(instance)
}, /*#__PURE__*/React.createElement(TabsComponent, {
selectedTabID: selectedTabID,
openTabIDs: openedTabIDs,
dir: instance.getOption('direction'),
isVertical: true
})));
}