github.com/argoproj/argo-cd@v1.8.7/ui/src/app/shared/components/expandable/expandable.tsx (about)

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