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"; |