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> ); } |