All files / src/buttonbar ButtonBar.tsx

72.73% Statements 8/11
25% Branches 2/8
33.33% Functions 1/3
72.73% Lines 8/11

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75                                                                      1x   1x 1x   1x     1x     1x 1x                                                   1x  
import React, { forwardRef, Ref } from "react";
import classNames from "classnames";
import warning from "warning";
import { StyledProps } from "../_type";
import { Button } from "../button";
import { useConfig } from "../_util/config-context";
 
export interface ButtonBarItem {
  /* 文案 */
  name: string | JSX.Element;
 
  /* 值 */
  value: number | string;
 
  /* 图标 */
  icon?: string | JSX.Element;
 
  /* 是否可用 */
  disabled?: boolean;
 
  /* 提示 */
  tip?: string;
}
 
export interface ButtonBarProps extends StyledProps {
  /* 列表数据 */
  list: ButtonBarItem[];
 
  /* 选中的按钮 */
  selected?: ButtonBarItem | number | string;
 
  /* 选择后的回调 */
  onSelect?: (value: ButtonBarItem) => void;
}
 
export const ButtonBar = forwardRef(
  (props: ButtonBarProps, ref: Ref<HTMLDivElement>) => {
    const { list, onSelect, className, style } = props;
    let { selected } = props;
 
    const { classPrefix } = useConfig();
 
    // 统一成标量,方便对比
    Iif (selected && typeof selected === "object") {
      selected = selected.value;
    }
    warning(false, "ButtonBar 组件已废弃,请改用 Segment");
    return (
      <div
        ref={ref}
        className={classNames(`${classPrefix}-segment`, className)}
        style={style}
      >
        {list.map((item, index) => (
          <Button
            key={index}
            type="primary"
            title={item.tip}
            className={classNames({
              "is-selected": selected && item.value === selected,
            })}
            disabled={item.disabled}
            onClick={item.disabled ? null : () => onSelect(item)}
          >
            {item.name}
            {item.icon}
          </Button>
        ))}
      </div>
    );
  }
);
 
ButtonBar.displayName = "ButtonBar";