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 | 4x 4x 4x 2x | import React from "react"; import classNames from "classnames"; import { CollapsePanel } from "./CollapsePanel"; import { CollapseContext, CollapseContextValue } from "./CollapseContext"; import { useDefault } from "../_util/use-default"; import { StyledProps } from "../_type"; import { useConfig } from "../_util/config-context"; export interface CollapseProps extends StyledProps { /** * 当前激活的面板 ID 组 */ activeIds?: CollapseContextValue["activeIds"]; /** * 默认激活的面板 ID 组 */ defaultActiveIds?: CollapseContextValue["activeIds"]; /** * 面板激活变化回调 */ onActive?: CollapseContextValue["onActive"]; /** * 切换图标 * @docType React.ReactNode | ((active: boolean) => React.ReactNode) */ icon?: CollapseContextValue["icon"]; /** * 图标位置 * @default "left" */ iconPosition?: CollapseContextValue["iconPosition"]; /** * 面板 <Collapse.Panel /> */ children?: React.ReactNode; } export function Collapse({ activeIds, defaultActiveIds = [], onActive, icon, iconPosition = "left", children, className, style, }: CollapseProps) { const { classPrefix } = useConfig(); const [value, onChange] = useDefault(activeIds, defaultActiveIds, onActive); return ( <div className={classNames(`${classPrefix}-accordion-group`, className)} style={style} > <CollapseContext.Provider value={{ activeIds: value, onActive: onChange, icon, iconPosition, }} > {children} </CollapseContext.Provider> </div> ); } Collapse.Panel = CollapsePanel; |