All files / src/regionselect RegionSelect.tsx

53.85% Statements 7/13
58.33% Branches 7/12
50% Functions 2/4
50% Lines 6/12

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                                                      2x   2x               2x     3x   2x                                                                                       2x  
import React from "react";
import classNames from "classnames";
import { ControlledProps, useDefaultValue } from "../form/controlled";
import { Combine, Omit } from "../_type";
import { DropdownProps, Dropdown, CommonDropdownProps } from "../dropdown";
import { RegionOption, RegionOptionContext } from "./RegionOption";
import { getPropsFromChildrenByType } from "../_util/get-props-from-children-by-type";
import { useConfig } from "../_util/config-context";
 
export interface RegionSelectProps
  extends Combine<
    CommonDropdownProps,
    ControlledProps<string>,
    Omit<DropdownProps, "button" | "children" | "appearance" | "appearence">
  > {
  /**
   * 下拉内容,应该使用 `RegionPanel`
   */
  children?: React.ReactNode;
 
  /**
   * 在下拉按钮显示的额外信息
   */
  moreInfo?: React.ReactNode;
}
 
export function RegionSelect(props: RegionSelectProps) {
  const { classPrefix } = useConfig();
  // eslint-disable-next-line react/destructuring-assignment
  const options = getPropsFromChildrenByType(props.children, RegionOption);
 
  const {
    value,
    onChange,
    moreInfo,
    children,
    ...dropdownProps
  } = useDefaultValue(props, options[0].value);
 
  const selectedOption =
    options.find(x => x && x.value === value) || options[0];
 
  return (
    <Dropdown
      {...dropdownProps}
      appearance="button"
      className={classNames(
        `${classPrefix}-dropdown--region-select`,
        dropdownProps.className
      )}
      button={
        <>
          {selectedOption && <RegionOption {...selectedOption} />}
          {moreInfo && (
            <div className={`${classPrefix}-region__more`}>{moreInfo}</div>
          )}
        </>
      }
    >
      {
        <RegionOptionContext.Provider
          value={{
            inject(props) {
              return {
                ...props,
                selected: value === props.value,
                onClick(event) {
                  if (typeof props.onClick === "function") {
                    props.onClick(event);
                  }
                  if (event.isDefaultPrevented()) {
                    return;
                  }
                  onChange(props.value, { event });
                },
              };
            },
          }}
        >
          {children}
        </RegionOptionContext.Provider>
      }
    </Dropdown>
  );
}
 
RegionSelect.defaultLabelAlign = "middle";