All files / src/segment SegmentMultiple.tsx

40% Statements 8/20
38.46% Branches 5/13
30% Functions 3/10
42.11% Lines 8/19

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