reblend-ui/cjs/Tabs.js

Utilities for creating robust overlay components

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _reblendjs = require("reblendjs");
var Reblend = _reblendjs;
var _uncontrollable = require("uncontrollable");
var _TabContext = require("./TabContext");
var _SelectableContext = require("./SelectableContext");
var _TabPanel = require("./TabPanel");
const Tabs = class
  /* @Reblend: Transformed from function to class */
extends Reblend.Reblend {
  static ELEMENT_NAME = "Tabs";
  constructor() {
    super();
  }
  async initState() {
    const {
      id: userId,
      generateChildId: generateCustomChildId,
      onSelect: propsOnSelect,
      activeKey: propsActiveKey,
      defaultActiveKey,
      transition,
      mountOnEnter,
      unmountOnExit,
      children
    } = this.props;
    this.state.userId = userId;
    this.state.generateCustomChildId = generateCustomChildId;
    this.state.propsOnSelect = propsOnSelect;
    this.state.propsActiveKey = propsActiveKey;
    this.state.defaultActiveKey = defaultActiveKey;
    this.state.transition = transition;
    this.state.mountOnEnter = mountOnEnter;
    this.state.unmountOnExit = unmountOnExit;
    this.state.children = children;
    const [activeKey, onSelect] = _uncontrollable.useUncontrolledProp.bind(this)(this.state.propsActiveKey, this.state.defaultActiveKey, this.state.propsOnSelect);
    this.state.activeKey = activeKey;
    this.state.onSelect = onSelect;
    const generatedId = _reblendjs.useId.bind(this)();
    this.state.generatedId = generatedId;
    const id = this.state.userId ?? this.state.generatedId;
    this.state.id = id;
    const generateChildId = _reblendjs.useMemo.bind(this)(() => this.state.generateCustomChildId || ((key, type) => this.state.id ? `${this.state.id}-${type}-${key}` : null), "generateChildId", (() => [this.state.id, this.state.generateCustomChildId]).bind(this));
    this.state.generateChildId = generateChildId;
    const tabContext = _reblendjs.useMemo.bind(this)(() => ({
      onSelect: this.state.onSelect,
      activeKey: this.state.activeKey,
      transition: this.state.transition,
      mountOnEnter: this.state.mountOnEnter || false,
      unmountOnExit: this.state.unmountOnExit || false,
      getControlledId: key => this.state.generateChildId(key, 'pane'),
      getControllerId: key => this.state.generateChildId(key, 'tab')
    }), "tabContext", (() => [this.state.onSelect, this.state.activeKey, this.state.transition, this.state.mountOnEnter, this.state.unmountOnExit, this.state.generateChildId]).bind(this));
    this.state.tabContext = tabContext;
  }
  async initProps(props) {
    this.props = {};
    this.props = props;
  }
  async html() {
    return Reblend.Reblend.construct.bind(this)(_TabContext.default.Provider, {
      value: this.state.tabContext
    }, Reblend.Reblend.construct.bind(this)(_SelectableContext.default.Provider, {
      value: this.state.onSelect || null
    }, this.state.children));
  }
};
Tabs.Panel = _TabPanel.default;
var _default = exports.default = Tabs;