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> ); } ); |