All files / src/tabs TabItem.tsx

100% Statements 5/5
100% Branches 4/4
100% Functions 1/1
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46                              5x         28x 28x 28x 28x                                            
import React, { forwardRef } from "react";
import classNames from "classnames";
import { Icon } from "../icon";
import { useConfig } from "../_util/config-context";
import { callBoth } from "../_util/call-both";
 
export interface TabItemProps {
  label: React.ReactNode;
  actived: boolean;
  disabled: boolean;
  onClose: (evt: React.MouseEvent) => void;
  onClick: (evt: React.MouseEvent) => void;
  render: (children: JSX.Element) => JSX.Element;
}
 
export const TabItem = forwardRef(
  (
    { label, onClick, actived, disabled, onClose, render }: TabItemProps,
    ref: React.Ref<HTMLLIElement>
  ) => {
    const { classPrefix } = useConfig();
    const children = render(<>{label}</>);
    const handleClick = disabled ? null : onClick;
    return (
      <li className={`${classPrefix}-tabs__tabitem`} ref={ref}>
        {React.cloneElement(children, {
          className: classNames(
            `${classPrefix}-tabs__tab`,
            children.props.className,
            {
              "is-active": actived,
              "is-disabled": disabled,
            }
          ),
          onClick: callBoth(handleClick, children.props.onClick),
        })}
        {onClose && (
          <a className={`${classPrefix}-tabs__remove`} onClick={onClose}>
            <Icon type="dismiss" />
          </a>
        )}
      </li>
    );
  }
);