GS13/tgui-next/packages/tgui/components/Collapsible.js

import { Component } from 'inferno';
import { Box } from './Box';
import { Button } from './Button';

export class Collapsible extends Component {
  constructor(props) {
    super(props);
    const { open } = props;
    this.state = {
      open: open || false,
    };
  }

  render() {
    const { props } = this;
    const { open } = this.state;
    const {
      children,
      color = 'default',
      title,
      buttons,
      ...rest
    } = props;
    return (
      <Box mb={1}>
        <div className="Table">
          <div className="Table__cell">
            <Button
              fluid
              color={color}
              icon={open ? 'chevron-down' : 'chevron-right'}
              onClick={() => this.setState({ open: !open })}
              {...rest}>
              {title}
            </Button>
          </div>
          {buttons && (
            <div className="Table__cell Table__cell--collapsing">
              {buttons}
            </div>
          )}
        </div>
        {open && (
          <Box mt={1}>
            {children}
          </Box>
        )}
      </Box>
    );
  }
}