@nutui/nutui-react/dist/esm/Tabbar.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import React__default from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
import { u as usePropsValue } from "./use-props-value.js";
import { a as TabbarContext, T as TabbarItem } from "./tabbaritem2.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: 0, fixed: false, inactiveColor: "", activeColor: "", safeArea: false, onSwitch: (value) => {
} });
const Tabbar = (props) => {
  const { children, defaultValue, value, fixed, activeColor, inactiveColor, safeArea, className, style, onSwitch } = Object.assign(Object.assign({}, defaultProps), props);
  const classPrefix = "nut-tabbar";
  const [selectIndex, setSelectIndex] = usePropsValue({
    value,
    defaultValue,
    finalValue: 0,
    onChange: onSwitch
  });
  return React__default.createElement(
    "div",
    { className: classNames(classPrefix, {
      [`${classPrefix}-fixed`]: fixed
    }, className), style },
    React__default.createElement(
      "div",
      { className: `${classPrefix}-wrap` },
      React__default.createElement(TabbarContext.Provider, { value: {
        selectIndex,
        activeColor,
        inactiveColor,
        handleClick: setSelectIndex
      } }, React__default.Children.map(children, (child, index) => {
        if (!React__default.isValidElement(child))
          return null;
        return React__default.cloneElement(child, Object.assign(Object.assign({}, child.props), { index }));
      }))
    ),
    (fixed || safeArea) && React__default.createElement("div", { className: `${classPrefix}-safe-area` })
  );
};
Tabbar.displayName = "NutTabbar";
Tabbar.Item = TabbarItem;
export {
  Tabbar as default
};