UNPKG

3.77 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent2 } from "../../common";
3import { Props } from "../../common/props";
4export declare type CollapseProps = ICollapseProps;
5/** @deprecated use CollapseProps */
6export interface ICollapseProps extends Props {
7 /** Contents to collapse. */
8 children?: React.ReactNode;
9 /**
10 * Component to render as the root element.
11 * Useful when rendering a `Collapse` inside a `<table>`, for instance.
12 *
13 * @default "div"
14 */
15 component?: React.ElementType;
16 /**
17 * Whether the component is open or closed.
18 *
19 * @default false
20 */
21 isOpen?: boolean;
22 /**
23 * Whether the child components will remain mounted when the `Collapse` is closed.
24 * Setting to true may improve performance by avoiding re-mounting children.
25 *
26 * @default false
27 */
28 keepChildrenMounted?: boolean;
29 /**
30 * The length of time the transition takes, in milliseconds. This must match
31 * the duration of the animation in CSS. Only set this prop if you override
32 * Blueprint's default transitions with new transitions of a different
33 * length.
34 *
35 * @default 200
36 */
37 transitionDuration?: number;
38}
39export interface ICollapseState {
40 /** The state the element is currently in. */
41 animationState: AnimationStates;
42 /** The height that should be used for the content animations. This is a CSS value, not just a number. */
43 height: string | undefined;
44 /**
45 * The most recent non-zero height (once a height has been measured upon first open; it is undefined until then)
46 */
47 heightWhenOpen: number | undefined;
48}
49/**
50 * `Collapse` can be in one of six states, enumerated here.
51 * When changing the `isOpen` prop, the following happens to the states:
52 * isOpen={true} : CLOSED -> OPEN_START -> OPENING -> OPEN
53 * isOpen={false} : OPEN -> CLOSING_START -> CLOSING -> CLOSED
54 */
55export declare enum AnimationStates {
56 /**
57 * The body is re-rendered, height is set to the measured body height and
58 * the body Y is set to 0.
59 */
60 OPEN_START = 0,
61 /**
62 * Animation begins, height is set to auto. This is all animated, and on
63 * complete, the state changes to OPEN.
64 */
65 OPENING = 1,
66 /**
67 * The collapse height is set to auto, and the body Y is set to 0 (so the
68 * element can be seen as normal).
69 */
70 OPEN = 2,
71 /**
72 * Height has been changed from auto to the measured height of the body to
73 * prepare for the closing animation in CLOSING.
74 */
75 CLOSING_START = 3,
76 /**
77 * Height is set to 0 and the body Y is at -height. Both of these properties
78 * are transformed, and then after the animation is complete, the state
79 * changes to CLOSED.
80 */
81 CLOSING = 4,
82 /**
83 * The contents of the collapse is not rendered, the collapse height is 0,
84 * and the body Y is at -height (so that the bottom of the body is at Y=0).
85 */
86 CLOSED = 5
87}
88/**
89 * Collapse component.
90 *
91 * @see https://blueprintjs.com/docs/#core/components/collapse
92 */
93export declare class Collapse extends AbstractPureComponent2<CollapseProps, ICollapseState> {
94 static displayName: string;
95 static defaultProps: Partial<CollapseProps>;
96 static getDerivedStateFromProps(props: CollapseProps, state: ICollapseState): {
97 animationState: AnimationStates;
98 height?: undefined;
99 } | {
100 animationState: AnimationStates;
101 height: string;
102 } | null;
103 state: ICollapseState;
104 private contents;
105 render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
106 componentDidMount(): void;
107 componentDidUpdate(): void;
108 private contentsRefHandler;
109 private onDelayedStateChange;
110}