preact-arco-design/es/Tabs/tab-content.js

Arco Design React UI Library.

import React, { useContext } from "preact/compat";
import cs from "../_util/classNames";
import { TabsContext } from "./tabs";
export default function TabContent(props) {
  var _a;

  var animation = props.animation,
      activeTab = props.activeTab,
      prefixCls = props.prefixCls,
      paneChildren = props.paneChildren,
      direction = props.direction,
      lazyload = props.lazyload,
      destroyOnHide = props.destroyOnHide;
  var activeIndex = paneChildren.findIndex(function (p) {
    return p.key === activeTab;
  });
  var ctxProps = useContext(TabsContext);

  if (paneChildren.every(function (x) {
    return (x === null || x === void 0 ? void 0 : x.props) && (!('children' in x.props) || x.props.children === null);
  })) {
    return null;
  }

  var classNamesContentInner = cs("".concat(prefixCls, "-content-inner"), (_a = {}, _a["".concat(prefixCls, "-animation")] = animation, _a));
  return React.createElement("div", {
    className: "".concat(prefixCls, "-content ").concat(prefixCls, "-content-").concat(direction)
  }, React.createElement("div", {
    className: classNamesContentInner,
    style: {
      marginLeft: "-".concat(activeIndex * 100, "%")
    }
  }, paneChildren.map(function (child, index) {
    var _a;

    var _b = ctxProps.getIdPrefix(index),
        tabpane = _b.tabpane,
        tab = _b.tab;

    var mergedDestroyOnHide = 'destroyOnHide' in child.props ? child.props.destroyOnHide : destroyOnHide;
    var isActive = child.key === activeTab;
    return React.createElement("div", {
      key: child.key,
      className: cs("".concat(prefixCls, "-content-item"), (_a = {}, _a["".concat(prefixCls, "-content-item-active")] = isActive, _a)),
      role: "tabpanel",
      id: tabpane,
      "aria-hidden": isActive ? undefined : true,
      tabIndex: isActive ? 0 : -1,
      "aria-labelledby": tab
    }, activeIndex !== index && mergedDestroyOnHide ? null : React.cloneElement(child, {
      lazyload: lazyload,
      isActive: isActive
    }));
  })));
}