pouncejs/dist/esm/components/Tabs/TabPanel.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { TabPanel as ReachTabPanel, useTabsContext } from '@reach/tabs';
import Box from '../Box';

var TabPanel = function TabPanel(_ref) {
  var index = _ref.index,
      _ref$lazy = _ref.lazy,
      lazy = _ref$lazy === void 0 ? false : _ref$lazy,
      _ref$unmountWhenInact = _ref.unmountWhenInactive,
      unmountWhenInactive = _ref$unmountWhenInact === void 0 ? false : _ref$unmountWhenInact,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["index", "lazy", "unmountWhenInactive", "children"]);

  var _useTabsContext = useTabsContext(),
      selectedIndex = _useTabsContext.selectedIndex;

  var isActive = selectedIndex === index;
  var wasActiveRef = React.useRef(isActive);
  React.useEffect(function () {
    if (isActive) {
      wasActiveRef.current = true;
    }
  }, [isActive]);
  var shouldRender = !lazy || isActive || wasActiveRef.current && !unmountWhenInactive;
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: ReachTabPanel,
    tabIndex: -1,
    outline: "none"
  }, rest), shouldRender ? children : null);
};

export default TabPanel;