zarm/es/tab-bar/TabBarItem.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import { createBEM } from '@zarm-design/bem';
import React from 'react';
import Badge from '../badge';
import { ConfigContext } from '../config-provider';
var TabBarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('tab-bar', {
    prefixCls: prefixCls
  });

  var title = props.title,
      icon = props.icon,
      badge = props.badge,
      selected = props.selected,
      _props$activeIcon = props.activeIcon,
      activeIcon = _props$activeIcon === void 0 ? icon : _props$activeIcon,
      onClick = props.onClick,
      itemKey = props.itemKey,
      restProps = _objectWithoutProperties(props, ["title", "icon", "badge", "selected", "activeIcon", "onClick", "itemKey"]);

  var contentRender = (activeIcon || icon) && /*#__PURE__*/React.createElement("div", {
    className: bem('icon')
  }, selected ? activeIcon : icon);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: bem('item', [{
      active: selected
    }]),
    ref: ref,
    onClick: onClick
  }, restProps), badge ? /*#__PURE__*/React.createElement(Badge, badge, contentRender) : contentRender, /*#__PURE__*/React.createElement("div", {
    className: bem('title')
  }, title));
});
TabBarItem.displayName = 'TabBarItem';
export default TabBarItem;