-
Notifications
You must be signed in to change notification settings - Fork 14
/
types.ts
81 lines (77 loc) · 2.45 KB
/
types.ts
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
export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
export type Margin = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};
type Padding = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
export type AccordionPropsType = {
/**
* The panel label.
*/
label: string;
/**
* Element or path used as the icon that will be placed next to panel label.
*/
icon?: string | SVG;
/**
* Assistive text to be placed on the right side of the panel.
*/
assistiveText?: string;
/**
* If true, the component will be disabled.
*/
disabled?: boolean;
/**
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
*/
padding?: Space | Padding;
/**
* The expanded panel of the accordion. This area can be used to render
* custom content.
*/
children: React.ReactNode;
};
type Props = {
/**
* Initially active accordion, only when it is uncontrolled.
*/
defaultIndexActive?: number;
/**
* The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
* If null, the component will be controlled and all accordions will be closed.
*/
indexActive?: number;
/**
* If true, the component will be disabled.
*/
disabled?: boolean;
/**
* This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
*/
onActiveChange?: (indexActive: number) => void;
/**
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
*/
margin?: Space | Margin;
/**
* Customized accordion(s) that are allowed inside an Accordion Group.
*/
children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
};
export type AccordionGroupAccordionContextProps = {
activeIndex: number;
handlerActiveChange: (index: number) => void;
disabled: boolean;
index: number;
};
export default Props;