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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useContext } from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
import { B as Badge } from "./badge2.js";
const TabbarContext = React__default.createContext(null);
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", icon: null, value: "", dot: false, max: 99, top: "0", right: "5" });
const TabbarItem = (props) => {
  const ctx = useContext(TabbarContext);
  const _a = Object.assign(Object.assign({}, defaultProps), props), {
    className,
    style,
    title,
    icon,
    value,
    dot,
    max,
    top,
    right,
    // @ts-ignore
    index
  } = _a, rest = __rest(_a, ["className", "style", "title", "icon", "value", "dot", "max", "top", "right", "index"]);
  const active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
  const classPrefix = "nut-tabbar-item";
  const tabbarItemClass = classNames(classPrefix, {
    [`${classPrefix}-active`]: active
  }, className);
  const boxPrefix = `${classPrefix}-icon-box`;
  const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
    [`${boxPrefix}-large`]: !icon
  });
  const badgeProps = {
    value,
    dot,
    max,
    top,
    right,
    color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
  };
  return React__default.createElement("div", Object.assign({ className: tabbarItemClass, style: Object.assign({ color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor }, style), onClick: () => ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index) }, rest), icon ? React__default.createElement(
    React__default.Fragment,
    null,
    React__default.createElement(
      Badge,
      Object.assign({}, badgeProps),
      React__default.createElement("div", { className: boxPrefix }, icon)
    ),
    React__default.createElement("div", { className: titleClass }, title)
  ) : React__default.createElement(
    Badge,
    Object.assign({}, badgeProps),
    React__default.createElement("div", { className: titleClass }, title)
  ));
};
export {
  TabbarItem as T,
  TabbarContext as a
};