All files / src/regionselect RegionOption.tsx

85.71% Statements 6/7
50% Branches 2/4
100% Functions 1/1
85.71% Lines 6/7

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                                                                                                    2x         2x 2x   2x       2x   2x                              
import React, { useContext } from "react";
import classNames from "classnames";
import { RegionFlag } from "./RegionFlag";
import { useConfig } from "../_util/config-context";
 
export interface RegionOptionProps {
  /**
   * 地域值
   */
  value: string;
 
  /**
   * 地域显示文案
   */
  children?: React.ReactNode;
 
  /**
   * 已废弃
   * @deprecated
   */
  flag?: string;
 
  /**
   * 已废弃
   * @deprecated
   */
  country?: string;
 
  /**
   * 是否被选中
   *
   * **如在 `RegionSelect` 中使用,无需传值**
   */
  selected?: boolean;
 
  /**
   * 是否显示提醒小红点
   * @default false
   */
  dot?: boolean;
 
  /**
   * 被点击时回调
   */
  onClick?: React.MouseEventHandler;
}
 
export interface RegionOptionContext {
  inject(props: RegionOptionProps): RegionOptionProps;
}
export const RegionOptionContext = React.createContext<RegionOptionContext>(
  null
);
 
export function RegionOption(props: RegionOptionProps) {
  const { classPrefix } = useConfig();
  const context = useContext(RegionOptionContext);
 
  Iif (context) {
    props = context.inject(props); // eslint-disable-line no-param-reassign
  }
 
  const { children, dot, selected, onClick } = props;
 
  return (
    <div
      className={classNames(`${classPrefix}-region__item`, {
        "is-selected": selected,
      })}
      onClick={onClick}
    >
      <RegionFlag />
      <span className={`${classPrefix}-region__name`}>
        {children}
        {dot && <i className={`${classPrefix}-region__new`} />}
      </span>
    </div>
  );
}