argo-cd

1
import * as classNames from 'classnames';
2
import * as React from 'react';
3

4
require('./expandable.scss');
5

6
export interface Props extends React.Props<any> {
7
    height?: number;
8
}
9

10
export const Expandable = (props: Props) => {
11
    const [expanded, setExpanded] = React.useState(false);
12
    const contentEl = React.useRef(null);
13
    const style: React.CSSProperties = {};
14
    if (!expanded) {
15
        style.maxHeight = props.height || 100;
16
    } else {
17
        style.maxHeight = (contentEl.current && contentEl.current.clientHeight) || 10000;
18
    }
19

20
    return (
21
        <div style={style} className={classNames('expandable', {'expandable--collapsed': !expanded})}>
22
            <div ref={contentEl}>{props.children}</div>
23
            <a onClick={() => setExpanded(!expanded)}>
24
                <i className={classNames('expandable__handle fa', {'fa-chevron-down': !expanded, 'fa-chevron-up': expanded})} />
25
            </a>
26
        </div>
27
    );
28
};
29