All files / src/select NativeSelect.tsx

85% Statements 17/20
71.43% Branches 25/35
77.78% Functions 7/9
85% Lines 17/20

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                  1x 1x 5x 5x 2x   5x   1x             12x 12x                     12x   12x                                       34x   2x 2x                           2x     5x                             33x                        
import React from "react";
import classNames from "classnames";
import { useTranslation } from "../i18n";
import { useDefaultValue } from "../form";
import { useConfig } from "../_util/config-context";
import { SelectProps } from "./SelectProps";
import { SelectOptionWithGroup } from "./SelectOption";
 
function groupBy(options: SelectOptionWithGroup[]): SelectOptionWithGroup[][] {
  const groups = [];
  options.forEach((opt, index) => {
    const { groupKey } = opt;
    if (index === 0 || groupKey !== options[index - 1].groupKey) {
      groups.push([]);
    }
    groups[groups.length - 1].push(opt);
  });
  return groups;
}
 
/**
 * 原生 Select
 */
export function NativeSelect(props: SelectProps) {
  const t = useTranslation();
  const { classPrefix } = useConfig();
  const {
    value,
    onChange,
    options = [],
    groups = {},
    placeholder = t.pleaseSelect,
    disabled,
    size,
    className,
    style,
  } = useDefaultValue(props, null);
 
  return (
    <select
      className={classNames(`${classPrefix}-select`, className, {
        [`size-${
          size === "full" || size === "auto" ? `${size}-width` : size
        }`]: size,
      })}
      style={style}
      disabled={disabled}
      value={value != null ? value : ""}
      placeholder={placeholder}
      onChange={
        disabled ? null : event => onChange(event.target.value, { event })
      }
    >
      {typeof placeholder === "string" && (
        <option disabled={!!value} hidden>
          {placeholder}
        </option>
      )}
      {options.find(opt => !!opt.groupKey)
        ? groupBy(options).map(group => {
            const { value, groupKey } = group[0];
            Iif (!groupKey) {
              return group.map(opt => (
                <option
                  key={opt.value}
                  value={opt.value}
                  disabled={opt.disabled}
                  title={
                    typeof opt.tooltip === "string" ? opt.tooltip : undefined
                  }
                >
                  {typeof opt.text === "undefined" ? opt.value : opt.text}
                </option>
              ));
            }
            return (
              <optgroup key={value} label={(groups[groupKey] as string) || ""}>
                {group.map(opt => (
                  <option
                    key={opt.value}
                    value={opt.value}
                    disabled={opt.disabled}
                    title={
                      typeof opt.tooltip === "string" ? opt.tooltip : undefined
                    }
                  >
                    {typeof opt.text === "undefined" ? opt.value : opt.text}
                  </option>
                ))}
              </optgroup>
            );
          })
        : options.map(opt => (
            <option
              key={opt.value}
              value={opt.value}
              disabled={opt.disabled}
              title={typeof opt.tooltip === "string" ? opt.tooltip : undefined}
            >
              {typeof opt.text === "undefined" ? opt.value : opt.text}
            </option>
          ))}
    </select>
  );
}