@alifd/meet-react/es/nav/item.js

Fusion Mobile React UI System Component

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { __rest } from "tslib";
import React, { createElement, forwardRef, useContext, Children, cloneElement, isValidElement } from "react";
import classNames from 'classnames';
import { Text } from "@alifd/meet-react-component-one";
import View from '../view';
import Icon from '../icon';
import { isNumber, isString, isValidArray } from '../utils';
import NavContext from './context';
var NavItem = function NavItem(props, ref) {
  var className = props.className,
    label = props.label,
    itemKey = props.itemKey,
    _props$disableSelect = props.disableSelect,
    disableSelect = _props$disableSelect === void 0 ? false : _props$disableSelect,
    _props$level = props.level,
    level = _props$level === void 0 ? 1 : _props$level,
    icon = props.icon,
    iconUri = props.iconUri,
    children = props.children,
    extra = props.extra,
    _props$onClick = props.onClick,
    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
    others = __rest(props, ["className", "label", "itemKey", "disableSelect", "level", "icon", "iconUri", "children", "extra", "onClick"]);
  var ctx = useContext(NavContext);
  var curSelectedKeys = ctx.curSelectedKeys,
    clsPrefix = ctx.clsPrefix,
    size = ctx.size,
    type = ctx.type,
    model = ctx.model,
    direction = ctx.direction,
    onItemSelect = ctx.onItemSelect;
  var selected = itemKey && isValidArray(curSelectedKeys) && curSelectedKeys.includes(itemKey);
  var clses = {
    item: classNames(className, "".concat(clsPrefix, "-item"), "".concat(clsPrefix, "-item--").concat(size), "".concat(clsPrefix, "-item--").concat(type, "-").concat(model), "".concat(clsPrefix, "--").concat(direction, "-item"), "".concat(clsPrefix, "-item--level").concat(level), _defineProperty({}, "".concat(clsPrefix, "-item--").concat(type, "-").concat(model, "--active"), selected)),
    icon: classNames("".concat(clsPrefix, "-item-icon"), "".concat(clsPrefix, "-item-icon--").concat(size), "".concat(clsPrefix, "-item--").concat(type, "-").concat(model, "-icon"), _defineProperty({}, "".concat(clsPrefix, "-item--").concat(type, "-").concat(model, "--active-icon"), selected)),
    label: classNames("".concat(clsPrefix, "-item-label"), "".concat(clsPrefix, "-item-label--").concat(size), "".concat(clsPrefix, "-item--").concat(type, "-").concat(model, "-label"), _defineProperty({}, "".concat(clsPrefix, "-item--").concat(type, "-").concat(model, "--active-label"), selected)),
    extra: "".concat(clsPrefix, "-item-extra-wrapper--").concat(type)
  };
  var onItemClick = function onItemClick(e) {
    if (onClick) {
      onClick(itemKey);
    }
    if (disableSelect) {
      return;
    }
    if (onItemSelect) {
      onItemSelect(itemKey, e);
    }
  };
  var renderLabel = function renderLabel() {
    if (children) {
      return /*#__PURE__*/React.createElement(View, {
        className: "".concat(clsPrefix, "-item-children-wrapper")
      }, Children.map(children, function (child, index) {
        if (isValidElement(child)) {
          return cloneElement(child, {
            key: "mt_nav_item_".concat(index)
          });
        } else if (isString(child) || isNumber(child)) {
          return /*#__PURE__*/React.createElement(Text, {
            className: clses.label,
            numberOfLines: 1
          }, child);
        }
        return null;
      }));
    } else if (isValidElement(label)) {
      return /*#__PURE__*/React.createElement(View, {
        className: clses.label
      }, label);
    } else {
      return /*#__PURE__*/React.createElement(Text, {
        className: clses.label,
        numberOfLines: 1
      }, label);
    }
  };
  var iconCls = icon && icon.props ? icon.props.className : '';
  var iconProps = {};
  if (isString(icon)) {
    iconProps.name = icon;
  } else if (iconUri) {
    iconProps.uri = iconUri;
  }
  return /*#__PURE__*/React.createElement(View, _extends({
    ref: ref
  }, others, {
    className: clses.item,
    onClick: onItemClick
  }), isValidElement(icon) ? cloneElement(icon, {
    className: classNames(clses.icon, iconCls)
  }) : /*#__PURE__*/React.createElement(Icon, _extends({}, others, iconProps, {
    className: clses.icon
  })), renderLabel(), extra ? /*#__PURE__*/React.createElement(View, {
    className: clses.extra
  }, extra) : null);
};
NavItem.displayName = 'Nav.Item';
export default /*#__PURE__*/forwardRef(NavItem);