reblend-ui/cjs/TabPanel.js

Utilities for creating robust overlay components

"use strict";

exports.__esModule = true;
exports.default = void 0;
exports.useTabPanel = useTabPanel;
var _reblendjs = require("reblendjs");
var Reblend = _reblendjs;
var _TabContext = require("./TabContext");
var _SelectableContext = require("./SelectableContext");
var _NoopTransition = require("./NoopTransition");
function useTabPanel({
  active,
  eventKey,
  mountOnEnter,
  transition,
  unmountOnExit,
  role = 'tabpanel',
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...props
}) {
  const [context] = _reblendjs.useContext.bind(this)(_TabContext.default, "context");
  this.state.context = context;
  if (!this.state.context) return [{
    ...props,
    role
  }, {
    eventKey,
    isActive: active,
    mountOnEnter,
    transition,
    unmountOnExit,
    onEnter,
    onEntering,
    onEntered,
    onExit,
    onExiting,
    onExited
  }];
  const {
    activeKey,
    getControlledId,
    getControllerId,
    ...rest
  } = this.state.context;
  this.state.activeKey = activeKey;
  this.state.getControlledId = getControlledId;
  this.state.getControllerId = getControllerId;
  this.state.rest = rest;
  const key = (0, _SelectableContext.makeEventKey)(eventKey);
  this.state.key = key;
  return [{
    ...props,
    role,
    id: this.state.getControlledId(eventKey),
    'aria-labelledby': this.state.getControllerId(eventKey)
  }, {
    eventKey,
    isActive: active == null && this.state.key != null ? (0, _SelectableContext.makeEventKey)(this.state.activeKey) === this.state.key : active,
    transition: transition || this.state.rest.transition,
    mountOnEnter: mountOnEnter != null ? mountOnEnter : this.state.rest.mountOnEnter,
    unmountOnExit: unmountOnExit != null ? unmountOnExit : this.state.rest.unmountOnExit,
    onEnter,
    onEntering,
    onEntered,
    onExit,
    onExiting,
    onExited
  }];
}
/* @Reblend: Transformed from function to class */
const TabPanel = // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
class
  /* @Reblend: Transformed from function to class */
extends Reblend.Reblend {
  static ELEMENT_NAME = "TabPanel";
  constructor() {
    super();
  }
  async initState() {
    const [tabPanelProps, {
      isActive,
      onEnter,
      onEntering,
      onEntered,
      onExit,
      onExiting,
      onExited,
      mountOnEnter,
      unmountOnExit,
      transition: Transition = _NoopTransition.default
    }] = useTabPanel.bind(this)(this.props);
    // We provide an empty the TabContext so `<Nav>`s in `<TabPanel>`s don't
    // conflict with the top level one.
    this.state.tabPanelProps = tabPanelProps;
    this.state.isActive = isActive;
    this.state.onEnter = onEnter;
    this.state.onEntering = onEntering;
    this.state.onEntered = onEntered;
    this.state.onExit = onExit;
    this.state.onExiting = onExiting;
    this.state.onExited = onExited;
    this.state.mountOnEnter = mountOnEnter;
    this.state.unmountOnExit = unmountOnExit;
    this.state.Transition = Transition;
  }
  async initProps({
    as: Component = 'div',
    ref,
    ...props
  }) {
    this.props = {};
    this.props.Component = Component;
    this.props.ref = ref;
    this.props = {
      ...this.props,
      ...props
    };
  }
  async html() {
    return Reblend.Reblend.construct.bind(this)(_TabContext.default.Provider, {
      value: null
    }, Reblend.Reblend.construct.bind(this)(_SelectableContext.default.Provider, {
      value: null
    }, Reblend.Reblend.construct.bind(this)(this.state.Transition, {
      in: this.state.isActive,
      onEnter: this.state.onEnter,
      onEntering: this.state.onEntering,
      onEntered: this.state.onEntered,
      onExit: this.state.onExit,
      onExiting: this.state.onExiting,
      onExited: this.state.onExited,
      mountOnEnter: this.state.mountOnEnter,
      unmountOnExit: this.state.unmountOnExit
    }, Reblend.Reblend.construct.bind(this)(this.props.Component, {
      ...this.state.tabPanelProps,
      ref: this.props.ref,
      hidden: !this.state.isActive,
      "aria-hidden": !this.state.isActive
    }))));
  }
};
TabPanel.displayName = 'TabPanel';
var _default = exports.default = TabPanel;