CHOMPStation2/tgui/packages/tgui_ch/components/Stack.tsx

/**
 * @file
 * @copyright 2021 Aleksej Komarov
 * @license MIT
 */

import { classes } from 'common/react';
import { RefObject } from 'inferno';
import { Flex, FlexItemProps, FlexProps } from './Flex';

interface StackProps extends FlexProps {
  vertical?: boolean;
  fill?: boolean;
}

export const Stack = (props: StackProps) => {
  const { className, vertical, fill, ...rest } = props;
  return (
    <Flex
      className={classes([
        'Stack',
        fill && 'Stack--fill',
        vertical ? 'Stack--vertical' : 'Stack--horizontal',
        className,
      ])}
      direction={vertical ? 'column' : 'row'}
      {...rest}
    />
  );
};

type StackItemProps = FlexProps & {
  innerRef?: RefObject<HTMLDivElement>;
};

const StackItem = (props: StackItemProps) => {
  const { className, innerRef, ...rest } = props;
  return <Flex.Item className={classes(['Stack__item', className])} ref={innerRef} {...rest} />;
};

Stack.Item = StackItem;

interface StackDividerProps extends FlexItemProps {
  hidden?: boolean;
}

const StackDivider = (props: StackDividerProps) => {
  const { className, hidden, ...rest } = props;
  return (
    <Flex.Item
      className={classes(['Stack__item', 'Stack__divider', hidden && 'Stack__divider--hidden', className])}
      {...rest}
    />
  );
};

Stack.Divider = StackDivider;