All files / src/regionselect RegionPanel.tsx

17.65% Statements 3/17
0% Branches 0/4
0% Functions 0/5
17.65% Lines 3/17

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                                                                          2x 2x 2x                                                                                        
import React from "react";
import { isChildOfType } from "../_util/is-child-of-type";
import { useConfig } from "../_util/config-context";
 
export interface RegionPanelProps {
  /**
   * 地域选择面板的内容
   *
   * 可以包含 `RegionPanel.Head` 及 `RegionPanel.Column`
   */
  children?: React.ReactNode;
}
 
/**
 * 地域选择布局面板
 */
export function RegionPanel({ children }: RegionPanelProps) {
  const { classPrefix } = useConfig();
  let allOptionElement = null;
  const otherChildElements = [];
 
  React.Children.forEach(children, child => {
    if (isChildOfType(child, RegionPanelHead)) {
      allOptionElement = child;
    } else {
      otherChildElements.push(child);
    }
  });
 
  return (
    <div className={`${classPrefix}-region`}>
      {allOptionElement}
      <div className={`${classPrefix}-region__list`}>{otherChildElements}</div>
    </div>
  );
}
 
RegionPanel.Head = RegionPanelHead;
RegionPanel.Column = RegionPanelColumn;
RegionPanel.Group = RegionPanelGroup;
 
interface RegionPanelHeadProps {
  /**
   * 地域面板头部,可以用于包含所有地域的选项
   */
  children: React.ReactNode;
}
function RegionPanelHead({ children }: RegionPanelHeadProps) {
  const { classPrefix } = useConfig();
  return <div className={`${classPrefix}-region__title`}>{children}</div>;
}
 
interface RegionPanelColumnProps {
  /**
   * 包含地域分组 `RegionPanel.Group`
   */
  children: React.ReactNode;
}
function RegionPanelColumn({ children }: RegionPanelColumnProps) {
  const { classPrefix } = useConfig();
  return <div className={`${classPrefix}-region__col`}>{children}</div>;
}
 
interface RegionPanelGroupProps {
  /**
   * 地域分组名称,如果 "中国"
   */
  name?: string;
 
  /**
   * 地域分组,应该包含一个或多个地域选项 `RegionOption`
   */
  children?: React.ReactNode;
}
function RegionPanelGroup({ name, children }: RegionPanelGroupProps) {
  const { classPrefix } = useConfig();
  return (
    <div className={`${classPrefix}-region__unit`}>
      {name && <div className={`${classPrefix}-region__type`}>{name}</div>}
      {children}
    </div>
  );
}