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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 1x 1x 1x 1x 7x 7x | import React from "react"; import classNames from "classnames"; import { ControlledProps, useDefaultValue } from "../form/controlled"; import { SegmentOption } from "./SegmentOption"; import { Combine, StyledProps } from "../_type"; import { Button } from "../button"; import { useConfig } from "../_util/config-context"; import { SegmentGroup, SegmentGroupItem } from "./SegmentGroup"; export interface SegmentMultipleProps extends Combine<StyledProps, ControlledProps<string[]>> { options?: SegmentOption[]; /** * 分组 */ groups?: { [groupKey: string]: React.ReactNode; }; /** * 是否为无边框样式 * @default false */ rimless?: boolean; } export function SegmentMultiple(props: SegmentMultipleProps) { const { value, onChange, groups, options } = useDefaultValue(props); const valueSet = new Set<string>(value); Iif (groups) { return ( <SegmentGroup> {Object.entries(groups).map(([key, name]) => { const subOptions = options.filter(i => i.groupKey === key); return ( <SegmentGroupItem name={name} key={key}> <SegmentMain {...props} valueSet={valueSet} options={subOptions} allOptions={options} value={value} onChange={onChange} /> </SegmentGroupItem> ); })} </SegmentGroup> ); } return ( <SegmentMain {...props} valueSet={valueSet} value={value} onChange={onChange} /> ); } function SegmentMain({ onChange, rimless, options, style, className, // 兼容分组 valueSet, allOptions = options, }: SegmentMultipleProps & { valueSet: Set<string>; allOptions?: SegmentMultipleProps["options"]; }) { const { classPrefix } = useConfig(); return ( <div className={classNames(`${classPrefix}-segment`, className, { [`${classPrefix}-segment--rimless`]: rimless, })} style={style} > {options.map(option => ( <Button key={option.value} disabled={option.disabled} tooltip={option.tooltip} className={classNames({ "is-selected": valueSet.has(option.value), })} onClick={ option.disabled ? null : event => { let newValue: string[]; // 之前已经选中,新值排除此值 if (valueSet.has(option.value)) { newValue = allOptions .filter(x => x !== option && valueSet.has(x.value)) .map(x => x.value); } // 之前没有选中,新值包含次值 else { newValue = allOptions .filter(x => x === option || valueSet.has(x.value)) .map(x => x.value); } onChange(newValue, { event }); } } > {option.text || option.value} </Button> ))} </div> ); } SegmentMultiple.defaultLabelAlign = "middle"; |